From 06f4d7b519949be6d60cdf0c302668b61a87374e Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Fri, 6 Nov 2020 10:01:38 +0700
Subject: [PATCH] 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 | 5 +
mods/topbar-icons/icons/favorite_on.svg | 3 +
mods/topbar-icons/icons/share.svg | 6 ++
mods/topbar-icons/icons/updates_off.svg | 3 +
mods/topbar-icons/icons/updates_on.svg | 3 +
mods/topbar-icons/mod.js | 122 +++++++++++++++++++++++
mods/topbar-icons/styles.css | 28 ++++++
7 files changed, 170 insertions(+)
create mode 100644 mods/topbar-icons/icons/favorite_off.svg
create mode 100644 mods/topbar-icons/icons/favorite_on.svg
create mode 100644 mods/topbar-icons/icons/share.svg
create mode 100644 mods/topbar-icons/icons/updates_off.svg
create mode 100644 mods/topbar-icons/icons/updates_on.svg
create mode 100644 mods/topbar-icons/mod.js
create mode 100644 mods/topbar-icons/styles.css
diff --git a/mods/topbar-icons/icons/favorite_off.svg b/mods/topbar-icons/icons/favorite_off.svg
new file mode 100644
index 0000000..713f7dd
--- /dev/null
+++ b/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>
diff --git a/mods/topbar-icons/icons/favorite_on.svg b/mods/topbar-icons/icons/favorite_on.svg
new file mode 100644
index 0000000..721e0e1
--- /dev/null
+++ b/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>
diff --git a/mods/topbar-icons/icons/share.svg b/mods/topbar-icons/icons/share.svg
new file mode 100644
index 0000000..384df7c
--- /dev/null
+++ b/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>
diff --git a/mods/topbar-icons/icons/updates_off.svg b/mods/topbar-icons/icons/updates_off.svg
new file mode 100644
index 0000000..67c3ed9
--- /dev/null
+++ b/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>
diff --git a/mods/topbar-icons/icons/updates_on.svg b/mods/topbar-icons/icons/updates_on.svg
new file mode 100644
index 0000000..70bed27
--- /dev/null
+++ b/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>
diff --git a/mods/topbar-icons/mod.js b/mods/topbar-icons/mod.js
new file mode 100644
index 0000000..237129d
--- /dev/null
+++ b/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>`
+ )
+ );
+ }
+ }
+ }
+ });
+ },
+ },
+};
diff --git a/mods/topbar-icons/styles.css b/mods/topbar-icons/styles.css
new file mode 100644
index 0000000..3559111
--- /dev/null
+++ b/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;
+}