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,