gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

refactor(react/settings): use separate components inside same file

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 18:29:08 +03:00
parent 83e1512b59
commit d42a949602
No known key found for this signature in database
1 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@ -24,8 +24,39 @@ const BUILTIN_THEMES: Theme[] = [
{ val: "dark", title: t("theme.dark_theme") } { val: "dark", title: t("theme.dark_theme") }
] ]
export default function AppearanceSettings() { export default function AppearanceSettings() {
return (
<>
<LayoutOrientation />
<ApplicationTheme />
</>
)
}
function LayoutOrientation() {
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true); const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
return (
<OptionsSection title={t("theme.layout")}>
{!isMobile() && <FormRadioGroup
name="layout-orientation"
values={[
{
label: <><strong>{t("theme.layout-vertical-title")}</strong> - {t("theme.layout-vertical-description")}</>,
value: "vertical"
},
{
label: <><strong>{t("theme.layout-horizontal-title")}</strong> - {t("theme.layout-horizontal-description")}</>,
value: "horizontal"
}
]}
currentValue={layoutOrientation} onChange={setLayoutOrientation}
/>}
</OptionsSection>
);
}
function ApplicationTheme() {
const [ theme, setTheme ] = useTriliumOption("theme", true); const [ theme, setTheme ] = useTriliumOption("theme", true);
const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts"); const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");
@ -41,37 +72,18 @@ export default function AppearanceSettings() {
}, []); }, []);
return ( return (
<> <OptionsSection title={t("theme.title")}>
<OptionsSection title={t("theme.layout")}> <Column>
{!isMobile() && <FormRadioGroup <label>{t("theme.theme_label")}</label>
name="layout-orientation" <FormSelect values={themes} currentValue={theme} onChange={setTheme} />
values={[ </Column>
{
label: <><strong>{t("theme.layout-vertical-title")}</strong> - {t("theme.layout-vertical-description")}</>,
value: "vertical"
},
{
label: <><strong>{t("theme.layout-horizontal-title")}</strong> - {t("theme.layout-horizontal-description")}</>,
value: "horizontal"
}
]}
currentValue={layoutOrientation} onChange={setLayoutOrientation}
/>}
</OptionsSection>
<OptionsSection title={t("theme.title")}> <Column className="side-checkbox">
<Column> <FormCheckbox
<label>{t("theme.theme_label")}</label> name="override-theme-fonts"
<FormSelect values={themes} currentValue={theme} onChange={setTheme} /> label={t("theme.override_theme_fonts_label")}
</Column> currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
</Column>
<Column className="side-checkbox"> </OptionsSection>
<FormCheckbox
name="override-theme-fonts"
label={t("theme.override_theme_fonts_label")}
currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
</Column>
</OptionsSection>
</>
) )
} }