dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-06 05:29:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

added tooltips to topbar mods, centered/tightened menu nav

Browse Source
This commit is contained in:
dragonwocky 2021-12-05 17:53:39 +11:00
parent d5a38c80ea
commit 16f1510779
14 changed files with 109 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
repo/always-on-top/button.mjs
View File

@ -28,6 +28,8 @@ export const createButton = async ({ web, components }, db) => {
const $button = web.html`<div class="always_on_top--button"></div>`, const $button = web.html`<div class="always_on_top--button"></div>`,
$pin = web.html`<button id="always_on_top--pin">${pinIcon}</button>`, $pin = web.html`<button id="always_on_top--pin">${pinIcon}</button>`,
$unpin = web.html`<button id="always_on_top--unpin">${unpinIcon}</button>`; $unpin = web.html`<button id="always_on_top--unpin">${unpinIcon}</button>`;
components.tooltip($pin, '**Pin window to top**');
components.tooltip($unpin, '**Unpin window from top**');
web.render($button, $pin); web.render($button, $pin);
$pin.addEventListener('click', () => { $pin.addEventListener('click', () => {

5
repo/global-block-links/client.css
View File

@ -22,15 +22,18 @@
} }
.global_block_links--topbar_copy > svg { .global_block_links--topbar_copy > svg {
display: block; display: block;
margin-right: 6px;
height: 16px; height: 16px;
width: 16px; width: 16px;
fill: var(--theme--icon_secondary); fill: var(--theme--icon_secondary);
} }
.global_block_links--topbar_copy > span { .global_block_links--topbar_copy > span {
margin-left: 2px;
opacity: 1; opacity: 1;
transition: opacity 0.4s ease; transition: opacity 0.4s ease;
} }
.global_block_links--topbar_copy > svg + span {
margin-left: 6px;
}
.global_block_links--block_copy { .global_block_links--block_copy {
display: flex; display: flex;

57
repo/global-block-links/client.mjs
View File

@ -15,38 +15,51 @@ export default async function ({ web, components, notion }, db) {
blockCopyClass = 'global_block_links--block_copy', blockCopyClass = 'global_block_links--block_copy',
hiddenClass = 'global_block_links--hidden'; hiddenClass = 'global_block_links--hidden';
if (await db.get(['topbar_copy'])) { const topbarCopyIcon = await db.get(['topbar_copy_icon']),
const $topbarCopyTemplate = web.html` topbarCopyText = await db.get(['topbar_copy_text']);
<div class="${topbarCopyClass}" role="button" tabindex="0"> if (topbarCopyIcon || topbarCopyText) {
<svg viewBox="0 0 30 30"> const $topbarCopyTemplate = web.render(
<path d="M2,12c0-3.309,2.691-6,6-6h8c3.309,0,6,2.691,6,6s-2.691,6-6,6h-6c0,0.736, web.html`<div class="${topbarCopyClass}" role="button" tabindex="0"></div>`,
0.223,1.41,0.574,2H16c4.418,0,8-3.582,8-8 c0-4.418-3.582-8-8-8H8c-4.418,0-8,3.582-8, topbarCopyIcon
8c0,2.98,1.634,5.575,4.051,6.951C4.021,18.638,4,18.321,4,18 c0-0.488,0.046-0.967, ? web.html`<svg viewBox="0 0 30 30">
0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12 <path d="M2,12c0-3.309,2.691-6,6-6h8c3.309,0,6,2.691,6,6s-2.691,6-6,6h-6c0,0.736,
c0,0.489-0.047,0.965-0.117,1.434C27.176,14.536,28,16.172,28,18c0,3.309-2.691,6-6,6h-8c-3.309, 0.223,1.41,0.574,2H16c4.418,0,8-3.582,8-8 c0-4.418-3.582-8-8-8H8c-4.418,0-8,3.582-8,
0-6-2.691-6-6s2.691-6,6-6h6 c0-0.731-0.199-1.413-0.545-2H14c-4.418,0-8,3.582-8,8c0, 8c0,2.98,1.634,5.575,4.051,6.951C4.021,18.638,4,18.321,4,18 c0-0.488,0.046-0.967,
4.418,3.582,8,8,8h8c4.418,0,8-3.582,8-8 C30,15.021,28.368,12.428,25.953,11.051z"></path> 0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12
</svg> c0,0.489-0.047,0.965-0.117,1.434C27.176,14.536,28,16.172,28,18c0,3.309-2.691,6-6,6h-8c-3.309,
<span>Copy link</span> 0-6-2.691-6-6s2.691-6,6-6h6 c0-0.731-0.199-1.413-0.545-2H14c-4.418,0-8,3.582-8,8c0,
<span class="${hiddenClass}">Link copied!</span> 4.418,3.582,8,8,8h8c4.418,0,8-3.582,8-8 C30,15.021,28.368,12.428,25.953,11.051z"></path>
</div>`; </svg>`
: '',
topbarCopyText
? web.html`
<span data-copy>Copy link</span>
<span data-copied class="${hiddenClass}">Link copied!</span>
`
: ''
);
const insertTopbarCopy = () => { const insertTopbarCopy = () => {
const $btns = document.querySelectorAll(topbarShareSelector); const $btns = document.querySelectorAll(topbarShareSelector);
$btns.forEach(($btn) => { $btns.forEach(($btn) => {
if (!$btn.previousElementSibling?.classList?.contains?.(topbarCopyClass)) { if (!$btn.previousElementSibling?.classList?.contains?.(topbarCopyClass)) {
const $copy = $topbarCopyTemplate.cloneNode(true); const $copy = $topbarCopyTemplate.cloneNode(true);
components.tooltip($copy, '**Copy page link**');
$btn.before($copy); $btn.before($copy);
let resetButtonDelay; let resetButtonDelay;
$copy.addEventListener('click', () => { $copy.addEventListener('click', () => {
$copy.children[1].classList.add(hiddenClass); if (topbarCopyText) {
$copy.lastElementChild.classList.remove(hiddenClass); const $copyText = $copy.querySelector('[data-copy]'),
clearTimeout(resetButtonDelay); $copiedText = $copy.querySelector('[data-copied]');
resetButtonDelay = setTimeout(() => { $copyText.classList.add(hiddenClass);
$copy.children[1].classList.remove(hiddenClass); $copiedText.classList.remove(hiddenClass);
$copy.lastElementChild.classList.add(hiddenClass); clearTimeout(resetButtonDelay);
}, 1250); resetButtonDelay = setTimeout(() => {
$copyText.classList.remove(hiddenClass);
$copiedText.classList.add(hiddenClass);
}, 1250);
}
web.copyToClipboard(`https://notion.so/${notion.getPageID().replace(/-/g, '')}`); web.copyToClipboard(`https://notion.so/${notion.getPageID().replace(/-/g, '')}`);
}); });

10
repo/global-block-links/mod.json
View File

@ -20,8 +20,14 @@
}, },
"options": [ "options": [
{ {
"key": "topbar_copy", "key": "topbar_copy_icon",
"label": "copy page links from the topbar", "label": "copy page links from the topbar (icon)",
"type": "toggle",
"value": true
},
{
"key": "topbar_copy_text",
"label": "copy page links from the topbar (text)",
"type": "toggle", "type": "toggle",
"value": true "value": true
} }

2
repo/icon-sets/client.mjs
View File

@ -67,7 +67,7 @@ export default async function ({ web, fs, components, notion }, db) {
$spinner.remove(); $spinner.remove();
if ($tooltip) { if ($tooltip) {
const $infoSvg = web.html`${await components.feather('info', { class: 'info' })}`; const $infoSvg = web.html`${await components.feather('info', { class: 'info' })}`;
components.setTooltip($infoSvg, $tooltip); components.tooltip($infoSvg, $tooltip, { offsetDirection: 'right' });
web.render($title, $infoSvg); web.render($title, $infoSvg);
} }
})(); })();

4
repo/integrated-titlebar/buttons.mjs
View File

@ -47,6 +47,10 @@ export const createWindowButtons = async ({ electron, web, components }, db) =>
$close = web.html`<button id="integrated_titlebar--close"> $close = web.html`<button id="integrated_titlebar--close">
${closeIcon} ${closeIcon}
</button>`; </button>`;
components.tooltip($minimize, '**Minimize window**');
components.tooltip($maximize, '**Maximize window**');
components.tooltip($unmaximize, '**Unmaximize window**');
components.tooltip($close, '**Close window**');
$minimize.addEventListener('click', () => electron.browser.minimize()); $minimize.addEventListener('click', () => electron.browser.minimize());
$maximize.addEventListener('click', () => electron.browser.maximize()); $maximize.addEventListener('click', () => electron.browser.maximize());

60
repo/menu/components.mjs
View File

@ -24,9 +24,15 @@ export const modComponents = {
tags.map((tag) => `#${web.escape(tag)}`).join(' ') tags.map((tag) => `#${web.escape(tag)}`).join(' ')
); );
}, },
description: (description) => web.html`<p class="mod-description markdown-inline"> description: (description) => {
${fmt.md.renderInline(description)} const $description = web.html`<p class="mod-description markdown-inline">
</p>`, ${fmt.md.renderInline(description)}
</p>`;
$description.querySelectorAll('a').forEach((a) => {
a.target = '_blank';
});
return $description;
},
authors: (authors) => { authors: (authors) => {
const author = (author) => web.html`<a const author = (author) => web.html`<a
class="mod-author" class="mod-author"
@ -58,12 +64,12 @@ export const options = {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
checked = await profileDB.get([mod.id, opt.key], opt.value), checked = await profileDB.get([mod.id, opt.key], opt.value),
$toggle = modComponents.toggle(opt.label, checked), $toggle = modComponents.toggle(opt.label, checked),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = $toggle.children[0], $label = $toggle.children[0],
$input = $toggle.children[1]; $input = $toggle.children[1];
if (opt.tooltip) { if (opt.tooltip) {
$label.prepend($tooltip); $label.prepend($tooltipIcon);
components.setTooltip($tooltip, opt.tooltip); components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
} }
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.checked); await profileDB.set([mod.id, opt.key], $input.checked);
@ -75,10 +81,10 @@ export const options = {
select: async (mod, opt) => { select: async (mod, opt) => {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
value = await profileDB.get([mod.id, opt.key], opt.values[0]), value = await profileDB.get([mod.id, opt.key], opt.values[0]),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = web.render( $label = web.render(
web.html`<label class="input-label"></label>`, web.html`<label class="input-label"></label>`,
web.render(web.html`<p></p>`, opt.tooltip ? $tooltip : '', opt.label) web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
), ),
$options = opt.values.map( $options = opt.values.map(
(option) => web.raw`<option (option) => web.raw`<option
@ -91,7 +97,8 @@ export const options = {
${$options.join('')} ${$options.join('')}
</select>`, </select>`,
$icon = web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`;
if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); if (opt.tooltip)
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
$select.addEventListener('change', async (event) => { $select.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $select.value); await profileDB.set([mod.id, opt.key], $select.value);
notifications.onChange(); notifications.onChange();
@ -102,14 +109,15 @@ export const options = {
text: async (mod, opt) => { text: async (mod, opt) => {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
value = await profileDB.get([mod.id, opt.key], opt.value), value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = web.render( $label = web.render(
web.html`<label class="input-label"></label>`, web.html`<label class="input-label"></label>`,
web.render(web.html`<p></p>`, opt.tooltip ? $tooltip : '', opt.label) web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
), ),
$input = web.html`<input type="text" class="input" value="${web.escape(value)}">`, $input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
$icon = web.html`${await components.feather('type', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('type', { class: 'input-icon' })}`;
if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); if (opt.tooltip)
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value); await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange(); notifications.onChange();
@ -120,14 +128,15 @@ export const options = {
number: async (mod, opt) => { number: async (mod, opt) => {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
value = await profileDB.get([mod.id, opt.key], opt.value), value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = web.render( $label = web.render(
web.html`<label class="input-label"></label>`, web.html`<label class="input-label"></label>`,
web.render(web.html`<p></p>`, opt.tooltip ? $tooltip : '', opt.label) web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
), ),
$input = web.html`<input type="number" class="input" value="${value}">`, $input = web.html`<input type="number" class="input" value="${value}">`,
$icon = web.html`${await components.feather('hash', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('hash', { class: 'input-icon' })}`;
if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); if (opt.tooltip)
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value); await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange(); notifications.onChange();
@ -138,10 +147,10 @@ export const options = {
color: async (mod, opt) => { color: async (mod, opt) => {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
value = await profileDB.get([mod.id, opt.key], opt.value), value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = web.render( $label = web.render(
web.html`<label class="input-label"></label>`, web.html`<label class="input-label"></label>`,
web.render(web.html`<p></p>`, opt.tooltip ? $tooltip : '', opt.label) web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
), ),
$input = web.html`<input type="text" class="input">`, $input = web.html`<input type="text" class="input">`,
$icon = web.html`${await components.feather('droplet', { class: 'input-icon' })}`, $icon = web.html`${await components.feather('droplet', { class: 'input-icon' })}`,
@ -166,7 +175,8 @@ export const options = {
onInput: paint, onInput: paint,
onChange: paint, onChange: paint,
}); });
if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); if (opt.tooltip)
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value); await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange(); notifications.onChange();
@ -178,10 +188,10 @@ export const options = {
file: async (mod, opt) => { file: async (mod, opt) => {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
{ filename } = (await profileDB.get([mod.id, opt.key], {})) || {}, { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = web.render( $label = web.render(
web.html`<label class="input-label"></label>`, web.html`<label class="input-label"></label>`,
web.render(web.html`<p></p>`, opt.tooltip ? $tooltip : '', opt.label) web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
), ),
$pseudo = web.html`<span class="input"><span class="input-placeholder">Upload file...</span></span>`, $pseudo = web.html`<span class="input"><span class="input-placeholder">Upload file...</span></span>`,
$input = web.html`<input type="file" class="hidden" accept=${web.escape( $input = web.html`<input type="file" class="hidden" accept=${web.escape(
@ -190,7 +200,8 @@ export const options = {
$icon = web.html`${await components.feather('file', { class: 'input-icon' })}`, $icon = web.html`${await components.feather('file', { class: 'input-icon' })}`,
$filename = web.html`<span>${web.escape(filename || 'none')}</span>`, $filename = web.html`<span>${web.escape(filename || 'none')}</span>`,
$latest = web.render(web.html`<button class="file-latest">Latest: </button>`, $filename); $latest = web.render(web.html`<button class="file-latest">Latest: </button>`, $filename);
if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); if (opt.tooltip)
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
$input.addEventListener('change', (event) => { $input.addEventListener('change', (event) => {
const file = event.target.files[0], const file = event.target.files[0],
reader = new FileReader(); reader = new FileReader();
@ -218,14 +229,15 @@ export const options = {
hotkey: async (mod, opt) => { hotkey: async (mod, opt) => {
const profileDB = await registry.profileDB(), const profileDB = await registry.profileDB(),
value = await profileDB.get([mod.id, opt.key], opt.value), value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`, $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = web.render( $label = web.render(
web.html`<label class="input-label"></label>`, web.html`<label class="input-label"></label>`,
web.render(web.html`<p></p>`, opt.tooltip ? $tooltip : '', opt.label) web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
), ),
$input = web.html`<input type="text" class="input" value="${web.escape(value)}">`, $input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
$icon = web.html`${await components.feather('command', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('command', { class: 'input-icon' })}`;
if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); if (opt.tooltip)
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
$input.addEventListener('keydown', async (event) => { $input.addEventListener('keydown', async (event) => {
event.preventDefault(); event.preventDefault();
const pressed = [], const pressed = [],

1
repo/menu/menu.mjs
View File

@ -357,6 +357,7 @@ import './styles.mjs';
$changelogNavItem = web.html`<button class="nav-item nav-changelog"> $changelogNavItem = web.html`<button class="nav-item nav-changelog">
${await components.feather('clock', { class: 'nav-changelog-icon' })} ${await components.feather('clock', { class: 'nav-changelog-icon' })}
</button>`; </button>`;
components.tooltip($changelogNavItem, '**Update changelog & welcome message**');
$changelogNavItem.addEventListener('click', () => { $changelogNavItem.addEventListener('click', () => {
$changelogModal.scrollTop = 0; $changelogModal.scrollTop = 0;
$changelogModal.classList.add('modal-visible'); $changelogModal.classList.add('modal-visible');

21
repo/menu/styles.mjs
View File

@ -39,16 +39,17 @@ const customClasses = {
'body-container': apply`flex w-full h-full overflow-hidden`, 'body-container': apply`flex w-full h-full overflow-hidden`,
'sidebar': apply`h-full w-96 max-w-3/7 flex-shrink-0 px-4 pt-3 pb-16 overflow-y-auto flex flex-col 'sidebar': apply`h-full w-96 max-w-3/7 flex-shrink-0 px-4 pt-3 pb-16 overflow-y-auto flex flex-col
bg-notion-secondary border-l border-divider`, bg-notion-secondary border-l border-divider`,
'content-container': apply`h-full flex flex-col`, 'content-container': apply`h-full w-full flex flex-col`,
'nav': apply`pr-4 pl-2 py-3 flex flex-wrap items-center border-b border-divider`, 'nav': apply`px-4 mx-2.5 py-1 flex flex-wrap items-center border-b border-divider
'nav-notion': apply`flex items-center font-semibold text-xl cursor-pointer select-none mr-4 justify-center xl:justify-start`,
ml-4 my-4 w-full lg:w-auto`, 'nav-notion': apply`flex items-center font-semibold text-xl cursor-pointer select-none my-4
'nav-notion-icon': apply`h-6 w-6 mr-3`, w-full justify-center xl:(mr-4 w-auto justify-start)`,
'nav-item': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium hover:bg-interactive-hover focus:bg-interactive-active 'nav-notion-icon': apply`h-6 w-6 mr-2.5`,
mb-2 lg:mb-0`, 'nav-item': apply`mr-2 px-3 py-2 rounded-md text-sm font-medium
'nav-item-selected': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-divider bg-notion-secondary hover:bg-interactive-hover focus:bg-interactive-active mb-2 xl:(mt-1 mb-0)`,
mb-2 lg:mb-0`, 'nav-item-selected': apply`nav-item ring-1 ring-divider bg-notion-secondary
'nav-changelog': apply`lg:ml-auto focus:outline-none`, hover:bg-notion-secondary focus:bg-notion-secondary`,
'nav-changelog': apply`xl:ml-auto focus:outline-none`,
'nav-changelog-icon': apply`w-4 h-4`, 'nav-changelog-icon': apply`w-4 h-4`,
'main': apply`transition px-4 py-3 overflow-y-auto flex-grow`, 'main': apply`transition px-4 py-3 overflow-y-auto flex-grow`,
'main-message': apply`mx-2.5 my-2.5 px-px text-sm text-foreground-secondary text-justify`, 'main-message': apply`mx-2.5 my-2.5 px-px text-sm text-foreground-secondary text-justify`,

2
repo/tabs/mod.json
View File

@ -19,7 +19,7 @@
{ {
"key": "select_modifier", "key": "select_modifier",
"label": "tab select modifier", "label": "tab select modifier",
"tooltip": "**usage: `Modifier+1` to `Modifier+9`, `Modifier+ArrowLeft` and `Modifier+ArrowRight`**", "tooltip": "**usage: Modifier+1 to Modifier+9, Modifier+ArrowLeft, Modifier+ArrowRight and Modifier+ link click**",
"type": "select", "type": "select",
"values": [ "values": [
"Alt", "Alt",

17
repo/truncated-titles/client.css
View File

@ -1,17 +0,0 @@
/*
* notion-enhancer: truncated titles
* (c) 2021 admiraldus (https://github.com/admiraldus)
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
.truncated_titles--tooltip {
display: inline-flex;
align-items: center;
}
.truncated_titles--tooltip svg {
margin-right: 0.5em;
width: 1em;
height: 1em;
}

6
repo/truncated-titles/client.mjs
View File

@ -11,7 +11,6 @@ export default async function ({ web, components }, db) {
tableCellSelector = '.notion-table-view-header-cell', tableCellSelector = '.notion-table-view-header-cell',
tableTitleSelector = `${tableCellSelector} div[style*="text-overflow"]`, tableTitleSelector = `${tableCellSelector} div[style*="text-overflow"]`,
timelineItemSelector = '.notion-timeline-item', timelineItemSelector = '.notion-timeline-item',
svgIcon = await components.feather('eye'),
$elements = []; $elements = [];
const addTooltips = () => { const addTooltips = () => {
@ -20,10 +19,9 @@ export default async function ({ web, components }, db) {
if ($elements.includes($tableTitle)) return; if ($elements.includes($tableTitle)) return;
if ($tableTitle.scrollWidth > $tableTitle.clientWidth) { if ($tableTitle.scrollWidth > $tableTitle.clientWidth) {
components.setTooltip( components.tooltip(
$tableTitle.parentElement.parentElement.parentElement, $tableTitle.parentElement.parentElement.parentElement,
web.html`<b class="truncated_titles--tooltip">${svgIcon} web.html`<span>${web.escape($tableTitle.innerText)}</span>`,
<span>${web.escape($tableTitle.innerText)}</span></b>`,
750 750
); );
$elements.push($tableTitle); $elements.push($tableTitle);

2
repo/view-scale/client.mjs
View File

@ -56,6 +56,8 @@ export default async function ({ electron, web, components }, db) {
$scaleMinus = web.html`<button class="view_scale--button"> $scaleMinus = web.html`<button class="view_scale--button">
${await components.feather('zoom-out')} ${await components.feather('zoom-out')}
</button>`; </button>`;
components.tooltip($scalePlus, '**Zoom into the window**');
components.tooltip($scaleMinus, '**Zoom out of the window**');
updateScale = () => { updateScale = () => {
if (getZoomFactor() !== zoomFactor) zoomFactor = getZoomFactor(); if (getZoomFactor() !== zoomFactor) zoomFactor = getZoomFactor();
$scaleSlider.value = Math.round(zoomFactor * 100); $scaleSlider.value = Math.round(zoomFactor * 100);

4
repo/word-counter/client.mjs
View File

@ -54,8 +54,8 @@ export default async function ({ web, components }, db) {
$statList.querySelectorAll('.word-counter--stat').forEach(($stat) => { $statList.querySelectorAll('.word-counter--stat').forEach(($stat) => {
$stat.addEventListener('click', () => web.copyToClipboard($stat.innerText)); $stat.addEventListener('click', () => web.copyToClipboard($stat.innerText));
}); });
components.setTooltip($readingTooltip, '**~ 275 wpm**'); components.tooltip($readingTooltip, '**~ 275 wpm**', { offsetDirection: 'left' });
components.setTooltip($speakingTooltip, '**~ 180 wpm**'); components.tooltip($speakingTooltip, '**~ 180 wpm**', { offsetDirection: 'left' });
let viewFocused = false, let viewFocused = false,
$page; $page;