From e0bc581b4174628aec862cb35e04a9c80aaff528 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 2 Aug 2020 23:14:13 +1000 Subject: [PATCH] mod info boxes --- DOCUMENTATION.md | 26 ++++----- mods/core/client.js | 32 +++++----- mods/core/css/menu.css | 129 ++++++++++++++++++++++++++++++++++------- mods/core/menu.html | 3 +- mods/core/menu.js | 54 ++++++++++++++++- mods/core/mod.js | 6 +- mods/core/tray.js | 76 ++++++++++++------------ pkg/helpers.js | 3 +- pkg/loader.js | 5 +- 9 files changed, 238 insertions(+), 96 deletions(-) diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index 1d4b772..3e76c46 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -36,12 +36,11 @@ each directory in the `mods` folder is considered a module, with the entry point // of this file's exported object. module.exports = { id: String of uuidv4, - type: String in ['extension', 'theme'], name: String of short_name, - desc: String of paragraph, + tags?: Array of categories, + desc: String of markdown, version: String of semver, author: String of github_username, - thumbnail?: String of [relative_file, url], options?: { key: String, label: String, @@ -54,17 +53,16 @@ module.exports = { }; ``` -| key | value | type | -| --------- | ----------------------------------------------------------------------------------------------- | ----------------- | -| id | **required:** uuidv4 | _string_ | -| type | **required:** 'extension' or 'theme' | _string_ | -| name | **required:** short name (e.g. 'frameless window') | _string_ | -| desc | **optional:** 1-3 sentence description of what the module is/does. | _string_ | -| version | **required:** semver (e.g. '0.3.7') | _string_ | -| author | **required:** github username | _string_ | -| thumbnail | **optional:** image: relative file or url | _string_ | -| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\_ | -| hacks | **optional:** see below: code inserted at various points | _object_ | +| key | value | type | +| ------- | -------------------------------------------------------------------------------------------------- | ----------------- | +| id | **required:** uuidv4 | _string_ | +| name | **required:** short name (e.g. 'frameless window') | _string_ | +| tags | **required:** categories/type (e.g. 'extension', 'theme', 'light', 'dark') | _array\_ | +| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown formatting. | _string_ | +| version | **required:** semver (e.g. '0.3.7') | _string_ | +| author | **required:** github username | _string_ | +| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\_ | +| hacks | **optional:** see below: code inserted at various points | _object_ | #### options diff --git a/mods/core/client.js b/mods/core/client.js index d0c802b..1c535e9 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -21,30 +21,30 @@ module.exports = (defaults) => // additional hotkeys document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') window.reload(); + if (event.key === 'e' && (event.ctrlKey || event.metaKey)) + electron.ipcRenderer.send('enhancer:open-extension-menu'); }); - const interval_attempts = { - enhance: setInterval(enhance, 500), - }; + const attempt_interval = setInterval(enhance, 500); async function enhance() { if (!document.querySelector('.notion-frame')) return; - clearInterval(interval_attempts.enhance); + clearInterval(attempt_interval); // scrollbars if (settings.smooth_scrollbars) { document.body.classList.add('smooth-scrollbars'); - interval_attempts.patchScrollbars = setInterval(patchScrollbars, 50); - function patchScrollbars() { - const sidebar = document.querySelector( - '.notion-scroller.vertical[style*="overflow: hidden auto;"]' - ); - if (!sidebar) return; - clearInterval(interval_attempts.patchScrollbars); - sidebar.style.overflow = ''; - setTimeout(() => { - sidebar.style.overflow = 'hidden auto'; - }, 10); - } + // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100); + // function patchScrollbars() { + // const sidebar = document.querySelector( + // '.notion-scroller.vertical[style*="overflow: hidden auto;"]' + // ); + // if (!sidebar) return; + // clearInterval(interval_attempts.patchScrollbars); + // sidebar.style.overflow = ''; + // setTimeout(() => { + // sidebar.style.overflow = 'hidden auto'; + // }, 10); + // } } // frameless diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css index f73b2de..65b8afd 100644 --- a/mods/core/css/menu.css +++ b/mods/core/css/menu.css @@ -28,6 +28,7 @@ body { height: 100%; margin: 0; padding: 0; + overflow: hidden; } body:not([style]) > * { @@ -63,6 +64,39 @@ body:not([style])::after { background: var(--theme_light--main); } +main { + padding: 1em; + height: 100%; + overflow: auto; +} + +main section { + border-radius: 2px; + padding: 0.75em; + margin-bottom: 0.75em; +} + +/* inline formatting */ + +code { + border-radius: 0.1em; + padding: 0.2em 0.4em; +} +.notion-dark-theme code { + font: 0.85em var(--theme_dark--font_code); + /* color: var(--theme_dark--code_inline-text); */ + background: var(--theme_dark--code_inline-background); +} +.notion-light-theme code { + font: 0.85em var(--theme_light--font_code); + /* color: var(--theme_light--code_inline-text); */ + background: var(--theme_light--code_inline-background); +} + +u { + text-decoration: underline; +} + .notion-dark-theme, .notion-dark-theme button { color: var(--theme_dark--text); @@ -74,6 +108,18 @@ body:not([style])::after { font-family: var(--theme_light--font_sans); } +/* titlebar */ + +#menu-titlebar::before { + content: ''; + position: absolute; + width: 100%; + -webkit-app-region: no-drag; + top: 0; + left: 0; + height: 2px; +} + #menu-titlebar { display: flex; padding: 0.4em; @@ -92,14 +138,10 @@ body:not([style])::after { background: var(--theme_light--dragarea); } -main { - padding: 1em; -} +/* alerts */ #alerts [role='alert'] { - padding: 0.25em; display: flex; - margin-bottom: 0.75em; } #alerts [role='alert']::before { content: '!'; @@ -107,12 +149,12 @@ main { /* margin: auto 0; */ font-weight: bold; font-size: 1.2em; - padding: 0.5rem; + padding-right: 0.5rem; } #alerts [role='alert'] p { font-size: 1rem; margin: auto 0; - padding: 0.5em; + padding-left: 0.5em; } .notion-dark-theme #alerts [role='alert'] p { @@ -176,21 +218,66 @@ main { background: var(--theme_light--line_green); } -code { - border-radius: 0.1em; - padding: 0.2em 0.4em; +/* modules */ + +.notion-dark-theme #modules section { + background: var(--theme_dark--sidebar); + border: 1px solid var(--theme_dark--table-border); } -.notion-dark-theme code { - font: 0.85em var(--theme_dark--font_code); - /* color: var(--theme_dark--code_inline-text); */ - background: var(--theme_dark--code_inline-background); -} -.notion-light-theme code { - font: 0.85em var(--theme_light--font_code); - /* color: var(--theme_light--code_inline-text); */ - background: var(--theme_light--code_inline-background); +.notion-light-theme #modules section { + background: var(--theme_light--sidebar); + border: 1px solid var(--theme_light--card-border); } -u { - text-decoration: underline; +#modules section h3, +#modules section p { + margin: 0; + font-size: 1rem; +} + +#modules section .desc { + margin: 0.3em 0 0.4em 0; + font-size: 0.9em; +} +#modules section .desc a { + color: currentColor; + text-decoration: underline dotted; +} +#modules section .desc s { + text-decoration: line-through; +} +#modules section .desc img { + width: 100%; + max-width: 20em; + margin: 0.5em 0; +} +#modules section .desc img:first-child { + margin-top: 0; +} +#modules section .desc img:last-child { + margin-bottom: 0; +} + +#modules section .author { + color: currentColor; +} +#modules section .author img { + max-height: 1em; + max-width: 1em; + margin-bottom: 0.15625em; + display: inline-block; + vertical-align: middle; + border-radius: 50%; +} +#modules section .tags, +#modules section .version { + font-size: 0.85em; +} +.notion-dark-theme #modules section .tags, +.notion-dark-theme #modules section .version { + color: var(--theme_dark--text_ui); +} +.notion-light-theme #modules section .tags, +.notion-light-theme #modules section .version { + color: var(--theme_light--text_ui); } diff --git a/mods/core/menu.html b/mods/core/menu.html index 1d1d336..2fa7261 100644 --- a/mods/core/menu.html +++ b/mods/core/menu.html @@ -1,10 +1,11 @@ - + notion-enhancer menu + diff --git a/mods/core/menu.js b/mods/core/menu.js index 0f7438b..37ccf5e 100644 --- a/mods/core/menu.js +++ b/mods/core/menu.js @@ -9,14 +9,23 @@ const __mod = require('./mod.js'), store = require('../../pkg/store.js'), helpers = require('../../pkg/helpers.js'), - electron = require('electron'); + electron = require('electron'), + browser = electron.remote.getCurrentWindow(); window['__start'] = async () => { const buttons = require('./buttons.js'); document.querySelector('#menu-titlebar').appendChild(buttons.element); + document.defaultView.addEventListener('keyup', (event) => { + if (event.code === 'F5') window.reload(); + if (event.key === 'e' && (event.ctrlKey || event.metaKey)) { + electron.remote.BrowserWindow.getAllWindows()[0].show(); + browser.close(); + } + }); + electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => { - document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`; + document.body.className = `notion-${theme.mode}-theme`; for (const style of theme.rules) document.body.style.setProperty(style[0], style[1]); }); @@ -85,6 +94,7 @@ window['__start'] = async () => { ).prepend(); }); + // mod loader const modules = helpers.getEnhancements(); if (modules.loaded.length) console.info( @@ -100,4 +110,44 @@ window['__start'] = async () => { .join(', ')}.` ).append(); } + + // mod options + function markdown(string) { + return snarkdown( + string + .split('\n') + .map((line) => line.trim()) + .join('
') + ).replace(/([^\\])?~~([^\n]*[^\\])~~/g, '$1$2'); + } + const $modules = document.querySelector('#modules'); + for (let mod of modules.loaded.sort((a, b) => + store('mods', { [mod.id]: { pinned: false } }).pinned + ? 1 + : a.name.localeCompare(b.name) + )) { + $modules.append( + createElement(` +
+

${mod.name}

+

${mod.tags + .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) + .join(' ')}

+

${markdown(mod.desc)}

+

+ + + ${mod.author} + + v${mod.version} +

+
+ `) + ); + } }; diff --git a/mods/core/mod.js b/mods/core/mod.js index 294000b..894d854 100644 --- a/mods/core/mod.js +++ b/mods/core/mod.js @@ -18,10 +18,10 @@ const defaults = { module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', - type: 'core', + tags: ['core', 'extension'], name: 'notion-enhancer core', - desc: - 'the modloader itself, including: the CLI, the menu, and enabling/disabling/insertion/updating of mods.', + desc: `the **modloader** itself, _including_: the [CLI](https://github.com), the menu, and ~~enabling/disabling/insertion/updating of~~ mods. + ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, version: require('../../package.json').version, author: 'dragonwocky', thumb: diff --git a/mods/core/tray.js b/mods/core/tray.js index 6a2acee..91c8a48 100644 --- a/mods/core/tray.js +++ b/mods/core/tray.js @@ -35,6 +35,7 @@ module.exports = (defaults) => if (!enhancer_menu) return; enhancer_menu.webContents.send('enhancer:set-theme', arg); }); + electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); function calculateWindowPos(width, height) { const screen = electron.screen.getDisplayNearestPoint({ @@ -70,6 +71,43 @@ module.exports = (defaults) => }; } + function openExtensionMenu() { + 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, + }); + electron.shell.openExternal(JSON.stringify(window_state)); + enhancer_menu = new electron.BrowserWindow({ + show: true, + frame: false, + titleBarStyle: 'hiddenInset', + x: + window_state.x || + calculateWindowPos(window_state.width, window_state.height).x, + y: + window_state.y || + calculateWindowPos(window_state.width, window_state.height).y, + 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; + }); + } + const contextMenu = electron.Menu.buildFromTemplate([ { type: 'normal', @@ -104,42 +142,8 @@ 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, - }); - electron.shell.openExternal(JSON.stringify(window_state)); - enhancer_menu = new electron.BrowserWindow({ - show: true, - frame: false, - titleBarStyle: 'hiddenInset', - x: - window_state.x || - calculateWindowPos(window_state.width, window_state.height).x, - y: - window_state.y || - calculateWindowPos(window_state.width, window_state.height).y, - 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; - }); - }, + accelerator: 'CommandOrControl+E', + click: openExtensionMenu, }, { type: 'separator', diff --git a/pkg/helpers.js b/pkg/helpers.js index 29d2430..8040baa 100644 --- a/pkg/helpers.js +++ b/pkg/helpers.js @@ -127,8 +127,7 @@ function getEnhancements() { modules.IDs.includes(mod.id) || !mod.name || !mod.version || - !mod.author || - !['extension', 'theme', 'core'].includes(mod.type) + !mod.author ) throw Error; modules.loaded.push({ diff --git a/pkg/loader.js b/pkg/loader.js index 3d8a5d5..e318eb1 100644 --- a/pkg/loader.js +++ b/pkg/loader.js @@ -48,7 +48,10 @@ module.exports = function (__file, __exports) { document.querySelector('head').appendChild(style); }); } - if (mod.type === 'core' || store('mods', { [mod.id]: false })[mod.id]) { + if ( + mod.type === 'core' || + store('mods', { [mod.id]: { enabled: false } })[mod.id] + ) { if (mod.hacks && mod.hacks[__file]) mod.hacks[__file]( (...args) =>