additional menu option descriptions on hover

This commit is contained in:
dragonwocky 2020-10-23 16:49:58 +11:00
parent f3eda9a34b
commit d307a2bedf
8 changed files with 92 additions and 12 deletions

View File

@ -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',

View File

@ -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 *,

View File

@ -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(
'<svg',
`<svg data-tooltip="${opt.description.replace(/"/g, '&quot;')}"`
)
: '';
switch (opt.type) {
case 'toggle':
$opt = `
<input type="checkbox" id="${opt.type}_${id}--${opt.key}"
${store(id, { [opt.key]: opt.value })[opt.key] ? 'checked' : ''}/>
<label for="${opt.type}_${id}--${opt.key}">
<span class="name">${opt.label}</span>
<span class="name">${opt.label}${description}</span>
<span class="switch"><span class="dot"></span></span>
</label>
`;
break;
case 'select':
$opt = `
<label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
<label for="${opt.type}_${id}--${opt.key}">${
opt.label
}${description}</label>
<select id="${opt.type}_${id}--${opt.key}">
${opt.value
.map((val) => `<option value="${val}">${val}</option>`)
@ -414,7 +428,9 @@ window['__start'] = async () => {
break;
case 'input':
$opt = `
<label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
<label for="${opt.type}_${id}--${opt.key}">${
opt.label
}${description}</label>
<input type="${typeof value === 'number' ? 'number' : 'text'}" id="${
opt.type
}_${id}--${opt.key}">
@ -422,7 +438,7 @@ window['__start'] = async () => {
break;
case 'color':
$opt = `
<label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
<label for="${opt.type}_${id}--${opt.key}">${opt.label}${description}</label>
<input type="button" id="${opt.type}_${id}--${opt.key}">
`;
break;
@ -438,7 +454,7 @@ window['__start'] = async () => {
}>
<label for="${opt.type}_${id}--${opt.key}">
<span class="label">
<span class="name">${opt.label}</span>
<span class="name">${opt.label}${description}</span>
<button class="clear"></button>
</span>
<span class="choose">
@ -611,6 +627,25 @@ window['__start'] = async () => {
.forEach((checkbox) =>
checkbox.addEventListener('click', (event) => event.target.blur())
);
const $tooltip = document.querySelector('#tooltip');
document.querySelectorAll('[data-tooltip]').forEach((el) => {
el.addEventListener('mouseenter', (e) => {
$tooltip.innerText = el.getAttribute('data-tooltip');
$tooltip.classList.add('active');
});
el.addEventListener('mouseover', (e) => {
$tooltip.style.top = e.clientY - $tooltip.clientHeight + 'px';
$tooltip.style.left =
e.clientX < window.innerWidth / 2 ? e.clientX + 'px' : '';
$tooltip.style.right =
e.clientX > window.innerWidth / 2
? window.innerWidth - e.clientX + 'px'
: '';
});
el.addEventListener('mouseleave', (e) =>
$tooltip.classList.remove('active')
);
});
conflicts.check();
// draggable re-ordering

View File

Before

Width:  |  Height:  |  Size: 929 B

After

Width:  |  Height:  |  Size: 929 B

View File

@ -31,6 +31,7 @@
<div id="popup-overlay" class="close-modal"></div>
<div id="colorpicker"></div>
</section>
<span id="tooltip"></span>
<script>
window['__start']();
</script>

View File

@ -17,42 +17,55 @@ module.exports = {
{
key: 'autoresolve',
label: 'auto-resolve theme conflicts',
description:
'when a theme is enabled any other themes of the same mode (light/dark) will be disabled.',
type: 'toggle',
value: false,
},
{
key: 'openhidden',
label: 'hide app on open',
description:
'app can be made visible by clicking the tray icon or using the hotkey.',
type: 'toggle',
value: false,
},
{
key: 'maximized',
label: 'auto-maximise windows',
description:
'whenever a window is un-hidden or is created it will be maximised.',
type: 'toggle',
value: false,
},
{
key: 'close_to_tray',
label: 'close window to the tray',
description: `pressing the × close button will hide the app instead of quitting it.
it can be re-shown by clicking the tray icon or using the hotkey.`,
type: 'toggle',
value: true,
},
{
key: 'frameless',
label: 'integrated titlebar',
description: `replace the native titlebar with buttons inset into the app.`,
type: 'toggle',
value: true,
},
{
key: 'dragarea_height',
label: 'height of frameless dragarea:',
description: `the rectangle added at the top of a window in "integrated titlebar" mode,
used to drag/move the window.`,
type: 'input',
value: 15,
},
{
key: 'tiling_mode',
label: 'tiling window manager mode',
description: `completely remove the close/minimise/maximise buttons -
this is for a special type of window manager. if you don't understand it, don't use it.`,
type: 'toggle',
value: false,
},
@ -71,18 +84,25 @@ module.exports = {
{
key: 'hotkey',
label: 'window display hotkey:',
description: 'used to toggle hiding/showing all app windows.',
type: 'input',
value: 'CommandOrControl+Shift+A',
},
{
key: 'menu_toggle',
label: 'open enhancements menu hotkey:',
description:
'used to toggle opening/closing this menu while notion is focused.',
type: 'input',
value: 'Alt+E',
},
{
key: 'default_page',
label: 'open to default page id/url:',
label: 'default page id/url:',
description: `every new tab/window that isn't opening a url via the notion://
protocol will load this page. to get a page link from within the app,
go to the triple-dot menu and click "copy link".
leave blank to just load the last page you opened.`,
type: 'input',
value: '',
},

View File

@ -46,7 +46,7 @@ module.exports = {
return readable;
},
questionBubble = fs
.readFileSync(path.resolve(`${__dirname}/question.svg`))
.readFileSync(path.resolve(`${__dirname}/../core/icons/question.svg`))
.toString();
document.addEventListener('readystatechange', (event) => {

View File

@ -47,8 +47,7 @@
position: absolute;
padding: 0.25em 0.5em;
border-radius: 3px;
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
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);