Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 02:57:30 +02:00
Code Issues Packages Projects Releases Activity

chore(options/appearance): integrate application theme into first section

Browse Source
This commit is contained in:
Elian Doran
2026-04-13 17:29:32 +03:00
parent 92d011503d
commit b9e8cd5697
2 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/translations/en/translation.json
View File

@@ -1231,8 +1231,8 @@
"edited_notes_message": "Edited Notes ribbon tab will automatically open on day notes"
},
"theme": {
"title": "Application Theme",
"theme_label": "Theme",
"title": "User Interface",
"theme_label": "Application theme",
"override_theme_fonts_label": "Override theme fonts",
"auto_theme": "Legacy (Follow system color scheme)",
"light_theme": "Legacy (Light)",

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

@@ -93,8 +93,7 @@ const FONT_FAMILIES: FontGroup[] = [
export default function AppearanceSettings() {
return (
<div>
{!isMobile() && <LayoutOptions />}
<ApplicationTheme />
<UserInterface />
<Fonts />
{isElectron() && <ElectronIntegration /> }
<Performance />
@@ -114,35 +113,54 @@ export default function AppearanceSettings() {
);
}
function LayoutOptions() {
function UserInterface() {
const [ theme, setTheme ] = useTriliumOption("theme", true);
const [ themes, setThemes ] = useState<Theme[]>([]);
const [ newLayout, setNewLayout ] = useTriliumOptionBool("newLayout");
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
useEffect(() => {
server.get<Theme[]>("options/user-themes").then((userThemes) => {
setThemes([
...BUILTIN_THEMES,
...userThemes
]);
});
}, []);
return (
<OptionsSection title={t("settings_appearance.ui")}>
<OptionsRow name="layout-style" label={t("settings_appearance.ui_layout_style")}>
<RadioWithIllustration
currentValue={newLayout ? "new-layout" : "old-layout"}
onChange={async newValue => {
await setNewLayout(newValue === "new-layout");
reloadFrontendApp();
}}
values={[
{ key: "old-layout", text: t("settings_appearance.ui_old_layout"), illustration: <LayoutIllustration /> },
{ key: "new-layout", text: t("settings_appearance.ui_new_layout"), illustration: <LayoutIllustration isNewLayout /> }
]}
/>
</OptionsRow>
<OptionsRow name="layout-orientation" label={t("settings_appearance.ui_layout_orientation")}>
<RadioWithIllustration
currentValue={layoutOrientation ?? "vertical"}
onChange={setLayoutOrientation}
values={[
{ key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
{ key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
]}
<OptionsSection title={t("theme.title")}>
<OptionsRow name="theme" label={t("theme.theme_label")}>
<FormSelect
values={themes} currentValue={theme} onChange={setTheme}
keyProperty="val" titleProperty="title"
/>
</OptionsRow>
{!isMobile() && <>
<OptionsRow name="layout-style" label={t("settings_appearance.ui_layout_style")}>
<RadioWithIllustration
currentValue={newLayout ? "new-layout" : "old-layout"}
onChange={async newValue => {
await setNewLayout(newValue === "new-layout");
reloadFrontendApp();
}}
values={[
{ key: "old-layout", text: t("settings_appearance.ui_old_layout"), illustration: <LayoutIllustration /> },
{ key: "new-layout", text: t("settings_appearance.ui_new_layout"), illustration: <LayoutIllustration isNewLayout /> }
]}
/>
</OptionsRow>
<OptionsRow name="layout-orientation" label={t("settings_appearance.ui_layout_orientation")}>
<RadioWithIllustration
currentValue={layoutOrientation ?? "vertical"}
onChange={setLayoutOrientation}
values={[
{ key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
{ key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
]}
/>
</OptionsRow>
</>}
</OptionsSection>
);
}
@@ -286,31 +304,6 @@ function OrientationIllustration({ orientation }: { orientation: "vertical" | "h
);
}
function ApplicationTheme() {
const [ theme, setTheme ] = useTriliumOption("theme", true);
const [ themes, setThemes ] = useState<Theme[]>([]);
useEffect(() => {
server.get<Theme[]>("options/user-themes").then((userThemes) => {
setThemes([
...BUILTIN_THEMES,
...userThemes
]);
});
}, []);
return (
<OptionsSection title={t("theme.title")}>
<FormGroup name="theme" label={t("theme.theme_label")} className="col-md-6">
<FormSelect
values={themes} currentValue={theme} onChange={setTheme}
keyProperty="val" titleProperty="title"
/>
</FormGroup>
</OptionsSection>
);
}
function Fonts() {
const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");
const isEnabled = overrideThemeFonts === true;