From a03a01af26bcaf05acc305c510e17c7f0f583ff6 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Fri, 6 Nov 2020 02:35:45 +0700
Subject: [PATCH] Add icons, mod.js, and styles.css files
---
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 | 94 ++++++++++++++++++++++++
mods/topbar-icons/styles.css | 28 +++++++
7 files changed, 142 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 @@
+
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 @@
+
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 @@
+
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 @@
+
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 @@
+
diff --git a/mods/topbar-icons/mod.js b/mods/topbar-icons/mod.js
new file mode 100644
index 0000000..63bdd10
--- /dev/null
+++ b/mods/topbar-icons/mod.js
@@ -0,0 +1,94 @@
+/*
+ * topbar icons
+ * (c) 2020 dragonwocky (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 (share, updates, favorite) with icons.',
+ version: '1.0.0',
+ author: 'CloudHill',
+ hacks: {
+ 'renderer/preload.js'(store, __exports) {
+ const icons = {
+ 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;
+ buttonList[0].innerHTML = await icons.share;
+ const elements = {
+ updates: buttonList[1],
+ favorite: buttonList[2],
+ };
+ for (let btn of ['updates', 'favorite']) {
+ elements[btn].prepend(
+ createElement(
+ `${(await icons[btn].off).toString()}
+ ${(await icons[btn].on).toString()}
`
+ )
+ );
+ }
+ }
+ }
+ });
+ },
+ },
+};
diff --git a/mods/topbar-icons/styles.css b/mods/topbar-icons/styles.css
new file mode 100644
index 0000000..957f9d9
--- /dev/null
+++ b/mods/topbar-icons/styles.css
@@ -0,0 +1,28 @@
+/*
+ * topbar icons
+ * (c) 2020 dragonwocky (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+.notion-topbar-actions > div {
+ width: 32px;
+ padding: 0 7px !important;
+}
+
+.notion-topbar-actions > :not(:first-child):not(:last-child) > *:not(div) {
+ display: none !important;
+}
+
+.notion-topbar-actions > div > div,
+.notion-topbar-actions svg {
+ width: 18px;
+ height: 18px;
+}
+
+.notion-topbar-actions > [style*="padding-left: 8px"] > div > svg:last-child {
+ display: none;
+}
+.notion-topbar-actions > [style*="padding-left: 6px"] > div > svg:first-child {
+ display: none;
+}
\ No newline at end of file