dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 05:09:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

functional tabs: needs more ux work

Browse Source
This commit is contained in:
dragonwocky 2020-10-08 22:50:27 +11:00
parent ec0d5517bc
commit 5ae9aed260
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
5 changed files with 351 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
mods/core/client.js
View File

@ -39,10 +39,9 @@ module.exports = (store, __exports) => {
if (store().frameless && !store().tiling_mode && !store().tabs) {
document.body.classList.add('frameless');
// draggable area
const dragarea = helpers.createElement(
'<div class="window-dragarea"></div>'
);
document.querySelector('.notion-topbar').prepend(dragarea);
document
.querySelector('.notion-topbar')
.prepend(helpers.createElement('<div class="window-dragarea"></div>'));
document.documentElement.style.setProperty(
'--configured--dragarea_height',
`${store().dragarea_height + 2}px`
@ -70,7 +69,7 @@ module.exports = (store, __exports) => {
document.querySelector('.notion-app-inner')
).getPropertyValue(prop);
// ctrl+f theming
// external theming
document.defaultView.addEventListener('keydown', (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
notionIpc.sendNotionToIndex('search:set-theme', {
@ -99,7 +98,6 @@ module.exports = (store, __exports) => {
}
});
// enhancer menu
function setThemeVars() {
electron.ipcRenderer.send(
'enhancer:set-menu-theme',
@ -144,35 +142,44 @@ module.exports = (store, __exports) => {
'--theme--code_inline-background',
].map((rule) => [rule, getStyle(rule)])
);
electron.ipcRenderer.sendToHost(
'enhancer:set-tab-theme',
[
'--theme--dragarea',
'--theme--font_sans',
'--theme--table-border',
'--theme--interactive_hover',
'--theme--interactive_hover-border',
'--theme--button_close',
'--theme--button_close-fill',
'--theme--text',
].map((rule) => [rule, getStyle(rule)])
);
if (store().tabs) {
electron.ipcRenderer.sendToHost(
'enhancer:set-tab-theme',
[
'--theme--main',
'--theme--dragarea',
'--theme--font_sans',
'--theme--table-border',
'--theme--interactive_hover',
'--theme--interactive_hover-border',
'--theme--button_close',
'--theme--button_close-fill',
'--theme--selected',
'--theme--option_hover-color',
'--theme--option_hover-background',
'--theme--text',
].map((rule) => [rule, getStyle(rule)])
);
}
}
setThemeVars();
const theme_observer = new MutationObserver(setThemeVars);
theme_observer.observe(document.querySelector('.notion-app-inner'), {
attributes: true,
});
new MutationObserver(setThemeVars).observe(
document.querySelector('.notion-app-inner'),
{ attributes: true }
);
electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars);
if (!store().tabs) {
const sidebar_observer = new MutationObserver(setSidebarWidth);
sidebar_observer.observe(document.querySelector('.notion-sidebar'), {
attributes: true,
});
if (store().tabs) {
let tab_title = '';
__electronApi.setWindowTitle = (title) => {
if (tab_title !== title) {
tab_title = title;
electron.ipcRenderer.sendToHost('enhancer:set-tab-title', title);
}
};
} else if (store().frameless && !store().tiling_mode) {
let sidebar_width;
function setSidebarWidth(list) {
if (!store().frameless && store().tiling_mode) return;
const new_sidebar_width =
list[0].target.style.height === 'auto'
? '0px'
@ -185,7 +192,11 @@ module.exports = (store, __exports) => {
);
}
}
new MutationObserver(setSidebarWidth).observe(
document.querySelector('.notion-sidebar'),
{ attributes: true }
);
setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]);
}
setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]);
}
};

10
mods/core/css/menu.css
View File

@ -50,11 +50,11 @@ body:not([style]) > * {
body:not([style])::after {
content: '';
position: absolute;
left: calc(50vw - 15px);
top: calc(50vh - 15px);
width: 30px;
height: 30px;
border: 4px solid rgb(34, 34, 34);
left: calc(50% - 13px);
top: calc(50% + 10px);
width: 18px;
height: 18px;
border: 4px solid rgb(34, 34, 34, 0.5);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;

1
mods/core/css/scrollbars.css
View File

@ -11,6 +11,7 @@
.smooth-scrollbars ::-webkit-scrollbar {
width: 8px; /* vertical */
height: 8px; /* horizontal */
-webkit-app-region: no-drag;
}
.smooth-scrollbars ::-webkit-scrollbar-corner {
background-color: transparent; /* overlap */

94
mods/core/css/tabs.css
View File

@ -23,18 +23,40 @@
transform: rotate(360deg);
}
}
@keyframes tabSlideIn {
from {
width: 0;
}
to {
width: 8.5em;
}
}
body:not([style*='--theme']) > * {
body:not([style*='--theme']):not(.error) > * {
opacity: 0;
}
body:not([style*='--theme'])::after {
body:not([style*='--theme']):not(.error)::after {
content: '';
position: absolute;
left: calc(50vw - 25px);
top: calc(50vh - 25px);
width: 50px;
height: 50px;
border: 4px solid rgb(34, 34, 34);
left: calc(50% - 15px);
top: calc(50% + 10px);
width: 18px;
height: 18px;
border: 4px solid rgb(34, 34, 34, 0.5);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
body[style*='--theme']::after {
z-index: 1;
content: '';
position: absolute;
left: calc(50% - 15px);
top: calc(50% + 10px);
width: 18px;
height: 18px;
opacity: 0.5;
border: 4px solid var(--theme--text);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
@ -43,6 +65,8 @@ body:not([style*='--theme'])::after {
html,
body,
#root {
background: var(--theme--main);
position: relative;
height: 100%;
margin: 0;
}
@ -63,7 +87,6 @@ body,
#titlebar {
display: flex;
flex-shrink: 1;
padding: 0.5em 0.15em;
user-select: none;
-webkit-app-region: drag;
background: var(--theme--dragarea);
@ -73,8 +96,61 @@ body,
-webkit-app-region: no-drag;
}
#titlebar .window-buttons-area {
margin: auto 0.4em auto auto;
margin: 0.5em 0.55em 0.5em auto;
}
#titlebar .window-buttons-area:empty {
display: none;
}
#tabs {
margin-top: auto;
}
#tabs .tab {
display: inline-flex;
background: var(--theme--main);
border: none;
font-size: 1.15em;
padding: 0.2em 0.4em;
text-align: left;
border-bottom: 4px solid var(--theme--table-border);
}
#tabs .tab:first-child {
margin-top: 0.5em;
}
#tabs .tab:not(.new) span:not(.close) {
width: 8.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: tabSlideIn 100ms ease-in-out;
}
#tabs .tab .close {
padding: 0 0.35em 0.1em 0.3em;
margin-left: auto;
font-weight: bold;
}
#tabs .tab.current {
background: var(--theme--selected);
}
#tabs .tab.new {
background: none;
border: none;
margin-left: -0.1em;
}
#tabs .tab.new span {
padding: 0 0.35em 0.1em 0.3em;
font-weight: bold;
}
#tabs .tab .close:hover,
#tabs .tab.new span:hover {
background: var(--theme--option_hover-background);
color: var(--theme--option_hover-color);
border-radius: 5px;
}
.notion {
z-index: 2;
width: 100%;
height: 100%;
display: none;
}

306
mods/core/render.js
View File

@ -37,45 +37,33 @@ module.exports = (store, __exports) => {
searching: false,
searchingPeekView: false,
zoomFactor: 1,
tabIDs: [],
tabs: new Map([[0, true]]),
};
this.$titlebar = null;
this.tabs = {
$current: null,
this.views = {
current: {
$el: () => this.views.html[this.views.current.id],
id: 0,
},
react: {},
active: [],
loading: [],
html: {},
loaded: {},
tabs: {},
};
this.$search = null;
this.handleReload = () => {
this.setState({ error: false });
this.tabs.loading.forEach(($notion) => {
Object.values(this.views.html).forEach(($notion) => {
if ($notion.isWaitingForResponse()) $notion.reload();
});
};
this.setTheme = this.setTheme.bind(this);
this.communicateWithView = this.communicateWithView.bind(this);
this.startSearch = this.startSearch.bind(this);
this.stopSearch = this.stopSearch.bind(this);
this.nextSearch = this.nextSearch.bind(this);
this.prevSearch = this.prevSearch.bind(this);
this.clearSearch = this.clearSearch.bind(this);
this.doneSearch = this.doneSearch.bind(this);
window['tab'] = (id) => {
if (!id && id !== 0) return;
this.setState({ tabIDs: [...new Set([...this.state.tabIDs, id])] });
setTimeout(() => {
this.loadListeners();
this.blurListeners();
if (document.querySelector(`#tab-${id}`)) {
this.tabs.active.forEach(($notion) => {
$notion.style.display = 'none';
});
this.tabs.$current = document.querySelector(`#tab-${id}`);
this.tabs.$current.style.display = 'flex';
this.focusListeners();
}
}, 1000);
};
}
componentDidMount() {
const buttons = require('./buttons.js')(store);
@ -83,10 +71,105 @@ module.exports = (store, __exports) => {
this.loadListeners();
}
setTheme(event) {
if (event.channel !== 'enhancer:set-tab-theme') return;
for (const style of event.args[0])
document.body.style.setProperty(style[0], style[1]);
newTab() {
let id = 0,
state = new Map(this.state.tabs);
while (this.state.tabs.get(id)) id++;
state.delete(id);
if (this.views.html[id]) {
this.views.html[id].style.opacity = '0';
let unhide;
unhide = () => {
this.views.html[id].style.opacity = '';
this.views.html[id].removeEventListener('did-stop-loading', unhide);
};
this.views.html[id].addEventListener('did-stop-loading', unhide);
this.views.html[id].loadURL(this.views.current.$el().src);
}
this.openTab(id, state);
}
openTab(id, state = new Map(this.state.tabs)) {
if (!id && id !== 0) return;
this.views.current.id = id;
this.setState({ tabs: state.set(id, true) }, this.focusTab.bind(this));
}
closeTab(id) {
if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
if ([...this.state.tabs].filter(([id, open]) => open).length === 1)
return electron.remote.getCurrentWindow().close();
while (
!this.state.tabs.get(this.views.current.id) ||
this.views.current.id === id
) {
this.views.current.id = this.views.current.id - 1;
if (this.views.current.id < 0)
this.views.current.id = this.state.tabs.size - 1;
}
this.setState(
{ tabs: new Map(this.state.tabs).set(id, false) },
this.focusTab.bind(this)
);
}
focusTab() {
this.loadListeners();
this.blurListeners();
this.focusListeners();
for (const id in this.views.loaded) {
if (this.views.loaded.hasOwnProperty(id) && this.views.loaded[id]) {
this.views.loaded[id].style.display =
id == this.views.current.id && this.state.tabs.get(+id)
? 'flex'
: 'none';
}
}
}
communicateWithView(event) {
if (event.channel === 'enhancer:set-tab-theme') {
for (const style of event.args[0])
document.body.style.setProperty(style[0], style[1]);
}
if (
event.channel === 'enhancer:set-tab-title' &&
this.views.tabs[event.target.id]
) {
this.views.tabs[event.target.id].children[0].innerText =
event.args[0];
}
let electronWindow;
try {
electronWindow = electron.remote.getCurrentWindow();
} catch (error) {
notionIpc.sendToMain('notion:log-error', {
level: 'error',
from: 'index',
type: 'GetCurrentWindowError',
error: error.message,
});
}
if (!electronWindow) {
this.setState({ error: true });
this.handleReload();
return;
}
electronWindow.addListener('app-command', (e, cmd) => {
const webContents = this.views.current.$el().getWebContents();
if (cmd === 'browser-backward' && webContents.canGoBack()) {
webContents.goBack();
} else if (cmd === 'browser-forward' && webContents.canGoForward()) {
webContents.goForward();
}
});
electronWindow.addListener('swipe', (e, dir) => {
const webContents = this.views.current.$el().getWebContents();
if (dir === 'left' && webContents.canGoBack()) {
webContents.goBack();
} else if (dir === 'right' && webContents.canGoForward()) {
webContents.goForward();
}
});
}
startSearch(isPeekView) {
this.setState({
@ -105,46 +188,64 @@ module.exports = (store, __exports) => {
searching: false,
});
this.lastSearchQuery = undefined;
this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
notionIpc.sendIndexToNotion(this.tabs.$current, 'search:stopped');
this.views.current
.$el()
.getWebContents()
.stopFindInPage('clearSelection');
notionIpc.sendIndexToNotion(this.views.current.$el(), 'search:stopped');
}
nextSearch(query) {
this.tabs.$current.getWebContents().findInPage(query, {
forward: true,
findNext: query === this.lastSearchQuery,
});
this.views.current
.$el()
.getWebContents()
.findInPage(query, {
forward: true,
findNext: query === this.lastSearchQuery,
});
this.lastSearchQuery = query;
}
prevSearch(query) {
this.tabs.$current.getWebContents().findInPage(query, {
forward: false,
findNext: query === this.lastSearchQuery,
});
this.views.current
.$el()
.getWebContents()
.findInPage(query, {
forward: false,
findNext: query === this.lastSearchQuery,
});
this.lastSearchQuery = query;
}
clearSearch() {
this.lastSearchQuery = undefined;
this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
this.views.current
.$el()
.getWebContents()
.stopFindInPage('clearSelection');
}
doneSearch() {
this.lastSearchQuery = undefined;
this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
this.views.current
.$el()
.getWebContents()
.stopFindInPage('clearSelection');
this.setState({ searching: false });
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
this.tabs.$current.focus();
notionIpc.sendIndexToNotion(this.tabs.$current, 'search:stopped');
this.views.current.$el().focus();
notionIpc.sendIndexToNotion(this.views.current.$el(), 'search:stopped');
}
focusListeners() {
this.tabs.$current.addEventListener('ipc-message', this.setTheme);
if (!this.views.current.$el() || !this.$search) return;
this.views.current
.$el()
.addEventListener('ipc-message', this.communicateWithView);
notionIpc.receiveIndexFromNotion.addListener(
this.tabs.$current,
this.views.current.$el(),
'search:start',
this.startSearch
);
notionIpc.receiveIndexFromNotion.addListener(
this.tabs.$current,
this.views.current.$el(),
'search:stop',
this.stopSearch
);
@ -170,16 +271,18 @@ module.exports = (store, __exports) => {
);
}
blurListeners() {
if (!this.tabs.$current) return;
if (!this.views.current.$el() || !this.$search) return;
if (this.state.searching) this.stopSearch();
this.tabs.$current.removeEventListener('ipc-message', this.setTheme);
this.views.current
.$el()
.removeEventListener('ipc-message', this.communicateWithView);
notionIpc.receiveIndexFromNotion.removeListener(
this.tabs.$current,
this.views.current.$el(),
'search:start',
this.startSearch
);
notionIpc.receiveIndexFromNotion.removeListener(
this.tabs.$current,
this.views.current.$el(),
'search:stop',
this.stopSearch
);
@ -206,10 +309,10 @@ module.exports = (store, __exports) => {
}
loadListeners() {
if (!this.$search) return;
this.tabs.loading
.filter(($notion) => !this.tabs.active.includes($notion))
.forEach(($notion) => {
this.tabs.active.push($notion);
Object.entries(this.views.html)
.filter(([id, $notion]) => !this.views.loaded[id] && $notion)
.forEach(([id, $notion]) => {
this.views.loaded[id] = $notion;
$notion.addEventListener('did-fail-load', (error) => {
// logger.info('Failed to load:', error);
if (
@ -280,25 +383,6 @@ module.exports = (store, __exports) => {
this.handleReload();
return;
}
electronWindow.addListener('app-command', (e, cmd) => {
const webContents = $notion.getWebContents();
if (cmd === 'browser-backward' && webContents.canGoBack()) {
webContents.goBack();
} else if (
cmd === 'browser-forward' &&
webContents.canGoForward()
) {
webContents.goForward();
}
});
electronWindow.addListener('swipe', (e, dir) => {
const webContents = $notion.getWebContents();
if (dir === 'left' && webContents.canGoBack()) {
webContents.goBack();
} else if (dir === 'right' && webContents.canGoForward()) {
webContents.goForward();
}
});
const sendFullScreenChangeEvent = () => {
notionIpc.sendIndexToNotion(
$notion,
@ -322,7 +406,6 @@ module.exports = (store, __exports) => {
sendFullScreenChangeEvent
);
});
this.tabs.loading = [];
}
renderTitlebar() {
@ -334,25 +417,64 @@ module.exports = (store, __exports) => {
this.$titlebar = $titlebar;
},
},
React.createElement('div', { id: 'tabs' })
React.createElement(
'div',
{ id: 'tabs' },
...[...this.state.tabs]
.filter(([id, open]) => open)
.map(([id, open]) =>
React.createElement(
'button',
{
className:
'tab' + (id === this.views.current.id ? ' current' : ''),
onClick: (e) => {
if (!e.target.classList.contains('close'))
this.openTab(id);
},
ref: ($tab) => {
this.views.tabs[id] = $tab;
this.focusTab();
},
},
React.createElement('span', {}, 'notion.so'),
React.createElement(
'span',
{
className: 'close',
onClick: () => {
this.closeTab(id);
},
},
'×'
)
)
),
React.createElement(
'button',
{
className: 'tab new',
onClick: () => {
this.newTab();
},
},
React.createElement('span', {}, '+')
)
)
);
}
renderNotionContainer() {
this.tabs.react = Object.fromEntries(
this.state.tabIDs.map((id) => {
this.views.react = Object.fromEntries(
[...this.state.tabs].map(([id, open]) => {
return [
id,
this.tabs.react[id] ||
this.views.react[id] ||
React.createElement('webview', {
className: 'notion',
id: `tab-${id}`,
style: {
width: '100%',
height: '100%',
display: 'none',
},
id,
ref: ($notion) => {
this.tabs.loading.push($notion);
this.views.html[id] = $notion;
this.focusTab();
},
partition: constants.electronSessionPartition,
preload: path.resolve(`${__notion}/app/renderer/preload.js`),
@ -369,7 +491,7 @@ module.exports = (store, __exports) => {
display: this.state.error ? 'none' : 'flex',
},
},
...Object.values(this.tabs.react)
...Object.values(this.views.react)
);
}
renderSearchContainer() {
@ -405,6 +527,7 @@ module.exports = (store, __exports) => {
},
ref: ($search) => {
this.$search = $search;
this.focusTab();
},
partition: constants.electronSessionPartition,
preload: `file://${path.resolve(
@ -516,13 +639,24 @@ module.exports = (store, __exports) => {
notion_intl.IntlProvider,
{
locale: notionLocale,
messages: notionLocale === 'ko-KR' ? koMessages : {},
messages:
notionLocale === 'ko-KR'
? koMessages
: {
'desktopLogin.offline.title':
'Welcome to <strong>Notion</strong>!',
'desktopLogin.offline.message':
'Connect to the internet to get started.',
'desktopLogin.offline.retryConnectingToInternetButton.label':
'Try again',
},
},
this.renderTitlebar(),
this.renderNotionContainer(),
this.renderSearchContainer(),
this.renderErrorContainer()
);
document.body.classList[this.state.error ? 'add' : 'remove']('error');
this.loadListeners();
return result;
}
@ -562,8 +696,6 @@ module.exports = (store, __exports) => {
React.createElement(Index, { notionUrl: notionUrl }),
$root
);
tab(0);
};
} else {
const __start = window['__start'];