From c76750c0888130abf627787f6b22e4dfbeca3605 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 23 Oct 2020 16:49:58 +1100 Subject: [PATCH] additional menu option descriptions on hover --- CHANGELOG.md | 2 +- CONTRIBUTING.md | 2 +- DOCUMENTATION.md | 16 +++--- mods/core/client.js | 2 + mods/core/css/menu.css | 23 +++++++++ mods/core/enhancerMenu.js | 51 ++++++++++++++++--- .../{word-counter => core/icons}/question.svg | 0 mods/core/menu.html | 1 + mods/core/mod.js | 22 +++++++- mods/word-counter/mod.js | 2 +- mods/word-counter/styles.css | 3 +- 11 files changed, 103 insertions(+), 21 deletions(-) rename mods/{word-counter => core/icons}/question.svg (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index ab57058..b4d107d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ a flexibility update. - improved: menu will now respect integrated titlebar setting. - improved: use keyup listeners instead of a globalShortcut for the enhancements menu toggle. - improved: overwrite `app.asar.bak` if already exists (e.g. for app updates). +- improved: additional menu option descriptions on hover. - bugfix: removed messenger emoji set as the provider no longer supports it. - bugfix: remove shadow around light mode board headers \+ minor text colour fixes for night shift theming. @@ -60,7 +61,6 @@ a fork of notion-deb-builder that does generate an app.asar has been created and - bugfix: night shift working on macOS. - bugfix: windows are properly hidden/shown on macOS. - extension: "tweaks" = common style/layout changes. -- improved: additionally menu item descriptions on hover. ### v0.9.1 (2020-09-26) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 515c48f..4d3399c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -49,7 +49,7 @@ modules are either **extensions** or **themes**. each module is separately versioned, following the [semver](https://semver.org/) scheme. depending on the content and scale of a contribution, it may constitute an update on its own or may be merged into a larger update. -to keep a consistent informative code style it is preferred to name variables with +to keep a consistent & informative code style it is preferred to name variables with `snake_case`, functions/methods with `camelCase`, and classes with `PascalCase`. if a variable is a reference to a DOM element, it may be helpful to prefix it with a `$`. diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index ed22a83..7125130 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -51,6 +51,7 @@ module.exports = { options?: Array<{ key: String, label: String, + description?: String, type: String in ['toggle', 'select', 'input', 'file'], value: Boolean or Array or String or Number or null }>, @@ -94,13 +95,14 @@ if you'd rather customise this, pass this object: #### options -| key | value | type | -| ---------- | ---------------------------------------------------------------------------------------- | ----------------- | -| key | **required:** key to save value to the mod `store` | _string_ | -| label | **required:** short description/name of option to be shown in menu | _string_ | -| type | **required:** input type (see below) | _string_ | -| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | -| value | **optional:** default or possible value/s for option | see below | +| key | value | type | +| ----------- | ---------------------------------------------------------------------------------------- | ----------------- | +| key | **required:** key to save value to the mod `store` | _string_ | +| label | **required:** short description/name of option to be shown in menu | _string_ | +| description | **optional:** extended information to be shown on hover | _string_ | +| type | **required:** input type (see below) | _string_ | +| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | +| value | **optional:** default or possible value/s for option | see below | | type | value | | ------ | -------------------- | diff --git a/mods/core/client.js b/mods/core/client.js index 2d8d458..d094fea 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -156,8 +156,10 @@ module.exports = (store, __exports) => { '--theme--sidebar', '--theme--overlay', '--theme--dragarea', + '--theme--box-shadow_strong', '--theme--font_sans', '--theme--font_code', + '--theme--font_label-size', '--theme--scrollbar', '--theme--scrollbar-border', '--theme--scrollbar_hover', diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css index 4e05425..d9a6b4a 100644 --- a/mods/core/css/menu.css +++ b/mods/core/css/menu.css @@ -342,6 +342,29 @@ s { margin-bottom: 0.5em; } +svg[data-tooltip] { + height: 1em; + width: 1em; + margin: 0 0 -2px 1px; + color: var(--theme--text_ui_info); +} +#tooltip { + pointer-events: none; + position: absolute; + padding: 0.25em 0.5em 0.5em 0.5em; + margin: 0 1em; + border-radius: 3px; + box-shadow: var(--theme--box-shadow_strong); + border-right-width: 1px; + font-size: calc(var(--theme--font_label-size) * 0.8); + background: var(--theme--interactive_hover); + opacity: 0; + transition: opacity 120ms ease-in; +} +#tooltip.active { + opacity: 1; +} + .toggle *, .input *, .select *, diff --git a/mods/core/enhancerMenu.js b/mods/core/enhancerMenu.js index aacb52e..28750ce 100644 --- a/mods/core/enhancerMenu.js +++ b/mods/core/enhancerMenu.js @@ -271,10 +271,13 @@ window['__start'] = async () => { let text = ''; for (let $node of elem.childNodes) { if ($node.nodeType === 3) text += $node.textContent; - if ($node.nodeType === 1) + if ($node.nodeType === 1) { + if ($node.getAttribute('data-tooltip')) + text += $node.getAttribute('data-tooltip'); text += ['text', 'number'].includes($node.type) ? $node.value : innerText($node); + } } return text; } @@ -387,24 +390,35 @@ window['__start'] = async () => { } const file_icon = await fs.readFile( - path.resolve(`${__dirname}/icons/file.svg`) - ); + path.resolve(`${__dirname}/icons/file.svg`) + ), + question_icon = ( + await fs.readFile(path.resolve(`${__dirname}/icons/question.svg`)) + ).toString(); function createOption(opt, id) { let $opt; + const description = opt.description + ? question_icon.replace( + ' `; break; case 'select': $opt = ` - + @@ -422,7 +438,7 @@ window['__start'] = async () => { break; case 'color': $opt = ` - + `; break; @@ -438,7 +454,7 @@ window['__start'] = async () => { }>