app no longer crashes when sidebar toggled

2025-04-05 13:19:03 +00:00 · 2020-07-01 19:12:57 +10:00 · 2020-07-01 19:12:57 +10:00 · d3d3b4007f
commit d3d3b4007f
parent 382843668a
6 changed files with 61 additions and 62 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -8,10 +8,7 @@ but can still easily be enabled by following instructions in the [docs](README.m
 - new: semi-mac support? installs, but can't confirm changes have taken effect.
 - bugfix: `cleaner.py` patched for linux.
 - bugfix: odd mix of `\\` and `/` being used for windows filepaths.
-
-//todo
-
- bugfix: app crashes when sidebar is toggled
+- bugfix: app no longer crashes when sidebar is toggled.

 ### v0.6.0 (2020-06-30)

--- a/README.md
+++ b/README.md
@ -69,7 +69,7 @@ symbolised with an arrow (4th from the right). when toggled to point up,
 notion will remain the top visible window even if not focused.

 to customise which characters are used for these buttons, open in the `resources/preload.js` file,
-find the relevant button icon (lines 80 - 111) and replace it with your chosen unicode character (e.g.
+find the relevant button icon (lines 69 - 82) and replace it with your chosen unicode character (e.g.
 replacing `return '⨉';` with `return '🙄';`).

 ### nicer scrollbars
@ -77,7 +77,7 @@ replacing `return '⨉';` with `return '🙄';`).
 i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
 ones that actually look as if they're part of notion.

-to add these to the web version, copy lines 44 - 75 from `user.css` into your css customiser.
+to add these to the web version, copy lines 74 - 105 from `user.css` into your css customiser.

 ![](screenshots/app-unenhanced.jpg)
 _image: before enhancement_
--- a/docs/changelog.html
+++ b/docs/changelog.html
@ -1,4 +1,4 @@
-<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
+<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v061-wip">v0.6.1 (wip)</a></li><li class="level-3"><a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
    
          <section class="block" id="changelog">
            <h1>
@ -7,6 +7,18 @@
        <p>if something is <del>crossed out</del>, then it is no longer a feature included by default,
 but can still easily be enabled by following instructions in the <a href="index.html#" title="">docs</a>.</p>

+          </section>
+          <section class="block" id="v061-wip">
+            <h3>
+              <a href="#v061-wip">v0.6.1 (wip)</a>
+            </h3>
+        <ul>
+<li>new: semi-mac support? installs, but can&#39;t confirm changes have taken effect.</li>
+<li>bugfix: <code>cleaner.py</code> patched for linux.</li>
+<li>bugfix: odd mix of <code>\\</code> and <code>/</code> being used for windows filepaths.</li>
+<li>bugfix: app no longer crashes when sidebar is toggled.</li>
+</ul>
+
          </section>
          <section class="block" id="v060-2020-06-30">
            <h3>
@ -15,13 +27,13 @@ but can still easily be enabled by following instructions in the <a href="index.
        <ul>
 <li>style: custom fonts.</li>
 <li>style: font resizing.</li>
-<li>style: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/#" title="">u/Roosmaryn</a>)</li>
+<li>style: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/#" title="">u/Roosmaryn</a>).</li>
 <li>new: custom colour theming, demonstrated via the dark+ theme.</li>
-<li>new: linux support (thanks for <a href="https://github.com/Blacksuan19#" title="">@Blacksuan19</a>).</li>
+<li>new: linux support (thanks to <a href="https://github.com/Blacksuan19#" title="">@Blacksuan19</a>).</li>
 <li>improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it.</li>
 <li>improved: stop window buttons breaking at smaller widths.</li>
 <li>improved: more obviously visible drag area.</li>
-<li>bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to <a href="https://github.com/etnperlong#" title="">@etnperlong</a>)</li>
+<li>bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to <a href="https://github.com/etnperlong#" title="">@etnperlong</a>).</li>
 </ul>
 <blockquote>
 <p>📥 <a href="https://github.com/dragonwocky/notion-enhancer/archive/v0.6.0.zip#" title="">notion-enhancer.v0.6.0.zip</a></p>
--- a/docs/index.html
+++ b/docs/index.html
@ -73,7 +73,7 @@ additionally, if you ever need to change or reset your notion build, the <code>c
 symbolised with an arrow (4th from the right). when toggled to point up,
 notion will remain the top visible window even if not focused.</p>
 <p>to customise which characters are used for these buttons, open in the <code>resources/preload.js</code> file,
-find the relevant button icon (lines 80 - 111) and replace it with your chosen unicode character (e.g.
+find the relevant button icon (lines 69 - 82) and replace it with your chosen unicode character (e.g.
 replacing <code>return &#39;⨉&#39;;</code> with <code>return &#39;🙄&#39;;</code>).</p>

          </section>
@ -83,7 +83,7 @@ replacing <code>return &#39;⨉&#39;;</code> with <code>return &#39;🙄&#39;;</
            </h3>
        <p>i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
 ones that actually look as if they&#39;re part of notion.</p>
-<p>to add these to the web version, copy lines 44 - 75 from <code>user.css</code> into your css customiser.</p>
+<p>to add these to the web version, copy lines 74 - 105 from <code>user.css</code> into your css customiser.</p>
 <p><img loading="lazy" src="screenshots/app-unenhanced.jpg" alt="" title="">
 <em>image: before enhancement</em></p>
 <p><img loading="lazy" src="screenshots/app-enhanced.jpg" alt="" title="">
--- a/resources/preload.js
+++ b/resources/preload.js
@ -44,31 +44,27 @@ require('electron').remote.getGlobal('setTimeout')(() => {

    const appwindow = require('electron').remote.getCurrentWindow();

-    /* window control buttons */
-    const buttons = document.createElement('div'),
+    /* titlebar */
+    const buttons = document.createElement('span'),
      dragarea = document.createElement('div');
    dragarea.className = 'window-dragarea';
-    document
-      .querySelector('.notion-topbar')
-      .parentElement.appendChild(dragarea);
-    buttons.className = 'window-topbar-container';
+    document.querySelector('.notion-topbar').prepend(dragarea);
+    buttons.className = 'window-buttons-area';
    buttons.innerHTML = `
-        <div class="window-buttons-area">
      <button class="window-button btn-alwaysontop"></button>
      <button class="window-button btn-minimize"></button>
      <button class="window-button btn-maximize"></button>
      <button class="window-button btn-close"></button>
-        </div>
    `;
-    document.querySelector('.notion-topbar').parentElement.appendChild(buttons);
    document
-      .querySelector('.window-topbar-container')
-      .appendChild(document.querySelector('.notion-topbar'));
+      .querySelector('.notion-topbar > div[style*="display: flex"]')
+      .appendChild(buttons);
    document
-      .querySelector('.window-topbar-container')
-      .appendChild(
-        document.querySelector('.notion-history-back-button').parentElement
-      );
+      .querySelector('.notion-history-back-button')
+      .parentElement.nextSibling.classList.add('notion-topbar-breadcrumb');
+    document
+      .querySelector('.notion-topbar-share-menu')
+      .parentElement.classList.add('notion-topbar-actions');

    const button_icons = {
        alwaysontop() {
@ -131,7 +127,7 @@ require('electron').remote.getGlobal('setTimeout')(() => {
    button_elements.close.innerHTML = button_icons.close();
    button_elements.close.onclick = button_actions.close;

-    /* reload window */
+    /* hotkey: reload window */
    document.defaultView.addEventListener(
      'keyup',
      (ev) => void (ev.code === 'F5' ? appwindow.reload() : 0),
--- a/resources/user.css
+++ b/resources/user.css
@ -5,7 +5,10 @@
 * (https://dragonwocky.me/) under the MIT license
 */

-/* window control buttons */
+/* titlebar */
+.notion-topbar {
+  height: 55px !important;
+}
 .window-dragarea {
  height: 10px;
  width: 100%;
@ -16,42 +19,33 @@
 .notion-dark-theme .window-dragarea {
  background: #272d2f;
 }
-.window-topbar-container {
-  display: flex;
-  flex-direction: row-reverse;
-  user-select: none;
-  -webkit-app-region: drag;
-}
-.window-topbar-container > :last-child,
 .window-buttons-area {
  display: flex;
  align-items: center;
-  height: 45px;
-}
-.window-topbar-container > :last-child {
-  padding-left: 12px;
-}
-.window-buttons-area {
-  justify-content: flex-end;
-  padding-right: 12px;
  font-size: 14px;
 }
@media (max-width: 760px) {
-  .window-topbar-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-  .titlebar-draggable-area {
-    top: 10px;
-  }
-  .window-topbar-container > :last-child {
-    grid-row: 1;
-  }
  .notion-topbar {
-    grid-column-start: span 2;
+    height: 95px !important;
  }
-  .notion-topbar > div {
-    padding-right: 12px !important;
+  .notion-topbar > :nth-child(2) {
+    display: grid !important;
+    height: 85px !important;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+  .window-buttons-area {
+    grid-row: 1;
+    grid-column: 9 / span end;
+    justify-content: flex-end;
+  }
+  .notion-topbar-breadcrumb {
+    grid-row: 2;
+    grid-column: 1 / span 8;
+  }
+  .notion-topbar-actions {
+    grid-row: 2;
+    grid-column: 9 / span end;
+    justify-content: flex-end;
  }
 }
 /* window control buttons */