titlebar + scrollbars

mods/core/mod.js

@@ -5,10 +5,11 @@
  */
 
 const defaults = {
-  openhidden: false,
+  openhidden: true,
   maximized: false,
-  close_to_tray: false,
+  close_to_tray: true,
   frameless: true,
+  smooth_scrollbars: true,
   hotkey: 'CmdOrCtrl+Shift+A',
 };
 
@@ -26,12 +27,6 @@ module.exports = {
   hacks: {
     'main/main.js': require('./tray.js')(defaults),
     'main/createWindow.js': require('./window.js')(defaults),
-    'renderer/preload.js': function (store, __exports) {
+    'renderer/preload.js': require('./titlebar.js')(defaults),
-      const window = require('electron').remote.getCurrentWindow();
-      document.defaultView.addEventListener('keyup', (event) => {
-        if (event.code === 'F5') window.reload();
-        // if (event.code === 'F4' && event.altKey) window.close();
-      });
-    },
   },
 };

mods/core/scrollbars.css

@@ -0,0 +1,34 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 TarasokUA
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+.smooth-scrollbars .notion-scroller {
+  cursor: auto;
+}
+.smooth-scrollbars ::-webkit-scrollbar {
+  width: 8px; /* vertical */
+  height: 8px; /* horizontal */
+}
+.smooth-scrollbars ::-webkit-scrollbar-corner {
+  background-color: transparent; /* overlap */
+}
+.smooth-scrollbars ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb {
+  background-color: #d9d8d6;
+  border: 1px solid #cacac8;
+}
+.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover {
+  background: #cacac8;
+}
+.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb {
+  background-color: #505457;
+}
+.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover {
+  background: #696d6f;
+}

mods/core/styles.css

@@ -0,0 +1,9 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 TarasokUA
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+@import './scrollbars.css';
+@import './titlebar.css';

mods/core/titlebar.css

@@ -0,0 +1,86 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 TarasokUA
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+.frameless .notion-topbar {
+  height: 55px !important;
+}
+
+.frameless .window-dragarea {
+  height: 10px;
+  width: 100%;
+}
+.frameless .notion-light-theme .window-dragarea {
+  background: #e6e6e6;
+}
+.frameless .notion-dark-theme .window-dragarea {
+  background: #272d2f;
+}
+
+.window-buttons-area {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+@media (max-width: 760px) {
+  .notion-topbar {
+    height: 95px !important;
+  }
+  .notion-topbar > :nth-child(2) {
+    display: grid !important;
+    height: 85px !important;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+  .window-buttons-area {
+    grid-row: 1;
+    grid-column: 9 / span end;
+    justify-content: flex-end;
+  }
+  .notion-topbar-breadcrumb {
+    grid-row: 2;
+    grid-column: 1 / span 8;
+  }
+  .notion-topbar-actions {
+    grid-row: 2;
+    grid-column: 9 / span end;
+    justify-content: flex-end;
+  }
+}
+
+.window-button {
+  background: transparent;
+  border: 0;
+  margin: 0px 0px 0px 9px;
+  width: 32px;
+  line-height: 26px;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: background 0.2s;
+  cursor: default;
+}
+.window-button svg {
+  margin-top: 8px;
+  width: 14px;
+  height: 14px;
+}
+.window-button svg path {
+  fill: currentColor;
+}
+.window-button svg line {
+  stroke: currentColor;
+}
+.notion-light-theme .window-button:hover {
+  background: rgb(239, 239, 239);
+}
+.notion-dark-theme .window-button:hover {
+  background: rgb(71, 76, 80);
+}
+.window-button.btn-close:hover {
+  background: #e81123;
+}
+.window-button.btn-close:hover svg line {
+  stroke: white;
+}

mods/core/titlebar.js

@@ -0,0 +1,137 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 TarasokUA
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+module.exports = (defaults) =>
+  function (store, __exports) {
+    const electron = require('electron'),
+      browser = electron.remote.getCurrentWindow(),
+      path = require('path'),
+      fs = require('fs-extra'),
+      is_mac = process.platform === 'darwin',
+      settings = store(defaults);
+
+    document.defaultView.addEventListener('keyup', (event) => {
+      if (event.code === 'F5') window.reload();
+      // if (event.code === 'F4' && event.altKey) window.close();
+    });
+
+    const attempt = setInterval(enhance, 500);
+    async function enhance() {
+      if (!document.querySelector('.notion-frame')) return;
+      clearInterval(attempt);
+
+      if (settings.smooth_scrollbars)
+        document.body.classList.add('smooth-scrollbars');
+
+      if (settings.frameless) {
+        document.body.classList.add('frameless');
+        const dragarea = document.createElement('div');
+        dragarea.className = 'window-dragarea';
+        document.querySelector('.notion-topbar').prepend(dragarea);
+      }
+
+      const buttons = {
+        element: document.createElement('span'),
+        insert: ['alwaysontop'],
+        icons: {
+          raw: {
+            alwaysontop: {
+              on: fs.readFile(
+                path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
+              ),
+              off: fs.readFile(
+                path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
+              ),
+            },
+            minimize: fs.readFile(
+              path.resolve(`${__dirname}/icons/minimize.svg`)
+            ),
+            maximize: {
+              on: fs.readFile(
+                path.resolve(`${__dirname}/icons/maximize_on.svg`)
+              ),
+              off: fs.readFile(
+                path.resolve(`${__dirname}/icons/maximize_off.svg`)
+              ),
+            },
+            close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
+          },
+          alwaysontop() {
+            return browser.isAlwaysOnTop()
+              ? buttons.icons.raw.alwaysontop.on
+              : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
+          },
+          minimize() {
+            return buttons.icons.raw.minimize; // '⚊'
+          },
+          maximize() {
+            return browser.isMaximized()
+              ? buttons.icons.raw.maximize.on
+              : buttons.icons.raw.maximize.off; // '🗗' : '🗖'
+          },
+          close() {
+            return buttons.icons.raw.close; // '⨉'
+          },
+        },
+        actions: {
+          async alwaysontop() {
+            browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
+            this.innerHTML = await buttons.icons.alwaysontop();
+          },
+          minimize() {
+            browser.minimize();
+          },
+          async maximize() {
+            browser.isMaximized() ? browser.unmaximize() : browser.maximize();
+            this.innerHTML = await buttons.icons.maximize();
+          },
+          close(event = null) {
+            if (
+              settings.close_to_tray &&
+              electron.remote.BrowserWindow.getAllWindows().length === 1
+            ) {
+              if (event) event.preventDefault();
+              browser.hide();
+            } else browser.close();
+          },
+        },
+      };
+
+      if (settings.frameless && !is_mac)
+        buttons.insert.push('minimize', 'maximize', 'close');
+      buttons.element.className = 'window-buttons-area';
+      for (let btn of buttons.insert) {
+        buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
+          btn
+        ]()}</button>`;
+      }
+
+      document
+        .querySelector('.notion-topbar > div[style*="display: flex"]')
+        .appendChild(buttons.element);
+      document
+        .querySelector('.notion-history-back-button')
+        .parentElement.nextElementSibling.classList.add(
+          'notion-topbar-breadcrumb'
+        );
+      document
+        .querySelector('.notion-topbar-share-menu')
+        .parentElement.classList.add('notion-topbar-actions');
+
+      for (let btn of buttons.insert) {
+        document.querySelector(`.window-button.btn-${btn}`).onclick =
+          buttons.actions[btn];
+      }
+
+      // if (!isMac) {
+      //   setInterval(() => {
+      //     if (button_elements.maximize.innerHTML != buttons.icons.maximize())
+      //       button_elements.maximize.innerHTML = buttons.icons.maximize();
+      //   }, 1000);
+      // }
+    }
+  };

mods/core/tray.js

@@ -61,6 +61,7 @@ module.exports = (defaults) =>
         {
           type: 'normal',
           label: 'Enhancements',
+          // will open menu
         },
         {
           type: 'separator',

mods/core/window.js

@@ -9,9 +9,8 @@ module.exports = (defaults) =>
   function (store, __exports) {
     const electron = require('electron'),
       allWindows = electron.BrowserWindow.getAllWindows,
-      createWindow = __exports.createWindow,
+      // createWindow = __exports.createWindow,
       path = require('path'),
-      is_mac = process.platform === 'darwin',
       settings = store(defaults),
       helpers = require('../../pkg/helpers.js'),
       __notion = helpers.getNotion();

pkg/loader.js

@@ -63,15 +63,18 @@ module.exports = function (__file, __exports) {
   }
 
   if (__file === 'main/main.js') {
-    require('electron')
+    const electron = require('electron');
-      .session.fromPartition('persist:notion')
+    electron.app.whenReady().then(() => {
-      .protocol.registerFileProtocol('enhancement', (req, callback) => {
+      electron.session
-        callback({
+        .fromPartition('persist:notion')
-          path: path.resolve(
+        .protocol.registerFileProtocol('enhancement', (req, callback) => {
-            `${__dirname}/../mods/${req.url.slice('enhancement://'.length)}`
+          callback({
-          ),
+            path: path.resolve(
+              `${__dirname}/../mods/${req.url.slice('enhancement://'.length)}`
+            ),
+          });
         });
-      });
+    });
   }
 
   if (__file === 'renderer/preload.js') {