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

feat(options/appearance): add illustration for vertical/horizontal layout

Browse Source
This commit is contained in:
Elian Doran
2026-04-13 16:36:39 +03:00
parent cd0763e807
commit 692d33bedf
2 changed files with 81 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
apps/client/src/widgets/type_widgets/options/appearance.css
View File

@@ -8,6 +8,29 @@
background: var(--root-background);
overflow: hidden;
> .tab-bar.full-width {
height: 12px;
flex-shrink: 0;
display: flex;
align-items: flex-end;
gap: 2px;
padding: 0 4px;
background: var(--launcher-pane-background-color);
.tab {
width: 24px;
height: 8px;
background: var(--main-background-color);
border-radius: 4px 4px 0 0;
opacity: 0.4;
&.active {
height: 10px;
opacity: 1;
}
}
}
.launcher-bar {
background: var(--launcher-pane-vert-background-color);
display: flex;
@@ -65,8 +88,25 @@
flex-direction: column;
.tab-bar {
height: 10px;
height: 12px;
flex-shrink: 0;
display: flex;
align-items: flex-end;
gap: 2px;
padding: 0 4px;
.tab {
width: 24px;
height: 8px;
background: var(--main-background-color);
border-radius: 4px 4px 0 0;
opacity: 0.4;
&.active {
height: 10px;
opacity: 1;
}
}
}
.note-content {

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

@@ -92,8 +92,7 @@ export default function AppearanceSettings() {
return (
<div>
{!isMobile() && <LayoutSwitcher />}
{!isMobile() && <LayoutOrientation />}
{!isMobile() && <LayoutOptions />}
<ApplicationTheme />
{overrideThemeFonts === "true" && <Fonts />}
{isElectron() && <ElectronIntegration /> }
@@ -114,22 +113,35 @@ export default function AppearanceSettings() {
);
}
function LayoutSwitcher() {
function LayoutOptions() {
const [ newLayout, setNewLayout ] = useTriliumOptionBool("newLayout");
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
return (
<OptionsSection title={t("settings_appearance.ui")}>
<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 name="layout-style" label={t("settings_appearance.ui_layout_style")} stacked>
<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")} stacked>
<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>
);
}
@@ -248,6 +260,13 @@ function OrientationIllustration({ orientation }: { orientation: "vertical" | "h
return (
<div className={`orientation-illustration ${orientation}`}>
{isHorizontal && (
<div className="tab-bar full-width">
<div className="tab active" />
<div className="tab" />
<div className="tab" />
</div>
)}
{isHorizontal && (
<div className="launcher-bar horizontal">
<Icon icon="bx bx-menu" />
@@ -269,7 +288,13 @@ function OrientationIllustration({ orientation }: { orientation: "vertical" | "h
<div className="tree-content" />
</div>
<div className="content-pane">
<div className="tab-bar" />
{!isHorizontal && (
<div className="tab-bar">
<div className="tab active" />
<div className="tab" />
<div className="tab" />
</div>
)}
<div className="note-content" />
</div>
</div>