diff --git a/CHANGELOG.md b/CHANGELOG.md index 924f74a..ff41253 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,27 +13,27 @@ a flexibility update. higher up on the list = higher priority of application = loaded last in order to override others. (excluding the core, which though pinned to the top of the list is always loaded first so theming variables can be modified.) -- new: in-page columns are disabled/wrapped and pages are wider when - the window is narrower than 600px for improved responsiveness. - new: relaunch button in tray menu. -- new: a core mod option to make transitions snappy/0s. - new: a core mod option for a default page id/url (all new windows will load it instead of the normal "most recent" page). - new: css variables for increasing line spacing/paragraph margins. - new: patch the notion:// url scheme/protocol to work on linux. - new: menu shows theme conflicts + a core mod option to auto-resolve theme conflicts. +- new: a `-n` cli option. - improved: menu will now respect integrated titlebar setting. - improved: use keyup listeners instead of a globalShortcut for the enhancements menu toggle. +- improved: overwrite `app.asar.bak` if already exists (e.g. for app updates). +- improved: additional menu option descriptions on hover. +- improved: listen to prefers-color-scheme to better change theme in night shift. - bugfix: removed messenger emoji set as the provider no longer supports it. -- bugfix: remove shadow around light mode board headers - \+ minor text colour fixes for night shift theming. +- bugfix: remove shadow around light mode board headers. - bugfix: properly detect/respond to `EACCES`/`EBUSY` errors. - bugfix: night shift checks every interaction, will respond to system changes without any manual changes. - bugfix: toc blocks can have text colours. - bugfix: bypass preview extension works with the back/forward keyboard shortcuts. - bugfix: (maybe) fix csp issues under proxy. -- bugfix: remove focus mode footer from neutral theme. +- bugfix: remove focus mode footer from neutral theme + better contrast in calendar views. - bugfix: improvements to the colour theming, particularly to make real- and fake-light/dark modes (as applied by the night shift extension) look consistent. relevant variables (assuming all are prefixed by `--theme_[dark|light]--`): @@ -44,23 +44,35 @@ a flexibility update. - bugfix: right-to-left extension applies to text in columns. - bugfix: block text colour applies to text with backgrounds. - bugfix: font applied to wrong mode with littlepig dark. +- bugfix: keep "empty" top bar visible in the menu. +- bugfix: set NSRequiresAquaSystemAppearance to false in /Applications/Notion.app/Contents/Info.plist + so system dark/light mode can be properly detected. - tweak: sticky table/list rows. - theme: "material ocean" = an oceanic colour palette. - theme: "dracula" = a theme based on the popular dracula color palette originally by zeno rocha and friends. -- extension: "tabs" = have multiple notion pages open in a single window. +- extension: "tabs" = have multiple notion pages open in a single window. tabs can be controlled + with keyboard shortcuts and dragged/reordered within/between windows. - extension: "scroll to top" = add an arrow above the help button to scroll back to the top of a page. +- extension: "tweaks" = common style/layout changes. includes: + - new: make transitions snappy/0s. + - new: in-page columns are disabled/wrapped and pages are wider when + the window is narrower than 600px for improved responsiveness. + - new: thicker bold text for better visibility. + - new: more readable line spacing. + - moved: smooth scrollbars. + - moved: change dragarea height. + - moved: hide help. a fork of notion-deb-builder that does generate an app.asar has been created and is once again supported. // todo -- bugfix: night shift working on macOS. -- bugfix: windows are properly hidden/shown on macOS. -- extension: "tweaks" = common style/layout changes. -- new: a `-n` cli option. -- improved: overwrite `app.asar.bak` if already exists. -- improved: additionally menu item descriptions on hover. +MACOS SPECIFIC FIXES + +- close to tray: perma-true +- frameless mode: perma-false +- open ext. menu hotkey not working? ### v0.9.1 (2020-09-26) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 515c48f..4d3399c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -49,7 +49,7 @@ modules are either **extensions** or **themes**. each module is separately versioned, following the [semver](https://semver.org/) scheme. depending on the content and scale of a contribution, it may constitute an update on its own or may be merged into a larger update. -to keep a consistent informative code style it is preferred to name variables with +to keep a consistent & informative code style it is preferred to name variables with `snake_case`, functions/methods with `camelCase`, and classes with `PascalCase`. if a variable is a reference to a DOM element, it may be helpful to prefix it with a `$`. diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index ed22a83..7125130 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -51,6 +51,7 @@ module.exports = { options?: Array<{ key: String, label: String, + description?: String, type: String in ['toggle', 'select', 'input', 'file'], value: Boolean or Array or String or Number or null }>, @@ -94,13 +95,14 @@ if you'd rather customise this, pass this object: #### options -| key | value | type | -| ---------- | ---------------------------------------------------------------------------------------- | ----------------- | -| key | **required:** key to save value to the mod `store` | _string_ | -| label | **required:** short description/name of option to be shown in menu | _string_ | -| type | **required:** input type (see below) | _string_ | -| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | -| value | **optional:** default or possible value/s for option | see below | +| key | value | type | +| ----------- | ---------------------------------------------------------------------------------------- | ----------------- | +| key | **required:** key to save value to the mod `store` | _string_ | +| label | **required:** short description/name of option to be shown in menu | _string_ | +| description | **optional:** extended information to be shown on hover | _string_ | +| type | **required:** input type (see below) | _string_ | +| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | +| value | **optional:** default or possible value/s for option | see below | | type | value | | ------ | -------------------- | diff --git a/README.md b/README.md index 1f1f702..1decf7e 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ For more info, run any command with the `--help` flag: Options: -y, --yes : skip prompts (may overwrite data) + -n, --no : skip prompts (may cause failures) -d, --dev : show detailed error messages (not recommended) -h, --help : display usage information -v, --version : display version number diff --git a/bin.js b/bin.js index aab013f..d2ba145 100755 --- a/bin.js +++ b/bin.js @@ -20,6 +20,7 @@ const cli = require('cac')('notion-enhancer'), // ### error ### cli.option('-y, --yes', ': skip prompts (may overwrite data)'); +cli.option('-n, --no', ': skip prompts (may cause failures)'); cli.option('-d, --dev', ': show detailed error messages'); cli @@ -27,7 +28,7 @@ cli .action(async (options) => { console.info('=== NOTION ENHANCEMENT LOG ==='); await require('./pkg/apply.js')({ - overwrite_version: options.yes, + overwrite_version: options.yes ? 'y' : options.no ? 'n' : undefined, friendly_errors: !options.dev, }); console.info('=== END OF LOG ==='); @@ -37,8 +38,7 @@ cli .action(async (options) => { console.info('=== NOTION RESTORATION LOG ==='); await require('./pkg/remove.js')({ - overwrite_asar: options.yes, - delete_data: options.yes, + delete_data: options.yes ? 'y' : options.no ? 'n' : undefined, friendly_errors: !options.dev, }); console.info('=== END OF LOG ==='); diff --git a/mods/calendar-scroll/mod.js b/mods/calendar-scroll/mod.js index 13dcd89..4284076 100644 --- a/mods/calendar-scroll/mod.js +++ b/mods/calendar-scroll/mod.js @@ -6,7 +6,7 @@ 'use strict'; -const helpers = require('../../pkg/helpers.js'); +const { createElement } = require('../../pkg/helpers.js'); module.exports = { id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a', @@ -26,7 +26,7 @@ module.exports = { if (!notion_elem) return; clearInterval(attempt_interval); - const button = helpers.createElement( + const button = createElement( '' ); button.addEventListener('click', (event) => { diff --git a/mods/cherrycola/styles.css b/mods/cherrycola/styles.css index 893e96a..0272928 100644 --- a/mods/cherrycola/styles.css +++ b/mods/cherrycola/styles.css @@ -24,7 +24,7 @@ /* Main */ --theme_dark--main: var(--cola-main); --theme_dark--sidebar: var(--cola-sec); - --theme_dark--overlay: var(--cola-sec); + --theme_dark--overlay: rgba(29, 9, 25, 0.5); --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; diff --git a/mods/core/client.js b/mods/core/client.js index 2d8d458..46142a8 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -79,12 +79,6 @@ module.exports = (store, __exports) => { return; clearInterval(attempt_interval); - // toggleable styles - if (store().smooth_scrollbars) - document.body.classList.add('smooth-scrollbars'); - if (store().snappy_transitions) - document.body.classList.add('snappy-transitions'); - // frameless if (store().frameless && !store().tiling_mode && !tabsEnabled) { document.body.classList.add('frameless'); @@ -92,10 +86,6 @@ module.exports = (store, __exports) => { document .querySelector('.notion-topbar') .prepend(helpers.createElement('
')); - document.documentElement.style.setProperty( - '--configured--dragarea_height', - `${store().dragarea_height + 2}px` - ); } // window buttons @@ -156,8 +146,10 @@ module.exports = (store, __exports) => { '--theme--sidebar', '--theme--overlay', '--theme--dragarea', + '--theme--box-shadow_strong', '--theme--font_sans', '--theme--font_code', + '--theme--font_label-size', '--theme--scrollbar', '--theme--scrollbar-border', '--theme--scrollbar_hover', @@ -224,7 +216,38 @@ module.exports = (store, __exports) => { if (tabsEnabled) { let tab_title = ''; + const TITLE_OBSERVER = new MutationObserver(() => + __electronApi.setWindowTitle('notion.so') + ); __electronApi.setWindowTitle = (title) => { + const $container = + document.querySelector( + '.notion-peek-renderer [style="padding-left: calc(126px + env(safe-area-inset-left)); padding-right: calc(126px + env(safe-area-inset-right)); max-width: 100%; width: 100%;"]' + ) || + document.querySelector( + '.notion-frame [style="padding-left: calc(96px + env(safe-area-inset-left)); padding-right: calc(96px + env(safe-area-inset-right)); max-width: 100%; margin-bottom: 8px; width: 100%;"]' + ) || + document.querySelector('.notion-peak-renderer') || + document.querySelector('.notion-frame'), + icon = $container.querySelector( + '.notion-record-icon [aria-label]:not([src^="data:"])' + ), + text = $container.querySelector('[placeholder="Untitled"]'); + title = + (icon ? `` : '') + + (text + ? text.innerText + : [ + setTimeout(() => __electronApi.setWindowTitle(title), 250), + title, + ][1]); + TITLE_OBSERVER.disconnect(); + TITLE_OBSERVER.observe($container, { + childList: true, + subtree: true, + characterData: true, + attributes: true, + }); if (tab_title !== title) { tab_title = title; electron.ipcRenderer.sendToHost('enhancer:set-tab-title', title); diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css index 4e05425..7bf8437 100644 --- a/mods/core/css/menu.css +++ b/mods/core/css/menu.css @@ -117,6 +117,9 @@ s { #titlebar .window-buttons-area:empty { display: none; } +[data-platform='darwin'] #titlebar { + height: 2.65em; +} /* alerts */ @@ -342,6 +345,29 @@ s { margin-bottom: 0.5em; } +svg[data-tooltip] { + height: 1em; + width: 1em; + margin: 0 0 -2px 1px; + color: var(--theme--text_ui_info); +} +#tooltip { + pointer-events: none; + position: absolute; + padding: 0.25em 0.5em 0.5em 0.5em; + margin: 0 1em; + border-radius: 3px; + box-shadow: var(--theme--box-shadow_strong); + border-right-width: 1px; + font-size: calc(var(--theme--font_label-size) * 0.8); + background: var(--theme--interactive_hover); + opacity: 0; + transition: opacity 120ms ease-in; +} +#tooltip.active { + opacity: 1; +} + .toggle *, .input *, .select *, @@ -415,6 +441,7 @@ s { } .toggle input[type='checkbox'] + label .name { flex-basis: calc(100% - 2.25em); + margin-right: 0.75em; } .toggle input[type='checkbox'] + label .switch { position: relative; diff --git a/mods/core/css/responsive.css b/mods/core/css/responsive.css deleted file mode 100644 index 0b92c03..0000000 --- a/mods/core/css/responsive.css +++ /dev/null @@ -1,26 +0,0 @@ -/* - * notion-enhancer - * (c) 2020 dragonwocky (https://dragonwocky.me/) - * under the MIT license - */ - -@media (max-width: 600px) { - .notion-column_list-block [style='display: flex;'] > div { - width: 100% !important; - } - .notion-column_list-block [style='display: flex;'] { - flex-direction: column !important; - } - - .notion-app-inner { - --theme_dark--page_normal-width: 100%; - --theme_dark--page-padding: calc(48px + env(safe-area-inset-left)); - --theme_light--page_normal-width: 100%; - --theme_light--page-padding: calc(48px + env(safe-area-inset-left)); - } -} - -.snappy-transitions * { - animation-duration: 0s !important; - transition-duration: 0s !important; -} diff --git a/mods/core/css/scrollbars.css b/mods/core/css/scrollbars.css index 2286f9a..a837c92 100644 --- a/mods/core/css/scrollbars.css +++ b/mods/core/css/scrollbars.css @@ -5,25 +5,25 @@ * under the MIT license */ -.smooth-scrollbars .notion-scroller { +[data-tweaks*='[smooth_scrollbars]'] .notion-scroller { cursor: auto; } -.smooth-scrollbars ::-webkit-scrollbar { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar { width: 8px; /* vertical */ height: 8px; /* horizontal */ -webkit-app-region: no-drag; } -.smooth-scrollbars ::-webkit-scrollbar-corner { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-corner { background-color: transparent; /* overlap */ } -.smooth-scrollbars ::-webkit-scrollbar-thumb { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb { border-radius: 5px; } -.smooth-scrollbars ::-webkit-scrollbar-thumb { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb { background-color: var(--theme--scrollbar); border: 1px solid var(--theme--scrollbar-border); } -.smooth-scrollbars ::-webkit-scrollbar-thumb:hover { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb:hover { background: var(--theme--scrollbar_hover); } diff --git a/mods/core/css/tabs.css b/mods/core/css/tabs.css index 1e38668..cbde34a 100644 --- a/mods/core/css/tabs.css +++ b/mods/core/css/tabs.css @@ -75,6 +75,9 @@ body, flex-direction: column; } +[data-platform='darwin'] #titlebar { + padding-left: 4em; +} #titlebar::before { content: ''; position: absolute; @@ -127,6 +130,10 @@ body, border-bottom: 4px solid var(--theme--table-border); opacity: 0.8; } +#tabs .tab img { + width: 1em; + margin: 0 0.5em -3px 0.1em; +} #tabs .tab:first-child { margin-top: 0.5em; } diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css index ad52e80..1e69d31 100644 --- a/mods/core/css/theme.css +++ b/mods/core/css/theme.css @@ -28,6 +28,7 @@ .notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] { background: var(--theme--sidebar) !important; } +.notion-peek-renderer, [style*='background: rgba(15, 15, 15, 0.6)'] { background: var(--theme--overlay) !important; } @@ -198,7 +199,7 @@ /** text-block readability **/ -.notion-selectable.notion-text-block { +.notion-page-content .notion-selectable.notion-text-block { line-height: var(--theme--text-block_line-height) !important; margin-top: var(--theme--text-block_margin-top) !important; } diff --git a/mods/core/enhancerMenu.js b/mods/core/enhancerMenu.js index aacb52e..7b3b706 100644 --- a/mods/core/enhancerMenu.js +++ b/mods/core/enhancerMenu.js @@ -14,6 +14,8 @@ const store = require('../../pkg/store.js'), { toKeyEvent } = require('keyboardevent-from-electron-accelerator'); window['__start'] = async () => { + document.body.setAttribute('data-platform', process.platform); + // mod loader const modules = helpers.getEnhancements(); if (modules.loaded.length) @@ -137,7 +139,7 @@ window['__start'] = async () => { !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey; if ( meta && - document.activeElement.parentElement.id === 'tags' && + document.activeElement.getAttribute('tabindex') === '0' && event.key === 'Enter' ) document.activeElement.click(); @@ -226,7 +228,7 @@ window['__start'] = async () => { .map((mod) => `${mod.name}`) .join( ', ' - )}.
resolve or dismiss to continue.` + )}.
resolve or dismiss to continue.` ); alert.el .querySelector('[data-action="dismiss"]') @@ -246,7 +248,7 @@ window['__start'] = async () => { if (conflicts.relaunch) return; conflicts.relaunch = createAlert( 'info', - 'changes may not fully apply until app relaunch.' + 'changes may not fully apply until app relaunch.' ); conflicts.relaunch.el .querySelector('[data-action="relaunch"]') @@ -271,10 +273,13 @@ window['__start'] = async () => { let text = ''; for (let $node of elem.childNodes) { if ($node.nodeType === 3) text += $node.textContent; - if ($node.nodeType === 1) + if ($node.nodeType === 1) { + if ($node.getAttribute('data-tooltip')) + text += $node.getAttribute('data-tooltip'); text += ['text', 'number'].includes($node.type) ? $node.value : innerText($node); + } } return text; } @@ -387,24 +392,35 @@ window['__start'] = async () => { } const file_icon = await fs.readFile( - path.resolve(`${__dirname}/icons/file.svg`) - ); + path.resolve(`${__dirname}/icons/file.svg`) + ), + question_icon = ( + await fs.readFile(path.resolve(`${__dirname}/icons/question.svg`)) + ).toString(); function createOption(opt, id) { let $opt; + const description = opt.description + ? question_icon.replace( + ' `; break; case 'select': $opt = ` - + @@ -422,7 +440,7 @@ window['__start'] = async () => { break; case 'color': $opt = ` - + `; break; @@ -438,7 +456,7 @@ window['__start'] = async () => { }>