mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
additional menu option descriptions on hover
This commit is contained in:
parent
84e895dccc
commit
c76750c088
GPG Key ID:
C7A48B7846AA706D
@ -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)
|
||||
|
||||
|
||||
@ -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 `$`.
|
||||
|
||||
|
||||
@ -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<String> 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\<string\>_ |
|
||||
| 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\<string\>_ |
|
||||
| value | **optional:** default or possible value/s for option | see below |
|
||||
|
||||
| type | value |
|
||||
| ------ | -------------------- |
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 *,
|
||||
|
||||
@ -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, '"')}"`
|
||||
)
|
||||
: '';
|
||||
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
|
||||
|
||||
|
Before Width: | Height: | Size: 929 B After Width: | Height: | Size: 929 B |
@ -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>
|
||||
|
||||
@ -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: '',
|
||||
},
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user