diff --git a/repo/always-on-top/button.mjs b/repo/always-on-top/button.mjs index ce2225e..18e2954 100644 --- a/repo/always-on-top/button.mjs +++ b/repo/always-on-top/button.mjs @@ -28,6 +28,8 @@ export const createButton = async ({ web, components }, db) => { const $button = web.html`
`, $pin = web.html``, $unpin = web.html``; + components.tooltip($pin, '**Pin window to top**'); + components.tooltip($unpin, '**Unpin window from top**'); web.render($button, $pin); $pin.addEventListener('click', () => { diff --git a/repo/global-block-links/client.css b/repo/global-block-links/client.css index cb7381d..701d32c 100644 --- a/repo/global-block-links/client.css +++ b/repo/global-block-links/client.css @@ -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; diff --git a/repo/global-block-links/client.mjs b/repo/global-block-links/client.mjs index bb336fc..81d24d2 100644 --- a/repo/global-block-links/client.mjs +++ b/repo/global-block-links/client.mjs @@ -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` -
- - - - Copy link - Link copied! -
`; + const topbarCopyIcon = await db.get(['topbar_copy_icon']), + topbarCopyText = await db.get(['topbar_copy_text']); + if (topbarCopyIcon || topbarCopyText) { + const $topbarCopyTemplate = web.render( + web.html`
`, + topbarCopyIcon + ? web.html` + + ` + : '', + topbarCopyText + ? web.html` + Copy link + Link copied! + ` + : '' + ); 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, '')}`); }); diff --git a/repo/global-block-links/mod.json b/repo/global-block-links/mod.json index 995790c..698e9b2 100644 --- a/repo/global-block-links/mod.json +++ b/repo/global-block-links/mod.json @@ -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 } diff --git a/repo/icon-sets/client.mjs b/repo/icon-sets/client.mjs index 61d0aa2..5bd1e58 100644 --- a/repo/icon-sets/client.mjs +++ b/repo/icon-sets/client.mjs @@ -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); } })(); diff --git a/repo/integrated-titlebar/buttons.mjs b/repo/integrated-titlebar/buttons.mjs index e0f3fe0..77a43c2 100644 --- a/repo/integrated-titlebar/buttons.mjs +++ b/repo/integrated-titlebar/buttons.mjs @@ -47,6 +47,10 @@ export const createWindowButtons = async ({ electron, web, components }, db) => $close = web.html``; + 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()); diff --git a/repo/menu/components.mjs b/repo/menu/components.mjs index 7e72271..5d95818 100644 --- a/repo/menu/components.mjs +++ b/repo/menu/components.mjs @@ -24,9 +24,15 @@ export const modComponents = { tags.map((tag) => `#${web.escape(tag)}`).join(' ') ); }, - description: (description) => web.html`

- ${fmt.md.renderInline(description)} -

`, + description: (description) => { + const $description = web.html`

+ ${fmt.md.renderInline(description)} +

`; + $description.querySelectorAll('a').forEach((a) => { + a.target = '_blank'; + }); + return $description; + }, authors: (authors) => { const author = (author) => web.html` { 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``, - web.render(web.html`

`, opt.tooltip ? $tooltip : '', opt.label) + web.render(web.html`

`, opt.tooltip ? $tooltipIcon : '', opt.label) ), $options = opt.values.map( (option) => web.raw`