From a4aaa497744fe3dbb51f545f2f616c53511706e8 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Tue, 18 May 2021 20:30:06 +0200
Subject: [PATCH] fix width in zen mode, closes #1965

---
 package-lock.json                               |  8 ++++----
 package.json                                    |  2 +-
 src/public/app/services/entrypoints.js          | 14 --------------
 .../app/widgets/containers/root_container.js    | 17 +++++++++++++++++
 src/public/stylesheets/style.css                |  8 ++++----
 5 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2de07a769..02a1f5f00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.47.2",
+  "version": "0.47.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2797,9 +2797,9 @@
       }
     },
     "electron": {
-      "version": "13.0.0-beta.26",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-13.0.0-beta.26.tgz",
-      "integrity": "sha512-glDAQjSzV26JvmB9pbdd1dLkjqUvBv9X0B8FrRvIK0BAhEmMzzZ3gKD6VPsxg2omDYMI35oThQ+92D4RxRcb+g==",
+      "version": "13.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-13.0.0-beta.27.tgz",
+      "integrity": "sha512-Co5143QQBiUHLY8qKPbe4axGnFxFLIPbdBuKh0pMvhmsGsVbTK3mEihmhl/lBKQe36cu+gnODpvtZZ0uGsqlxA==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
diff --git a/package.json b/package.json
index be61c942e..d1c6b9210 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
   },
   "devDependencies": {
     "cross-env": "7.0.3",
-    "electron": "13.0.0-beta.26",
+    "electron": "13.0.0-beta.27",
     "electron-builder": "22.11.1",
     "electron-packager": "15.2.0",
     "electron-rebuild": "2.3.5",
diff --git a/src/public/app/services/entrypoints.js b/src/public/app/services/entrypoints.js
index 08f4747c8..ffaf2e9e3 100644
--- a/src/public/app/services/entrypoints.js
+++ b/src/public/app/services/entrypoints.js
@@ -128,20 +128,6 @@ export default class Entrypoints extends Component {
         }
     }
 
-    toggleZenModeCommand() {
-        if (!this.zenModeActive) {
-            $(".hide-in-zen-mode,.gutter").addClass("hidden-by-zen-mode");
-            $("#root-widget").addClass("zen-mode");
-            this.zenModeActive = true;
-        }
-        else {
-            // not hiding / showing explicitly since element might be hidden also for other reasons
-            $(".hide-in-zen-mode,.gutter").removeClass("hidden-by-zen-mode");
-            $("#root-widget").removeClass("zen-mode");
-            this.zenModeActive = false;
-        }
-    }
-
     reloadFrontendAppCommand() {
         utils.reloadApp();
     }
diff --git a/src/public/app/widgets/containers/root_container.js b/src/public/app/widgets/containers/root_container.js
index aecc8f2c3..82f64a939 100644
--- a/src/public/app/widgets/containers/root_container.js
+++ b/src/public/app/widgets/containers/root_container.js
@@ -22,6 +22,23 @@ export default class RootContainer extends FlexContainer {
 
             this.$widget.toggleClass("protected", note.isProtected);
         }
+
+        this.setZenMode(this.isZenModeActive);
+    }
+
+    setZenMode(active) {
+        this.isZenModeActive = active;
+
+        if (this.isZenModeActive) {
+            $("#root-widget").addClass("zen-mode");
+        }
+        else {
+            $("#root-widget").removeClass("zen-mode");
+        }
+    }
+
+    toggleZenModeEvent() {
+        this.setZenMode(!this.isZenModeActive);
     }
 
     tabNoteSwitchedEvent() {
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index f4e3a4706..2c70e24a5 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -131,6 +131,10 @@ span.fancytree-node.muted { opacity: 0.6; }
     margin-right: auto;
 }
 
+.zen-mode .hide-in-zen-mode, .zen-mode .gutter {
+    display: none !important;
+}
+
 .ui-autocomplete {
     max-height: 300px;
     overflow-y: auto;
@@ -775,10 +779,6 @@ body {
     font-size: var(--main-font-size);
 }
 
-.hidden-by-zen-mode {
-    display: none !important;
-}
-
 .gutter {
     background: linear-gradient(to bottom, transparent, var(--accented-background-color), transparent);
 }