diff --git a/repo/always-on-top/button.css b/repo/always-on-top/button.css new file mode 100644 index 0000000..19e1e97 --- /dev/null +++ b/repo/always-on-top/button.css @@ -0,0 +1,45 @@ +/* + * notion-enhancer: integrated titlebar + * (c) 2021 dragonwocky (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); +} diff --git a/repo/always-on-top/button.mjs b/repo/always-on-top/button.mjs new file mode 100644 index 0000000..1d5dc91 --- /dev/null +++ b/repo/always-on-top/button.mjs @@ -0,0 +1,43 @@ +/* + * notion-enhancer: always on top + * (c) 2021 dragonwocky (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'])) || + ` + + `, + unpinIcon = + (await db.get(['unpin_icon'])) || + ` + + `; + pinIcon = pinIcon.trim(); + unpinIcon = unpinIcon.trim(); + + pinIcon = + pinIcon.startsWith('') ? pinIcon : web.escape(pinIcon); + unpinIcon = + unpinIcon.startsWith('') + ? unpinIcon + : web.escape(unpinIcon); + + const $button = web.html`
`, + $pin = web.html``, + $unpin = web.html``; + 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; +}; diff --git a/repo/always-on-top/client.mjs b/repo/always-on-top/client.mjs new file mode 100644 index 0000000..6ddba6a --- /dev/null +++ b/repo/always-on-top/client.mjs @@ -0,0 +1,17 @@ +/* + * notion-enhancer: always on top + * (c) 2021 dragonwocky (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); +} diff --git a/repo/always-on-top/menu.mjs b/repo/always-on-top/menu.mjs new file mode 100644 index 0000000..142659f --- /dev/null +++ b/repo/always-on-top/menu.mjs @@ -0,0 +1,20 @@ +/* + * notion-enhancer: always on top + * (c) 2021 dragonwocky (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); +} diff --git a/repo/always-on-top/mod.json b/repo/always-on-top/mod.json new file mode 100644 index 0000000..9f07bc2 --- /dev/null +++ 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": "" + } + ] +} diff --git a/repo/integrated-titlebar/buttons.css b/repo/integrated-titlebar/buttons.css index 85d0799..68abbf0 100644 --- 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; } diff --git a/repo/integrated-titlebar/menu.mjs b/repo/integrated-titlebar/menu.mjs index 62a5466..2ca7391 100644 --- 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); } diff --git a/repo/registry.json b/repo/registry.json index 4c8388b..14a79d7 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -5,6 +5,7 @@ "integrated-titlebar", "tray", + "always-on-top", "tweaks", "font-chooser", diff --git a/repo/tray/mod.json b/repo/tray/mod.json index b88c81e..df5aad4 100644 --- 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 }, {