added tooltips to topbar mods, centered/tightened menu nav

notion-enhancer · Dec 5, 2021 · 8eb2810 · 8eb2810
1 parent 7244741
commit 8eb2810
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 84 deletions.
diff --git a/always-on-top/button.mjs b/always-on-top/button.mjs
@@ -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', () => {

diff --git a/global-block-links/client.css b/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/global-block-links/client.mjs b/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`
-      <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, '')}`);
           });

diff --git a/global-block-links/mod.json b/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/icon-sets/client.mjs b/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/integrated-titlebar/buttons.mjs b/integrated-titlebar/buttons.mjs
@@ -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());

diff --git a/menu/components.mjs b/menu/components.mjs
@@ -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 = [],

diff --git a/menu/menu.mjs b/menu/menu.mjs
@@ -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');

diff --git a/menu/styles.mjs b/menu/styles.mjs
@@ -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`,

diff --git a/tabs/mod.json b/tabs/mod.json
@@ -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",

diff --git a/truncated-titles/client.css b/truncated-titles/client.css
diff --git a/truncated-titles/client.mjs b/truncated-titles/client.mjs
@@ -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);

diff --git a/view-scale/client.mjs b/view-scale/client.mjs
@@ -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);