From 03681d23c551cedeb37a5c5cee9ac891e5655f1c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 22 Aug 2025 20:32:08 +0300 Subject: [PATCH 01/19] client/settings/disable motion: add an option to allow transitions and animations to be disabled --- .../widgets/type_widgets/options/appearance.tsx | 15 +++++++++++++++ apps/server/src/assets/views/desktop.ejs | 2 +- apps/server/src/routes/api/options.ts | 1 + apps/server/src/routes/index.ts | 1 + apps/server/src/services/options_init.ts | 1 + packages/commons/src/lib/options_interface.ts | 1 + 6 files changed, 20 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index 2b43d9e82..5c19fcea8 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -88,6 +88,7 @@ export default function AppearanceSettings() { {overrideThemeFonts === "true" && } {isElectron() && } + + + + + +} + + function MaxContentWidth() { const [ maxContentWidth, setMaxContentWidth ] = useTriliumOption("maxContentWidth"); diff --git a/apps/server/src/assets/views/desktop.ejs b/apps/server/src/assets/views/desktop.ejs index 9934eacee..1eb85cba9 100644 --- a/apps/server/src/assets/views/desktop.ejs +++ b/apps/server/src/assets/views/desktop.ejs @@ -9,7 +9,7 @@ Trilium Notes - + + + From 3e3cc8c54115f0a24deacc5b581c06a4cc305374 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 00:19:26 +0300 Subject: [PATCH 07/19] client/settings/disable motion: refactor --- .../src/widgets/containers/root_container.ts | 19 +++++++++++++++++-- .../type_widgets/options/appearance.tsx | 2 +- apps/server/src/assets/views/desktop.ejs | 9 +-------- apps/server/src/routes/index.ts | 1 - 4 files changed, 19 insertions(+), 12 deletions(-) diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts index c941cdd88..ef2491b64 100644 --- a/apps/client/src/widgets/containers/root_container.ts +++ b/apps/client/src/widgets/containers/root_container.ts @@ -1,6 +1,8 @@ -import utils from "../../services/utils.js"; -import type BasicWidget from "../basic_widget.js"; +import { EventData } from "../../components/app_context.js"; import FlexContainer from "./flex_container.js"; +import options from "../../services/options.js"; +import type BasicWidget from "../basic_widget.js"; +import utils from "../../services/utils.js"; /** * The root container is the top-most widget/container, from which the entire layout derives. @@ -20,6 +22,7 @@ export default class RootContainer extends FlexContainer { this.id("root-widget"); this.css("height", "100dvh"); this.originalViewportHeight = getViewportHeight(); + } render(): JQuery { @@ -27,15 +30,27 @@ export default class RootContainer extends FlexContainer { window.visualViewport?.addEventListener("resize", () => this.#onMobileResize()); } + this.#setMotion(options.is("motionEnabled")); + return super.render(); } + entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { + if (loadResults.isOptionReloaded("motionEnabled")) { + this.#setMotion(options.is("motionEnabled")); + } + } + #onMobileResize() { const currentViewportHeight = getViewportHeight(); const isKeyboardOpened = (currentViewportHeight < this.originalViewportHeight); this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened); } + #setMotion(enabled: boolean) { + document.body.classList.toggle("motion-disabled", !enabled); + jQuery.fx.off = !enabled; + } } function getViewportHeight() { diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index b54c8acc8..de22a9b1b 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -247,7 +247,7 @@ function ElectronIntegration() { } function Performance() { - const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled", true); + const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled"); return diff --git a/apps/server/src/assets/views/desktop.ejs b/apps/server/src/assets/views/desktop.ejs index 1158612be..374ed0b8c 100644 --- a/apps/server/src/assets/views/desktop.ejs +++ b/apps/server/src/assets/views/desktop.ejs @@ -9,7 +9,7 @@ Trilium Notes - + - - diff --git a/apps/server/src/routes/index.ts b/apps/server/src/routes/index.ts index 9fb682c14..79a40f186 100644 --- a/apps/server/src/routes/index.ts +++ b/apps/server/src/routes/index.ts @@ -53,7 +53,6 @@ function index(req: Request, res: Response) { isDev, isMainWindow: view === "mobile" ? true : !req.query.extraWindow, isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(), - motionEnabled: options.motionEnabled === "true", maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)), triliumVersion: packageJson.version, assetPath: assetPath, From 0a9c0234e23fef3b8c63669a7450ee2b84eb5d2b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 00:38:06 +0300 Subject: [PATCH 08/19] client/settings/disable motion: update translation --- apps/client/src/translations/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 10fbc79aa..4537d09f6 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -1115,7 +1115,7 @@ }, "ui-performance": { "title": "Performance", - "enable-motion": "Use transitions and animations" + "enable-motion": "Enable transitions and animations" }, "ai_llm": { "not_started": "Not started", From 85dd99a3c467ffce150e3e21aa0720a5fce7cd0b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 00:43:49 +0300 Subject: [PATCH 09/19] client/settings/disable shadows: add an option to enable or disable shadows --- apps/server/src/routes/api/options.ts | 1 + apps/server/src/services/options_init.ts | 2 ++ packages/commons/src/lib/options_interface.ts | 1 + 3 files changed, 4 insertions(+) diff --git a/apps/server/src/routes/api/options.ts b/apps/server/src/routes/api/options.ts index 90bac90d3..7e53f1ab3 100644 --- a/apps/server/src/routes/api/options.ts +++ b/apps/server/src/routes/api/options.ts @@ -64,6 +64,7 @@ const ALLOWED_OPTIONS = new Set([ "weeklyBackupEnabled", "monthlyBackupEnabled", "motionEnabled", + "shadowsEnabled", "maxContentWidth", "compressImages", "downloadImagesAutomatically", diff --git a/apps/server/src/services/options_init.ts b/apps/server/src/services/options_init.ts index 4d0939310..c5e809789 100644 --- a/apps/server/src/services/options_init.ts +++ b/apps/server/src/services/options_init.ts @@ -153,6 +153,8 @@ const defaultOptions: DefaultOption[] = [ isSynced: false }, { name: "motionEnabled", value: "true", isSynced: false }, + { name: "shadowsEnabled", value: "true", isSynced: false }, + // Internationalization { name: "locale", value: "en", isSynced: true }, diff --git a/packages/commons/src/lib/options_interface.ts b/packages/commons/src/lib/options_interface.ts index ad4269fe8..781005722 100644 --- a/packages/commons/src/lib/options_interface.ts +++ b/packages/commons/src/lib/options_interface.ts @@ -94,6 +94,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions Date: Sat, 23 Aug 2025 00:49:35 +0300 Subject: [PATCH 10/19] client/settings/disable shadows: add the corresponding checkbox in the Appearance settings page --- apps/client/src/translations/en/translation.json | 3 ++- .../widgets/type_widgets/options/appearance.tsx | 16 ++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 4537d09f6..986ea78de 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -1115,7 +1115,8 @@ }, "ui-performance": { "title": "Performance", - "enable-motion": "Enable transitions and animations" + "enable-motion": "Enable transitions and animations", + "enable-shadows": "Enable shadows" }, "ai_llm": { "not_started": "Not started", diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index de22a9b1b..ce9dce3d4 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -248,13 +248,21 @@ function ElectronIntegration() { function Performance() { const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled"); + const [ shadowsEnabled, setShadowsEnabled ] = useTriliumOptionBool("shadowsEnabled"); + return - + + + + } From 7468d6147a56de1430d00fb4665e2ba3554df548 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 00:55:46 +0300 Subject: [PATCH 11/19] client/settings/disable shadows: react to the option change --- apps/client/src/widgets/containers/root_container.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts index ef2491b64..7bff4e369 100644 --- a/apps/client/src/widgets/containers/root_container.ts +++ b/apps/client/src/widgets/containers/root_container.ts @@ -31,6 +31,7 @@ export default class RootContainer extends FlexContainer { } this.#setMotion(options.is("motionEnabled")); + this.#setShadows(options.is("shadowsEnabled")); return super.render(); } @@ -39,6 +40,10 @@ export default class RootContainer extends FlexContainer { if (loadResults.isOptionReloaded("motionEnabled")) { this.#setMotion(options.is("motionEnabled")); } + + if (loadResults.isOptionReloaded("shadowsEnabled")) { + this.#setShadows(options.is("shadowsEnabled")); + } } #onMobileResize() { @@ -51,6 +56,10 @@ export default class RootContainer extends FlexContainer { document.body.classList.toggle("motion-disabled", !enabled); jQuery.fx.off = !enabled; } + + #setShadows(enabled: boolean) { + document.body.classList.toggle("shadows-disabled", !enabled); + } } function getViewportHeight() { From d35dbca18b6ff6c1b14b2da7a0a83b30740a51ba Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 00:58:50 +0300 Subject: [PATCH 12/19] client/settings/disable shadows: add the CSS implementation --- apps/client/src/stylesheets/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 9c15cfc60..cb6ddf099 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -36,6 +36,13 @@ body#trilium-app.motion-disabled *::after { animation: none !important; } +body#trilium-app.shadows-disabled *, +body#trilium-app.shadows-disabled *::before, +body#trilium-app.shadows-disabled *::after { + /* Disable shadows */ + box-shadow: none !important; +} + .table { --bs-table-bg: transparent !important; } From 94ddad3c49467f26999becd591b314e8fb83ec94 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 01:15:00 +0300 Subject: [PATCH 13/19] client/settings/disable backdrop effects: add an option to enable or disable backdrop effects --- apps/server/src/routes/api/options.ts | 1 + apps/server/src/services/options_init.ts | 1 + packages/commons/src/lib/options_interface.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/apps/server/src/routes/api/options.ts b/apps/server/src/routes/api/options.ts index 7e53f1ab3..290dd5743 100644 --- a/apps/server/src/routes/api/options.ts +++ b/apps/server/src/routes/api/options.ts @@ -65,6 +65,7 @@ const ALLOWED_OPTIONS = new Set([ "monthlyBackupEnabled", "motionEnabled", "shadowsEnabled", + "backdropEffectsEnabled", "maxContentWidth", "compressImages", "downloadImagesAutomatically", diff --git a/apps/server/src/services/options_init.ts b/apps/server/src/services/options_init.ts index c5e809789..e2c0a7389 100644 --- a/apps/server/src/services/options_init.ts +++ b/apps/server/src/services/options_init.ts @@ -154,6 +154,7 @@ const defaultOptions: DefaultOption[] = [ }, { name: "motionEnabled", value: "true", isSynced: false }, { name: "shadowsEnabled", value: "true", isSynced: false }, + { name: "backdropEffectsEnabled", value: "true", isSynced: false }, // Internationalization diff --git a/packages/commons/src/lib/options_interface.ts b/packages/commons/src/lib/options_interface.ts index 781005722..ae63d0250 100644 --- a/packages/commons/src/lib/options_interface.ts +++ b/packages/commons/src/lib/options_interface.ts @@ -95,6 +95,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions Date: Sat, 23 Aug 2025 01:20:54 +0300 Subject: [PATCH 14/19] client/settings/disable backdrop effects: add the corresponding checkbox in the Appearance settings page --- apps/client/src/translations/en/translation.json | 3 ++- .../client/src/widgets/type_widgets/options/appearance.tsx | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 986ea78de..6a7a966c9 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -1116,7 +1116,8 @@ "ui-performance": { "title": "Performance", "enable-motion": "Enable transitions and animations", - "enable-shadows": "Enable shadows" + "enable-shadows": "Enable shadows", + "enable-backdrop-effects": "Enable background effects for menus, popups and panels" }, "ai_llm": { "not_started": "Not started", diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index ce9dce3d4..ba36a75d6 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -249,6 +249,7 @@ function ElectronIntegration() { function Performance() { const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled"); const [ shadowsEnabled, setShadowsEnabled ] = useTriliumOptionBool("shadowsEnabled"); + const [ backdropEffectsEnabled, setBackdropEffectsEnabled ] = useTriliumOptionBool("backdropEffectsEnabled"); return @@ -264,6 +265,12 @@ function Performance() { currentValue={shadowsEnabled} onChange={setShadowsEnabled} /> + + + } From 8cca6637f7a3ea6685bcfc70493c55ba49fd26a3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 01:23:20 +0300 Subject: [PATCH 15/19] client/settings/disable backdrop effects: react to the option change --- apps/client/src/widgets/containers/root_container.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts index 7bff4e369..f29ce2940 100644 --- a/apps/client/src/widgets/containers/root_container.ts +++ b/apps/client/src/widgets/containers/root_container.ts @@ -32,6 +32,7 @@ export default class RootContainer extends FlexContainer { this.#setMotion(options.is("motionEnabled")); this.#setShadows(options.is("shadowsEnabled")); + this.#setBackdropEffects(options.is("backdropEffectsEnabled")); return super.render(); } @@ -44,6 +45,10 @@ export default class RootContainer extends FlexContainer { if (loadResults.isOptionReloaded("shadowsEnabled")) { this.#setShadows(options.is("shadowsEnabled")); } + + if (loadResults.isOptionReloaded("backdropEffectsEnabled")) { + this.#setBackdropEffects(options.is("backdropEffectsEnabled")); + } } #onMobileResize() { @@ -60,6 +65,10 @@ export default class RootContainer extends FlexContainer { #setShadows(enabled: boolean) { document.body.classList.toggle("shadows-disabled", !enabled); } + + #setBackdropEffects(enabled: boolean) { + document.body.classList.toggle("backdrop-effects-disabled", !enabled); + } } function getViewportHeight() { From 2e11681b5290c50656da9b4872e7f07960383f59 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 01:26:21 +0300 Subject: [PATCH 16/19] client/settings/disable backdrop effects: add the CSS implementation --- apps/client/src/stylesheets/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index cb6ddf099..46ad3559d 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -43,6 +43,13 @@ body#trilium-app.shadows-disabled *::after { box-shadow: none !important; } +body#trilium-app.backdrop-effects-disabled *, +body#trilium-app.backdrop-effects-disabled *::before, +body#trilium-app.backdrop-effects-disabled *::after { + /* Disable backdrop effects */ + backdrop-filter: none !important; +} + .table { --bs-table-bg: transparent !important; } From 9aab606debfb538300ce16ae4688d333283a9504 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 02:15:06 +0300 Subject: [PATCH 17/19] style: improve the support of disabled backdrop effects --- apps/client/src/stylesheets/theme-next-dark.css | 1 + apps/client/src/stylesheets/theme-next-light.css | 1 + apps/client/src/stylesheets/theme-next/base.css | 6 ++++++ 3 files changed, 8 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index b27627bd1..b32e29f2b 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -89,6 +89,7 @@ --menu-text-color: #e3e3e3; --menu-background-color: #222222d9; + --menu-background-color-no-backdrop: #1b1b1b; --menu-item-icon-color: #8c8c8c; --menu-item-disabled-opacity: 0.5; --menu-item-keyboard-shortcut-color: #ffffff8f; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index ff82e99ba..deb9fb2ec 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -83,6 +83,7 @@ --menu-text-color: #272727; --menu-background-color: #ffffffd9; + --menu-background-color-no-backdrop: #fdfdfd; --menu-item-icon-color: #727272; --menu-item-disabled-opacity: 0.6; --menu-item-keyboard-shortcut-color: #666666a8; diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index c992f7ecb..27fbf3557 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -83,6 +83,12 @@ --tab-note-icons: true; } +body.backdrop-effects-disabled { + /* Backdrop effects are disabled, replace the menu background color with the + * no-backdrop fallback color */ + --menu-background-color: var(--menu-background-color-no-backdrop); +} + /* * MENUS * From f7f98aa9a34c211b001d17f94329c7234cb06a11 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 23 Aug 2025 03:10:51 +0300 Subject: [PATCH 18/19] client/settings/ui-performance-settings: improve code formatting --- apps/client/src/widgets/containers/root_container.ts | 1 - apps/client/src/widgets/type_widgets/options/appearance.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts index f29ce2940..6c2d87521 100644 --- a/apps/client/src/widgets/containers/root_container.ts +++ b/apps/client/src/widgets/containers/root_container.ts @@ -22,7 +22,6 @@ export default class RootContainer extends FlexContainer { this.id("root-widget"); this.css("height", "100dvh"); this.originalViewportHeight = getViewportHeight(); - } render(): JQuery { diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index ba36a75d6..9ac51b613 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -251,7 +251,6 @@ function Performance() { const [ shadowsEnabled, setShadowsEnabled ] = useTriliumOptionBool("shadowsEnabled"); const [ backdropEffectsEnabled, setBackdropEffectsEnabled ] = useTriliumOptionBool("backdropEffectsEnabled"); - return Date: Sat, 23 Aug 2025 03:22:59 +0300 Subject: [PATCH 19/19] client/settings/ui-performance-settings: remove form groups --- .../type_widgets/options/appearance.tsx | 32 ++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index 9ac51b613..a6f5a77c6 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -252,24 +252,20 @@ function Performance() { const [ backdropEffectsEnabled, setBackdropEffectsEnabled ] = useTriliumOptionBool("backdropEffectsEnabled"); return - - - - - - - - - + + + + + }