cherry cola adjustments + tab button hover fixes + closing tabs shouldn't create weird broken things anymore

2025-04-04 20:59:02 +00:00 · 2020-10-18 22:35:56 +11:00 · 2020-10-18 22:35:56 +11:00 · cf4d8e63ee
commit cf4d8e63ee
parent f25e9f7f98
5 changed files with 98 additions and 78 deletions
--- a/mods/cherrycola/styles.css
+++ b/mods/cherrycola/styles.css
@ -1,14 +1,15 @@
 /*
 * cherry cola
 * (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
 * under the MIT license
 */

- :root {
-
+:root {
  --cola-main: #180915;
  --cola-sec: #1d0919;
  --cola-tet: #492341;
+  --cola-info: #9b6890;
  --cola-accent: #bf799b;
  --cola-gray: #8a8a8a;
  --cola-brown: #755241;
@ -24,11 +25,11 @@
  --theme_dark--main: var(--cola-main);
  --theme_dark--sidebar: var(--cola-sec);
  --theme_dark--overlay: var(--cola-sec);
-  --theme_dark--dragarea: var(--cola-tet);
+  --theme_dark--dragarea: #210a1c;
  --theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px,
-  rgba(20, 0, 16, 0.2) 0px 2px 4px;
+    rgba(20, 0, 16, 0.2) 0px 2px 4px;
  --theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px,
-  rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
+    rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;

  /* Scrollbar */
  --theme_dark--scrollbar: var(--cola-sec);
@ -59,8 +60,8 @@

  /* Default text colors */
  --theme_dark--text: #ffffff;
-  --theme_dark--text_ui: var(--cola-gray);
-  --theme_dark--text_ui_info: var(--cola-gray);
+  --theme_dark--text_ui: var(--cola-info);
+  --theme_dark--text_ui_info: var(--cola-info);

  /* Text color options */
  --theme_dark--text_gray: var(--cola-gray);
@ -140,12 +141,10 @@
  --theme_dark--code_number: var(--theme_dark--text_purple);
  --theme_dark--code_string: var(--theme_dark--text_orange);
  --theme_dark--code_attr-value: var(--theme_dark--text_orange);
-
 }

 /* Quotations as serif */
-.notion-dark-theme
-  .notion-quote-block{
+.notion-dark-theme .notion-quote-block {
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: var(--cola-sec);
-}
+}
--- a/mods/core/buttons.js
+++ b/mods/core/buttons.js
@ -83,19 +83,19 @@ module.exports = (store) => {

  (async () => {
    for (let btn of buttons.insert) {
-      buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
+      buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
        btn
      ]()}</button>`;
    }
    for (let btn of buttons.insert) {
-      buttons.element.querySelector(`.window-button#btn-${btn}`).onclick =
+      buttons.element.querySelector(`.window-button.btn-${btn}`).onclick =
        buttons.actions[btn];
    }
    if (store().frameless && !store().tiling_mode && !is_mac) {
      window.addEventListener('resize', (event) => {
        Promise.resolve(buttons.icons.maximize()).then((icon) => {
          icon = icon.toString();
-          const el = buttons.element.querySelector('#btn-maximize');
+          const el = buttons.element.querySelector('.btn-maximize');
          if (el.innerHTML != icon) el.innerHTML = icon;
        });
      });
--- a/mods/core/css/buttons.css
+++ b/mods/core/css/buttons.css
@ -37,9 +37,7 @@
  background: var(--theme--interactive_hover);
  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
 }
-.window-button#btn-close:hover {
+.window-button.btn-close:hover {
  background: var(--theme--button_close);
-}
-.window-button#btn-close:hover svg line {
-  stroke: var(--theme--button_close-fill);
+  color: var(--theme--button_close-fill);
 }
--- a/mods/core/css/tabs.css
+++ b/mods/core/css/tabs.css
@ -95,7 +95,7 @@ body,
  color: var(--theme--text);
  -webkit-app-region: no-drag;
  border: none;
-  background-color: transparent;
+  background: transparent;
 }
 #titlebar .window-buttons-area {
  margin: 0.5em 0.55em 0.5em auto;
@ -132,6 +132,7 @@ body,
 }
 #tabs .tab:not(.new) span:not(.close) {
  width: 8.5em;
+  margin-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
@ -166,9 +167,15 @@ body,
  opacity: 1;
 }
 #tabs .tab .close:hover,
-#tabs .tab.new span:hover {
+#tabs .tab.new span:hover,
+#titlebar .window-button:hover {
+  border-radius: 4px;
  background: var(--theme--table-border);
-  border-radius: 5px;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+#titlebar .window-button.btn-close:hover {
+  background: var(--theme--button_close);
+  color: var(--theme--button_close-fill);
 }
 #tabs .tab.dragged-over {
  box-shadow: inset 4px 0 0 0 var(--theme--selected);
--- a/mods/core/render.js
+++ b/mods/core/render.js
@ -223,7 +223,7 @@ module.exports = (store, __exports) => {
        const list = new Map(this.state.tabs);
        while (this.state.tabs.get(id) && this.state.tabs.get(id).open) id++;
        list.delete(id);
-        this.openTab(id, { state: list, load: url || true });
+        return this.openTab(id, { state: list, load: url || true });
      }
      openTab(
        id,
@ -237,64 +237,80 @@ module.exports = (store, __exports) => {
          load: false,
        }
      ) {
-        if (!id && id !== 0) {
-          if (state.get(this.views.current.id).open) return;
-          const currentIndex = [...state].findIndex(
-            ([id, { title, open }]) => id === this.views.current.id
-          );
-          id = (
-            [...state].find(
+        return new Promise((res, rej) => {
+          if (!id && id !== 0) {
+            if (state.get(this.views.current.id).open) return res(true);
+            const currentIndex = [...state].findIndex(
+              ([id, { title, open }]) => id === this.views.current.id
+            );
+            id = ([...state].find(
              ([id, { title, open }], tabIndex) =>
                open && tabIndex > currentIndex
-            ) || [...state].find(([id, { title, open }]) => open)
-          ).title;
-        }
-        const current_src = this.views.current.$el().src;
-        this.views.current.id = id;
-        this.setState(
-          {
-            tabs: state.set(id, {
-              title: state.get(id) ? state.get(id).title : 'notion.so',
-              open: true,
-            }),
-            slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
-            slideOut: slideOut,
-          },
-          async () => {
-            this.focusTab();
-            if (load) {
-              await new Promise((res, rej) => {
-                let attempt;
-                attempt = setInterval(() => {
-                  if (!document.body.contains(this.views.html[id])) return;
-                  clearInterval(attempt);
-                  res();
-                }, 50);
-              });
-              this.views.html[id].style.opacity = '0';
-              let unhide;
-              unhide = () => {
-                this.views.html[id].style.opacity = '';
-                this.views.html[id].removeEventListener(
-                  'did-stop-loading',
-                  unhide
-                );
-              };
-              this.views.html[id].addEventListener('did-stop-loading', unhide);
-              this.views.html[id].loadURL(
-                typeof load === 'string'
-                  ? load
-                  : store().default_page
-                  ? idToNotionURL(store().default_page)
-                  : current_src
-              );
-              // this.views.html[id].getWebContents().openDevTools();
-            }
-            setTimeout(() => {
-              this.setState({ slideIn: new Set(), slideOut: new Set() });
-            }, 150);
+            ) || [...state].find(([id, { title, open }]) => open))[0];
          }
-        );
+          const current_src = this.views.current.$el().src;
+          this.views.current.id = id;
+          this.setState(
+            {
+              tabs: state.set(id, {
+                title: state.get(id) ? state.get(id).title : 'notion.so',
+                open: true,
+              }),
+              slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
+              slideOut: slideOut,
+            },
+            async () => {
+              this.focusTab();
+              new Promise((resolve, reject) => {
+                let attempt,
+                  clear = () => {
+                    clearInterval(attempt);
+                    return true;
+                  };
+                attempt = setInterval(() => {
+                  if (this.views.current.id !== id) return clear() && reject();
+                  if (document.body.contains(this.views.html[id]))
+                    return clear() && resolve();
+                }, 50);
+              })
+                .then(() => {
+                  if (load) {
+                    this.views.html[id].style.opacity = '0';
+                    let unhide;
+                    unhide = () => {
+                      this.views.html[id].style.opacity = '';
+                      this.views.html[id].removeEventListener(
+                        'did-stop-loading',
+                        unhide
+                      );
+                    };
+                    this.views.html[id].addEventListener(
+                      'did-stop-loading',
+                      unhide
+                    );
+                    this.views.html[id].loadURL(
+                      typeof load === 'string'
+                        ? load
+                        : store().default_page
+                        ? idToNotionURL(store().default_page)
+                        : current_src
+                    );
+                  }
+                })
+                .catch(() => {
+                  // nothing
+                })
+                .finally(() => {
+                  setTimeout(() => {
+                    this.setState(
+                      { slideIn: new Set(), slideOut: new Set() },
+                      () => res(true)
+                    );
+                  }, 150);
+                });
+            }
+          );
+        });
      }
      closeTab(id) {
        if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
@ -302,7 +318,7 @@ module.exports = (store, __exports) => {
        list.set(id, { ...list.get(id), open: false });
        if (![...list].filter(([id, { title, open }]) => open).length)
          return electron.remote.getCurrentWindow().close();
-        this.openTab(
+        return this.openTab(
          this.views.current.id === id ? null : this.views.current.id,
          { state: list, slideOut: this.state.slideOut.add(id) }
        );