From cf4d8e63eeb650d8209f0316266edbad59641c78 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 18 Oct 2020 22:35:56 +1100 Subject: [PATCH] cherry cola adjustments + tab button hover fixes + closing tabs shouldn't create weird broken things anymore --- mods/cherrycola/styles.css | 21 +++--- mods/core/buttons.js | 6 +- mods/core/css/buttons.css | 6 +- mods/core/css/tabs.css | 13 +++- mods/core/render.js | 130 +++++++++++++++++++++---------------- 5 files changed, 98 insertions(+), 78 deletions(-) diff --git a/mods/cherrycola/styles.css b/mods/cherrycola/styles.css index 9975044..893e96a 100644 --- 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 (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); -} \ No newline at end of file +} diff --git a/mods/core/buttons.js b/mods/core/buttons.js index bae94cd..d132722 100644 --- 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 += ``; } 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; }); }); diff --git a/mods/core/css/buttons.css b/mods/core/css/buttons.css index ac3cacc..70b8465 100644 --- 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); } diff --git a/mods/core/css/tabs.css b/mods/core/css/tabs.css index 2e9aed3..1e38668 100644 --- 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); diff --git a/mods/core/render.js b/mods/core/render.js index 12cf0b5..6016dbf 100644 --- 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) } );