From d307a2bedf0ceaec1117572e16c71dc92e72c539 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Fri, 23 Oct 2020 16:49:58 +1100
Subject: [PATCH] additional menu option descriptions on hover

---
 repo/core/client.js                           |  2 +
 repo/core/css/menu.css                        | 23 +++++++++
 repo/core/enhancerMenu.js                     | 51 ++++++++++++++++---
 .../{word-counter => core/icons}/question.svg |  0
 repo/core/menu.html                           |  1 +
 repo/core/mod.js                              | 22 +++++++-
 repo/word-counter/mod.js                      |  2 +-
 repo/word-counter/styles.css                  |  3 +-
 8 files changed, 92 insertions(+), 12 deletions(-)
 rename repo/{word-counter => core/icons}/question.svg (100%)

diff --git a/repo/core/client.js b/repo/core/client.js
index 2d8d458..d094fea 100644
--- a/repo/core/client.js
+++ b/repo/core/client.js
@@ -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',
diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css
index 4e05425..d9a6b4a 100644
--- a/repo/core/css/menu.css
+++ b/repo/core/css/menu.css
@@ -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 *,
diff --git a/repo/core/enhancerMenu.js b/repo/core/enhancerMenu.js
index aacb52e..28750ce 100644
--- a/repo/core/enhancerMenu.js
+++ b/repo/core/enhancerMenu.js
@@ -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, '&quot;')}"`
+        )
+      : '';
     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
diff --git a/repo/word-counter/question.svg b/repo/core/icons/question.svg
similarity index 100%
rename from repo/word-counter/question.svg
rename to repo/core/icons/question.svg
diff --git a/repo/core/menu.html b/repo/core/menu.html
index 56da84e..ddaf2f6 100644
--- a/repo/core/menu.html
+++ b/repo/core/menu.html
@@ -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>
diff --git a/repo/core/mod.js b/repo/core/mod.js
index 869160e..438c5ce 100644
--- a/repo/core/mod.js
+++ b/repo/core/mod.js
@@ -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: '',
     },
diff --git a/repo/word-counter/mod.js b/repo/word-counter/mod.js
index ea183c1..33e0173 100644
--- a/repo/word-counter/mod.js
+++ b/repo/word-counter/mod.js
@@ -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) => {
diff --git a/repo/word-counter/styles.css b/repo/word-counter/styles.css
index c7b7700..46ce67c 100644
--- a/repo/word-counter/styles.css
+++ b/repo/word-counter/styles.css
@@ -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);