From 6e43097a3fb2b3a5918d85affd23f4846516d599 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 7 Oct 2020 23:58:22 +1100 Subject: [PATCH] replace dragarea with titlebar in tabbable mode --- mods/core/buttons.js | 2 +- mods/core/client.js | 65 +++-- mods/core/css/menu.css | 24 +- mods/core/css/tabs.css | 80 ++++++ mods/core/icons/alwaysontop_off.svg | 2 +- mods/core/icons/alwaysontop_on.svg | 2 +- mods/core/icons/maximize_off.svg | 2 +- mods/core/icons/maximize_on.svg | 2 +- mods/core/icons/minimize.svg | 2 +- mods/core/menu.html | 2 +- mods/core/menu.js | 6 +- mods/core/mod.js | 6 + mods/core/render.js | 399 ++++++++++++++-------------- mods/core/tray.js | 8 +- pkg/loader.js | 2 +- 15 files changed, 352 insertions(+), 252 deletions(-) create mode 100644 mods/core/css/tabs.css diff --git a/mods/core/buttons.js b/mods/core/buttons.js index e93dddd..e50de06 100644 --- a/mods/core/buttons.js +++ b/mods/core/buttons.js @@ -88,7 +88,7 @@ module.exports = (store) => { ]()}`; } for (let btn of buttons.insert) { - document.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) { diff --git a/mods/core/client.js b/mods/core/client.js index 592a2ce..aa1f1bf 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -36,7 +36,7 @@ module.exports = (store, __exports) => { document.body.classList.add('snappy-transitions'); // frameless - if (store().frameless && !store().tiling_mode) { + if (store().frameless && !store().tiling_mode && !store().tabs) { document.body.classList.add('frameless'); // draggable area const dragarea = helpers.createElement( @@ -50,10 +50,12 @@ module.exports = (store, __exports) => { } // window buttons - const buttons = require('./buttons.js')(store); - document - .querySelector('.notion-topbar > div[style*="display: flex"]') - .appendChild(buttons.element); + if (!store().tabs) { + const buttons = require('./buttons.js')(store); + document + .querySelector('.notion-topbar > div[style*="display: flex"]') + .appendChild(buttons.element); + } document .querySelector('.notion-history-back-button') .parentElement.nextElementSibling.classList.add( @@ -100,7 +102,7 @@ module.exports = (store, __exports) => { // enhancer menu function setThemeVars() { electron.ipcRenderer.send( - 'enhancer:set-theme-vars', + 'enhancer:set-menu-theme', [ '--theme--main', '--theme--sidebar', @@ -142,31 +144,46 @@ module.exports = (store, __exports) => { '--theme--code_inline-background', ].map((rule) => [rule, getStyle(rule)]) ); + electron.ipcRenderer.sendToHost( + 'enhancer:set-tab-theme', + [ + '--theme--dragarea', + '--theme--font_sans', + '--theme--table-border', + '--theme--interactive_hover', + '--theme--interactive_hover-border', + '--theme--button_close', + '--theme--button_close-fill', + '--theme--text', + ].map((rule) => [rule, getStyle(rule)]) + ); } setThemeVars(); const theme_observer = new MutationObserver(setThemeVars); theme_observer.observe(document.querySelector('.notion-app-inner'), { attributes: true, }); - electron.ipcRenderer.on('enhancer:get-theme-vars', setThemeVars); + electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars); - const sidebar_observer = new MutationObserver(setSidebarWidth); - sidebar_observer.observe(document.querySelector('.notion-sidebar'), { - attributes: true, - }); - let sidebar_width; - function setSidebarWidth(list) { - if (!store().frameless && store().tiling_mode) return; - const new_sidebar_width = - list[0].target.style.height === 'auto' - ? '0px' - : list[0].target.style.width; - if (new_sidebar_width !== sidebar_width) { - sidebar_width = new_sidebar_width; - electron.ipcRenderer.sendToHost( - 'enhancer:sidebar-width', - sidebar_width - ); + if (!store().tabs) { + const sidebar_observer = new MutationObserver(setSidebarWidth); + sidebar_observer.observe(document.querySelector('.notion-sidebar'), { + attributes: true, + }); + let sidebar_width; + function setSidebarWidth(list) { + if (!store().frameless && store().tiling_mode) return; + const new_sidebar_width = + list[0].target.style.height === 'auto' + ? '0px' + : list[0].target.style.width; + if (new_sidebar_width !== sidebar_width) { + sidebar_width = new_sidebar_width; + electron.ipcRenderer.sendToHost( + 'enhancer:sidebar-width', + sidebar_width + ); + } } } setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]); diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css index 17992b8..2c393c8 100644 --- a/mods/core/css/menu.css +++ b/mods/core/css/menu.css @@ -50,10 +50,10 @@ body:not([style]) > * { body:not([style])::after { content: ''; position: absolute; - left: 44vw; - top: calc(50% - 7.5vw); - width: 10vw; - height: 10vw; + left: calc(50vw - 15px); + top: calc(50vh - 15px); + width: 30px; + height: 30px; border: 4px solid rgb(34, 34, 34); border-top-color: transparent; border-radius: 50%; @@ -93,7 +93,7 @@ s { /* titlebar */ -#menu-titlebar::before { +#titlebar::before { content: ''; position: absolute; width: 100%; @@ -103,20 +103,18 @@ s { height: 2px; } -#menu-titlebar { +#titlebar { display: flex; -webkit-app-region: drag; -} -#menu-titlebar button { - -webkit-app-region: no-drag; -} -#menu-titlebar { background: var(--theme--dragarea); } -#menu-titlebar > .window-buttons-area { +#titlebar button { + -webkit-app-region: no-drag; +} +#titlebar .window-buttons-area { margin: 0.4em 0.4em 0.4em auto; } -#menu-titlebar > .window-buttons-area:empty { +#titlebar .window-buttons-area:empty { display: none; } diff --git a/mods/core/css/tabs.css b/mods/core/css/tabs.css new file mode 100644 index 0000000..2e30eb1 --- /dev/null +++ b/mods/core/css/tabs.css @@ -0,0 +1,80 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +@import './buttons.css'; + +* { + box-sizing: border-box; + word-break: break-word; + text-decoration: none; + text-size-adjust: 100%; + font-family: var(--theme--font_sans); + outline-color: var(--theme--table-border); +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +body:not([style*='--theme']) > * { + opacity: 0; +} +body:not([style*='--theme'])::after { + content: ''; + position: absolute; + left: calc(50vw - 25px); + top: calc(50vh - 25px); + width: 50px; + height: 50px; + border: 4px solid rgb(34, 34, 34); + border-top-color: transparent; + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +html, +body, +#root { + height: 100%; + margin: 0; +} +#root { + display: flex; + flex-direction: column; +} + +#titlebar::before { + content: ''; + position: absolute; + width: 100%; + -webkit-app-region: no-drag; + top: 0; + left: 0; + height: 2px; +} +#titlebar { + display: flex; + flex-shrink: 1; + padding: 0.5em 0.15em; + user-select: none; + -webkit-app-region: drag; + background: var(--theme--dragarea); +} +#titlebar button { + color: var(--theme--text); + -webkit-app-region: no-drag; +} +#titlebar .window-buttons-area { + margin: auto 0.4em auto auto; +} +#titlebar .window-buttons-area:empty { + display: none; +} diff --git a/mods/core/icons/alwaysontop_off.svg b/mods/core/icons/alwaysontop_off.svg index 9fa0fb5..96afcf0 100644 --- a/mods/core/icons/alwaysontop_off.svg +++ b/mods/core/icons/alwaysontop_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/mods/core/icons/alwaysontop_on.svg b/mods/core/icons/alwaysontop_on.svg index 1c344f8..3fec5d5 100644 --- a/mods/core/icons/alwaysontop_on.svg +++ b/mods/core/icons/alwaysontop_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/mods/core/icons/maximize_off.svg b/mods/core/icons/maximize_off.svg index 7241f63..0bf56b0 100644 --- a/mods/core/icons/maximize_off.svg +++ b/mods/core/icons/maximize_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/mods/core/icons/maximize_on.svg b/mods/core/icons/maximize_on.svg index 681fdc9..af77a3e 100644 --- a/mods/core/icons/maximize_on.svg +++ b/mods/core/icons/maximize_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/mods/core/icons/minimize.svg b/mods/core/icons/minimize.svg index abcebb7..d179e14 100644 --- a/mods/core/icons/minimize.svg +++ b/mods/core/icons/minimize.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/mods/core/menu.html b/mods/core/menu.html index 3b3f91a..56da84e 100644 --- a/mods/core/menu.html +++ b/mods/core/menu.html @@ -9,7 +9,7 @@ - +