gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 15:49:00 +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

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

@ -25,23 +25,18 @@ const BUILTIN_THEMES: Theme[] = [
] ]
export default function AppearanceSettings() { export default function AppearanceSettings() {
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
const [ theme, setTheme ] = useTriliumOption("theme", true);
const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");
const [ themes, setThemes ] = useState<Theme[]>([]);
useEffect(() => {
server.get<Theme[]>("options/user-themes").then((userThemes) => {
setThemes([
...BUILTIN_THEMES,
...userThemes
])
});
}, []);
return ( return (
<> <>
<LayoutOrientation />
<ApplicationTheme />
</>
)
}
function LayoutOrientation() {
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
return (
<OptionsSection title={t("theme.layout")}> <OptionsSection title={t("theme.layout")}>
{!isMobile() && <FormRadioGroup {!isMobile() && <FormRadioGroup
name="layout-orientation" name="layout-orientation"
@ -58,7 +53,25 @@ export default function AppearanceSettings() {
currentValue={layoutOrientation} onChange={setLayoutOrientation} currentValue={layoutOrientation} onChange={setLayoutOrientation}
/>} />}
</OptionsSection> </OptionsSection>
);
}
function ApplicationTheme() {
const [ theme, setTheme ] = useTriliumOption("theme", true);
const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");
const [ themes, setThemes ] = useState<Theme[]>([]);
useEffect(() => {
server.get<Theme[]>("options/user-themes").then((userThemes) => {
setThemes([
...BUILTIN_THEMES,
...userThemes
])
});
}, []);
return (
<OptionsSection title={t("theme.title")}> <OptionsSection title={t("theme.title")}>
<Column> <Column>
<label>{t("theme.theme_label")}</label> <label>{t("theme.theme_label")}</label>
@ -72,6 +85,5 @@ export default function AppearanceSettings() {
currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} /> currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
</Column> </Column>
</OptionsSection> </OptionsSection>
</>
) )
} }