diff --git a/extension/helpers.js b/extension/helpers.js index 2cf637e..b332a0c 100644 --- a/extension/helpers.js +++ b/extension/helpers.js @@ -406,9 +406,9 @@ registry.validate = async (mod, err, check) => { ), check('option.label', option.label, typeof option.label === 'string'), check( - 'option.description', - option.description, - !option.description || typeof option.description === 'string' + 'option.tooltip', + option.tooltip, + !option.tooltip || typeof option.tooltip === 'string' ), ]; }) diff --git a/extension/icons/fa/question-circle.svg b/extension/icons/fa/question-circle.svg new file mode 100644 index 0000000..b44b144 --- /dev/null +++ b/extension/icons/fa/question-circle.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css index 524007d..2674e5d 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css @@ -26,6 +26,7 @@ body { background: var(--theme--sidebar); color: var(--theme--text); font-family: var(--theme--font_sans); + min-height: 100vh; } body a { color: inherit; @@ -66,7 +67,7 @@ img[data-view-target='notion'] { cursor: pointer; } -[data-container] { +main { display: grid; grid-gap: 1.25em; grid-template-columns: 1fr; @@ -74,62 +75,62 @@ img[data-view-target='notion'] { transition: opacity 200ms ease-out; } @media (min-width: 550px) { - [data-container] { + main { grid-template-columns: 1fr 1fr; } - [data-container='mod'] > .documentation--buttons { + [data-view='mod'] main > .documentation--buttons { grid-column: span 2; } - [data-container='mod'] .library--card, + [data-view='mod'] main .library--card, .documentation--body { max-height: calc(100vh - 10rem); overflow-y: auto; } + [data-view='mod'] { + overflow: hidden; + height: 100vh; + } } @media (min-width: 850px) { - [data-container] { + main { grid-template-columns: 1fr 1fr 1fr; } - [data-container='mod'] > .documentation--buttons { + [data-view='mod'] main > .documentation--buttons { grid-column: span 3; } - [data-container='mod'] > .documentation--body { + [data-view='mod'] main > .documentation--body { grid-column: span 2; } - [data-container='mod'] { - overflow: hidden; - max-height: calc(100vh); - } } @media (min-width: 1350px) { - [data-container] { + main { grid-template-columns: 1fr 1fr 1fr 1fr; } - [data-container='mod'] > .documentation--buttons { + [data-view='mod'] main > .documentation--buttons { grid-column: span 4; } - [data-container='mod'] > .documentation--body { + [data-view='mod'] main > .documentation--body { grid-column: span 3; } } @media (min-width: 2050px) { - [data-container] { + main { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } - [data-container='mod'] > .documentation--buttons { + [data-view='mod'] main > .documentation--buttons { grid-column: span 5; } - [data-container='mod'] > .documentation--body { + [data-view='mod'] main > .documentation--body { grid-column: span 4; } } -[data-container] article { +main article { border-radius: 5px; box-shadow: rgb(0 0 0 / 10%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px; border: 1px solid var(--theme--divider); background: var(--theme--page); } -[data-container] article img { +main article img { max-width: 100%; } @@ -244,6 +245,12 @@ label p > span:not([class]), label > span:not([class]) { font-size: 1rem; } +label [data-icon='fa/question-circle'] { + height: var(--theme--font_ui_small-size); + width: var(--theme--font_ui_small-size); + margin-left: 0.25em; + margin-bottom: -1px; +} .library--toggle_label > p, .library--toggle_label > p, .library--select_label > p, @@ -255,7 +262,6 @@ label > span:not([class]) { .library--toggle_label > :not(input) { align-items: center; display: flex; - cursor: pointer; --toggle--bg: var(--theme--toggle_off); --toggle--translation: 0%; } @@ -267,6 +273,7 @@ label > span:not([class]) { display: block; border-radius: 40px; background: var(--toggle--bg); + cursor: pointer; } .library--toggle_label > :not(input) .library--toggle::after { content: ''; @@ -319,6 +326,7 @@ label > span:not([class]) { } .library--select_label .library--select select { outline: none; + cursor: pointer; } .library--select_label .library--select select option { background: var(--theme--tag_select); @@ -327,6 +335,7 @@ label > span:not([class]) { .library--file_label .library--file { padding: 0; display: flex; + cursor: pointer; } .library--select_label .library--select > :first-child, .library--file_label .library--file > :first-child { @@ -365,7 +374,7 @@ label > span:not([class]) { .library--card > div { padding: 1rem; } -[data-container='mod'] .library--card { +[data-view='mod'] main .library--card { overflow-x: auto; } .documentation--body { @@ -374,18 +383,18 @@ label > span:not([class]) { overflow-x: auto; } -.tooltip--list > div { +.tooltip { position: absolute; background: var(--theme--tooltip); color: var(--theme--tooltip-text); font-size: var(--theme--font_ui_small-size); - padding: 0.5rem; + padding: 0.15rem 0.4rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; border-radius: 3px; max-width: 20rem; display: none; } -.tooltip--list p { +.tooltip p { margin: 0.25rem 0; } diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html index 5ea8727..9d659f7 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html @@ -5,7 +5,7 @@ notion-enhancer - +

@@ -20,8 +20,8 @@

support

-
-
+
+
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js index d62cb1e..5860ad7 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js @@ -20,21 +20,25 @@ document .addEventListener('click', env.focusNotion); web.hotkeyListener(['Ctrl', 'Alt', 'E'], env.focusNotion); -const tooltips = { - $list: document.querySelector('.tooltip--list'), - _generate($target, text) { - const $tooltip = web.createElement(web.html`
${fmt.md.render(text)}
`); - this.$list.appendChild($tooltip); - $target.addEventListener('mouseover', (event) => { - $tooltip.style.display = 'block'; +const hovertip = { + $el: document.querySelector('.tooltip'), + add($parent, selector, text) { + text = fmt.md.render(text); + $parent.addEventListener('mouseover', (event) => { + if (event.target.matches(selector) || event.target.matches(`${selector} *`)) { + this.$el.innerHTML = text; + this.$el.style.display = 'block'; + } }); - $target.addEventListener('mousemove', (event) => { - $tooltip.style.top = event.clientY - $tooltip.clientHeight + 'px'; - $tooltip.style.left = + $parent.addEventListener('mousemove', (event) => { + this.$el.style.top = event.clientY - this.$el.clientHeight + 'px'; + this.$el.style.left = event.clientX < window.innerWidth / 2 ? event.clientX + 20 + 'px' : ''; }); - $target.addEventListener('mouseout', (event) => { - $tooltip.style.display = ''; + $parent.addEventListener('mouseout', (event) => { + if (event.target.matches(selector) || event.target.matches(`${selector} *`)) { + this.$el.style.display = ''; + } }); }, }; @@ -108,7 +112,7 @@ components.card = { }, }; components.options = { - async toggle(id, { key, label, description }) { + async toggle(id, { key, label, tooltip }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); +

+ ${web.escapeHtml(label)} + + +

+ `); opt.addEventListener('change', (event) => storage.set(id, key, event.target.checked)); - tooltips._generate(opt, description); + hovertip.add(opt, '[data-tooltip]', tooltip); return opt; }, - async select(id, { key, label, description, values }) { + async select(id, { key, label, tooltip, values }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); opt.querySelector('textarea').addEventListener('input', (event) => { event.target.style.removeProperty('--txt--scroll-height'); event.target.style.setProperty('--txt--scroll-height', event.target.scrollHeight + 'px'); }); opt.addEventListener('change', (event) => storage.set(id, key, event.target.value)); - tooltips._generate(opt, description); + hovertip.add(opt, '[data-tooltip]', tooltip); return opt; }, - async number(id, { key, label, description }) { + async number(id, { key, label, tooltip }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); opt.addEventListener('change', (event) => storage.set(id, key, event.target.value)); - tooltips._generate(opt, description); + hovertip.add(opt, '[data-tooltip]', tooltip); return opt; }, - async file(id, { key, label, description, extensions }) { + async file(id, { key, label, tooltip, extensions }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); opt.addEventListener('change', (event) => { @@ -209,9 +223,10 @@ components.options = { opt.addEventListener('click', (event) => { document.documentElement.scrollTop = 0; }); - tooltips._generate( + hovertip.add( opt, - `${description}\n\n**warning:** browser extensions do not have true filesystem access, + '[data-tooltip]', + `${tooltip}\n\n**warning:** browser extensions do not have true filesystem access, so the content of the file is saved on selection. after editing it, the file will need to be re-selected.` ); @@ -258,7 +273,7 @@ components.documentation = { }, }; const views = { - $container: document.querySelector('[data-container]'), + $container: document.querySelector('main'), _router(event) { event.preventDefault(); let anchor, @@ -295,7 +310,7 @@ const views = { setTimeout(() => { this.$container.innerHTML = ''; this.$container.style.opacity = ''; - this.$container.dataset.container = ''; + document.body.dataset.view = ''; document .querySelector('[data-view-target][data-view-active]') ?.removeAttribute('data-view-active'); @@ -347,20 +362,22 @@ const views = { document.querySelectorAll('[data-icon]').forEach((icon) => fs.getText(`icons/${icon.dataset.icon}.svg`).then((svg) => { svg = web.createElement(svg); - svg.dataset.icon = icon.dataset.icon; + for (const attr of icon.attributes) { + svg.setAttribute(attr.name, attr.value); + } icon.replaceWith(svg); }) ); }, async mod(mod) { - this.$container.dataset.container = 'mod'; + document.body.dataset.view = 'mod'; document.querySelector('header [data-view-target="library"]').dataset.active = true; this.$container.append(await components.documentation.buttons(mod)); this.$container.append(await components.options._generate(mod)); this.$container.append(await components.documentation.readme(mod)); }, async library() { - this.$container.dataset.container = 'library'; + document.body.dataset.view = 'library'; document.querySelector('header [data-view-target="library"]').dataset.active = true; for (let mod of await registry.get()) this.$container.append(await components.card._generate(mod)); @@ -413,7 +430,7 @@ const notifications = { }, 100); return $notif; }, - async load() { + async fetch() { const notifications = { list: await fs.getJSON('https://notion-enhancer.github.io/notifications.json'), dismissed: await storage.get(_id, 'notifications', []), @@ -441,7 +458,7 @@ const notifications = { } }, }; -notifications.load(); +notifications.fetch(); async function theme() { document.documentElement.className = `notion-${ diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json index 7653ee1..f970b8b 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json @@ -26,35 +26,35 @@ "key": "toggle", "label": "toggle", "value": true, - "description": "a toggle" + "tooltip": "a toggle" }, { "type": "select", "key": "select", "label": "select", "values": ["option a", "option b", "option c"], - "description": "a select" + "tooltip": "a select" }, { "type": "text", "key": "text", "label": "text", "value": "default", - "description": "a text input" + "tooltip": "a text input" }, { "type": "number", "key": "number", "label": "number", "value": 0, - "description": "a number input" + "tooltip": "a number input" }, { "type": "file", "key": "file", "label": "file picker (.css only)", "extensions": [".css"], - "description": "a file picker" + "tooltip": "a file picker" } ] }