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

feat(options/text): add visual representation for layout

Browse Source
This commit is contained in:
Elian Doran
2026-04-13 16:32:37 +03:00
parent 93920bdfb4
commit cd0763e807
2 changed files with 119 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,83 @@
.orientation-illustration {
width: 170px;
height: 130px;
border: 1px solid var(--main-border-color);
border-radius: 6px;
display: flex;
flex-direction: column;
background: var(--root-background);
overflow: hidden;
.launcher-bar {
background: var(--launcher-pane-vert-background-color);
display: flex;
align-items: center;
flex-shrink: 0;
.tn-icon {
font-size: 12px;
opacity: 0.5;
}
&.horizontal {
flex-direction: row;
height: 14px;
padding: 0 4px;
gap: 6px;
}
&.vertical {
flex-direction: column;
width: 24px;
padding: 4px 0;
gap: 4px;
}
}
.main-area {
display: flex;
flex-grow: 1;
min-height: 0;
}
.tree-pane {
width: 40px;
flex-shrink: 0;
padding: 8px 4px;
.tree-content {
height: 100%;
background: repeating-linear-gradient(
180deg,
var(--main-text-color) 0px,
var(--main-text-color) 4px,
transparent 4px,
transparent 8px
);
opacity: 0.15;
border-radius: 2px;
}
}
.content-pane {
flex-grow: 1;
display: flex;
flex-direction: column;
.tab-bar {
height: 10px;
flex-shrink: 0;
}
.note-content {
flex-grow: 1;
background: var(--main-background-color);
border-top-left-radius: 6px;
margin: 0;
}
}
}
.old-layout-illustration {
width: 170px;
height: 130px;

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

@@ -12,7 +12,6 @@ import Button from "../../react/Button";
import Column from "../../react/Column";
import FormCheckbox from "../../react/FormCheckbox";
import FormGroup from "../../react/FormGroup";
import FormRadioGroup from "../../react/FormRadioGroup";
import FormSelect, { FormSelectWithGroups } from "../../react/FormSelect";
import FormText from "../../react/FormText";
import { FormTextBoxWithUnit } from "../../react/FormTextBox";
@@ -232,26 +231,52 @@ function LayoutOrientation() {
return (
<OptionsSection title={t("theme.layout")}>
<FormRadioGroup
name="layout-orientation"
<RadioWithIllustration
currentValue={layoutOrientation ?? "vertical"}
onChange={setLayoutOrientation}
values={[
{
label: t("theme.layout-vertical-title"),
inlineDescription: t("theme.layout-vertical-description"),
value: "vertical"
},
{
label: t("theme.layout-horizontal-title"),
inlineDescription: t("theme.layout-horizontal-description"),
value: "horizontal"
}
{ key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
{ key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
]}
currentValue={layoutOrientation} onChange={setLayoutOrientation}
/>
</OptionsSection>
);
}
function OrientationIllustration({ orientation }: { orientation: "vertical" | "horizontal" }) {
const isHorizontal = orientation === "horizontal";
return (
<div className={`orientation-illustration ${orientation}`}>
{isHorizontal && (
<div className="launcher-bar horizontal">
<Icon icon="bx bx-menu" />
<Icon icon="bx bx-send" />
<Icon icon="bx bx-file-blank" />
<Icon icon="bx bx-search" />
</div>
)}
<div className="main-area">
{!isHorizontal && (
<div className="launcher-bar vertical">
<Icon icon="bx bx-menu" />
<Icon icon="bx bx-send" />
<Icon icon="bx bx-file-blank" />
<Icon icon="bx bx-search" />
</div>
)}
<div className="tree-pane">
<div className="tree-content" />
</div>
<div className="content-pane">
<div className="tab-bar" />
<div className="note-content" />
</div>
</div>
</div>
);
}
function ApplicationTheme() {
const [ theme, setTheme ] = useTriliumOption("theme", true);
const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");