From 85dbb33fab8b3ccb5dd977b6a77691de45c70428 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Mon, 18 Oct 2021 17:27:53 +1100 Subject: [PATCH] panel: work without right-sidebar pre-existing + smaller tweaks inc. icon pos, default uuid gen, clickthrough hover area to topbar --- api/components/_.mjs | 2 +- api/components/panel.css | 19 ++++++++++++------- api/components/panel.mjs | 29 ++++++++++++++++++++++------- api/components/tooltip.css | 4 +++- 4 files changed, 38 insertions(+), 16 deletions(-) diff --git a/api/components/_.mjs b/api/components/_.mjs index 0446dfe..cd0cc0d 100644 --- a/api/components/_.mjs +++ b/api/components/_.mjs @@ -29,7 +29,7 @@ export { feather } from './feather.mjs'; /** * adds a view to the enhancer's side panel * @param {object} panel - information used to construct and render the panel - * @param {string} panel.id - a uuid, used to restore the last open view on reload + * @param {string} [panel.id] - a uuid, used to restore the last open view on reload * @param {string} panel.icon - an svg string * @param {string} panel.title - the name of the view * @param {Element} panel.$content - an element containing the content of the view diff --git a/api/components/panel.css b/api/components/panel.css index c0fe792..532926d 100644 --- a/api/components/panel.css +++ b/api/components/panel.css @@ -15,7 +15,7 @@ max-height: 100%; z-index: 999; position: absolute; - top: 0; + top: 45px; right: 0; flex-grow: 0; flex-shrink: 0; @@ -23,22 +23,24 @@ } #enhancer--panel-hover-trigger[data-enhancer-panel-pinned] { /* taking up the physical space of the panel to move topbar buttons */ + top: 0; position: relative; width: var(--component--panel-width); } -.notion-cursor-listener > div[style*='flex-end'] { - transition: margin-right 300ms ease-in-out; -} -.notion-cursor-listener > div[style*='flex-end'][data-enhancer-panel-pinned] { - margin-right: var(--component--panel-width); -} .notion-frame { transition: padding-right 300ms ease-in-out; } .notion-frame[data-enhancer-panel-pinned] { padding-right: var(--component--panel-width); } +.notion-cursor-listener > div[style*='flex-end'] { + transition: margin-right 300ms ease-in-out; +} +.notion-cursor-listener > div[style*='flex-end'][data-enhancer-panel-pinned], +#enhancer--panel[data-enhancer-panel-pinned] + div[style*='flex-end'] { + margin-right: var(--component--panel-width); +} #enhancer--panel { z-index: 999; @@ -85,6 +87,9 @@ height: 1em; width: 1em; } +.enhancer--panel-view-icon { + margin-bottom: -2px; +} .enhancer--panel-view-title .enhancer--panel-view-title-text { font-size: 0.9em; margin: 0 0 0 0.75em; diff --git a/api/components/panel.mjs b/api/components/panel.mjs index 32c5d03..44a6735 100644 --- a/api/components/panel.mjs +++ b/api/components/panel.mjs @@ -12,7 +12,7 @@ * @module notion-enhancer/api/components/side-panel */ -import { web, components, registry } from '../_.mjs'; +import { fmt, web, components, registry } from '../_.mjs'; const db = await registry.db('36a2ffc9-27ff-480e-84a7-c7700a7d232d'); web.loadStylesheet('api/components/panel.css'); @@ -47,7 +47,9 @@ const $panel = web.html`
`, panelPinnedAttr = 'data-enhancer-panel-pinned', isPinned = () => $panel.hasAttribute(panelPinnedAttr), togglePanel = () => { - const $elems = [$notionRightSidebar, $notionFrame, $hoverTrigger, $panel]; + const $elems = [$notionFrame, $notionRightSidebar, $hoverTrigger, $panel].filter( + ($el) => $el + ); if (isPinned()) { closeSwitcher(); for (const $elem of $elems) $elem.removeAttribute(panelPinnedAttr); @@ -180,10 +182,20 @@ const $panel = web.html`
`, }; async function createPanel() { - const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]'; - await web.whenReady([notionRightSidebarSelector]); $notionFrame = document.querySelector('.notion-frame'); + + const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]', + detectRightSidebar = () => { + if (!document.contains($notionRightSidebar)) { + $notionRightSidebar = document.querySelector(notionRightSidebarSelector); + if (isPinned() && $notionRightSidebar) { + $notionRightSidebar.setAttribute(panelPinnedAttr, 'true'); + } + } + }; $notionRightSidebar = document.querySelector(notionRightSidebarSelector); + web.addDocumentObserver(detectRightSidebar, [notionRightSidebarSelector]); + if (await db.get(['panel.pinned'])) togglePanel(); web.addHotkeyListener(await db.get(['panel.hotkey']), togglePanel); $pinnedToggle.addEventListener('click', (event) => { @@ -200,7 +212,10 @@ async function createPanel() { await enablePanelResize(); await createViews(); - $notionRightSidebar.after($hoverTrigger, $panel); + const cursorListenerSelector = + '.notion-cursor-listener > :last-child[style^="position: absolute"]'; + await web.whenReady([cursorListenerSelector]); + document.querySelector(cursorListenerSelector).before($hoverTrigger, $panel); } async function enablePanelResize() { @@ -224,12 +239,12 @@ async function createViews() { /** * adds a view to the enhancer's side panel * @param {object} panel - information used to construct and render the panel - * @param {string} panel.id - a uuid, used to restore the last open view on reload + * @param {string} [panel.id] - a uuid, used to restore the last open view on reload * @param {string} panel.icon - an svg string * @param {string} panel.title - the name of the view * @param {Element} panel.$content - an element containing the content of the view */ -export const addPanelView = async ({ id, icon, title, $content }) => { +export const addPanelView = async ({ id = fmt.uuidv4(), icon, title, $content }) => { const view = { id, $icon: web.html` diff --git a/api/components/tooltip.css b/api/components/tooltip.css index bcbbcb6..b807357 100644 --- a/api/components/tooltip.css +++ b/api/components/tooltip.css @@ -5,6 +5,7 @@ */ #enhancer--tooltip { + font-family: var(--theme--font_sans); background: var(--theme--ui_tooltip); border-radius: 3px; box-shadow: var(--theme--ui_shadow) 0px 1px 4px; @@ -15,8 +16,9 @@ line-height: 1.4; max-width: 20rem; overflow: hidden; - padding: 4px 8px; + padding: 2px 8px 4px 8px; position: absolute; + z-index: 999999999999999999; } #enhancer--tooltip p { margin: 0.25rem 0;