#177 made extra padding at the bottom in focus mode toggleable

repo/focus-mode/mod.js

@@ -13,6 +13,24 @@ module.exports = {
   name: 'focus mode',
   desc:
     'hide the titlebar/menubar if the sidebar is closed (will be shown on hover).',
-  version: '0.1.1',
+  version: '0.2.0',
   author: 'arecsu',
+  options: [
+    {
+      key: 'padded',
+      label: 'add padding to bottom of the page',
+      description: `will only take effect when the sidebar is hidden. aims to make the canvas\
+        as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.z`,
+      type: 'toggle',
+      value: true,
+    },
+  ],
+  hacks: {
+    'renderer/preload.js': (store, __exports) => {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        if (store().padded) document.body.dataset.focusmode = 'padded';
+      });
+    },
+  },
 };

repo/focus-mode/styles.css

@@ -5,16 +5,6 @@
  * under the MIT license
  */
 
-/* add space at the bottom of the main frame when sidebar is hidden
-  * -- matches space at top for titlebar */
-.notion-dark-theme .notion-frame {
-  transition: height 100ms ease 0s;
-}
-.notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
-  height: calc(
-    100% - (var(--configured--dragarea_height, 10px) + 45px)
-  ) !important;
-}
 .notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {
   opacity: 0 !important;
   transition: opacity 200ms ease-in-out !important;
@@ -24,3 +14,15 @@
   .notion-topbar:hover {
   opacity: 1 !important;
 }
+/* add space at the bottom of the main frame when sidebar is hidden
+* -- matches space at top for titlebar */
+[data-focusmode='padded'] .notion-dark-theme .notion-frame {
+  transition: height 100ms ease 0s;
+}
+[data-focusmode='padded']
+  .notion-sidebar-container[style*='width: 0px;']
+  + .notion-frame {
+  height: calc(
+    100% - (var(--configured--dragarea_height, 10px) + 45px)
+  ) !important;
+}