diff --git a/CHANGELOG.md b/CHANGELOG.md index c98ffe0..972c0ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ if something is ~~crossed out~~, then it is no longer a feature included by default, but can still easily be enabled by following instructions in the [docs](README.md). -### v0.6.0 (wip) +### v0.6.0 (2020-06-30) - docs: custom fonts. - docs: font resizing. @@ -11,12 +11,10 @@ but can still easily be enabled by following instructions in the [docs](README.m - new: custom colour theming, demonstrated via the dark+ theme. - new: linux support (thanks for [@Blacksuan19](https://github.com/Blacksuan19)). - improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it. +- improved: stop window buttons breaking at smaller widths. +- improved: more obviously visible drag area. - bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to [@etnperlong](https://github.com/etnperlong)) -//todo - -- stop window buttons breaking at smaller widths - ### v0.5.0 (2020-05-23) - new: running from the wsl. diff --git a/README.md b/README.md index 9013949..1fc2308 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ unless you're sure you know what you're doing (if you have to ask, you probably this is probably a bug. please submit a [bug report](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=bug&template=bug-report.md&title=). -**I have a new feature idea for the enhancer!** +**can the enhancer do \_\_\_?** experienced problems with the notion app, or just want to add something a bit more to it? please submit a [feature request](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=feature-request.md&title=). @@ -74,8 +74,8 @@ symbolised with an arrow (4th from the right). when toggled to point up, notion will remain the top visible window even if not focused. to customise which characters are used for these buttons, open in the `resources/preload.js` file, -find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g. -replacing `element.innerHTML = '⨉';` with `element.innerHTML = '🙄';`). +find the relevant button icon (lines 80 - 111) and replace it with your chosen unicode character (e.g. +replacing `return '⨉';` with `return '🙄';`). ### nicer scrollbars @@ -105,7 +105,7 @@ single-click to toggle app visibility. right click to open menu. - **run on startup**: run notion on boot/startup. (default: true) - **hide on open**: hide the launch of notion to the tray. (default: false) -- **open maximised**: maximise the app on open. (default: false) +- **open maximised**: maximize the app on open. (default: false) - **close to tray**: close window to tray rather than closing outright on click of `⨉`. does not apply if multiple notion windows are open. (default: false) - **load theme.css**: loads the custom colour theme file. diff --git a/customiser.py b/customiser.py index c280f77..dec253d 100755 --- a/customiser.py +++ b/customiser.py @@ -135,11 +135,11 @@ try: config: 'user-preferences', defaults: { openhidden: false, - maximised: false + maximized: false } }); if (!store.openhidden || electron_1.BrowserWindow.getAllWindows().some(win => win.isVisible())) - { window.show(); if (store.maximised) window.maximize(); } + { window.show(); if (store.maximized) window.maximize(); } /* === INJECTION END === */ """) with open(filepath + '/app/main/createWindow.js', 'w', encoding='UTF-8') as write: @@ -153,11 +153,10 @@ try: print( f' ...adjusting drag area for frameless window in {filepath}/app/renderer/index.js') content = content.read() - top = content.rfind('top') - content = content[:top] + content[top:].replace( - 'right: 0', 'right: 420').replace( - 'top: 0', 'top: 1 ').replace( - 'height: 34', 'height: 16') + loc = content.rfind('dragRegionStyle') + content = content[:loc] + content[loc:] \ + .replace('top: 0', 'top: 1', 1) \ + .replace('height: 34', 'height: 10', 1) with open(filepath + '/app/renderer/index.js', 'w', encoding='UTF-8') as write: write.write(content) else: @@ -199,12 +198,13 @@ try: print( f' * {filepath}/app/main/main.js was not found: step skipped.') - if sys.platform == 'linux': + if sys.platform == 'linux' and 'microsoft' not in platform.uname()[3].lower(): print(f' ...patching app launcher {filepath}/notion-app') - subprocess.call(['sed', '-i', 's/app\.asar/app/', '/usr/bin/notion-app']) + subprocess.call( + ['sed', '-i', 's/app\.asar/app/', '/usr/bin/notion-app']) # patch this too just in case - subprocess.call(['sed', '-i', 's/app\.asar/app/', f'{filepath}/notion-app']) - + subprocess.call(['sed', '-i', 's/app\.asar/app/', + f'{filepath}/notion-app']) print('\n>>> SUCCESSFULLY CUSTOMISED <<<') diff --git a/docs/changelog.html b/docs/changelog.html index 57824bd..4c45b82 100644 --- a/docs/changelog.html +++ b/docs/changelog.html @@ -1,4 +1,4 @@ -changelog | notion enhancer

notion enhancer

+changelog | notion enhancer

notion enhancer

@@ -8,9 +8,9 @@ but can still easily be enabled by following instructions in the docs.

-
+

- v0.6.0 (wip) + v0.6.0 (2020-06-30)

  • docs: custom fonts.
    • @@ -19,11 +19,9 @@ but can still easily be enabled by following instructions in the @Blacksuan19).
  • improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it.
    • +
  • improved: stop window buttons breaking at smaller widths.
    • +
  • improved: more obviously visible drag area.
  • bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to @etnperlong)
    • -
-

//todo

-
    -
  • stop window buttons breaking at smaller widths
diff --git a/docs/index.html b/docs/index.html index 41923aa..30ee7c5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,7 +57,7 @@ additionally, if you ever need to change or reset your notion build, the c

something isn't working, and the suggestions here haven't fixed it...

this is probably a bug. please submit a bug report.

-

I have a new feature idea for the enhancer!

+

can the enhancer do ___?

experienced problems with the notion app, or just want to add something a bit more to it? please submit a feature request.

@@ -77,8 +77,8 @@ additionally, if you ever need to change or reset your notion build, the c symbolised with an arrow (4th from the right). when toggled to point up, notion will remain the top visible window even if not focused.

to customise which characters are used for these buttons, open in the resources/preload.js file, -find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g. -replacing element.innerHTML = '⨉'; with element.innerHTML = '🙄';).

+find the relevant button icon (lines 80 - 111) and replace it with your chosen unicode character (e.g. +replacing return '⨉'; with return '🙄';).

@@ -115,7 +115,7 @@ to your preference. you will need to run or re-run customiser.py af
  • run on startup: run notion on boot/startup. (default: true)
  • hide on open: hide the launch of notion to the tray. (default: false)
    • -
  • open maximised: maximise the app on open. (default: false)
    • +
  • open maximised: maximize the app on open. (default: false)
  • close to tray: close window to tray rather than closing outright on click of ⨉. does not apply if multiple notion windows are open. (default: false)
  • load theme.css: loads the custom colour theme file. diff --git a/resources/preload.js b/resources/preload.js index 5898b8a..b61245e 100644 --- a/resources/preload.js +++ b/resources/preload.js @@ -18,7 +18,7 @@ require('electron').remote.getGlobal('setTimeout')(() => { config: 'user-preferences', defaults: { openhidden: false, - maximised: false, + maximized: false, tray: false, theme: false, }, @@ -40,62 +40,96 @@ require('electron').remote.getGlobal('setTimeout')(() => { style.innerHTML = file; head.appendChild(style); }); + document.body.classList.add('enhanced'); const appwindow = require('electron').remote.getCurrentWindow(); /* window control buttons */ - let node = document.querySelector('div.notion-topbar > div'), - element = document.createElement('div'); - element.id = 'window-buttons-area'; - node.appendChild(element); - node = document.querySelector('#window-buttons-area'); + const buttons = document.createElement('div'), + dragarea = document.createElement('div'); + dragarea.className = 'window-dragarea'; + document + .querySelector('.notion-topbar') + .parentElement.appendChild(dragarea); + buttons.className = 'window-topbar-container'; + buttons.innerHTML = ` +
    + + + + +
    + `; + document.querySelector('.notion-topbar').parentElement.appendChild(buttons); + document + .querySelector('.window-topbar-container') + .appendChild(document.querySelector('.notion-topbar')); + document + .querySelector('.window-topbar-container') + .appendChild( + document.querySelector('.notion-history-back-button').parentElement + ); - // always-on-top - const alwaysontopEl = document.createElement('button'); - alwaysontopEl.classList.add('window-buttons', 'btn-alwaysontop'); - alwaysontopEl.innerHTML = '🠛'; - alwaysontopEl.onclick = function () { - const state = appwindow.isAlwaysOnTop(); - appwindow.setAlwaysOnTop(!state); - this.innerHTML = state ? '🠛' : '🠙'; - }; - node.appendChild(alwaysontopEl); + const button_icons = { + alwaysontop() { + return appwindow.isAlwaysOnTop() ? '🠙' : '🠛'; + }, + minimize() { + return '⚊'; + }, + maximize() { + return appwindow.isMaximized() ? '🗗' : '🗖'; + }, + close() { + return '⨉'; + }, + }, + button_actions = { + alwaysontop() { + appwindow.setAlwaysOnTop(!appwindow.isAlwaysOnTop()); + this.innerHTML = button_icons.alwaysontop(); + }, + minimize() { + appwindow.minimize(); + }, + maximize() { + appwindow.isMaximized() + ? appwindow.unmaximize() + : appwindow.maximize(); + this.innerHTML = button_icons.maximize(); + }, + close() { + if ( + store.tray && + require('electron').remote.BrowserWindow.getAllWindows().length === + 1 + ) { + appwindow.hide(); + } else appwindow.close(); + }, + }, + button_elements = { + alwaysontop: document.querySelector('.window-button.btn-alwaysontop'), + minimize: document.querySelector('.window-button.btn-minimize'), + maximize: document.querySelector('.window-button.btn-maximize'), + close: document.querySelector('.window-button.btn-close'), + }; - // minimise - const minimizeEl = document.createElement('button'); - minimizeEl.classList.add('window-buttons', 'btn-minimize'); - minimizeEl.innerHTML = '⚊'; - minimizeEl.onclick = () => appwindow.minimize(); - node.appendChild(minimizeEl); + button_elements.alwaysontop.innerHTML = button_icons.alwaysontop(); + button_elements.alwaysontop.onclick = button_actions.alwaysontop; - // maximise - const maximiseEl = document.createElement('button'), - maximiseIcon = () => (appwindow.isMaximized() ? '🗗' : '🗖'); - maximiseEl.classList.add('window-buttons', 'btn-maximize'); - maximiseEl.innerHTML = maximiseIcon(); - maximiseEl.onclick = function () { - if (appwindow.isMaximized()) appwindow.unmaximize(); - else appwindow.maximize(); - this.innerHTML = maximiseIcon(); - }; - node.appendChild(maximiseEl); - require('electron').remote.app.on('browser-window-focus', (event, win) => { - if (win.id == appwindow.id) maximiseEl.innerHTML = maximiseIcon(); - }); + button_elements.minimize.innerHTML = button_icons.minimize(); + button_elements.minimize.onclick = button_actions.minimize; - // close - const closeEl = document.createElement('button'); - closeEl.classList.add('window-buttons'); - closeEl.innerHTML = '⨉'; - closeEl.onclick = () => { - if ( - store.tray && - require('electron').remote.BrowserWindow.getAllWindows().length === 1 - ) { - appwindow.hide(); - } else appwindow.close(); - }; - node.appendChild(closeEl); + button_elements.maximize.innerHTML = button_icons.maximize(); + button_elements.maximize.onclick = button_actions.maximize; + setInterval(() => { + if (button_elements.maximize.innerHTML != button_icons.maximize()) + button_elements.maximize.innerHTML = button_icons.maximize(); + }, 1000); + + button_elements.close.innerHTML = button_icons.close(); + button_elements.close.onclick = button_actions.close; /* reload window */ document.defaultView.addEventListener( diff --git a/resources/theme.css b/resources/theme.css index ad3e0a1..b7fd909 100644 --- a/resources/theme.css +++ b/resources/theme.css @@ -9,6 +9,7 @@ /** backgrounds **/ --theme-main: rgb(5, 5, 5); --theme-sidebar: rgb(1, 1, 1); + --theme-drag: #030303; --theme-primary: rgb(177, 24, 24); --theme-primary_hover: rgb(202, 26, 26); --theme-primary_click: rgb(219, 41, 41); @@ -56,11 +57,15 @@ /** backgrounds **/ +.notion-dark-theme .window-dragarea { + background: var(--theme-drag); +} + [style*='background: rgb(55, 60, 63)'], [style*='background: rgba(69, 75, 78, 0.3)'] { background: var(--theme-sidebar) !important; } -.notion-dark-theme .window-buttons, +.notion-dark-theme .window-button, .notion-body.dark, [style*='background: rgb(47, 52, 55)'] { background: var(--theme-main) !important; @@ -72,7 +77,7 @@ box-shadow: none !important; } .notion-table-view > :first-child > :first-child, -.notion-dark-theme .window-buttons:hover, +.notion-dark-theme .window-button:hover, [style*='background: rgb(71, 76, 80)'], [style*='background: rgb(80, 85, 88)'], [style*='background: rgb(98, 102, 104)'] { @@ -87,6 +92,7 @@ } /* scrollbars */ + .notion-dark-theme ::-webkit-scrollbar-corner { background-color: transparent; /* for overlap */ } diff --git a/resources/tray.js b/resources/tray.js index 41f6474..590119b 100644 --- a/resources/tray.js +++ b/resources/tray.js @@ -21,7 +21,7 @@ function enhancements() { config: 'user-preferences', defaults: { openhidden: false, - maximised: false, + maximized: false, tray: false, theme: false, }, @@ -49,14 +49,14 @@ function enhancements() { : (store.openhidden = false), }, { - id: 'maximised', + id: 'maximized', label: 'open maximised', type: 'checkbox', - checked: store.maximised, + checked: store.maximized, click: () => - contextMenu.getMenuItemById('maximised').checked - ? (store.maximised = true) - : (store.maximised = false), + contextMenu.getMenuItemById('maximized').checked + ? (store.maximized = true) + : (store.maximized = false), }, { id: 'tray', @@ -91,7 +91,7 @@ function enhancements() { tray.setContextMenu(contextMenu); function showWindows(windows) { - if (store.maximised) + if (store.maximized) windows.forEach((win) => [win.maximize(), win.focus()]); else windows.forEach((win) => win.show()); } diff --git a/resources/user.css b/resources/user.css index 3fe5a69..6baed09 100644 --- a/resources/user.css +++ b/resources/user.css @@ -5,15 +5,58 @@ * (https://dragonwocky.me/) under the MIT license */ -/* window control buttons: block */ -#window-buttons-area { - padding-left: 14px; - user-select: none; +/* window control buttons */ +.window-dragarea { + height: 10px; + width: 100%; } -/* window control buttons: light theme */ -.notion-light-theme .window-buttons { - background: rgb(255, 255, 255); - color: black; +.notion-light-theme .window-dragarea { + background: #e6e6e6; +} +.notion-dark-theme .window-dragarea { + background: #272d2f; +} +.window-topbar-container { + display: flex; + flex-direction: row-reverse; + user-select: none; + -webkit-app-region: drag; +} +.window-topbar-container > :last-child, +.window-buttons-area { + display: flex; + align-items: center; + height: 45px; +} +.window-topbar-container > :last-child { + padding-left: 12px; +} +.window-buttons-area { + justify-content: flex-end; + padding-right: 12px; + font-size: 14px; +} +@media (max-width: 760px) { + .window-topbar-container { + display: grid; + grid-template-columns: 1fr 1fr; + } + .titlebar-draggable-area { + top: 10px; + } + .window-topbar-container > :last-child { + grid-row: 1; + } + .notion-topbar { + grid-column-start: span 2; + } + .notion-topbar > div { + padding-right: 12px !important; + } +} +/* window control buttons */ +.window-button { + background: transparent; border: 0; margin: 0px 0px 0px 9px; width: 32px; @@ -21,23 +64,16 @@ border-radius: 4px; font-size: 16px; transition-duration: 0.2s; +} +/* window control buttons: light theme */ +.notion-light-theme .window-button { font-weight: bold; } -.notion-light-theme .window-buttons:hover { +.notion-light-theme .window-button:hover { background: rgb(239, 239, 239); } /* window control buttons: dark theme */ -.notion-dark-theme .window-buttons { - background: rgb(47, 52, 55); - border: 0; - margin: 0px 0px 0px 9px; - width: 32px; - line-height: 26px; - border-radius: 4px; - font-size: 16px; - transition-duration: 0.2s; -} -.notion-dark-theme .window-buttons:hover { +.notion-dark-theme .window-button:hover { background: rgb(71, 76, 80); }