From 9f92ff325da3387e835e05e2f934adea2c231d76 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 26 Jul 2020 16:32:55 +1000 Subject: [PATCH] refactor some stuff, fix some bugs, apply theme to ctrl+f popup --- repo/core/client.js | 39 +++++++++++++++++++-- repo/core/{window.js => create.js} | 0 repo/core/dark.css | 10 ++++-- repo/core/light.css | 10 ++++-- repo/core/mod.js | 6 ++-- repo/core/{dragarea.js => render.js} | 0 repo/core/styles.css | 52 ---------------------------- repo/core/tray.js | 19 ++++++++++ repo/core/variables.css | 4 +++ 9 files changed, 79 insertions(+), 61 deletions(-) rename repo/core/{window.js => create.js} (100%) rename repo/core/{dragarea.js => render.js} (100%) diff --git a/repo/core/client.js b/repo/core/client.js index 8a9676a..c0b7d21 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -12,7 +12,13 @@ module.exports = (defaults) => path = require('path'), fs = require('fs-extra'), is_mac = process.platform === 'darwin', - settings = store(defaults); + settings = store(defaults), + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(), + notionIpc = require(`${__notion.replace( + /\\/g, + '/' + )}/app/helpers/notionIpc.js`); // additional hotkeys document.defaultView.addEventListener('keyup', (event) => { @@ -39,10 +45,39 @@ module.exports = (defaults) => sidebar.style.overflow = ''; setTimeout(() => { sidebar.style.overflow = 'hidden auto'; - }, 1); + }, 10); } } + // 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'); diff --git a/repo/core/window.js b/repo/core/create.js similarity index 100% rename from repo/core/window.js rename to repo/core/create.js diff --git a/repo/core/dark.css b/repo/core/dark.css index fc660d6..f8512f8 100644 --- a/repo/core/dark.css +++ b/repo/core/dark.css @@ -10,7 +10,8 @@ /** general ui **/ .notion-dark-theme [style*='background: rgb(55, 60, 63)'], -.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { +.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'], +.notion-dark-theme [style*='background: rgb(120, 123, 123)'] { background: var(--theme_dark--sidebar) !important; } .notion-body.dark, @@ -19,6 +20,10 @@ background: var(--theme_dark--main) !important; } +.notion-dark-theme [style*='background: rgba(15, 15, 15, 0.6)'] { + background: var(--theme_dark--overlay) !important; +} + .notion-dark-theme .notion-peek-renderer > div:nth-child(2) { max-width: var(--theme_dark--preview-width) !important; } @@ -107,7 +112,8 @@ } .notion-dark-theme [style*='background: rgb(71, 76, 80)'], -.notion-dark-theme [style*='background: rgb(80, 85, 88)'] { +.notion-dark-theme [style*='background: rgb(80, 85, 88)'], +.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { background: var(--theme_dark--button_hover) !important; box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); } diff --git a/repo/core/light.css b/repo/core/light.css index 798e63a..7067305 100644 --- a/repo/core/light.css +++ b/repo/core/light.css @@ -10,7 +10,8 @@ /** general ui **/ .notion-light-theme [style*='background: rgb(247, 246, 243)'], -.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'] { +.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'], +.notion-light-theme [style*='background: rgb(223, 223, 222)'] { background: var(--theme_light--sidebar) !important; } .notion-body.light, @@ -20,6 +21,10 @@ background: var(--theme_light--main) !important; } +.notion-light-theme [style*='background: rgba(15, 15, 15, 0.6)'] { + background: var(--theme_light--overlay) !important; +} + .notion-light-theme .notion-peek-renderer > div:nth-child(2) { max-width: var(--theme_light--preview-width) !important; } @@ -104,7 +109,8 @@ box-shadow: var(--theme_light--table-border) 0px 1px 0px inset !important; } -.notion-light-theme [style*='background: rgba(55, 53, 47,'] { +.notion-light-theme [style*='background: rgba(55, 53, 47,'], +.notion-light-theme [style*='background: rgb(239, 239, 238)'] { background: var(--theme_light--button_hover) !important; box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); } diff --git a/repo/core/mod.js b/repo/core/mod.js index 5e6ed8c..0539538 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -5,7 +5,7 @@ */ const defaults = { - openhidden: true, + openhidden: false, maximized: false, close_to_tray: true, frameless: true, @@ -27,8 +27,8 @@ module.exports = { options: [], hacks: { 'main/main.js': require('./tray.js')(defaults), - 'main/createWindow.js': require('./window.js')(defaults), - 'renderer/index.js': require('./dragarea.js')(defaults), + 'main/createWindow.js': require('./create.js')(defaults), + 'renderer/index.js': require('./render.js')(defaults), 'renderer/preload.js': require('./client.js')(defaults), }, }; diff --git a/repo/core/dragarea.js b/repo/core/render.js similarity index 100% rename from repo/core/dragarea.js rename to repo/core/render.js diff --git a/repo/core/styles.css b/repo/core/styles.css index 6a57d80..b2a7b88 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -10,55 +10,3 @@ @import './shared.css'; @import './scrollbars.css'; @import './titlebar.css'; - -:root { - --theme_light--main: rgb(5, 5, 5); - --theme_light--sidebar: rgb(1, 1, 1); - --theme_light--dragarea: #030303; - --theme_light--primary: rgb(177, 24, 24); - --theme_light--primary_hover: rgb(202, 26, 26); - --theme_light--primary_click: rgb(219, 41, 41); - --theme_light--primary_indicator: rgb(202, 26, 26); - - --theme_light--card: rgb(4, 4, 4); - --theme_light--card_border: rgba(10, 10, 10, 0.7); - --theme_light--button: rgb(15, 15, 15); - --theme_light--button_hover: rgb(32, 32, 32); - --theme_light--button_border: rgba(78, 78, 78, 0.7); - --theme_light--table_border: rgba(255, 255, 255, 0.1); - - --theme_light--scrollbar: #232425; - --theme_light--scrollbar-border: transparent; - --theme_light--scrollbar_hover: #373838; - - --theme_light--text: rgb(228, 228, 228); - --theme_light--text_ui: rgba(211, 211, 211, 0.637); - --theme_light--text_ui_info: rgba(211, 211, 211, 0.466); - --theme_light--text_gray: rgba(151, 154, 155, 0.95); - --theme_light--text_brown: rgb(147, 114, 100); - --theme_light--text_orange: rgb(255, 163, 68); - --theme_light--text_yellow: rgb(255, 220, 73); - --theme_light--text_green: rgb(50, 169, 104); - --theme_light--text_blue: rgb(82, 156, 202); - --theme_light--text_purple: rgb(154, 109, 215); - --theme_light--text_pink: rgb(226, 85, 161); - --theme_light--text_red: rgb(218, 47, 35); - --theme_light--bg_gray: rgba(126, 128, 129, 0.5); - --theme_light--bg_brown: #50331f; - --theme_light--bg_orange: rgba(255, 155, 0, 0.58); - --theme_light--bg_yellow: rgba(183, 155, 0, 1); - --theme_light--bg_green: rgb(50, 129, 47); - --theme_light--bg_blue: rgba(0, 90, 146, 0.71); - --theme_light--bg_purple: rgba(91, 49, 148, 0.74); - --theme_light--bg_pink: rgba(243, 61, 159, 0.5); - --theme_light--bg_red: rgb(122, 20, 20); - --theme_light--line_gray: rgba(126, 128, 129, 0.301); - --theme_light--line_brown: #50331fad; - --theme_light--line_orange: rgba(255, 153, 0, 0.315); - --theme_light--line_yellow: rgba(183, 156, 0, 0.445); - --theme_light--line_green: rgba(50, 129, 47, 0.39); - --theme_light--line_blue: rgba(0, 90, 146, 0.521); - --theme_light--line_purple: rgba(90, 49, 148, 0.349); - --theme_light--line_pink: rgba(243, 61, 158, 0.301); - --theme_light--line_red: rgba(122, 20, 20, 0.623); -} diff --git a/repo/core/tray.js b/repo/core/tray.js index 53525b3..c763ae3 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -89,6 +89,25 @@ module.exports = (defaults) => tray.on('click', () => { const windows = electron.BrowserWindow.getAllWindows(); + + for (let browser of windows) { + browser.webContents.sendInputEvent({ + type: 'keyDown', + modifiers: ['control', 'shift'], + key: 'L', + }); + browser.webContents.sendInputEvent({ + type: 'char', + modifiers: ['control', 'shift'], + key: 'L', + }); + browser.webContents.sendInputEvent({ + type: 'keyUp', + modifiers: ['control', 'shift'], + key: 'L', + }); + } + if (windows.some((win) => win.isVisible())) hideWindows(); else showWindows(); }); diff --git a/repo/core/variables.css b/repo/core/variables.css index d13f66a..6415a09 100644 --- a/repo/core/variables.css +++ b/repo/core/variables.css @@ -12,6 +12,7 @@ --theme_dark--main: rgb(47, 52, 55); --theme_dark--sidebar: rgb(55, 60, 63); + --theme_dark--overlay: rgba(15, 15, 15, 0.6); --theme_dark--dragarea: #272d2f; --theme_dark--preview-width: 977px; --theme_dark--preview_banner-height: 20vh; @@ -47,6 +48,7 @@ --theme_dark--todo_empty-border: currentColor; --theme_dark--todo_ticked: currentColor; + --theme_dark--todo_ticked-fill: white; --theme_dark--todo_ticked-background: var(--theme_dark--primary); --theme_dark--todo_hover-background: rgb(71, 76, 80); @@ -107,6 +109,7 @@ --theme_light--main: white; --theme_light--sidebar: rgb(247, 246, 243); + --theme_light--overlay: rgba(15, 15, 15, 0.6); --theme_light--dragarea: rgba(55, 53, 47, 0.04); --theme_light--preview-width: 977px; --theme_light--preview_banner-height: 20vh; @@ -142,6 +145,7 @@ --theme_light--todo_empty-border: currentColor; --theme_light--todo_ticked: currentColor; + --theme_light--todo_ticked-fill: white; --theme_light--todo_ticked-background: var(--theme_light--primary); --theme_light--todo_hover-background: rgba(55, 53, 47, 0.08);