common tweaks ext: #168, #176 - scrollbars, thicker bold, responsiveness, hide help, snappy transitions, dragarea height

CHANGELOG.md

@@ -13,10 +13,7 @@ a flexibility update.
   higher up on the list = higher priority of application = loaded last in order to override others.
   (excluding the core, which though pinned to the top of the list is always loaded first so theming
   variables can be modified.)
-- new: in-page columns are disabled/wrapped and pages are wider when
-  the window is narrower than 600px for improved responsiveness.
 - new: relaunch button in tray menu.
-- new: a core mod option to make transitions snappy/0s.
 - new: a core mod option for a default page id/url (all new windows will load it instead of the
   normal "most recent" page).
 - new: css variables for increasing line spacing/paragraph margins.
@@ -57,19 +54,26 @@ a flexibility update.
   originally by zeno rocha and friends.
 - extension: "tabs" = have multiple notion pages open in a single window.
 - extension: "scroll to top" = add an arrow above the help button to scroll back to the top of a page.
+- extension: "tweaks" = common style/layout changes. includes:
+  - new: make transitions snappy/0s.
+  - new: in-page columns are disabled/wrapped and pages are wider when
+    the window is narrower than 600px for improved responsiveness.
+  - new: thicker bold text for better visibility.
+  - moved: smooth scrollbars.
+  - moved: change dragarea height.
+  - moved: hide help.
 
 a fork of notion-deb-builder that does generate an app.asar has been created and is once again supported.
 
 // todo
 
-- bugfix: night shift working on macOS.
+- new: more readable line spacing.
-- bugfix: windows are properly hidden/shown on macOS.
-- extension: "tweaks" = common style/layout changes.
 
 MACOS SPECIFIC FIXES
 
 - close to tray: perma-true
 - frameless mode: perma-false
+- open ext. menu hotkey not working?
 
 ### v0.9.1 (2020-09-26)
 

mods/calendar-scroll/mod.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-const helpers = require('../../pkg/helpers.js');
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
   id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a',
@@ -26,7 +26,7 @@ module.exports = {
           if (!notion_elem) return;
           clearInterval(attempt_interval);
 
-          const button = helpers.createElement(
+          const button = createElement(
             '<button id="calendar-scroll-to-week">Scroll</button>'
           );
           button.addEventListener('click', (event) => {

mods/core/client.js

@@ -79,12 +79,6 @@ module.exports = (store, __exports) => {
       return;
     clearInterval(attempt_interval);
 
-    // toggleable styles
-    if (store().smooth_scrollbars)
-      document.body.classList.add('smooth-scrollbars');
-    if (store().snappy_transitions)
-      document.body.classList.add('snappy-transitions');
-
     // frameless
     if (store().frameless && !store().tiling_mode && !tabsEnabled) {
       document.body.classList.add('frameless');
@@ -92,10 +86,6 @@ module.exports = (store, __exports) => {
       document
         .querySelector('.notion-topbar')
         .prepend(helpers.createElement('<div class="window-dragarea"></div>'));
-      document.documentElement.style.setProperty(
-        '--configured--dragarea_height',
-        `${store().dragarea_height + 2}px`
-      );
     }
 
     // window buttons

mods/core/css/responsive.css

@@ -1,26 +0,0 @@
-/*
- * notion-enhancer
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * under the MIT license
- */
-
-@media (max-width: 600px) {
-  .notion-column_list-block [style='display: flex;'] > div {
-    width: 100% !important;
-  }
-  .notion-column_list-block [style='display: flex;'] {
-    flex-direction: column !important;
-  }
-
-  .notion-app-inner {
-    --theme_dark--page_normal-width: 100%;
-    --theme_dark--page-padding: calc(48px + env(safe-area-inset-left));
-    --theme_light--page_normal-width: 100%;
-    --theme_light--page-padding: calc(48px + env(safe-area-inset-left));
-  }
-}
-
-.snappy-transitions * {
-  animation-duration: 0s !important;
-  transition-duration: 0s !important;
-}

mods/core/css/scrollbars.css

@@ -5,25 +5,25 @@
  * under the MIT license
  */
 
-.smooth-scrollbars .notion-scroller {
+[data-tweaks*='[smooth_scrollbars]'] .notion-scroller {
   cursor: auto;
 }
-.smooth-scrollbars ::-webkit-scrollbar {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar {
   width: 8px; /* vertical */
   height: 8px; /* horizontal */
   -webkit-app-region: no-drag;
 }
-.smooth-scrollbars ::-webkit-scrollbar-corner {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-corner {
   background-color: transparent; /* overlap */
 }
-.smooth-scrollbars ::-webkit-scrollbar-thumb {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb {
   border-radius: 5px;
 }
 
-.smooth-scrollbars ::-webkit-scrollbar-thumb {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb {
   background-color: var(--theme--scrollbar);
   border: 1px solid var(--theme--scrollbar-border);
 }
-.smooth-scrollbars ::-webkit-scrollbar-thumb:hover {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb:hover {
   background: var(--theme--scrollbar_hover);
 }

mods/core/enhancerMenu.js

@@ -503,8 +503,11 @@ window['__start'] = async () => {
         );
     }
 
-    const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
+    const enabled =
-        .enabled,
+        mod.alwaysActive ||
+        store('mods', {
+          [mod.id]: { enabled: false },
+        })[mod.id].enabled,
       author =
         typeof mod.author === 'object'
           ? mod.author
@@ -514,14 +517,10 @@ window['__start'] = async () => {
               avatar: `https://github.com/${mod.author}.png`,
             };
     mod.elem = helpers.createElement(`
-    <section class="${
+    <section class="${enabled ? 'enabled' : 'disabled'}" id="${mod.id}">
-      mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' || enabled
-        ? 'enabled'
-        : 'disabled'
-    }" id="${mod.id}">
         <div class="meta">
         <h3 ${
-          mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082'
+          mod.alwaysActive
             ? `>${mod.name}`
             : `class="toggle">
               <input type="checkbox" id="enable_${mod.id}"

mods/core/menu.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="smooth-scrollbars" lang="en">
+<html data-tweaks="[smooth_scrollbars]" lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

mods/core/mod.js

@@ -8,6 +8,7 @@
 
 module.exports = {
   id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
+  alwaysActive: true,
   tags: ['core'],
   name: 'notion-enhancer core',
   desc: 'the cli, modloader, menu, & tray.',
@@ -53,14 +54,6 @@ module.exports = {
       type: 'toggle',
       value: true,
     },
-    {
-      key: 'dragarea_height',
-      label: 'height of frameless dragarea:',
-      description: `the rectangle added at the top of a window in "integrated titlebar" mode,
-        used to drag/move the window.`,
-      type: 'input',
-      value: 15,
-    },
     {
       key: 'tiling_mode',
       label: 'tiling window manager mode',
@@ -69,18 +62,6 @@ module.exports = {
       type: 'toggle',
       value: false,
     },
-    {
-      key: 'smooth_scrollbars',
-      label: 'integrated scrollbars',
-      type: 'toggle',
-      value: true,
-    },
-    {
-      key: 'snappy_transitions',
-      label: 'snappy transitions',
-      type: 'toggle',
-      value: false,
-    },
     {
       key: 'hotkey',
       label: 'window display hotkey:',

mods/core/render.js

@@ -1071,7 +1071,7 @@ module.exports = (store, __exports) => {
             dragarea.setAttribute(
               'style',
               `${default_styles} top: 2px; height: ${
-                store().dragarea_height
+                store('cf8a7b27-5a4c-4d45-a4cb-1d2bbc9e9014').dragarea_height
               }px; left: ${event.args[0]};`
             );
           });

mods/core/styles.css

@@ -8,4 +8,3 @@
 @import './css/variables.css';
 @import './css/scrollbars.css';
 @import './css/titlebar.css';
-@import './css/responsive.css';

mods/custom-inserts/mod.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-const helpers = require('../../pkg/helpers.js');
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
@@ -40,7 +40,7 @@ module.exports = {
             document
               .querySelector('head')
               .appendChild(
-                helpers.createElement(
+                createElement(
                   `<style type="text/css">${fs.readFileSync(
                     store().css
                   )}</style>`

mods/hide-help/mod.js

@@ -1,16 +0,0 @@
-/*
- * hide help button
- * (c) 2020 coryzibell
- * under the MIT license
- */
-
-'use strict';
-
-module.exports = {
-  id: 'd4ebe9f3-974a-4c01-a6a9-94bc4296851d',
-  tags: ['extension'],
-  name: 'hide help',
-  desc: "hide the help button if you don't need it.",
-  version: '1.0.0',
-  author: 'coryzibell',
-};

mods/hide-help/styles.css

@@ -1,9 +0,0 @@
-/*
- * hide help button
- * (c) 2020 coryzibell
- * under the MIT license
- */
-
-.notion-help-button {
-  display: none !important;
-}

mods/property-layout/mod.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-const helpers = require('../../pkg/helpers.js');
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
   id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
@@ -42,7 +42,7 @@ module.exports = {
               'propertylayout-enhanced',
               'propertylayout-hidden'
             );
-            const toggle = helpers.createElement(
+            const toggle = createElement(
               '<button class="propertylayout-toggle" data-action="show">properties</button>'
             );
             toggle.addEventListener('click', (event) => {

mods/tweaks/mod.js

@@ -0,0 +1,91 @@
+/*
+ * tweaks
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'cf8a7b27-5a4c-4d45-a4cb-1d2bbc9e9014',
+  alwaysActive: true,
+  tags: ['core', 'extension'],
+  name: 'tweaks',
+  desc: 'common style/layout changes.',
+  version: '0.1.0',
+  author: 'dragonwocky',
+  options: [
+    {
+      key: 'dragarea_height',
+      label: 'height of frameless dragarea:',
+      description: `the rectangle added at the top of a window in "integrated titlebar" mode,
+        used to drag/move the window.`,
+      type: 'input',
+      value: 15,
+    },
+    {
+      key: 'responsive_breakpoint',
+      label: 'width to wrap columns at:',
+      description: `the size in pixels below which in-page columns are resized to appear
+        full width so content isn't squished.`,
+      type: 'input',
+      value: 600,
+    },
+    {
+      key: 'smooth_scrollbars',
+      label: 'integrated scrollbars',
+      description:
+        "use scrollbars that fit better into notion's ui instead of the default chrome ones.",
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'snappy_transitions',
+      label: 'snappy transitions',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'thicker_bold',
+      label: 'thicker bold text',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'hide_help',
+      label: 'hide help button',
+      type: 'toggle',
+      value: false,
+    },
+  ],
+  hacks: {
+    'renderer/preload.js': (store, __exports) => {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        document.body.dataset.tweaks = [
+          'smooth_scrollbars',
+          'snappy_transitions',
+          'hide_help',
+          'thicker_bold',
+        ]
+          .filter((tweak) => store()[tweak])
+          .map((tweak) => `[${tweak}]`)
+          .join('');
+        document.documentElement.style.setProperty(
+          '--configured--dragarea_height',
+          `${store().dragarea_height + 2}px`
+        );
+        const addResponsiveBreakpoint = () => {
+          document.body.dataset.tweaks = document.body.dataset.tweaks.replace(
+            /\[responsive_breakpoint\]/g,
+            ''
+          );
+          if (window.outerWidth <= store().responsive_breakpoint)
+            document.body.dataset.tweaks += '[responsive_breakpoint]';
+        };
+        window.addEventListener('resize', addResponsiveBreakpoint);
+        addResponsiveBreakpoint();
+      });
+    },
+  },
+};

mods/tweaks/styles.css

@@ -0,0 +1,38 @@
+/*
+ * tweaks
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+[data-tweaks*='[responsive_breakpoint]']
+  .notion-column_list-block
+  [style='display: flex;']
+  > div {
+  width: 100% !important;
+}
+[data-tweaks*='[responsive_breakpoint]']
+  .notion-column_list-block
+  [style='display: flex;'] {
+  flex-direction: column !important;
+}
+[data-tweaks*='[responsive_breakpoint]'] .notion-app-inner {
+  --theme_dark--page_normal-width: 100%;
+  --theme_dark--page-padding: calc(48px + env(safe-area-inset-left));
+  --theme_light--page_normal-width: 100%;
+  --theme_light--page-padding: calc(48px + env(safe-area-inset-left));
+}
+
+[data-tweaks*='[snappy_transitions]'] * {
+  animation-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+[data-tweaks*='[hide_help]'] .notion-help-button {
+  display: none !important;
+}
+
+[data-tweaks*='[thicker_bold]']
+  .notion-page-content
+  span[style*='font-weight:600'] {
+  font-weight: 700 !important;
+}

mods/weekly-view/mod.js

@@ -16,41 +16,38 @@ module.exports = {
   author: 'adihd',
   hacks: {
     'renderer/preload.js'(store, __exports) {
-      document.addEventListener('readystatechange', (event) => {
+      const attempt_interval = setInterval(enhance, 500);
-        if (document.readyState !== 'complete') return false;
+      function enhance() {
-        const attempt_interval = setInterval(enhance, 500);
+        const notion_elem = document.querySelector('.notion-frame');
-        function enhance() {
+        if (!notion_elem) return;
-          const notion_elem = document.querySelector('.notion-frame');
+        clearInterval(attempt_interval);
-          if (!notion_elem) return;
+        process([{ target: notion_elem }]);
-          clearInterval(attempt_interval);
+        const observer = new MutationObserver(process);
-          process([{ target: notion_elem }]);
+        observer.observe(notion_elem, {
-          const observer = new MutationObserver(process);
+          childList: true,
-          observer.observe(notion_elem, {
+          subtree: true,
-            childList: true,
+        });
-            subtree: true,
+        function process(list, observer) {
-          });
+          document
-          function process(list, observer) {
+            .querySelectorAll('.notion-collection-view-select')
-            document
+            .forEach((collection_view) => {
-              .querySelectorAll('.notion-collection-view-select')
+              if (collection_view.innerText != 'weekly') return;
-              .forEach((collection_view) => {
+              const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
-                if (collection_view.innerText != 'weekly') return;
+                  'notion-calendar-view-day'
-                const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
+                ),
-                    'notion-calendar-view-day'
+                today = [...days].find((day) => day.style.background),
-                  ),
+                height = today
-                  today = [...days].find((day) => day.style.background),
+                  ? getComputedStyle(
-                  height = today
+                      today.parentElement.parentElement
-                    ? getComputedStyle(
+                    ).getPropertyValue('height')
-                        today.parentElement.parentElement
+                  : 0;
-                      ).getPropertyValue('height')
+              for (let day of days)
-                    : 0;
+                day.parentElement.parentElement.style.height = 0;
-                for (let day of days)
+              if (today)
-                  day.parentElement.parentElement.style.height = 0;
+                today.parentElement.parentElement.style.height = height;
-                if (today)
+            });
-                  today.parentElement.parentElement.style.height = height;
-              });
-          }
         }
-      });
+      }
     },
   },
 };

mods/word-counter/mod.js

@@ -6,9 +6,7 @@
 
 'use strict';
 
-const { createElement } = require('../../pkg/helpers.js'),
+const { createElement } = require('../../pkg/helpers.js');
-  fs = require('fs-extra'),
-  path = require('path');
 
 module.exports = {
   id: 'b99deb52-6955-43d2-a53b-a31540cd19a5',
@@ -44,10 +42,7 @@ module.exports = {
             if (2 <= secs) readable += 's';
           }
           return readable;
-        },
+        };
-        questionBubble = fs
-          .readFileSync(path.resolve(`${__dirname}/../core/icons/question.svg`))
-          .toString();
 
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
@@ -109,12 +104,24 @@ module.exports = {
               (prev, key) =>
                 prev +
                 (Array.isArray(details[key])
-                  ? `<p><b>${
+                  ? `<p>
-                      details[key][0]
+                      <b>${details[key][0]}</b> ${key} 
-                    }</b> ${key} ${questionBubble.replace(
+                      <!-- from https://fontawesome.com/icons/question-circle?style=regular -->
-                      '<svg',
+                      <svg data-tooltip="${details[key][1]}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                      `<svg data-tooltip="${details[key][1]}"`
+                        <path
-                    )}</p>`
+                          fill="currentColor"
+                          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003
+                          248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200
+                          0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200
+                          200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627
+                          0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579
+                          0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666
+                          2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112
+                          261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841
+                          42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
+                        ></path>
+                      </svg>
+                    </p>`
                   : `<p><b>${details[key]}</b> ${key}</p>`),
               ''
             )}`;

pkg/helpers.js

@@ -117,12 +117,14 @@ function getEnhancements() {
   for (let dir of modules.dirs) {
     try {
       const mod = require(`../mods/${dir}/mod.js`);
+      if (!mod.tags) mod.tags = [];
       if (
         !mod.id ||
         modules.IDs.includes(mod.id) ||
         !mod.name ||
         !mod.version ||
         !mod.author ||
+        !mod.tags.every((tag) => typeof tag === 'string') ||
         (mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) ||
         (mod.options &&
           !mod.options.every((opt) =>
@@ -140,6 +142,7 @@ function getEnhancements() {
         ...mod,
         dir,
       });
+      if (!mod.tags.includes('core')) mod.alwaysActive = false;
     } catch (err) {
       // console.error(err);
       modules.invalid.push(dir);

pkg/loader.js

@@ -60,7 +60,7 @@ module.exports = function (__file, __exports) {
     ...modules.loaded.filter((m) => !m.tags.includes('core')).reverse(),
   ]) {
     if (
-      mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' ||
+      mod.alwaysActive ||
       store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled
     ) {
       if (
@@ -91,7 +91,7 @@ module.exports = function (__file, __exports) {
           const other_mod = modules.loaded.find((m) => m.id === args[0]);
           return store(args[0], {
             ...(other_mod ? other_mod.defaults : {}),
-            ...args[1],
+            ...(args[1] || {}),
           });
         }, __exports);
       }