Extension: Topbar Icons (#216)

* Add icons, mod.js, and styles.css files

* Added options to mod.js

Added the option to individually select which buttons (share, updates, favorite) to replace with icons

* Update styles.css to work with options

mods/topbar-icons/icons/favorite_off.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+<path d="M12,6.8l1.3,2.6l0.6,1.2l1.3,0.2l2.8,0.4l-2,2l-1,0.9l0.2,1.3l0.5,2.8l-2.5-1.3L12,16.3l-1.2,0.6l-2.5,1.3l0.5-2.8L9,14.1
+	l-1-0.9l-2-2l2.8-0.4l1.3-0.2l0.6-1.2L12,6.8 M12,1.1L8.4,8.3L0.5,9.4L6.2,15l-1.4,7.9l7.1-3.7l7.1,3.7L17.7,15l5.8-5.6l-7.9-1.1
+	L12,1.1L12,1.1z"/>
+</svg>

mods/topbar-icons/icons/favorite_on.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+<polygon points="12,1.1 15.6,8.3 23.5,9.4 17.8,15 19.1,22.9 12,19.2 4.9,22.9 6.2,15 0.5,9.4 8.4,8.3 "/>
+</svg>

mods/topbar-icons/icons/share.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+<path d="M18.5,15.1c-0.9,0-1.8,0.4-2.4,1l-7.3-3.6c0-0.2,0-0.3,0-0.5s0-0.4,0-0.5l7.3-3.6c0.6,0.6,1.4,1,2.4,1
+	c1.8,0,3.3-1.5,3.3-3.3s-1.5-3.3-3.3-3.3s-3.3,1.5-3.3,3.3c0,0.2,0,0.4,0,0.5L7.9,9.7c-0.6-0.6-1.4-1-2.4-1c-1.8,0-3.3,1.5-3.3,3.3
+	s1.5,3.3,3.3,3.3c0.9,0,1.8-0.4,2.4-1l7.3,3.6c0,0.2,0,0.3,0,0.5c0,1.8,1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3S20.3,15.1,18.5,15.1z
+	"/>
+</svg>

mods/topbar-icons/icons/updates_off.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+<polygon points="20.6,6 18,3.4 12,9.4 6,3.4 3.4,6 9.4,12 3.4,18 6,20.6 12,14.6 18,20.6 20.6,18 14.6,12 "/>
+</svg>

mods/topbar-icons/icons/updates_on.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+<polygon points="9.4,20.6 24,6 21.4,3.4 9.4,15.4 2.6,8.6 0,11.1 "/>
+</svg>

mods/topbar-icons/mod.js

@@ -0,0 +1,122 @@
+/*
+ * topbar icons
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+'use strict';
+
+const { createElement } = require('../../pkg/helpers.js'),
+  path = require('path'),
+  fs = require('fs-extra');
+
+module.exports = {
+  id: 'e0700ce3-a9ae-45f5-92e5-610ded0e348d',
+  tags: ['extension'],
+  name: 'topbar icons',
+  desc:
+    'replaces the topbar buttons with icons.',
+  options: [
+    {
+      key: 'share',
+      label: 'share',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'updates',
+      label: 'updates',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'favorite',
+      label: 'favorite',
+      type: 'toggle',
+      value: true,
+    }, 
+  ],
+  version: '1.0.0',
+  author: 'CloudHill',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      const icons = {
+        selected: [
+          ...(store().updates ? ['updates'] : []),
+          ...(store().favorite ? ['favorite'] : []),
+        ],
+        share: fs.readFile(path.resolve(`${__dirname}/icons/share.svg`)),
+        updates: {
+          on: fs.readFile(path.resolve(`${__dirname}/icons/updates_on.svg`)),
+          off: fs.readFile(path.resolve(`${__dirname}/icons/updates_off.svg`)),
+        },
+        favorite: {
+          on: fs.readFile(path.resolve(`${__dirname}/icons/favorite_on.svg`)),
+          off: fs.readFile(path.resolve(`${__dirname}/icons/favorite_off.svg`)),
+        },
+      };
+      
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        const attempt_interval = setInterval(enhance, 500);
+        function enhance() {
+          if (!document.querySelector('.notion-topbar-actions')) return;
+          clearInterval(attempt_interval);
+
+          setIcons(document.querySelector('.notion-topbar-actions'));
+
+          let queue = [];
+          const observer = new MutationObserver((list, observer) => {
+            if (!queue.length) requestAnimationFrame(() => process(queue));
+            queue.push(...list);
+          });
+          observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+          });
+
+          function process(list) {
+            queue = [];
+            for (let { addedNodes } of list) {
+              if (
+                addedNodes[0] &&
+                addedNodes[0].className === 'notion-page-content' &&
+                document.querySelector('.notion-peek-renderer')
+              ) {
+                const $topbarButtons = document.querySelector(
+                  '.notion-peek-renderer .notion-topbar-share-menu'
+                ).parentElement;
+
+                if ($topbarButtons.className == 'notion-topbar-actions') return;
+                $topbarButtons.className = 'notion-topbar-actions';
+                setIcons($topbarButtons);
+              }
+            }
+          }
+
+          async function setIcons(buttons) {
+            const buttonList = buttons.children;
+            if (store().share) {
+              buttonList[0].classList.add('notion-topbar-icon');
+              buttonList[0].innerHTML = await icons.share;
+            }
+            const elements = {
+              updates: buttonList[1],
+              favorite: buttonList[2],
+            };
+            for (let btn of icons.selected) {
+              elements[btn].classList.add('notion-topbar-icon')
+              elements[btn].prepend(
+                createElement(
+                  `<div>${(await icons[btn].off).toString()}        
+                  ${(await icons[btn].on).toString()}</div>`        
+                )
+              );
+            }
+          }
+        }
+      });
+    },
+  },
+};

mods/topbar-icons/styles.css

@@ -0,0 +1,28 @@
+/*
+ * topbar icons
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+.notion-topbar-icon {
+  width: 32px;
+  padding: 0 7px !important;
+}
+
+.notion-topbar-icon:not(:first-child) > *:not(div) {
+  display: none !important;
+}
+
+.notion-topbar-icon > div,
+.notion-topbar-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.notion-topbar-icon[style*="padding-left: 8px"] > div > :last-child {
+  display: none;
+}
+.notion-topbar-icon[style*="padding-left: 6px"] > div > :first-child {
+  display: none;
+}