From 568a84f5d2d2737fd669d6e5e87284e3dde94f05 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 13:45:40 +0200 Subject: [PATCH 01/13] feat(global-menu): add option to toggle zen mode --- src/public/app/widgets/buttons/global_menu.ts | 8 ++++++-- src/public/translations/en/translation.json | 3 ++- src/public/translations/ro/translation.json | 3 ++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/public/app/widgets/buttons/global_menu.ts b/src/public/app/widgets/buttons/global_menu.ts index c7be1f964..7348a3e9c 100644 --- a/src/public/app/widgets/buttons/global_menu.ts +++ b/src/public/app/widgets/buttons/global_menu.ts @@ -133,7 +133,12 @@ const TPL = ` ${t("title_bar_buttons.window-on-top")} -
+
  • + + ${t("global_menu.toggle-zen-mode")} +
    • + +
  • @@ -355,7 +360,6 @@ export default class GlobalMenuWidget extends BasicWidget { if (!utils.isElectron()) { this.$widget.find(".zoom-container").hide(); - this.$widget.find(".zoom-container-separator").hide(); } this.$zoomState = this.$widget.find(".zoom-state"); diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json index 8825780fa..392ea89ae 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -642,7 +642,8 @@ "show_help": "Show Help", "about": "About TriliumNext Notes", "logout": "Logout", - "show-cheatsheet": "Show Cheatsheet" + "show-cheatsheet": "Show Cheatsheet", + "toggle-zen-mode": "Zen Mode" }, "sync_status": { "unknown": "

    Sync status will be known once the next sync attempt starts.

    Click to trigger sync now.

    ", diff --git a/src/public/translations/ro/translation.json b/src/public/translations/ro/translation.json index a7515c183..f751350a1 100644 --- a/src/public/translations/ro/translation.json +++ b/src/public/translations/ro/translation.json @@ -592,7 +592,8 @@ "zoom": "Zoom", "zoom_in": "Mărește", "zoom_out": "Micșorează", - "show-cheatsheet": "Afișează ghidul rapid" + "show-cheatsheet": "Afișează ghidul rapid", + "toggle-zen-mode": "Mod zen" }, "heading_style": { "markdown": "Stil Markdown", From 5c81627112f424f08c99bc0db5b658426db94bd6 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 13:55:04 +0200 Subject: [PATCH 02/13] feat(zen): toggle body class for zen --- src/public/app/components/app_context.ts | 2 ++ src/public/app/components/root_command_executor.ts | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts index 63e3144c2..d6c7b8cc1 100644 --- a/src/public/app/components/app_context.ts +++ b/src/public/app/components/app_context.ts @@ -223,6 +223,8 @@ export type CommandMappings = { // Geomap deleteFromMap: { noteId: string }, openGeoLocation: { noteId: string, event: JQuery.MouseDownEvent } + + toggleZenMode: CommandData; }; type EventMappings = { diff --git a/src/public/app/components/root_command_executor.ts b/src/public/app/components/root_command_executor.ts index d93143a5f..5f15ebe52 100644 --- a/src/public/app/components/root_command_executor.ts +++ b/src/public/app/components/root_command_executor.ts @@ -178,6 +178,10 @@ export default class RootCommandExecutor extends Component { for (const window of windows) window[action](); } + toggleZenModeCommand() { + $("body").toggleClass("zen"); + } + firstTabCommand() { this.#goToTab(1); } From f93eef28f34a03d01f6adf04d63b70fa0e82a860 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 14:11:22 +0200 Subject: [PATCH 03/13] feat(zen): hide most UI elements --- src/public/stylesheets/style.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 27370f29b..a6fea749e 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1644,3 +1644,24 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container { box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity)); border-radius: 4px; } + +body.zen .gutter, +body.zen #launcher-container, +body.zen #left-pane, +body.zen #right-pane, +body.zen .tab-row-container, +body.zen .ribbon-container, +body.zen .note-icon-widget, +body.zen .title-row .button-widget { + display: none !important; +} + +body.zen #launcher-pane { + position: absolute !important; + top: 0 !important; + right: 0 !important; + width: 64px !important; + height: 64px !important; + background: transparent !important; + border: 0 !important; +} \ No newline at end of file From 5b5fd77ca8209913af3c00516521e77ba9470d0e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 14:14:13 +0200 Subject: [PATCH 04/13] feat(global_menu): indicate state of zen mode --- src/public/app/widgets/buttons/global_menu.ts | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/public/app/widgets/buttons/global_menu.ts b/src/public/app/widgets/buttons/global_menu.ts index 7348a3e9c..9d04c8e56 100644 --- a/src/public/app/widgets/buttons/global_menu.ts +++ b/src/public/app/widgets/buttons/global_menu.ts @@ -133,7 +133,7 @@ const TPL = ` ${t("title_bar_buttons.window-on-top")}
    • -
  • +
  • ${t("global_menu.toggle-zen-mode")}
    • @@ -256,6 +256,7 @@ export default class GlobalMenuWidget extends BasicWidget { private $updateToLatestVersionButton!: JQuery; private $zoomState!: JQuery; + private $toggleZenMode!: JQuery; constructor(isHorizontalLayout: boolean) { super(); @@ -363,13 +364,8 @@ export default class GlobalMenuWidget extends BasicWidget { } this.$zoomState = this.$widget.find(".zoom-state"); - this.$widget.on("show.bs.dropdown", () => { - this.updateZoomState(); - if (this.tooltip) { - this.tooltip.hide(); - this.tooltip.disable(); - } - }); + this.$toggleZenMode = this.$widget.find('[data-trigger-command="toggleZenMode"'); + this.$widget.on("show.bs.dropdown", () => this.#onShown()); if (this.tooltip) { this.$widget.on("hide.bs.dropdown", () => this.tooltip.enable()); } @@ -385,6 +381,15 @@ export default class GlobalMenuWidget extends BasicWidget { setInterval(() => this.updateVersionStatus(), 8 * 60 * 60 * 1000); } + #onShown() { + this.$toggleZenMode.toggleClass("active", $("body").hasClass("zen")); + this.updateZoomState(); + if (this.tooltip) { + this.tooltip.hide(); + this.tooltip.disable(); + } + } + updateZoomState() { if (!utils.isElectron()) { return; From e8f0af89544591f1adc6561199c154af44cedb84 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 17:39:03 +0200 Subject: [PATCH 05/13] feat(zen): hide some more buttons --- src/public/stylesheets/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index a6fea749e..9301d116c 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1645,14 +1645,21 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container { border-radius: 4px; } +body.zen { + --tab-bar-height: 0; +} + body.zen .gutter, body.zen #launcher-container, +body.zen #launcher-pane > :not(.global-menu), body.zen #left-pane, body.zen #right-pane, body.zen .tab-row-container, +body.zen .tab-row-widget, body.zen .ribbon-container, body.zen .note-icon-widget, -body.zen .title-row .button-widget { +body.zen .title-row .button-widget, +body.zen .floating-buttons { display: none !important; } From 2c80607bfd27aa0b81ff74dadfbb19eebf14375a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 18:18:28 +0200 Subject: [PATCH 06/13] feat(zen): use dedicated floating button to stop zen mode --- src/public/app/components/app_context.ts | 1 + .../app/components/root_command_executor.ts | 5 ++- src/public/app/layouts/desktop_layout.js | 4 +- src/public/app/widgets/close_zen_button.ts | 43 +++++++++++++++++++ src/public/stylesheets/style.css | 2 +- 5 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 src/public/app/widgets/close_zen_button.ts diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts index d6c7b8cc1..f54fd88fa 100644 --- a/src/public/app/components/app_context.ts +++ b/src/public/app/components/app_context.ts @@ -327,6 +327,7 @@ type EventMappings = { }; scrollToEnd: { ntxId: string }; noteTypeMimeChanged: { noteId: string }; + zenModeChanged: { isEnabled: boolean }; }; export type EventListener = { diff --git a/src/public/app/components/root_command_executor.ts b/src/public/app/components/root_command_executor.ts index 5f15ebe52..eb46e3139 100644 --- a/src/public/app/components/root_command_executor.ts +++ b/src/public/app/components/root_command_executor.ts @@ -179,7 +179,10 @@ export default class RootCommandExecutor extends Component { } toggleZenModeCommand() { - $("body").toggleClass("zen"); + const $body = $("body"); + $body.toggleClass("zen"); + const isEnabled = $body.hasClass("zen"); + appContext.triggerEvent("zenModeChanged", { isEnabled }); } firstTabCommand() { diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index e0f695803..1ece1c156 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -87,6 +87,7 @@ import options from "../services/options.js"; import utils from "../services/utils.js"; import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js"; import ContextualHelpButton from "../widgets/floating_buttons/help_button.js"; +import CloseZenButton from "../widgets/close_zen_button.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -262,7 +263,8 @@ export default class DesktopLayout { .child(new DeleteNotesDialog()) .child(new InfoDialog()) .child(new ConfirmDialog()) - .child(new PromptDialog()); + .child(new PromptDialog()) + .child(new CloseZenButton()) } #buildLauncherPane(isHorizontal) { diff --git a/src/public/app/widgets/close_zen_button.ts b/src/public/app/widgets/close_zen_button.ts new file mode 100644 index 000000000..035104ebe --- /dev/null +++ b/src/public/app/widgets/close_zen_button.ts @@ -0,0 +1,43 @@ +import BasicWidget from "./basic_widget.js"; + +const TPL = `\ +
    + + + +
    +`; + +export default class CloseZenButton extends BasicWidget { + + doRender(): void { + this.$widget = $(TPL); + } + + zenChangedEvent() { + this.toggleInt(true); + } + +} diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 9301d116c..3e5d78899 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1651,7 +1651,7 @@ body.zen { body.zen .gutter, body.zen #launcher-container, -body.zen #launcher-pane > :not(.global-menu), +body.zen #launcher-pane, body.zen #left-pane, body.zen #right-pane, body.zen .tab-row-container, From e829abbad3b918a838ce0f3581f7e89e80b28b48 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 18:47:15 +0200 Subject: [PATCH 07/13] feat(zen): set up draggable regions --- src/public/app/widgets/close_zen_button.ts | 8 ++++++-- src/public/stylesheets/style.css | 12 ++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/public/app/widgets/close_zen_button.ts b/src/public/app/widgets/close_zen_button.ts index 035104ebe..8662aa1da 100644 --- a/src/public/app/widgets/close_zen_button.ts +++ b/src/public/app/widgets/close_zen_button.ts @@ -2,13 +2,16 @@ import BasicWidget from "./basic_widget.js"; const TPL = `\
    - From ab7457cf90c476337f932f8fa2087971396d5f34 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 19:07:02 +0200 Subject: [PATCH 10/13] fix(next): transparency issue when background effects are off --- src/public/stylesheets/theme-next/shell.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 79d11c12d..d173476ac 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1808,7 +1808,7 @@ div.bookmark-folder-widget .note-link .bx { color: var(--hover-item-text-color); } -body.zen { +body.background-effects.zen #root-widget { --main-background-color: transparent; --root-background: transparent; -} \ No newline at end of file +} From 137aa93451d2e7cbe49717bbd514a0fab62c3b9d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 19:07:13 +0200 Subject: [PATCH 11/13] fix(zen): not working properly when native titlebar is on --- src/public/app/widgets/close_zen_button.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/public/app/widgets/close_zen_button.ts b/src/public/app/widgets/close_zen_button.ts index 72e067209..175f24946 100644 --- a/src/public/app/widgets/close_zen_button.ts +++ b/src/public/app/widgets/close_zen_button.ts @@ -12,8 +12,8 @@ const TPL = `\ .close-zen-container { display: none; - width: var(--size); - height: var(--size); + width: var(--zen-button-size); + height: var(--zen-button-size); } body.zen .close-zen-container { @@ -26,8 +26,7 @@ const TPL = `\ } body.zen.electron:not(.native-titlebar) .close-zen-container { - --size: 32px; - left: calc(env(titlebar-area-width) - var(--size) - 2px); + left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px); right: unset; } From be39668488b5f4caeb3de84c619b5ea2636d46c8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 14 Feb 2025 19:45:57 +0200 Subject: [PATCH 12/13] feat(zen): add keyboard shortcut --- src/services/keyboard_actions.ts | 6 ++++++ src/services/keyboard_actions_interface.ts | 1 + translations/en/server.json | 3 ++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/services/keyboard_actions.ts b/src/services/keyboard_actions.ts index 21745878d..1df14a264 100644 --- a/src/services/keyboard_actions.ts +++ b/src/services/keyboard_actions.ts @@ -238,6 +238,12 @@ function getDefaultKeyboardActions() { description: t("keyboard_actions.toggle-tray"), scope: "window" }, + { + actionName: "toggleZenMode", + defaultShortcuts: ["Alt+Z"], + description: t("keyboard_actions.toggle-zen-mode"), + scope: "window" + }, { actionName: "firstTab", defaultShortcuts: ["CommandOrControl+1"], diff --git a/src/services/keyboard_actions_interface.ts b/src/services/keyboard_actions_interface.ts index 9eb3539bd..2fc96665f 100644 --- a/src/services/keyboard_actions_interface.ts +++ b/src/services/keyboard_actions_interface.ts @@ -35,6 +35,7 @@ const enum KeyboardActionNamesEnum { activatePreviousTab, openNewWindow, toggleTray, + toggleZenMode, firstTab, secondTab, thirdTab, diff --git a/translations/en/server.json b/translations/en/server.json index 0560c5976..49e08bb99 100644 --- a/translations/en/server.json +++ b/translations/en/server.json @@ -92,7 +92,8 @@ "toggle-book-properties": "Toggle Book Properties", "toggle-classic-editor-toolbar": "Toggle the Formatting tab for the editor with fixed toolbar", "export-as-pdf": "Exports the current note as a PDF", - "show-cheatsheet": "Shows a modal with common keyboard operations" + "show-cheatsheet": "Shows a modal with common keyboard operations", + "toggle-zen-mode": "Enables/disables the zen mode (minimal UI for more focused editing)" }, "login": { "title": "Login", From dc0ac4daa2dddeaf415d54304ff814ee0857038a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 16 Feb 2025 15:38:31 +0200 Subject: [PATCH 13/13] fix(zen): buttons on darwin --- src/public/app/widgets/close_zen_button.ts | 2 +- src/public/stylesheets/style.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/public/app/widgets/close_zen_button.ts b/src/public/app/widgets/close_zen_button.ts index 175f24946..138fa6ed6 100644 --- a/src/public/app/widgets/close_zen_button.ts +++ b/src/public/app/widgets/close_zen_button.ts @@ -25,7 +25,7 @@ const TPL = `\ -webkit-app-region: no-drag; } - body.zen.electron:not(.native-titlebar) .close-zen-container { + body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container { left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px); right: unset; } diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 53fb6f197..7d6a6501c 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1677,6 +1677,7 @@ body.zen .title-row { display: block !important; height: unset !important; -webkit-app-region: drag; + padding-left: env(titlebar-area-x); } body.zen .note-title-widget,