diff --git a/src/archive/corner-action.css b/src/archive/corner-action.css deleted file mode 100644 index fdff4ac..0000000 --- a/src/archive/corner-action.css +++ /dev/null @@ -1,55 +0,0 @@ -/** - * notion-enhancer: components - * (c) 2021 dragonwocky (https://dragonwocky.me/) - * (c) 2021 CloudHill (https://github.com/CloudHill) - * (https://notion-enhancer.github.io/) under the MIT license - */ - -#enhancer--corner-actions { - position: absolute; - bottom: 26px; - right: 26px; - z-index: 101; - cursor: default; - pointer-events: none; - display: flex; - flex-direction: row-reverse; -} - -#enhancer--corner-actions > div { - position: static !important; - width: 36px; - height: 36px; - margin-left: 12px; - pointer-events: auto; - border-radius: 100%; - font-size: 20px; - - display: flex; - align-items: center; - justify-content: center; - color: var(--theme--icon); - fill: var(--theme--icon); - background: var(--theme--ui_corner_action) !important; - box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px, - var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important; - - user-select: none; - cursor: pointer; -} -#enhancer--corner-actions > div:hover { - background: var(--theme--ui_corner_action-hover) !important; -} -#enhancer--corner-actions > div:active { - background: var(--theme--ui_corner_action-active) !important; -} -#enhancer--corner-actions > div.hidden { - display: none; -} - -#enhancer--corner-actions > div > svg { - width: 22px; - height: 22px; - color: var(--theme--icon); - fill: var(--theme--icon); -} diff --git a/src/archive/corner-action.mjs b/src/archive/corner-action.mjs deleted file mode 100644 index bf42f9b..0000000 --- a/src/archive/corner-action.mjs +++ /dev/null @@ -1,43 +0,0 @@ -/** - * notion-enhancer: components - * (c) 2021 dragonwocky (https://dragonwocky.me/) - * (c) 2021 CloudHill (https://github.com/CloudHill) - * (https://notion-enhancer.github.io/) under the MIT license - */ - -'use strict'; - -/** shared notion-style elements */ - -import { web } from '../index.mjs'; - -let $stylesheet, $cornerButtonsContainer; - -/** - * adds a button to notion's bottom right corner - * @param {string} icon - an svg string - * @param {function} listener - the function to call when the button is clicked - * @returns {Element} the appended corner action element - */ -export const addCornerAction = async (icon, listener) => { - if (!$stylesheet) { - $stylesheet = web.loadStylesheet('api/components/corner-action.css'); - $cornerButtonsContainer = web.html`
`; - } - - await web.whenReady(['.notion-help-button']); - const $helpButton = document.querySelector('.notion-help-button'), - $onboardingButton = document.querySelector('.onboarding-checklist-button'); - if ($onboardingButton) $cornerButtonsContainer.prepend($onboardingButton); - $cornerButtonsContainer.prepend($helpButton); - web.render( - document.querySelector('.notion-app-inner > .notion-cursor-listener'), - $cornerButtonsContainer - ); - - const $actionButton = web.html`
${icon}
`; - $actionButton.addEventListener('click', listener); - web.render($cornerButtonsContainer, $actionButton); - - return $actionButton; -}; diff --git a/src/common/markup.js b/src/common/markup.js index 5e91096..2b6d4d2 100644 --- a/src/common/markup.js +++ b/src/common/markup.js @@ -84,18 +84,18 @@ twind.install({ rules: [ ["text-(wrap|nowrap|balance|pretty)", "textWrap"], [/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons], + [/^size-\[([^\]]+)\]$/, ({ 1: $1 }) => ({ height: $1, width: $1 })], ], variants: [ - // https://github.com/tw-in-js/twind/blob/main/packages/preset-ext/src/variants.ts - [ - "not-([a-z-]+|\\[.+\\])", - ({ 1: $1 }) => `&:not(${($1[0] == "[" ? "" : ":") + $1})`, - ], ["children", "&>*"], ["siblings", "&~*"], ["sibling", "&+*"], [/^&/, (match) => match.input], [/^has-\[([^\]]+)\]/, (match) => `&:has(${match[1]})`], + [ + /^not-([a-z-]+|\[.+\])/, + ({ 1: $1 }) => `&:not(${($1[0] == "[" ? "" : ":") + $1})`, + ], ], }); diff --git a/src/common/system.js b/src/common/system.js index e702efb..f8cbe1b 100644 --- a/src/common/system.js +++ b/src/common/system.js @@ -142,10 +142,8 @@ const initDatabase = (namespace, fallbacks = {}) => { }, reloadApp = () => { if (IS_ELECTRON && !IS_RENDERER) { - const { app } = require("electron"), - args = process.argv.slice(1).filter((arg) => arg !== "--startup"); - app.relaunch({ args }); - app.exit(); + const { app } = require("electron"); + app.relaunch(), app.exit(); } else sendMessage("notion-enhancer", "reload-app"); }; diff --git a/src/core/client.mjs b/src/core/client.mjs index 0409aae..e4d2be3 100644 --- a/src/core/client.mjs +++ b/src/core/client.mjs @@ -107,7 +107,7 @@ const insertMenu = async (api, db) => { event.stopPropagation(); $modal.open(); }); - window.addEventListener("message", (event) => { + addEventListener("message", (event) => { // from embedded menu if (event.data?.channel !== "notion-enhancer") return; if (event.data?.action === "close-menu") $modal.close(); diff --git a/src/core/islands/MenuButton.mjs b/src/core/islands/MenuButton.mjs index b98690c..856bf6b 100644 --- a/src/core/islands/MenuButton.mjs +++ b/src/core/islands/MenuButton.mjs @@ -20,7 +20,7 @@ function MenuButton( transition hover:bg-[color:var(--theme--bg-hover)]`, }); return html`
-
+
${children}
@@ -29,9 +29,9 @@ function MenuButton(
@@ -301,21 +301,22 @@ function Panel({ // moves help button out of the way of open panel. // normally would place outside of an island, but in // this case is necessary for syncing up animations - const notionHelp = ".notion-help-button", - repositionHelp = async (width) => { - const $notionHelp = document.querySelector(notionHelp); - if (!$notionHelp) return; + const floatingButtons = + ".notion-enhancer--floating-buttons, .notion-help-button", + repositionFloatingButtons = async (width) => { + const $floatingButtons = document.querySelector(floatingButtons); + if (!$floatingButtons) return; width ??= await getWidth(); if (isNaN(width)) width = minWidth; if (!isPinned()) width = 0; const to = `${26 + width}px`, - from = $notionHelp.style.getPropertyValue("right"); + from = $floatingButtons.style.getPropertyValue("right"); if (from === to) return; - $notionHelp.style.setProperty("right", to); - animate($notionHelp, [({ right: from }, { right: to })]); - removeMutationListener(repositionHelp); + $floatingButtons.style.setProperty("right", to); + animate($floatingButtons, [({ right: from }, { right: to })]); + removeMutationListener(repositionFloatingButtons); }; - addMutationListener(notionHelp, repositionHelp); + addMutationListener(floatingButtons, repositionFloatingButtons); $panel.pin = () => { if (isPinned() || !panelViews.length) return; @@ -376,7 +377,7 @@ function Panel({ const $parent = $panel.parentElement || $panel; $parent.style.setProperty("--panel--width", `${width}px`); if ($parent !== $panel) $panel.style.removeProperty("--panel--width"); - repositionHelp(width); + repositionFloatingButtons(width); }; useState(["panelViews"], async ([panelViews = []]) => { diff --git a/src/core/islands/TopbarButton.mjs b/src/core/islands/TopbarButton.mjs index 53a5ddc..67523b6 100644 --- a/src/core/islands/TopbarButton.mjs +++ b/src/core/islands/TopbarButton.mjs @@ -1,6 +1,6 @@ /** * notion-enhancer - * (c) 2023 dragonwocky (https://dragonwocky.me/) + * (c) 2024 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ @@ -10,20 +10,20 @@ function TopbarButton({ icon, ...props }, ...children) { const { html, extendProps } = globalThis.__enhancerApi; extendProps(props, { tabindex: 0, - role: "button", class: `notion-enhancer--topbar-button text-[color:var(--theme--fg-primary)] mr-[2px] select-none h-[28px] w-[33px] duration-[20ms] transition inline-flex items-center justify-center rounded-[3px] hover:bg-[color:var(--theme--bg-hover)] has-[span]:w-auto &>span:(text-[14px] leading-[1.2] px-[8px]) - &[data-active]:bg-[color:var(--theme--bg-hover)]`, + &[data-active]:bg-[color:var(--theme--bg-hover)] + &>i:size-[20px]`, }); return html``; } diff --git a/src/core/menu/islands/Banner.mjs b/src/core/menu/islands/Banner.mjs index ffcda2e..c2d664a 100644 --- a/src/core/menu/islands/Banner.mjs +++ b/src/core/menu/islands/Banner.mjs @@ -80,7 +80,7 @@ function Banner({ updateAvailable, isDevelopmentBuild }) { >