Merge pull request #1196 from TriliumNext/feature/zen_mode

Zen Mode

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 = {
@@ -325,6 +327,7 @@ type EventMappings = {
     };
     scrollToEnd: { ntxId: string };
     noteTypeMimeChanged: { noteId: string };
+    zenModeChanged: { isEnabled: boolean };
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/components/root_command_executor.ts

@@ -178,6 +178,13 @@ export default class RootCommandExecutor extends Component {
         for (const window of windows) window[action]();
     }
 
+    toggleZenModeCommand() {
+        const $body = $("body");
+        $body.toggleClass("zen");
+        const isEnabled = $body.hasClass("zen");
+        appContext.triggerEvent("zenModeChanged", { isEnabled });
+    }
+
     firstTabCommand() {
         this.#goToTab(1);
     }

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) {

src/public/app/widgets/buttons/global_menu.ts

@@ -133,7 +133,12 @@ const TPL = `
             ${t("title_bar_buttons.window-on-top")}
         </li>
 
-        <div class="dropdown-divider zoom-container-separator"></div>
+        <li class="dropdown-item" data-trigger-command="toggleZenMode">
+            <span class="bx bxs-yin-yang"></span>
+            ${t("global_menu.toggle-zen-mode")}
+        </li>
+
+        <div class="dropdown-divider"></div>
 
         <li class="dropdown-item switch-to-mobile-version-button" data-trigger-command="switchToMobileVersion">
             <span class="bx bx-mobile"></span>
@@ -251,6 +256,7 @@ export default class GlobalMenuWidget extends BasicWidget {
 
     private $updateToLatestVersionButton!: JQuery<HTMLElement>;
     private $zoomState!: JQuery<HTMLElement>;
+    private $toggleZenMode!: JQuery<HTMLElement>;
 
     constructor(isHorizontalLayout: boolean) {
         super();
@@ -355,17 +361,11 @@ 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");
-        this.$widget.on("show.bs.dropdown", () => {
+        this.$toggleZenMode = this.$widget.find('[data-trigger-command="toggleZenMode"');
-            this.updateZoomState();
+        this.$widget.on("show.bs.dropdown", () => this.#onShown());
-            if (this.tooltip) {
-                this.tooltip.hide();
-                this.tooltip.disable();
-            }
-        });
         if (this.tooltip) {
             this.$widget.on("hide.bs.dropdown", () => this.tooltip.enable());
         }
@@ -381,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;

src/public/app/widgets/close_zen_button.ts

@@ -0,0 +1,46 @@
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `\
+<div class="close-zen-container">
+    <button class="button-widget bx icon-action bxs-yin-yang"
+        data-trigger-command="toggleZenMode" />
+
+    <style>
+    :root {
+        --zen-button-size: 32px;
+    }
+
+    .close-zen-container {
+        display: none;
+        width: var(--zen-button-size);
+        height: var(--zen-button-size);
+    }
+
+    body.zen .close-zen-container {
+        display: block;
+        position: fixed;
+        top: 2px;
+        right: 2px;
+        z-index: 9999;
+        -webkit-app-region: no-drag;
+    }
+
+    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;
+    }
+    </style>
+</div>
+`;
+
+export default class CloseZenButton extends BasicWidget {
+
+    doRender(): void {
+        this.$widget = $(TPL);
+    }
+
+    zenChangedEvent() {
+        this.toggleInt(true);
+    }
+
+}

src/public/stylesheets/style.css

@@ -1644,3 +1644,44 @@ 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 {
+    --tab-bar-height: 0;
+}
+
+body.zen .gutter,
+body.zen #launcher-container,
+body.zen #launcher-pane,
+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 .floating-buttons {
+    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;
+}
+
+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,
+body.zen .note-title-widget input {
+    font-size: 1rem !important;
+    background: transparent !important;
+}

src/public/stylesheets/theme-next/shell.css

@@ -1807,3 +1807,8 @@ div.bookmark-folder-widget .note-link .bx {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
 }
+
+body.background-effects.zen #root-widget {
+    --main-background-color: transparent;
+    --root-background: transparent;
+}

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": "<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>",

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",

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"],

src/services/keyboard_actions_interface.ts

@@ -35,6 +35,7 @@ const enum KeyboardActionNamesEnum {
     activatePreviousTab,
     openNewWindow,
     toggleTray,
+    toggleZenMode,
     firstTab,
     secondTab,
     thirdTab,

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",