desktop-only extension: always on top (inc. customisable icons)

2025-04-07 22:19:02 +00:00 · 2021-12-03 14:11:35 +11:00 · 2021-12-03 14:11:35 +11:00 · eca85f7a7d
commit eca85f7a7d
parent 97ef140789
9 changed files with 168 additions and 3 deletions
--- a/repo/always-on-top/button.css
+++ b/repo/always-on-top/button.css
@ -0,0 +1,45 @@
+/*
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.always_on_top--button {
+  display: flex;
+  align-items: center;
+}
+.sidebar > .always_on_top--button {
+  margin: 0 0 0.75rem auto;
+}
+
+.always_on_top--button button {
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 3px;
+  height: 28px;
+  width: 33px;
+  padding: 0 0.25px 0 0;
+
+  margin-left: 2px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+}
+.always_on_top--button button svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+.always_on_top--button button:focus,
+.always_on_top--button button:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.always_on_top--button button:active {
+  background: var(--theme--ui_interactive-active);
+}
--- a/repo/always-on-top/button.mjs
+++ b/repo/always-on-top/button.mjs
@ -0,0 +1,43 @@
+/*
+ * notion-enhancer: always on top
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+export const createButton = async ({ web, components }, db) => {
+  let pinIcon =
+      (await db.get(['pin_icon'])) ||
+      `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5036 1.13488C14.3765 0.925602 14.2483 0.707495 14.1174 0.479601L14.9536 0C15.6901 1.28291 16.3103 2.18846 17.0583 2.94838C17.8041 3.70619 18.6966 4.33897 20 5.04819L19.5391 5.89451C19.3035 5.76631 19.0792 5.63964 18.865 5.5134L15.0521 9.80084C15.4553 11.0798 15.495 12.4878 15.0464 13.8871C14.727 14.8833 14.1631 15.8645 13.3206 16.7832C13.1407 16.9793 12.8358 16.9926 12.6396 16.8128C12.6328 16.8065 12.6262 16.8001 12.6198 16.7936C12.6184 16.7923 12.6171 16.7909 12.6158 16.7896L12.6157 16.7896L8.83994 13.0156L0.819221 19.8752C0.357424 20.2701 -0.27004 19.6423 0.124825 19.1811L6.98768 11.1642L3.21189 7.39021L3.21188 7.39019C3.21074 7.38905 3.2096 7.38791 3.20847 7.38676C3.19722 7.37583 3.18639 7.36425 3.17604 7.35202C3.00408 7.1489 3.02943 6.84489 3.23266 6.67301C3.87295 6.13148 4.53111 5.70968 5.19581 5.39767C6.91511 4.59063 8.64205 4.5275 10.1724 4.98295L14.5036 1.13488ZM15.0286 1.95762L11.1853 5.37229C12.6878 6.08669 13.9221 7.31677 14.6512 8.80124L16.2331 7.02243L14.6084 5.39847C14.4202 5.21031 14.4202 4.90525 14.6084 4.7171C14.7967 4.52895 15.1019 4.52895 15.2901 4.7171L16.8747 6.30098L18.0377 4.99329C17.4012 4.56407 16.861 4.12205 16.371 3.62414C15.8839 3.12926 15.4531 2.58595 15.0286 1.95762ZM4.26612 7.08121L7.97786 10.7912C7.97786 10.7912 7.97787 10.7912 7.97788 10.7912C8.15977 10.973 8.171 11.264 8.00385 11.4593L8.00384 11.4593L4.79816 15.204L8.54467 11.9999C8.54468 11.9999 8.54468 11.9999 8.54468 11.9999C8.74012 11.8328 9.03128 11.8441 9.21312 12.0258L12.9392 15.7502C13.5101 15.0445 13.8964 14.3165 14.1283 13.5931C15.6562 8.82761 10.5772 3.93621 5.60561 6.26987C5.15973 6.47917 4.71155 6.74739 4.26612 7.08121ZM0.193019 19.1425C0.19283 19.1427 0.192641 19.1428 0.192451 19.143L0.499031 19.5011L0.491164 19.4944L0.499031 19.5011L0.505838 19.5091L0.499032 19.5011L0.857328 19.8076C0.85747 19.8074 0.857613 19.8072 0.857755 19.8071L0.857333 19.8076L0.499031 19.5011L0.192456 19.143L0.193019 19.1425ZM0.499031 19.5011H0.499031L0.499031 19.5011H0.499032L0.499031 19.5011Z"/>
+      </svg>`,
+    unpinIcon =
+      (await db.get(['unpin_icon'])) ||
+      `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path d="M14.5036 1.13488C14.3765 0.925602 14.2483 0.707495 14.1174 0.479601L14.9536 0C15.6901 1.28291 16.3103 2.18846 17.0583 2.94839C17.8041 3.70619 18.6966 4.33897 20 5.04819L19.5391 5.89451C19.3035 5.76631 19.0792 5.63965 18.865 5.5134L15.0521 9.80084C15.4553 11.0798 15.495 12.4878 15.0464 13.8871C14.727 14.8833 14.1631 15.8645 13.3206 16.7832C13.1407 16.9793 12.8358 16.9926 12.6396 16.8128C12.6328 16.8065 12.6262 16.8001 12.6198 16.7936L12.6158 16.7896L8.83994 13.0156L0.819221 19.8752C0.357424 20.2701 -0.27004 19.6423 0.124825 19.1811L6.98768 11.1642L3.21189 7.39021L3.20847 7.38676C3.19722 7.37583 3.18639 7.36425 3.17604 7.35203C3.00408 7.1489 3.02943 6.84489 3.23266 6.67301C3.87295 6.13148 4.53111 5.70968 5.19581 5.39767C6.91511 4.59063 8.64205 4.5275 10.1724 4.98295L14.5036 1.13488Z"/>
+      </svg>`;
+  pinIcon = pinIcon.trim();
+  unpinIcon = unpinIcon.trim();
+
+  pinIcon =
+    pinIcon.startsWith('<svg') && pinIcon.endsWith('</svg>') ? pinIcon : web.escape(pinIcon);
+  unpinIcon =
+    unpinIcon.startsWith('<svg') && unpinIcon.endsWith('</svg>')
+      ? unpinIcon
+      : web.escape(unpinIcon);
+
+  const $button = web.html`<div class="always_on_top--button"></div>`,
+    $pin = web.html`<button id="always_on_top--pin">${pinIcon}</button>`,
+    $unpin = web.html`<button id="always_on_top--unpin">${unpinIcon}</button>`;
+  web.render($button, $pin);
+
+  $pin.addEventListener('click', () => {
+    $pin.replaceWith($unpin);
+    __enhancerElectronApi.browser.setAlwaysOnTop(true);
+  });
+  $unpin.addEventListener('click', () => {
+    $unpin.replaceWith($pin);
+    __enhancerElectronApi.browser.setAlwaysOnTop(false);
+  });
+
+  return $button;
+};
--- a/repo/always-on-top/client.mjs
+++ b/repo/always-on-top/client.mjs
@ -0,0 +1,17 @@
+/*
+ * notion-enhancer: always on top
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+import { createButton } from './button.mjs';
+
+export default async function (api, db) {
+  const { web } = api,
+    topbarActionsSelector = '.notion-topbar-action-buttons';
+
+  await web.whenReady([topbarActionsSelector]);
+  const $topbarActions = document.querySelector(topbarActionsSelector),
+    $button = await createButton(api, db);
+  $topbarActions.after($button);
+}
--- a/repo/always-on-top/menu.mjs
+++ b/repo/always-on-top/menu.mjs
@ -0,0 +1,20 @@
+/*
+ * notion-enhancer: always on top
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+import { createButton } from './button.mjs';
+
+export default async function (api, db) {
+  const { web } = api,
+    sidebarSelector = '.sidebar',
+    windowButtonsSelector = '.integrated_titlebar--buttons';
+
+  await web.whenReady([sidebarSelector]);
+  await new Promise(requestAnimationFrame);
+  const $sidebar = document.querySelector(sidebarSelector),
+    $windowButtons = document.querySelector(windowButtonsSelector),
+    $button = await createButton(api, db);
+  ($windowButtons || $sidebar).prepend($button);
+}
--- a/repo/always-on-top/mod.json
+++ b/repo/always-on-top/mod.json
@ -0,0 +1,40 @@
+{
+  "name": "always on top",
+  "id": "be2d75f5-48f5-4ece-98bd-772244e559f3",
+  "environments": ["linux", "win32", "darwin"],
+  "version": "0.2.0",
+  "description": "adds a button that can be used to pin the notion window on top of all other windows at all times.",
+  "tags": ["extension", "app"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "css": {
+    "client": ["button.css"],
+    "menu": ["button.css"]
+  },
+  "js": {
+    "client": ["client.mjs"],
+    "menu": ["menu.mjs"]
+  },
+  "options": [
+    {
+      "type": "text",
+      "key": "pin_icon",
+      "label": "pin window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "unpin_icon",
+      "label": "unpin window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    }
+  ]
+}
--- a/repo/integrated-titlebar/buttons.css
+++ b/repo/integrated-titlebar/buttons.css
@ -15,7 +15,7 @@
  display: flex;
  align-items: center;
 }
-.integrated_titlebar--buttons[data-in-enhancer-menu] {
+.sidebar > .integrated_titlebar--buttons {
  margin: -0.5rem 0 0.75rem auto;
 }

--- a/repo/integrated-titlebar/menu.mjs
+++ b/repo/integrated-titlebar/menu.mjs
@ -24,6 +24,5 @@ export default async function (api, db) {

  const $sidebar = document.querySelector(sidebarSelector),
    $windowButtons = await createWindowButtons(api, db);
-  $windowButtons.dataset.inEnhancerMenu = true;
  $sidebar.prepend($windowButtons);
 }
--- a/repo/registry.json
+++ b/repo/registry.json
@ -5,6 +5,7 @@

  "integrated-titlebar",
  "tray",
+  "always-on-top",

  "tweaks",
  "font-chooser",
--- a/repo/tray/mod.json
+++ b/repo/tray/mod.json
@ -26,7 +26,7 @@
      "type": "toggle",
      "key": "startup",
      "label": "open notion on startup",
-      "tooltip": "**if the 'run notion in the background' option is also enabled, the app will open in background on startup** (this option may require relaunching the app BEFORE restarting your system to properly take effect)",
+      "tooltip": "**if the 'run notion in the background' option is also enabled, the app will open in the background on startup** (this option may require relaunching the app BEFORE restarting your system to properly take effect)",
      "value": false
    },
    {