From 948a6f84d63f2ded785a8f544db06e539c99167e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 17 Dec 2025 12:37:12 +0200 Subject: [PATCH] feat(options/appearance): add basic illustration for old layout --- .../type_widgets/options/appearance.css | 91 ++++++++++++++ .../type_widgets/options/appearance.tsx | 112 ++++++++++++++---- .../components/RadioWithIllustration.css | 8 ++ .../components/RadioWithIllustration.tsx | 28 +++++ apps/server/src/routes/api/options.ts | 16 +-- apps/server/src/services/options_init.ts | 14 ++- packages/commons/src/lib/options_interface.ts | 1 + 7 files changed, 237 insertions(+), 33 deletions(-) create mode 100644 apps/client/src/widgets/type_widgets/options/appearance.css create mode 100644 apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.css create mode 100644 apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css new file mode 100644 index 000000000..4cfaa3450 --- /dev/null +++ b/apps/client/src/widgets/type_widgets/options/appearance.css @@ -0,0 +1,91 @@ +.old-layout-illustration { + width: 170px; + height: 130px; + border: 1px solid var(--main-border-color); + border-radius: 6px; + display: flex; + background: var(--root-background); + overflow: hidden; + + .launcher-pane { + width: 10%; + background: var(--launcher-pane-vert-background-color); + display: flex; + flex-direction: column; + align-items: center; + padding: 1px 0; + + svg { + margin-top: 1px; + margin-bottom: 5px; + } + + .bx { + margin: 4px 0; + font-size: 12px; + opacity: 0.5; + } + } + + .tree { + width: 20%; + font-size: 4px; + padding: 12px 5px; + overflow: hidden; + flex-shrink: 0; + + ul { + list-style-type: none; + margin: 0; + padding: 0; + } + } + + .main { + display: flex; + flex-direction: column; + flex-grow: 1; + + .tab-bar { + height: 20px; + } + + .content { + background-color: var(--main-background-color); + flex-grow: 1; + border-top-left-radius: 6px; + padding: 5px; + + .title-bar { + display: flex; + align-items: center; + font-size: 14px; + + .title { + flex-grow: 1; + } + } + + .ribbon { + .bx { + font-size: 10px; + } + + .ribbon-header { + display: flex; + } + + .ribbon-body { + height: 20px; + background-color: rgba(0, 0, 0, 0.05); + border-radius: 6px; + margin: 1px 0; + } + } + + .content-inner { + font-size: 6px; + } + } + } +} diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index 809d05e9e..fe6c54746 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -1,18 +1,23 @@ +import "./appearance.css"; + +import { FontFamily, OptionNames } from "@triliumnext/commons"; import { useEffect, useState } from "preact/hooks"; + import { t } from "../../../services/i18n"; -import { isElectron, isMobile, reloadFrontendApp, restartDesktopApp } from "../../../services/utils"; -import Column from "../../react/Column"; -import FormRadioGroup from "../../react/FormRadioGroup"; -import FormSelect, { FormSelectWithGroups } from "../../react/FormSelect"; -import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks"; -import OptionsSection from "./components/OptionsSection"; import server from "../../../services/server"; +import { isElectron, isMobile, reloadFrontendApp, restartDesktopApp } from "../../../services/utils"; +import Button from "../../react/Button"; +import Column from "../../react/Column"; import FormCheckbox from "../../react/FormCheckbox"; import FormGroup from "../../react/FormGroup"; -import { FontFamily, OptionNames } from "@triliumnext/commons"; -import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox"; +import FormRadioGroup from "../../react/FormRadioGroup"; +import FormSelect, { FormSelectWithGroups } from "../../react/FormSelect"; import FormText from "../../react/FormText"; -import Button from "../../react/Button"; +import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox"; +import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks"; +import Icon from "../../react/Icon"; +import OptionsSection from "./components/OptionsSection"; +import RadioWithIllustration from "./components/RadioWithIllustration"; import RelatedSettings from "./components/RelatedSettings"; const MIN_CONTENT_WIDTH = 640; @@ -30,7 +35,7 @@ const BUILTIN_THEMES: Theme[] = [ { val: "auto", title: t("theme.auto_theme") }, { val: "light", title: t("theme.light_theme") }, { val: "dark", title: t("theme.dark_theme") } -] +]; interface FontFamilyEntry { value: FontFamily; @@ -84,6 +89,7 @@ export default function AppearanceSettings() { return (
+ {!isMobile() && } {!isMobile() && } {overrideThemeFonts === "true" && } @@ -102,7 +108,73 @@ export default function AppearanceSettings() { } ]} />
- ) + ); +} + +function LayoutSwitcher() { + return ( + + }, + { key: "new-layout", text: "New layout", illustration: } + ]} + /> + + ); +} + +function LayoutIllustration({ isNewLayout }: { isNewLayout: boolean }) { + return ( +
+
+ + + + +
+ +
+
    +
  • Options
    • +
      +
    • Appearance
      • +
    • Shortcuts
      • +
    • Text Notes
      • +
    • Code Notes
      • +
    • Images
      • +
    +
+
+ +
+
+ +
+
+ + Title + +
+ + {!isNewLayout &&
+
+ + + + +
+ +
+
} + +
+ This is a "demo" document packaged with Trilium to showcase some of its features and also give you some ideas on how you might structure your notes. You can play with it, and modify the note content and tree structure as you wish. +
+
+
+
+ ); } function LayoutOrientation() { @@ -141,7 +213,7 @@ function ApplicationTheme() { setThemes([ ...BUILTIN_THEMES, ...userThemes - ]) + ]); }); }, []); @@ -162,7 +234,7 @@ function ApplicationTheme() {
- ) + ); } function Fonts() { @@ -245,7 +317,7 @@ function ElectronIntegration() {