From 1d9785f8042d828cfdebe1ea5063208d6c769cb5 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Mon, 26 Apr 2021 15:12:24 +1000 Subject: [PATCH] tooltips wip --- .../menu.css | 23 +++++- .../menu.html | 12 ++-- .../menu.js | 70 +++++++++++++------ .../mod.json | 15 ++-- 4 files changed, 83 insertions(+), 37 deletions(-) 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 e23d35f..524007d 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css @@ -21,6 +21,7 @@ html[class] { body { padding: 2rem 2.5rem; + position: relative; margin: 0; background: var(--theme--sidebar); color: var(--theme--text); @@ -39,7 +40,7 @@ header > * { margin: 0 1.25rem 0 0; font-size: var(--theme--font_heading1-size); } -header h1 a:not([data-active]) { +header h1 a:not([data-view-active]) { text-decoration: none; } header h1 img { @@ -61,7 +62,7 @@ header h1 svg[data-icon='code'] { margin-right: 0.3em; } -img[data-target='notion'] { +img[data-view-target='notion'] { cursor: pointer; } @@ -95,8 +96,9 @@ img[data-target='notion'] { [data-container='mod'] > .documentation--body { grid-column: span 2; } - body { + [data-container='mod'] { overflow: hidden; + max-height: calc(100vh); } } @media (min-width: 1350px) { @@ -372,6 +374,21 @@ label > span:not([class]) { overflow-x: auto; } +.tooltip--list > div { + position: absolute; + background: var(--theme--tooltip); + color: var(--theme--tooltip-text); + font-size: var(--theme--font_ui_small-size); + padding: 0.5rem; + 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 { + margin: 0.25rem 0; +} + .notification--list { position: absolute; bottom: 1.5rem; 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 43d89a0..5ea8727 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html @@ -8,11 +8,8 @@

- library + + library

website @@ -23,9 +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 d6de78d..d62cb1e 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js @@ -15,9 +15,30 @@ for (let mod of await registry.get()) { } } -document.querySelector('img[data-target="notion"]').addEventListener('click', env.focusNotion); +document + .querySelector('img[data-view-target="notion"]') + .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'; + }); + $target.addEventListener('mousemove', (event) => { + $tooltip.style.top = event.clientY - $tooltip.clientHeight + 'px'; + $tooltip.style.left = + event.clientX < window.innerWidth / 2 ? event.clientX + 20 + 'px' : ''; + }); + $target.addEventListener('mouseout', (event) => { + $tooltip.style.display = ''; + }); + }, +}; + const components = {}; components.card = { preview: ({ preview = '' }) => @@ -87,25 +108,26 @@ components.card = { }, }; components.options = { - async toggle(id, { key, label }) { + async toggle(id, { key, label, description }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); + >`); opt.addEventListener('change', (event) => storage.set(id, key, event.target.checked)); + tooltips._generate(opt, description); return opt; }, - async select(id, { key, label, values }) { + async select(id, { key, label, description, values }) { 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); return opt; }, - async text(id, { key, label }) { + async text(id, { key, label, description }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); @@ -136,26 +159,28 @@ components.options = { 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); return opt; }, - async number(id, { key, label }) { + async number(id, { key, label, description }) { 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); return opt; }, - async file(id, { key, label, extensions }) { + async file(id, { key, label, description, extensions }) { const state = await storage.get(id, key), opt = web.createElement(web.html``); opt.addEventListener('change', (event) => { const file = event.target.files[0], @@ -189,6 +209,12 @@ components.options = { opt.addEventListener('click', (event) => { document.documentElement.scrollTop = 0; }); + tooltips._generate( + opt, + `${description}\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.` + ); return opt; }, async _generate(mod) { @@ -270,7 +296,9 @@ const views = { this.$container.innerHTML = ''; this.$container.style.opacity = ''; this.$container.dataset.container = ''; - document.querySelector('[data-target][data-active]')?.removeAttribute('data-active'); + document + .querySelector('[data-view-target][data-view-active]') + ?.removeAttribute('data-view-active'); res(); }, 200); }); @@ -326,14 +354,14 @@ const views = { }, async mod(mod) { this.$container.dataset.container = 'mod'; - document.querySelector('header [data-target="library"]').dataset.active = true; + 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.querySelector('header [data-target="library"]').dataset.active = true; + 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)); }, 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 ca9e365..7653ee1 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json @@ -25,31 +25,36 @@ "type": "toggle", "key": "toggle", "label": "toggle", - "value": true + "value": true, + "description": "a toggle" }, { "type": "select", "key": "select", "label": "select", - "values": ["option a", "option b", "option c"] + "values": ["option a", "option b", "option c"], + "description": "a select" }, { "type": "text", "key": "text", "label": "text", - "value": "default" + "value": "default", + "description": "a text input" }, { "type": "number", "key": "number", "label": "number", - "value": 0 + "value": 0, + "description": "a number input" }, { "type": "file", "key": "file", "label": "file picker (.css only)", - "extensions": [".css"] + "extensions": [".css"], + "description": "a file picker" } ] }