From 7d51ea9caae93eb0e35b1824fb5f3f3bd8cbb7d6 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 1 Aug 2020 23:46:43 +1000 Subject: [PATCH] theme menu window + bunch of other tweaks --- bin.js | 1 + mods/core/buttons.js | 98 +++++++++++++++ mods/core/client.js | 183 +++++++++------------------- mods/core/create.js | 7 +- mods/core/css/buttons.css | 56 +++++++++ mods/core/css/menu.css | 69 +++++++++++ mods/core/css/shared.css | 8 ++ mods/core/css/titlebar.css | 52 +------- mods/core/css/variables.json | 162 ++++++++++++++++++++++++ mods/core/icons/alwaysontop_off.svg | 2 +- mods/core/icons/alwaysontop_on.svg | 2 +- mods/core/icons/close.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 | 20 +-- mods/core/menu.js | 23 ++++ mods/core/mod.js | 3 + mods/core/render.js | 16 ++- mods/core/tray.js | 17 ++- pkg/apply.js | 1 + pkg/check.js | 1 + pkg/helpers.js | 2 +- pkg/helpers.md | 3 +- pkg/loader.js | 1 + pkg/remove.js | 1 + pkg/store.js | 1 + 27 files changed, 533 insertions(+), 204 deletions(-) create mode 100644 mods/core/buttons.js create mode 100644 mods/core/css/buttons.css create mode 100644 mods/core/css/menu.css create mode 100644 mods/core/css/variables.json create mode 100644 mods/core/menu.js diff --git a/bin.js b/bin.js index 29417bc..c9a3a6e 100644 --- a/bin.js +++ b/bin.js @@ -7,6 +7,7 @@ */ 'use strict'; + const cli = require('cac')(), { EnhancerError } = require('./pkg/helpers.js'); diff --git a/mods/core/buttons.js b/mods/core/buttons.js new file mode 100644 index 0000000..c1c57d2 --- /dev/null +++ b/mods/core/buttons.js @@ -0,0 +1,98 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +'use strict'; + +const __mod = require('./mod.js'), + store = require('../../pkg/store.js'), + settings = store(__mod.id, __mod.defaults), + path = require('path'), + fs = require('fs-extra'), + browser = require('electron').remote.getCurrentWindow(), + is_mac = process.platform === 'darwin', + buttons = { + element: document.createElement('div'), + insert: [ + 'alwaysontop', + ...(settings.frameless && !is_mac + ? ['minimize', 'maximize', 'close'] + : []), + ], + icons: { + raw: { + alwaysontop: { + on: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) + ), + off: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) + ), + }, + minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)), + maximize: { + on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)), + off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)), + }, + close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), + }, + alwaysontop() { + return browser.isAlwaysOnTop() + ? buttons.icons.raw.alwaysontop.on + : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' + }, + minimize() { + return buttons.icons.raw.minimize; // '⚊' + }, + maximize() { + return browser.isMaximized() + ? buttons.icons.raw.maximize.on + : buttons.icons.raw.maximize.off; // '🗗' : '🗖' + }, + close() { + return buttons.icons.raw.close; // '⨉' + }, + }, + actions: { + async alwaysontop() { + browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); + this.innerHTML = await buttons.icons.alwaysontop(); + }, + minimize() { + browser.minimize(); + }, + async maximize() { + browser.isMaximized() ? browser.unmaximize() : browser.maximize(); + this.innerHTML = await buttons.icons.maximize(); + }, + close() { + browser.close(); + }, + }, + }; + +(async () => { + buttons.element.className = 'window-buttons-area'; + for (let btn of buttons.insert) { + buttons.element.innerHTML += ``; + setTimeout( + () => + (document.querySelector(`.window-button#btn-${btn}`).onclick = + buttons.actions[btn]), + 10 + ); + } + if (settings.frameless && !is_mac) { + setInterval(async () => { + const icon = (await buttons.icons.maximize()).toString(), + el = buttons.element.querySelector('#btn-maximize'); + if (el.innerHTML != icon) el.innerHTML = icon; + }, 100); + } +})(); + +module.exports = buttons; diff --git a/mods/core/client.js b/mods/core/client.js index c0b7d21..d0c802b 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -5,13 +5,11 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + module.exports = (defaults) => function (store, __exports) { const electron = require('electron'), - browser = electron.remote.getCurrentWindow(), - path = require('path'), - fs = require('fs-extra'), - is_mac = process.platform === 'darwin', settings = store(defaults), helpers = require('../../pkg/helpers.js'), __notion = helpers.getNotion(), @@ -49,39 +47,9 @@ module.exports = (defaults) => } } - // ctrl+f theming - function setTheme() { - const mode = JSON.parse(localStorage.theme).mode, - style = (prop) => - getComputedStyle(document.body).getPropertyValue(prop); - notionIpc.sendNotionToIndex('search:set-theme', { - 'mode': mode, - 'colors': { - 'white': style(`--theme_${mode}--todo_ticked-fill`), - 'blue': style(`--theme_${mode}--primary`), - }, - 'borderRadius': 3, - 'textColor': style(`--theme_${mode}--text`), - 'popoverBackgroundColor': style(`--theme_${mode}--card`), - 'popoverBoxShadow': `0 0 0 1px ${style( - `--theme_${mode}--overlay` - )}, 0 3px 6px ${style(`--theme_${mode}--overlay`)}`, - 'inputBoxShadow': `box-shadow: ${style( - `--theme_${mode}--primary` - )} 0px 0px 0px 1px inset, ${style( - `--theme_${mode}--primary_hover` - )} 0px 0px 0px 2px !important`, - 'inputBackgroundColor': style(`--theme_${mode}--main`), - 'dividerColor': style(`--theme_${mode}--table-border`), - 'shadowOpacity': 0.2, - }); - } - setInterval(setTheme, 100); - // frameless if (settings.frameless) { document.body.classList.add('frameless'); - // draggable area const dragarea = document.createElement('div'); dragarea.className = 'window-dragarea'; @@ -90,100 +58,10 @@ module.exports = (defaults) => '--configured-dragarea_height', `${settings.dragarea_height + 2}px` ); - let sidebar_width; - interval_attempts.patchDragarea = setInterval(patchDragarea, 50); - function patchDragarea() { - const sidebar = document.querySelector('.notion-sidebar'); - if (!sidebar) return; - clearInterval(interval_attempts.patchDragarea); - let new_width = - sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; - if (sidebar_width !== new_width) { - sidebar_width = new_width; - electron.ipcRenderer.sendToHost( - `enhancer:sidebar-width-${sidebar_width}` - ); - } - } } // window buttons - const buttons = { - element: document.createElement('span'), - insert: ['alwaysontop'], - icons: { - raw: { - alwaysontop: { - on: fs.readFile( - path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) - ), - off: fs.readFile( - path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) - ), - }, - minimize: fs.readFile( - path.resolve(`${__dirname}/icons/minimize.svg`) - ), - maximize: { - on: fs.readFile( - path.resolve(`${__dirname}/icons/maximize_on.svg`) - ), - off: fs.readFile( - path.resolve(`${__dirname}/icons/maximize_off.svg`) - ), - }, - close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), - }, - alwaysontop() { - return browser.isAlwaysOnTop() - ? buttons.icons.raw.alwaysontop.on - : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' - }, - minimize() { - return buttons.icons.raw.minimize; // '⚊' - }, - maximize() { - return browser.isMaximized() - ? buttons.icons.raw.maximize.on - : buttons.icons.raw.maximize.off; // '🗗' : '🗖' - }, - close() { - return buttons.icons.raw.close; // '⨉' - }, - }, - actions: { - async alwaysontop() { - browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); - this.innerHTML = await buttons.icons.alwaysontop(); - }, - minimize() { - browser.minimize(); - }, - async maximize() { - browser.isMaximized() ? browser.unmaximize() : browser.maximize(); - this.innerHTML = await buttons.icons.maximize(); - }, - close() { - browser.close(); - }, - }, - }; - - if (settings.frameless && !is_mac) - buttons.insert.push('minimize', 'maximize', 'close'); - buttons.element.className = 'window-buttons-area'; - for (let btn of buttons.insert) { - buttons.element.innerHTML += ``; - } - if (settings.frameless && !is_mac) - setInterval(async () => { - const icon = await buttons.icons.maximize(), - el = buttons.element.querySelector('.btn-maximize'); - if (el.innerHTML != icon) el.innerHTML = icon; - }, 100); - + const buttons = require('./buttons.js'); document .querySelector('.notion-topbar > div[style*="display: flex"]') .appendChild(buttons.element); @@ -196,9 +74,58 @@ module.exports = (defaults) => .querySelector('.notion-topbar-share-menu') .parentElement.classList.add('notion-topbar-actions'); - for (let btn of buttons.insert) { - document.querySelector(`.window-button.btn-${btn}`).onclick = - buttons.actions[btn]; + let sidebar_width; + function communicationLoop() { + const getStyle = (prop) => + getComputedStyle(document.body).getPropertyValue(prop), + mode = JSON.parse(localStorage.theme).mode; + + // ctrl+f theming + notionIpc.sendNotionToIndex('search:set-theme', { + 'mode': mode, + 'colors': { + 'white': getStyle(`--theme_${mode}--todo_ticked-fill`), + 'blue': getStyle(`--theme_${mode}--primary`), + }, + 'borderRadius': 3, + 'textColor': getStyle(`--theme_${mode}--text`), + 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), + 'popoverBoxShadow': `0 0 0 1px ${getStyle( + `--theme_${mode}--overlay` + )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, + 'inputBoxShadow': `box-shadow: ${getStyle( + `--theme_${mode}--primary` + )} 0px 0px 0px 1px inset, ${getStyle( + `--theme_${mode}--primary_hover` + )} 0px 0px 0px 2px !important`, + 'inputBackgroundColor': getStyle(`--theme_${mode}--main`), + 'dividerColor': getStyle(`--theme_${mode}--table-border`), + 'shadowOpacity': 0.2, + }); + + // enhancer menu + electron.ipcRenderer.send('enhancer:set-theme', { + mode, + rules: require('./css/variables.json').map((rule) => [ + rule, + getStyle(rule), + ]), + }); + + // draggable area resizing + const sidebar = document.querySelector('.notion-sidebar'); + if (settings.frameless && sidebar) { + let new_sidebar_width = + sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; + if (sidebar_width !== new_sidebar_width) { + sidebar_width = new_sidebar_width; + electron.ipcRenderer.sendToHost( + 'enhancer:sidebar-width', + sidebar_width + ); + } + } } + setInterval(communicationLoop, 500); } }; diff --git a/mods/core/create.js b/mods/core/create.js index 73c7b4a..87709cb 100644 --- a/mods/core/create.js +++ b/mods/core/create.js @@ -5,10 +5,15 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + module.exports = (defaults) => function (store, __exports) { const electron = require('electron'), - allWindows = electron.BrowserWindow.getAllWindows, + allWindows = () => + electron.BrowserWindow.getAllWindows().filter( + (win) => win.getTitle() !== 'notion-enhancer menu' + ), // createWindow = __exports.createWindow, path = require('path'), settings = store(defaults), diff --git a/mods/core/css/buttons.css b/mods/core/css/buttons.css new file mode 100644 index 0000000..6e94223 --- /dev/null +++ b/mods/core/css/buttons.css @@ -0,0 +1,56 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +.window-buttons-area { + display: flex; + align-items: center; + font-size: 14px; +} +.window-button { + background: transparent; + border: 0; + margin: 0px 0px 0px 9px; + width: 32px; + line-height: 26px; + border-radius: 4px; + font-size: 16px; + transition: background 0.2s; + cursor: default; +} +.window-button svg { + margin-top: 8px; + width: 14px; + height: 14px; +} +.window-button svg path { + fill: currentColor; +} +.window-button svg line { + stroke: currentColor; +} + +.notion-dark-theme .window-button:hover { + background: var(--theme_dark--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); +} +.notion-dark-theme .window-button#btn-close:hover { + background: var(--theme_dark--button_close); +} +.notion-dark-theme .window-button#btn-close:hover svg line { + stroke: var(--theme_dark--button_close-fill); +} + +.notion-light-theme .window-button#btn-close:hover { + background: var(--theme_light--button_close); +} +.notion-light-theme .window-button#btn-close:hover svg line { + stroke: var(--theme_light--button_close-fill); +} +.notion-light-theme .window-button:hover { + background: var(--theme_light--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); +} diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css new file mode 100644 index 0000000..ee75464 --- /dev/null +++ b/mods/core/css/menu.css @@ -0,0 +1,69 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +@import './buttons.css'; +@import './scrollbars.css'; + +* { + box-sizing: border-box; + word-break: break-word; + text-decoration: none; + text-size-adjust: 100%; +} +html, +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +.notion-dark-theme * { + outline-color: var(--theme_dark--card-border); +} +.notion-light-theme * { + outline-color: var(--theme_light--card-border); +} + +.notion-dark-theme { + background: var(--theme_dark--main); +} +.notion-light-theme { + background: var(--theme_light--main); +} + +.notion-dark-theme, +.notion-dark-theme button { + color: var(--theme_dark--text); + font-family: var(--theme_dark--font_sans); +} +.notion-light-theme, +.notion-light-theme button { + color: var(--theme_light--text); + font-family: var(--theme_light--font_sans); +} + +#menu-titlebar { + display: flex; + padding: 0.4em; + -webkit-app-region: drag; +} +#menu-titlebar button { + -webkit-app-region: no-drag; +} +#menu-titlebar :first-child { + margin-left: auto; +} +.notion-dark-theme #menu-titlebar { + background: var(--theme_dark--dragarea); +} +.notion-light-theme #menu-titlebar { + background: var(--theme_light--dragarea); +} + +main { + padding: 1em; +} diff --git a/mods/core/css/shared.css b/mods/core/css/shared.css index c36f5ce..dffbafe 100644 --- a/mods/core/css/shared.css +++ b/mods/core/css/shared.css @@ -37,6 +37,14 @@ .notion-page-content .notion-collection_view-block { width: 100% !important; } +.notion-page-content + .notion-collection_view-block + [style*='padding-left: 96px'], +.notion-page-content + .notion-collection_view-block + [style*='padding-left: 126px'] { + padding-left: 0 !important; +} .notion-page-content .notion-collection_view-block [style*='min-width: calc(100% - 192px);'], diff --git a/mods/core/css/titlebar.css b/mods/core/css/titlebar.css index c4d3335..2916a7b 100644 --- a/mods/core/css/titlebar.css +++ b/mods/core/css/titlebar.css @@ -6,6 +6,8 @@ * (https://dragonwocky.me/) under the MIT license */ +@import 'buttons.css'; + .frameless .notion-topbar { height: calc(var(--configured-dragarea_height, 10px) + 45px) !important; } @@ -45,56 +47,6 @@ } } -.window-buttons-area { - display: flex; - align-items: center; - font-size: 14px; -} -.window-button { - background: transparent; - border: 0; - margin: 0px 0px 0px 9px; - width: 32px; - line-height: 26px; - border-radius: 4px; - font-size: 16px; - transition: background 0.2s; - cursor: default; -} -.window-button svg { - margin-top: 8px; - width: 14px; - height: 14px; -} -.window-button svg path { - fill: currentColor; -} -.window-button svg line { - stroke: currentColor; -} - -.notion-dark-theme .window-button:hover { - background: var(--theme_dark--button_hover); - box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); -} -.notion-dark-theme .window-button.btn-close:hover { - background: var(--theme_dark--button_close); -} -.notion-dark-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_dark--button_close-fill); -} - -.notion-light-theme .window-button.btn-close:hover { - background: var(--theme_light--button_close); -} -.notion-light-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_light--button_close-fill); -} -.notion-light-theme .window-button:hover { - background: var(--theme_light--button_hover); - box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); -} - /* hide topbar when sidebar is hidden */ .notion-sidebar-container[style*='width: 0px;'] + .notion-frame { height: calc( diff --git a/mods/core/css/variables.json b/mods/core/css/variables.json new file mode 100644 index 0000000..491b9f3 --- /dev/null +++ b/mods/core/css/variables.json @@ -0,0 +1,162 @@ +[ + "--theme_dark--main", + "--theme_dark--sidebar", + "--theme_dark--overlay", + "--theme_dark--dragarea", + "--theme_dark--preview-width", + "--theme_dark--preview_banner-height", + "--theme_dark--page_banner-height", + "--theme_dark--font_sans", + "--theme_dark--font_serif", + "--theme_dark--font_mono", + "--theme_dark--font_code", + "--theme_dark--scrollbar", + "--theme_dark--scrollbar-border", + "--theme_dark--scrollbar_hover", + "--theme_dark--card", + "--theme_dark--card-border", + "--theme_dark--table-border", + "--theme_dark--button_hover", + "--theme_dark--button_hover-border", + "--theme_dark--button_close", + "--theme_dark--button_close-fill", + "--theme_dark--selected", + "--theme_dark--primary", + "--theme_dark--primary_hover", + "--theme_dark--primary_click", + "--theme_dark--primary_indicator", + "--theme_dark--todo_empty-border", + "--theme_dark--todo_ticked", + "--theme_dark--todo_ticked-fill", + "--theme_dark--todo_ticked-background", + "--theme_dark--todo_hover-background", + "--theme_dark--danger_text", + "--theme_dark--danger_border", + "--theme_dark--text", + "--theme_dark--text_ui", + "--theme_dark--text_ui_info", + "--theme_dark--text_gray", + "--theme_dark--text_brown", + "--theme_dark--text_orange", + "--theme_dark--text_yellow", + "--theme_dark--text_green", + "--theme_dark--text_blue", + "--theme_dark--text_purple", + "--theme_dark--text_pink", + "--theme_dark--text_red", + "--theme_dark--bg_gray", + "--theme_dark--bg_brown", + "--theme_dark--bg_orange", + "--theme_dark--bg_yellow", + "--theme_dark--bg_green", + "--theme_dark--bg_blue", + "--theme_dark--bg_purple", + "--theme_dark--bg_pink", + "--theme_dark--bg_red", + "--theme_dark--line_gray", + "--theme_dark--line_brown", + "--theme_dark--line_orange", + "--theme_dark--line_yellow", + "--theme_dark--line_green", + "--theme_dark--line_blue", + "--theme_dark--line_purple", + "--theme_dark--line_pink", + "--theme_dark--line_red", + "--theme_dark--code_inline-text", + "--theme_dark--code_inline-background", + "--theme_dark--code_text", + "--theme_dark--code-background", + "--theme_dark--code_function", + "--theme_dark--code_keyword", + "--theme_dark--code_tag", + "--theme_dark--code_operator", + "--theme_dark--code_property", + "--theme_dark--code_builtin", + "--theme_dark--code_attr-name", + "--theme_dark--code_comment", + "--theme_dark--code_punctuation", + "--theme_dark--code_doctype", + "--theme_dark--code_number", + "--theme_dark--code_string", + "--theme_dark--code_attr-value", + "--theme_light--main", + "--theme_light--sidebar", + "--theme_light--overlay", + "--theme_light--dragarea", + "--theme_light--preview-width", + "--theme_light--preview_banner-height", + "--theme_light--page_banner-height", + "--theme_light--font_sans", + "--theme_light--font_serif", + "--theme_light--font_mono", + "--theme_light--font_code", + "--theme_light--scrollbar", + "--theme_light--scrollbar-border", + "--theme_light--scrollbar_hover", + "--theme_light--card", + "--theme_light--card-border", + "--theme_light--table-border", + "--theme_light--button_hover", + "--theme_light--button_hover-border", + "--theme_light--button_close", + "--theme_light--button_close-fill", + "--theme_light--selected", + "--theme_light--primary", + "--theme_light--primary_hover", + "--theme_light--primary_click", + "--theme_light--primary_indicator", + "--theme_light--todo_empty-border", + "--theme_light--todo_ticked", + "--theme_light--todo_ticked-fill", + "--theme_light--todo_ticked-background", + "--theme_light--todo_hover-background", + "--theme_light--danger_text", + "--theme_light--danger_border", + "--theme_light--text", + "--theme_light--text_ui", + "--theme_light--text_ui_info", + "--theme_light--text_gray", + "--theme_light--text_brown", + "--theme_light--text_orange", + "--theme_light--text_yellow", + "--theme_light--text_green", + "--theme_light--text_blue", + "--theme_light--text_purple", + "--theme_light--text_pink", + "--theme_light--text_red", + "--theme_light--bg_gray", + "--theme_light--bg_brown", + "--theme_light--bg_orange", + "--theme_light--bg_yellow", + "--theme_light--bg_green", + "--theme_light--bg_blue", + "--theme_light--bg_purple", + "--theme_light--bg_pink", + "--theme_light--bg_red", + "--theme_light--line_gray", + "--theme_light--line_brown", + "--theme_light--line_orange", + "--theme_light--line_yellow", + "--theme_light--line_green", + "--theme_light--line_blue", + "--theme_light--line_purple", + "--theme_light--line_pink", + "--theme_light--line_red", + "--theme_light--code_inline-text", + "--theme_light--code_inline-background", + "--theme_light--code_text", + "--theme_light--code-background", + "--theme_light--code_function", + "--theme_light--code_keyword", + "--theme_light--code_tag", + "--theme_light--code_operator", + "--theme_light--code_property", + "--theme_light--code_builtin", + "--theme_light--code_attr-name", + "--theme_light--code_comment", + "--theme_light--code_punctuation", + "--theme_light--code_doctype", + "--theme_light--code_number", + "--theme_light--code_string", + "--theme_light--code_attr-value" +] diff --git a/mods/core/icons/alwaysontop_off.svg b/mods/core/icons/alwaysontop_off.svg index e731f9b..648339d 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 b9befcd..0c2abaf 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/close.svg b/mods/core/icons/close.svg index 7268fb0..ea9caad 100644 --- a/mods/core/icons/close.svg +++ b/mods/core/icons/close.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 e79979f..ebd1c92 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 038b21e..c7fdcbd 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 e40cd84..ec85d9d 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 fcdd055..09a0eae 100644 --- a/mods/core/menu.html +++ b/mods/core/menu.html @@ -3,14 +3,20 @@ - Notion Enhancements Menu + notion-enhancer menu + + - - yayayay it works! + +
+ hi +
+ diff --git a/mods/core/menu.js b/mods/core/menu.js new file mode 100644 index 0000000..51a8e06 --- /dev/null +++ b/mods/core/menu.js @@ -0,0 +1,23 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +'use strict'; + +const __mod = require('./mod.js'), + store = require('../../pkg/store.js'), + settings = store(__mod.id, __mod.defaults), + electron = require('electron'); + +window['__start'] = async () => { + const buttons = require('./buttons.js'); + document.querySelector('#menu-titlebar').appendChild(buttons.element); + + electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => { + document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`; + for (const style of theme.rules) + document.body.style.setProperty(style[0], style[1]); + }); +}; diff --git a/mods/core/mod.js b/mods/core/mod.js index 0539538..294000b 100644 --- a/mods/core/mod.js +++ b/mods/core/mod.js @@ -4,6 +4,8 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + const defaults = { openhidden: false, maximized: false, @@ -31,4 +33,5 @@ module.exports = { 'renderer/index.js': require('./render.js')(defaults), 'renderer/preload.js': require('./client.js')(defaults), }, + defaults, }; diff --git a/mods/core/render.js b/mods/core/render.js index 0add42f..d77e17a 100644 --- a/mods/core/render.js +++ b/mods/core/render.js @@ -4,6 +4,8 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + module.exports = (defaults) => function (store, __exports) { const __start = window['__start'], @@ -21,15 +23,11 @@ module.exports = (defaults) => document .getElementById('notion') .addEventListener('ipc-message', (event) => { - if (event.channel.startsWith('enhancer:sidebar-width-')) - dragarea.setAttribute( - 'style', - `${default_styles} top: 2px; height: ${ - settings.dragarea_height - }px; left: ${event.channel.slice( - 'enhancer:sidebar-width-'.length - )};` - ); + if (event.channel !== 'enhancer:sidebar-width') return; + dragarea.setAttribute( + 'style', + `${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};` + ); }); }; }; diff --git a/mods/core/tray.js b/mods/core/tray.js index b3d36a0..f22eb74 100644 --- a/mods/core/tray.js +++ b/mods/core/tray.js @@ -5,6 +5,8 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + let tray, enhancer_menu; module.exports = (defaults) => @@ -29,6 +31,11 @@ module.exports = (defaults) => }) ); + electron.ipcMain.on('enhancer:set-theme', (event, arg) => { + if (!enhancer_menu) return; + enhancer_menu.webContents.send('enhancer:set-theme', arg); + }); + function calculateWindowPos(width, height) { const screen = electron.screen.getDisplayNearestPoint({ x: tray.getBounds().x, @@ -36,7 +43,6 @@ module.exports = (defaults) => }); // left if (screen.workArea.x > 0) - // The workspace starts more on the right return { x: screen.workArea.x, y: screen.workArea.height - height, @@ -99,11 +105,13 @@ module.exports = (defaults) => type: 'normal', label: 'Enhancements', click: () => { + if (enhancer_menu) return enhancer_menu.show(); const window_state = require(`${__notion.replace( /\\/g, '/' )}/app/node_modules/electron-window-state/index.js`)({ file: 'menu-windowstate.json', + path: helpers.data_folder, defaultWidth: 275, defaultHeight: 600, }); @@ -111,6 +119,8 @@ module.exports = (defaults) => enhancer_menu = new electron.BrowserWindow({ show: true, frame: false, + backgroundColor: '#ffffff', + titleBarStyle: 'hiddenInset', x: window_state.x || calculateWindowPos(window_state.width, window_state.height).x, @@ -120,11 +130,16 @@ module.exports = (defaults) => width: window_state.width, height: window_state.height, webPreferences: { + preload: path.resolve(`${__dirname}/menu.js`), nodeIntegration: true, session: electron.session.fromPartition('persist:notion'), }, }); enhancer_menu.loadURL('enhancement://core/menu.html'); + enhancer_menu.on('close', (e) => { + window_state.saveState(enhancer_menu); + enhancer_menu = null; + }); }, }, { diff --git a/pkg/apply.js b/pkg/apply.js index 44a8628..be740b1 100644 --- a/pkg/apply.js +++ b/pkg/apply.js @@ -5,6 +5,7 @@ */ 'use strict'; + const fs = require('fs-extra'), path = require('path'), { readdirIterator } = require('readdir-enhanced'), diff --git a/pkg/check.js b/pkg/check.js index 65e62c5..9f69958 100644 --- a/pkg/check.js +++ b/pkg/check.js @@ -5,6 +5,7 @@ */ 'use strict'; + const fs = require('fs-extra'), path = require('path'), helpers = require('./helpers.js'), diff --git a/pkg/helpers.js b/pkg/helpers.js index f09b93f..1c55a5e 100644 --- a/pkg/helpers.js +++ b/pkg/helpers.js @@ -5,6 +5,7 @@ */ 'use strict'; + const os = require('os'), path = require('path'), fs = require('fs-extra'), @@ -43,7 +44,6 @@ const is_wsl = ); // transform a wsl filepath to its relative windows filepath if necessary. -// every file path inserted by hack.js should be put through this. function realpath(hack_path) { if (!is_wsl) return hack_path; hack_path = fs.realpathSync(hack_path); diff --git a/pkg/helpers.md b/pkg/helpers.md index d9b55f9..e268e98 100644 --- a/pkg/helpers.md +++ b/pkg/helpers.md @@ -3,6 +3,8 @@ these shared variables/classes/functions (used for consistency of error handling and cross-platform functionality) were previously documented in the [module-creation docs](../DOCUMENTATION.md). however, to ensure things can be toggled on/off no non-core code is executed on enhancement. +this does made certain modding more difficult, but with some clever code the same results can be achieved. + it is unlikely any of these will need to be used, so they were removed from the main docs in an attempt to keep things as simple as possible. @@ -61,7 +63,6 @@ function getNotion() { ``` use `await helpers.getNotion()` to get the notion app parent folder path -(used to acquire the \_\_notion argument above). primarily used for internal modding of the app (e.g. to apply the modloader and patch launch scripts). diff --git a/pkg/loader.js b/pkg/loader.js index c7e7163..bf6bc78 100644 --- a/pkg/loader.js +++ b/pkg/loader.js @@ -5,6 +5,7 @@ */ 'use strict'; + const fs = require('fs-extra'), path = require('path'), helpers = require('./helpers.js'), diff --git a/pkg/remove.js b/pkg/remove.js index ae10c97..33ff3b8 100644 --- a/pkg/remove.js +++ b/pkg/remove.js @@ -5,6 +5,7 @@ */ 'use strict'; + const fs = require('fs-extra'), path = require('path'), helpers = require('./helpers.js'); diff --git a/pkg/store.js b/pkg/store.js index 9de230b..5255129 100644 --- a/pkg/store.js +++ b/pkg/store.js @@ -5,6 +5,7 @@ */ 'use strict'; + const path = require('path'), fs = require('fs-extra'), { getJSON, data_folder } = require('./helpers.js');