From 995587afa044f1096a4c6544a30abbff6ca86a01 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 16 Oct 2020 10:14:58 +1100 Subject: [PATCH 1/5] #164 fix width-stretching of collections in breadcrumbs --- mods/core/css/theme.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css index f5b270d..3ea2b56 100644 --- a/mods/core/css/theme.css +++ b/mods/core/css/theme.css @@ -335,7 +335,8 @@ } /* normalise inline-table size */ -.notion-page-content .notion-collection_view-block { +.notion-page-content .notion-collection_view-block[style*=' width'], +.notion-page-content .notion-collection_view-block[style^='width'] { width: 100% !important; } .notion-page-content From b4b54fdca3f8c2a2f5d1b75146380ed90324978c Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 16 Oct 2020 10:28:25 +1100 Subject: [PATCH 2/5] alternate for #163 (otherwise it would break notion-deb-builder) --- pkg/remove.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/remove.js b/pkg/remove.js index de15650..0f982db 100644 --- a/pkg/remove.js +++ b/pkg/remove.js @@ -103,8 +103,8 @@ module.exports = async function ({ await fs.outputFile( bin_path, bin_script - .replace('electron app\n', 'electron app.asar\n') - .replace('electron6 app\n', 'electron6 app.asar\n') + .replace('electron app', 'electron app.asar') + .replace('electron6 app', 'electron6 app.asar') ); } } From a264cbf83265c18642ddde371f759a5e92297e20 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 16 Oct 2020 17:26:18 +1100 Subject: [PATCH 3/5] middle click close tabs + better tab animations --- mods/core/createWindow.js | 2 +- mods/core/css/tabs.css | 8 +++++-- mods/core/render.js | 50 +++++++++++++++++++++++++++++---------- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/mods/core/createWindow.js b/mods/core/createWindow.js index 21e729c..fb37b5a 100644 --- a/mods/core/createWindow.js +++ b/mods/core/createWindow.js @@ -79,7 +79,7 @@ module.exports = (store, __exports) => { }); electron.app.on('before-quit', () => (intended_quit = true)); window.loadURL(__exports.getIndexUrl(relativeUrl)); - // window.webContents.openDevTools(); + window.webContents.openDevTools(); return window; }; return __exports.createWindow; diff --git a/mods/core/css/tabs.css b/mods/core/css/tabs.css index 250a01b..2e9aed3 100644 --- a/mods/core/css/tabs.css +++ b/mods/core/css/tabs.css @@ -23,7 +23,7 @@ transform: rotate(360deg); } } -@keyframes tabSlideIn { +@keyframes tabSlide { from { width: 0; } @@ -137,7 +137,11 @@ body, text-overflow: ellipsis; } #tabs .tab.slideIn span:not(.close) { - animation: tabSlideIn 100ms ease-in-out; + animation: tabSlide 100ms ease-in-out; +} +#tabs .tab.slideOut { + width: 0; + animation: tabSlide 100ms ease-in-out reverse; } #tabs .tab .close { padding: 0 0.35em 0.1em 0.3em; diff --git a/mods/core/render.js b/mods/core/render.js index 7f15aff..a6ffa30 100644 --- a/mods/core/render.js +++ b/mods/core/render.js @@ -44,6 +44,7 @@ module.exports = (store, __exports) => { zoomFactor: 1, tabs: new Map([[0, ['notion.so', true]]]), slideIn: new Set(), + slideOut: new Set(), }; this.$titlebar = null; this.$dragging = null; @@ -220,9 +221,20 @@ module.exports = (store, __exports) => { const list = new Map(this.state.tabs); while (this.state.tabs.get(id) && this.state.tabs.get(id)[1]) id++; list.delete(id); - this.openTab(id, list, true); + this.openTab(id, { state: list, load: true }); } - openTab(id, state = new Map(this.state.tabs), load) { + openTab( + id, + { + state = new Map(this.state.tabs), + slideOut = new Set(this.state.slideOut), + load, + } = { + state: new Map(this.state.tabs), + slideOut: new Set(this.state.slideOut), + load: false, + } + ) { if (!id && id !== 0) { if (state.get(this.views.current.id)[1]) return; const currentIndex = [...state].findIndex( @@ -241,6 +253,7 @@ module.exports = (store, __exports) => { true, ]), slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn, + slideOut: slideOut, }, async () => { this.focusTab(); @@ -268,13 +281,11 @@ module.exports = (store, __exports) => { ? idToNotionURL(store().default_page) : current_src ); - setTimeout(() => { - const slideIn = new Set(this.state.slideIn); - slideIn.delete(id); - this.setState({ slideIn }); - }, 100); // this.views.html[id].getWebContents().openDevTools(); } + setTimeout(() => { + this.setState({ slideIn: new Set(), slideOut: new Set() }); + }, 150); } ); } @@ -286,7 +297,7 @@ module.exports = (store, __exports) => { return electron.remote.getCurrentWindow().close(); this.openTab( this.views.current.id === id ? null : this.views.current.id, - list + { state: list, slideOut: this.state.slideOut.add(id) } ); } focusTab() { @@ -297,11 +308,20 @@ module.exports = (store, __exports) => { for (const id in this.views.loaded) { if (this.views.loaded.hasOwnProperty(id) && this.views.loaded[id]) { const selected = - id == this.views.current.id && this.state.tabs.get(+id); + id == this.views.current.id && + this.state.tabs.get(+id) && + this.state.tabs.get(+id)[1]; this.views.loaded[id].style.display = selected ? 'flex' : 'none'; if (selected) { - this.views.active = this.views.current.id; + this.views.active = +id; this.views.loaded[id].focus(); + const electronWindow = electron.remote.getCurrentWindow(); + if ( + electronWindow && + electronWindow.getTitle() !== this.state.tabs.get(+id)[0] + ) { + electronWindow.setTitle(this.state.tabs.get(+id)[0]); + } } } } @@ -628,7 +648,9 @@ module.exports = (store, __exports) => { 'div', { id: 'tabs' }, ...[...this.state.tabs] - .filter(([id, [title, open]]) => open) + .filter( + ([id, [title, open]]) => open || this.state.slideOut.has(id) + ) .map(([id, [title, open]]) => React.createElement( 'button', @@ -636,12 +658,16 @@ module.exports = (store, __exports) => { className: 'tab' + (id === this.views.current.id ? ' current' : '') + - (this.state.slideIn.has(id) ? ' slideIn' : ''), + (this.state.slideIn.has(id) ? ' slideIn' : '') + + (this.state.slideOut.has(id) ? ' slideOut' : ''), draggable: true, onClick: (e) => { if (!e.target.classList.contains('close')) this.openTab(id); }, + onMouseUp: (e) => { + if (window.event.which === 2) this.closeTab(id); + }, ref: ($tab) => { this.views.tabs[id] = $tab; }, From d6a95a77df262af72b1f36cc207c931f5d6b45aa Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 16 Oct 2020 17:29:33 +1100 Subject: [PATCH 4/5] patch application and fix potential .asar.asar changes (#163) --- pkg/apply.js | 4 ++-- pkg/remove.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/pkg/apply.js b/pkg/apply.js index 3518e1c..9956c07 100644 --- a/pkg/apply.js +++ b/pkg/apply.js @@ -76,8 +76,8 @@ module.exports = async function ({ overwrite_version, friendly_errors } = {}) { await fs.outputFile( bin_path, bin_script - .replace('electron app.asar\n', 'electron app\n') - .replace('electron6 app.asar\n', 'electron6 app\n') + .replace('electron app.asar', 'electron app') + .replace('electron6 app.asar', 'electron6 app') ); } } diff --git a/pkg/remove.js b/pkg/remove.js index 0f982db..5528c3a 100644 --- a/pkg/remove.js +++ b/pkg/remove.js @@ -105,6 +105,7 @@ module.exports = async function ({ bin_script .replace('electron app', 'electron app.asar') .replace('electron6 app', 'electron6 app.asar') + .replace(/(.asar)+/g, '.asar') ); } } From 91ab4a15479151de249c2565af3a43d5d58793d5 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 16 Oct 2020 22:15:14 +1100 Subject: [PATCH 5/5] ctrl+click open in new tab --- mods/core/client.js | 6 ++++ mods/core/createWindow.js | 1 - mods/core/enhancerMenu.js | 1 - mods/core/render.js | 66 ++++++++++++++++++++++----------------- 4 files changed, 43 insertions(+), 31 deletions(-) diff --git a/mods/core/client.js b/mods/core/client.js index 29f6b6b..2d8d458 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -230,6 +230,12 @@ module.exports = (store, __exports) => { electron.ipcRenderer.sendToHost('enhancer:set-tab-title', title); } }; + __electronApi.openInNewWindow = (urlPath) => { + electron.ipcRenderer.sendToHost( + 'enhancer:new-tab', + `notion://www.notion.so${urlPath}` + ); + }; } else if (store().frameless && !store().tiling_mode) { let sidebar_width; function setSidebarWidth(list) { diff --git a/mods/core/createWindow.js b/mods/core/createWindow.js index fb37b5a..47165d0 100644 --- a/mods/core/createWindow.js +++ b/mods/core/createWindow.js @@ -79,7 +79,6 @@ module.exports = (store, __exports) => { }); electron.app.on('before-quit', () => (intended_quit = true)); window.loadURL(__exports.getIndexUrl(relativeUrl)); - window.webContents.openDevTools(); return window; }; return __exports.createWindow; diff --git a/mods/core/enhancerMenu.js b/mods/core/enhancerMenu.js index 7a4829d..cdea17f 100644 --- a/mods/core/enhancerMenu.js +++ b/mods/core/enhancerMenu.js @@ -132,7 +132,6 @@ window['__start'] = async () => { if (hotkey[prop] !== event[prop]) triggered = false; if (triggered || ((event.ctrlKey || event.metaKey) && event.key === 'w')) electron.remote.getCurrentWindow().close(); - console.log(event.ctrlKey, event.key); // focus search const meta = !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey; diff --git a/mods/core/render.js b/mods/core/render.js index a6ffa30..12cf0b5 100644 --- a/mods/core/render.js +++ b/mods/core/render.js @@ -42,7 +42,7 @@ module.exports = (store, __exports) => { searching: false, searchingPeekView: false, zoomFactor: 1, - tabs: new Map([[0, ['notion.so', true]]]), + tabs: new Map([[0, { title: 'notion.so', open: true }]]), slideIn: new Set(), slideOut: new Set(), }; @@ -119,9 +119,11 @@ module.exports = (store, __exports) => { } else { const list = [...this.state.tabs], fromIndex = list.findIndex( - ([id, [title, open]]) => id === from[0] + ([id, { title, open }]) => id === from[0] ), - toIndex = list.findIndex(([id, [title, open]]) => id === to[0]); + toIndex = list.findIndex( + ([id, { title, open }]) => id === to[0] + ); list.splice( toIndex > fromIndex ? toIndex - 1 : toIndex, 0, @@ -216,12 +218,12 @@ module.exports = (store, __exports) => { }); } - newTab() { + newTab(url = '') { let id = 0; const list = new Map(this.state.tabs); - while (this.state.tabs.get(id) && this.state.tabs.get(id)[1]) id++; + while (this.state.tabs.get(id) && this.state.tabs.get(id).open) id++; list.delete(id); - this.openTab(id, { state: list, load: true }); + this.openTab(id, { state: list, load: url || true }); } openTab( id, @@ -236,22 +238,25 @@ module.exports = (store, __exports) => { } ) { if (!id && id !== 0) { - if (state.get(this.views.current.id)[1]) return; + if (state.get(this.views.current.id).open) return; const currentIndex = [...state].findIndex( - ([id, [title, open]]) => id === this.views.current.id + ([id, { title, open }]) => id === this.views.current.id ); - id = ([...state].find( - ([id, [title, open]], tabIndex) => open && tabIndex > currentIndex - ) || [...state].find(([id, [title, open]]) => open))[0]; + id = ( + [...state].find( + ([id, { title, open }], tabIndex) => + open && tabIndex > currentIndex + ) || [...state].find(([id, { title, open }]) => open) + ).title; } const current_src = this.views.current.$el().src; this.views.current.id = id; this.setState( { - tabs: state.set(id, [ - state.get(id) ? state.get(id)[0] : 'notion.so', - true, - ]), + tabs: state.set(id, { + title: state.get(id) ? state.get(id).title : 'notion.so', + open: true, + }), slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn, slideOut: slideOut, }, @@ -277,7 +282,9 @@ module.exports = (store, __exports) => { }; this.views.html[id].addEventListener('did-stop-loading', unhide); this.views.html[id].loadURL( - store().default_page + typeof load === 'string' + ? load + : store().default_page ? idToNotionURL(store().default_page) : current_src ); @@ -292,8 +299,8 @@ module.exports = (store, __exports) => { closeTab(id) { if ((!id && id !== 0) || !this.state.tabs.get(id)) return; const list = new Map(this.state.tabs); - list.set(id, [list.get(id)[0], false]); - if (![...list].filter(([id, [title, open]]) => open).length) + list.set(id, { ...list.get(id), open: false }); + if (![...list].filter(([id, { title, open }]) => open).length) return electron.remote.getCurrentWindow().close(); this.openTab( this.views.current.id === id ? null : this.views.current.id, @@ -310,7 +317,7 @@ module.exports = (store, __exports) => { const selected = id == this.views.current.id && this.state.tabs.get(+id) && - this.state.tabs.get(+id)[1]; + this.state.tabs.get(+id).open; this.views.loaded[id].style.display = selected ? 'flex' : 'none'; if (selected) { this.views.active = +id; @@ -318,9 +325,9 @@ module.exports = (store, __exports) => { const electronWindow = electron.remote.getCurrentWindow(); if ( electronWindow && - electronWindow.getTitle() !== this.state.tabs.get(+id)[0] + electronWindow.getTitle() !== this.state.tabs.get(+id).title ) { - electronWindow.setTitle(this.state.tabs.get(+id)[0]); + electronWindow.setTitle(this.state.tabs.get(+id).title); } } } @@ -362,10 +369,10 @@ module.exports = (store, __exports) => { if (this.state.tabs.get(+event.target.id)) { this.setState({ tabs: new Map( - this.state.tabs.set(+event.target.id, [ - event.args[0], - this.state.tabs.get(+event.target.id)[1], - ]) + this.state.tabs.set(+event.target.id, { + ...this.state.tabs.get(+event.target.id), + title: event.args[0], + }) ), }); const electronWindow = electron.remote.getCurrentWindow(); @@ -380,7 +387,7 @@ module.exports = (store, __exports) => { this.selectTab(event.args[0]); break; case 'enhancer:new-tab': - this.newTab(); + this.newTab(event.args[0]); break; case 'enhancer:close-tab': if (document.querySelector('.tab.current .close')) @@ -533,6 +540,7 @@ module.exports = (store, __exports) => { Object.entries(this.views.html) .filter(([id, $notion]) => !this.views.loaded[id] && $notion) .forEach(([id, $notion]) => { + if (!$notion) return; this.views.loaded[id] = $notion; $notion.addEventListener('did-fail-load', (error) => { // logger.info('Failed to load:', error); @@ -649,9 +657,9 @@ module.exports = (store, __exports) => { { id: 'tabs' }, ...[...this.state.tabs] .filter( - ([id, [title, open]]) => open || this.state.slideOut.has(id) + ([id, { title, open }]) => open || this.state.slideOut.has(id) ) - .map(([id, [title, open]]) => + .map(([id, { title, open }]) => React.createElement( 'button', { @@ -700,7 +708,7 @@ module.exports = (store, __exports) => { } renderNotionContainer() { this.views.react = Object.fromEntries( - [...this.state.tabs].map(([id, [title, open]]) => { + [...this.state.tabs].map(([id, { title, open }]) => { return [ id, this.views.react[id] ||