dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 13:19:03 +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>`,
$pin = web.html`<button id="always_on_top--pin">${pinIcon}</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);
$pin.addEventListener('click', () => {

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

@ -22,15 +22,18 @@
}
.global_block_links--topbar_copy > svg {
display: block;
margin-right: 6px;
height: 16px;
width: 16px;
fill: var(--theme--icon_secondary);
}
.global_block_links--topbar_copy > span {
margin-left: 2px;
opacity: 1;
transition: opacity 0.4s ease;
}
.global_block_links--topbar_copy > svg + span {
margin-left: 6px;
}
.global_block_links--block_copy {
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',
hiddenClass = 'global_block_links--hidden';
if (await db.get(['topbar_copy'])) {
const $topbarCopyTemplate = web.html`
<div class="${topbarCopyClass}" role="button" tabindex="0">
<svg viewBox="0 0 30 30">
<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,
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,
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,
0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12
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-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,
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>
</svg>
<span>Copy link</span>
<span class="${hiddenClass}">Link copied!</span>
</div>`;
const topbarCopyIcon = await db.get(['topbar_copy_icon']),
topbarCopyText = await db.get(['topbar_copy_text']);
if (topbarCopyIcon || topbarCopyText) {
const $topbarCopyTemplate = web.render(
web.html`<div class="${topbarCopyClass}" role="button" tabindex="0"></div>`,
topbarCopyIcon
? web.html`<svg viewBox="0 0 30 30">
<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,
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,
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,
0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12
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-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,
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>
</svg>`
: '',
topbarCopyText
? web.html`
<span data-copy>Copy link</span>
<span data-copied class="${hiddenClass}">Link copied!</span>
`
: ''
);
const insertTopbarCopy = () => {
const $btns = document.querySelectorAll(topbarShareSelector);
$btns.forEach(($btn) => {
if (!$btn.previousElementSibling?.classList?.contains?.(topbarCopyClass)) {
const $copy = $topbarCopyTemplate.cloneNode(true);
components.tooltip($copy, '**Copy page link**');
$btn.before($copy);
let resetButtonDelay;
$copy.addEventListener('click', () => {
$copy.children[1].classList.add(hiddenClass);
$copy.lastElementChild.classList.remove(hiddenClass);
clearTimeout(resetButtonDelay);
resetButtonDelay = setTimeout(() => {
$copy.children[1].classList.remove(hiddenClass);
$copy.lastElementChild.classList.add(hiddenClass);
}, 1250);
if (topbarCopyText) {
const $copyText = $copy.querySelector('[data-copy]'),
$copiedText = $copy.querySelector('[data-copied]');
$copyText.classList.add(hiddenClass);
$copiedText.classList.remove(hiddenClass);
clearTimeout(resetButtonDelay);
resetButtonDelay = setTimeout(() => {
$copyText.classList.remove(hiddenClass);
$copiedText.classList.add(hiddenClass);
}, 1250);
}
web.copyToClipboard(`https://notion.so/${notion.getPageID().replace(/-/g, '')}`);
});

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

@ -20,8 +20,14 @@
},
"options": [
{
"key": "topbar_copy",
"label": "copy page links from the topbar",
"key": "topbar_copy_icon",
"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",
"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();
if ($tooltip) {
const $infoSvg = web.html`${await components.feather('info', { class: 'info' })}`;
components.setTooltip($infoSvg, $tooltip);
components.tooltip($infoSvg, $tooltip, { offsetDirection: 'right' });
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">
${closeIcon}
</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());
$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(' ')
);
},
description: (description) => web.html`<p class="mod-description markdown-inline">
${fmt.md.renderInline(description)}
</p>`,
description: (description) => {
const $description = web.html`<p class="mod-description markdown-inline">
${fmt.md.renderInline(description)}
</p>`;
$description.querySelectorAll('a').forEach((a) => {
a.target = '_blank';
});
return $description;
},
authors: (authors) => {
const author = (author) => web.html`<a
class="mod-author"
@ -58,12 +64,12 @@ export const options = {
const profileDB = await registry.profileDB(),
checked = await profileDB.get([mod.id, opt.key], opt.value),
$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],
$input = $toggle.children[1];
if (opt.tooltip) {
$label.prepend($tooltip);
components.setTooltip($tooltip, opt.tooltip);
$label.prepend($tooltipIcon);
components.tooltip($tooltipIcon, opt.tooltip, { offsetDirection: 'left', maxLines: 3 });
}
$input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.checked);
@ -75,10 +81,10 @@ export const options = {
select: async (mod, opt) => {
const profileDB = await registry.profileDB(),
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(
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(
(option) => web.raw`<option
@ -91,7 +97,8 @@ export const options = {
${$options.join('')}
</select>`,
$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) => {
await profileDB.set([mod.id, opt.key], $select.value);
notifications.onChange();
@ -102,14 +109,15 @@ export const options = {
text: async (mod, opt) => {
const profileDB = await registry.profileDB(),
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(
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)}">`,
$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) => {
await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange();
@ -120,14 +128,15 @@ export const options = {
number: async (mod, opt) => {
const profileDB = await registry.profileDB(),
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(
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}">`,
$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) => {
await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange();
@ -138,10 +147,10 @@ export const options = {
color: async (mod, opt) => {
const profileDB = await registry.profileDB(),
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(
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">`,
$icon = web.html`${await components.feather('droplet', { class: 'input-icon' })}`,
@ -166,7 +175,8 @@ export const options = {
onInput: 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) => {
await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange();
@ -178,10 +188,10 @@ export const options = {
file: async (mod, opt) => {
const profileDB = await registry.profileDB(),
{ 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(
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>`,
$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' })}`,
$filename = web.html`<span>${web.escape(filename || 'none')}</span>`,
$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) => {
const file = event.target.files[0],
reader = new FileReader();
@ -218,14 +229,15 @@ export const options = {
hotkey: async (mod, opt) => {
const profileDB = await registry.profileDB(),
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(
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)}">`,
$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) => {
event.preventDefault();
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">
${await components.feather('clock', { class: 'nav-changelog-icon' })}
</button>`;
components.tooltip($changelogNavItem, '**Update changelog & welcome message**');
$changelogNavItem.addEventListener('click', () => {
$changelogModal.scrollTop = 0;
$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`,
'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`,
'content-container': apply`h-full flex flex-col`,
'nav': apply`pr-4 pl-2 py-3 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
ml-4 my-4 w-full lg:w-auto`,
'nav-notion-icon': apply`h-6 w-6 mr-3`,
'nav-item': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium hover:bg-interactive-hover focus:bg-interactive-active
mb-2 lg:mb-0`,
'nav-item-selected': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-divider bg-notion-secondary
mb-2 lg:mb-0`,
'nav-changelog': apply`lg:ml-auto focus:outline-none`,
'content-container': apply`h-full w-full flex flex-col`,
'nav': apply`px-4 mx-2.5 py-1 flex flex-wrap items-center border-b border-divider
justify-center xl:justify-start`,
'nav-notion': apply`flex items-center font-semibold text-xl cursor-pointer select-none my-4
w-full justify-center xl:(mr-4 w-auto justify-start)`,
'nav-notion-icon': apply`h-6 w-6 mr-2.5`,
'nav-item': apply`mr-2 px-3 py-2 rounded-md text-sm font-medium
hover:bg-interactive-hover focus:bg-interactive-active mb-2 xl:(mt-1 mb-0)`,
'nav-item-selected': apply`nav-item ring-1 ring-divider bg-notion-secondary
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`,
'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`,

2
repo/tabs/mod.json
View File

@ -19,7 +19,7 @@
{
"key": "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",
"values": [
"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',
tableTitleSelector = `${tableCellSelector} div[style*="text-overflow"]`,
timelineItemSelector = '.notion-timeline-item',
svgIcon = await components.feather('eye'),
$elements = [];
const addTooltips = () => {
@ -20,10 +19,9 @@ export default async function ({ web, components }, db) {
if ($elements.includes($tableTitle)) return;
if ($tableTitle.scrollWidth > $tableTitle.clientWidth) {
components.setTooltip(
components.tooltip(
$tableTitle.parentElement.parentElement.parentElement,
web.html`<b class="truncated_titles--tooltip">${svgIcon}
<span>${web.escape($tableTitle.innerText)}</span></b>`,
web.html`<span>${web.escape($tableTitle.innerText)}</span>`,
750
);
$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">
${await components.feather('zoom-out')}
</button>`;
components.tooltip($scalePlus, '**Zoom into the window**');
components.tooltip($scaleMinus, '**Zoom out of the window**');
updateScale = () => {
if (getZoomFactor() !== zoomFactor) zoomFactor = getZoomFactor();
$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) => {
$stat.addEventListener('click', () => web.copyToClipboard($stat.innerText));
});
components.setTooltip($readingTooltip, '**~ 275 wpm**');
components.setTooltip($speakingTooltip, '**~ 180 wpm**');
components.tooltip($readingTooltip, '**~ 275 wpm**', { offsetDirection: 'left' });
components.tooltip($speakingTooltip, '**~ 180 wpm**', { offsetDirection: 'left' });
let viewFocused = false,
$page;