mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
replace dragarea with titlebar in tabbable mode
This commit is contained in:
parent
157d440254
commit
6e43097a3f
GPG Key ID:
C7A48B7846AA706D
@ -88,7 +88,7 @@ module.exports = (store) => {
|
||||
]()}</button>`;
|
||||
}
|
||||
for (let btn of buttons.insert) {
|
||||
document.querySelector(`.window-button#btn-${btn}`).onclick =
|
||||
buttons.element.querySelector(`.window-button#btn-${btn}`).onclick =
|
||||
buttons.actions[btn];
|
||||
}
|
||||
if (store().frameless && !store().tiling_mode && !is_mac) {
|
||||
|
||||
@ -36,7 +36,7 @@ module.exports = (store, __exports) => {
|
||||
document.body.classList.add('snappy-transitions');
|
||||
|
||||
// frameless
|
||||
if (store().frameless && !store().tiling_mode) {
|
||||
if (store().frameless && !store().tiling_mode && !store().tabs) {
|
||||
document.body.classList.add('frameless');
|
||||
// draggable area
|
||||
const dragarea = helpers.createElement(
|
||||
@ -50,10 +50,12 @@ module.exports = (store, __exports) => {
|
||||
}
|
||||
|
||||
// window buttons
|
||||
if (!store().tabs) {
|
||||
const buttons = require('./buttons.js')(store);
|
||||
document
|
||||
.querySelector('.notion-topbar > div[style*="display: flex"]')
|
||||
.appendChild(buttons.element);
|
||||
}
|
||||
document
|
||||
.querySelector('.notion-history-back-button')
|
||||
.parentElement.nextElementSibling.classList.add(
|
||||
@ -100,7 +102,7 @@ module.exports = (store, __exports) => {
|
||||
// enhancer menu
|
||||
function setThemeVars() {
|
||||
electron.ipcRenderer.send(
|
||||
'enhancer:set-theme-vars',
|
||||
'enhancer:set-menu-theme',
|
||||
[
|
||||
'--theme--main',
|
||||
'--theme--sidebar',
|
||||
@ -142,14 +144,28 @@ 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)])
|
||||
);
|
||||
}
|
||||
setThemeVars();
|
||||
const theme_observer = new MutationObserver(setThemeVars);
|
||||
theme_observer.observe(document.querySelector('.notion-app-inner'), {
|
||||
attributes: true,
|
||||
});
|
||||
electron.ipcRenderer.on('enhancer:get-theme-vars', setThemeVars);
|
||||
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,
|
||||
@ -169,6 +185,7 @@ module.exports = (store, __exports) => {
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]);
|
||||
}
|
||||
};
|
||||
|
||||
@ -50,10 +50,10 @@ body:not([style]) > * {
|
||||
body:not([style])::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 44vw;
|
||||
top: calc(50% - 7.5vw);
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
left: calc(50vw - 15px);
|
||||
top: calc(50vh - 15px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 4px solid rgb(34, 34, 34);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
@ -93,7 +93,7 @@ s {
|
||||
|
||||
/* titlebar */
|
||||
|
||||
#menu-titlebar::before {
|
||||
#titlebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -103,20 +103,18 @@ s {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
#menu-titlebar {
|
||||
#titlebar {
|
||||
display: flex;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
#menu-titlebar button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
#menu-titlebar {
|
||||
background: var(--theme--dragarea);
|
||||
}
|
||||
#menu-titlebar > .window-buttons-area {
|
||||
#titlebar button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
#titlebar .window-buttons-area {
|
||||
margin: 0.4em 0.4em 0.4em auto;
|
||||
}
|
||||
#menu-titlebar > .window-buttons-area:empty {
|
||||
#titlebar .window-buttons-area:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
80
mods/core/css/tabs.css
Normal file
80
mods/core/css/tabs.css
Normal file
@ -0,0 +1,80 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
@import './buttons.css';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
text-decoration: none;
|
||||
text-size-adjust: 100%;
|
||||
font-family: var(--theme--font_sans);
|
||||
outline-color: var(--theme--table-border);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
body:not([style*='--theme']) > * {
|
||||
opacity: 0;
|
||||
}
|
||||
body:not([style*='--theme'])::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(50vw - 25px);
|
||||
top: calc(50vh - 25px);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgb(34, 34, 34);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#titlebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-app-region: no-drag;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
}
|
||||
#titlebar {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
padding: 0.5em 0.15em;
|
||||
user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
background: var(--theme--dragarea);
|
||||
}
|
||||
#titlebar button {
|
||||
color: var(--theme--text);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
#titlebar .window-buttons-area {
|
||||
margin: auto 0.4em auto auto;
|
||||
}
|
||||
#titlebar .window-buttons-area:empty {
|
||||
display: none;
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z" file="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 231 B After Width: | Height: | Size: 231 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z" file="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 231 B After Width: | Height: | Size: 231 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z" file="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 235 B After Width: | Height: | Size: 235 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z" file="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z" file="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 192 B After Width: | Height: | Size: 192 B |
@ -9,7 +9,7 @@
|
||||
<link rel="stylesheet" href="./css/menu.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header id="menu-titlebar"></header>
|
||||
<header id="titlebar"></header>
|
||||
<main>
|
||||
<div id="alerts"></div>
|
||||
<div id="search">
|
||||
|
||||
@ -21,7 +21,7 @@ window['__start'] = async () => {
|
||||
tiling_mode: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082').tiling_mode,
|
||||
frameless: true,
|
||||
}));
|
||||
document.querySelector('#menu-titlebar').appendChild(buttons.element);
|
||||
document.querySelector('#titlebar').appendChild(buttons.element);
|
||||
|
||||
document.defaultView.addEventListener('keyup', (event) => {
|
||||
if (event.code === 'F5') location.reload();
|
||||
@ -54,8 +54,8 @@ window['__start'] = async () => {
|
||||
document.querySelector('#search > input').focus();
|
||||
});
|
||||
|
||||
electron.ipcRenderer.send('enhancer:get-theme-vars');
|
||||
electron.ipcRenderer.on('enhancer:set-theme-vars', (event, theme) => {
|
||||
electron.ipcRenderer.send('enhancer:get-menu-theme');
|
||||
electron.ipcRenderer.on('enhancer:set-menu-theme', (event, theme) => {
|
||||
for (const style of theme)
|
||||
document.body.style.setProperty(style[0], style[1]);
|
||||
});
|
||||
|
||||
@ -14,6 +14,12 @@ module.exports = {
|
||||
version: require('../../package.json').version,
|
||||
author: 'dragonwocky',
|
||||
options: [
|
||||
{
|
||||
key: 'tabs',
|
||||
label: 'tabbable windows',
|
||||
type: 'toggle',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
key: 'openhidden',
|
||||
label: 'hide app on open',
|
||||
|
||||
@ -6,8 +6,11 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
const { dirname } = require('path');
|
||||
|
||||
const url = require('url'),
|
||||
path = require('path'),
|
||||
electron = require('electron'),
|
||||
{ __notion } = require('../../pkg/helpers.js'),
|
||||
config = require(`${__notion}/app/config.js`),
|
||||
constants = require(`${__notion}/app/shared/constants.js`),
|
||||
@ -27,7 +30,7 @@ const insertCSP = `
|
||||
`;
|
||||
|
||||
module.exports = (store, __exports) => {
|
||||
if (!store().tabs) {
|
||||
if (store().tabs) {
|
||||
class Index extends React.PureComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
@ -36,32 +39,23 @@ module.exports = (store, __exports) => {
|
||||
searching: false,
|
||||
searchingPeekView: false,
|
||||
zoomFactor: 1,
|
||||
tabs: [],
|
||||
tabIDs: [],
|
||||
};
|
||||
this.$currentTab;
|
||||
this.tabCache = {
|
||||
this.$titlebar = null;
|
||||
this.tabs = {
|
||||
$current: null,
|
||||
react: {},
|
||||
active: [],
|
||||
loading: [],
|
||||
};
|
||||
this.notionElm = [];
|
||||
this.loadedElms = [];
|
||||
this.reactTabs = {};
|
||||
this.handleNotionRef = ($notion) => {
|
||||
this.tabCache.loading.push($notion);
|
||||
};
|
||||
this.$search = null;
|
||||
this.handleSearchRef = (searchElm) => {
|
||||
this.$search = searchElm;
|
||||
};
|
||||
this.handleReload = () => {
|
||||
this.setState({ error: false });
|
||||
setTimeout(() => {
|
||||
this.tabCache.loading.forEach(($notion) => {
|
||||
this.tabs.loading.forEach(($notion) => {
|
||||
if ($notion.isWaitingForResponse()) $notion.reload();
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
this.setTheme = this.setTheme.bind(this);
|
||||
this.startSearch = this.startSearch.bind(this);
|
||||
this.stopSearch = this.stopSearch.bind(this);
|
||||
this.nextSearch = this.nextSearch.bind(this);
|
||||
@ -70,29 +64,40 @@ module.exports = (store, __exports) => {
|
||||
this.doneSearch = this.doneSearch.bind(this);
|
||||
window['tab'] = (id) => {
|
||||
if (!id && id !== 0) return;
|
||||
this.setState({ tabs: [...new Set([...this.state.tabs, id])] });
|
||||
this.setState({ tabIDs: [...new Set([...this.state.tabIDs, id])] });
|
||||
setTimeout(() => {
|
||||
this.loadListeners();
|
||||
this.blurListeners();
|
||||
if (document.querySelector(`#tab-${id}`)) {
|
||||
this.tabCache.active.forEach(($notion) => {
|
||||
this.tabs.active.forEach(($notion) => {
|
||||
$notion.style.display = 'none';
|
||||
});
|
||||
this.$currentTab = document.querySelector(`#tab-${id}`);
|
||||
this.$currentTab.style.display = 'flex';
|
||||
this.tabs.$current = document.querySelector(`#tab-${id}`);
|
||||
this.tabs.$current.style.display = 'flex';
|
||||
this.focusListeners();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
const buttons = require('./buttons.js')(() => ({
|
||||
'72886371-dada-49a7-9afc-9f275ecf29d3': {
|
||||
enabled: (
|
||||
store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {}
|
||||
).enabled,
|
||||
},
|
||||
tiling_mode: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082')
|
||||
.tiling_mode,
|
||||
frameless: true,
|
||||
}));
|
||||
this.$titlebar.appendChild(buttons.element);
|
||||
this.loadListeners();
|
||||
}
|
||||
|
||||
try {
|
||||
electron.remote.getCurrentWindow().on('focus', (e) => {
|
||||
this.$currentTab.focus();
|
||||
});
|
||||
} catch {}
|
||||
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]);
|
||||
}
|
||||
startSearch(isPeekView) {
|
||||
this.setState({
|
||||
@ -111,18 +116,18 @@ module.exports = (store, __exports) => {
|
||||
searching: false,
|
||||
});
|
||||
this.lastSearchQuery = undefined;
|
||||
this.$currentTab.getWebContents().stopFindInPage('clearSelection');
|
||||
notionIpc.sendIndexToNotion(this.$currentTab, 'search:stopped');
|
||||
this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
|
||||
notionIpc.sendIndexToNotion(this.tabs.$current, 'search:stopped');
|
||||
}
|
||||
nextSearch(query) {
|
||||
this.$currentTab.getWebContents().findInPage(query, {
|
||||
this.tabs.$current.getWebContents().findInPage(query, {
|
||||
forward: true,
|
||||
findNext: query === this.lastSearchQuery,
|
||||
});
|
||||
this.lastSearchQuery = query;
|
||||
}
|
||||
prevSearch(query) {
|
||||
this.$currentTab.getWebContents().findInPage(query, {
|
||||
this.tabs.$current.getWebContents().findInPage(query, {
|
||||
forward: false,
|
||||
findNext: query === this.lastSearchQuery,
|
||||
});
|
||||
@ -130,79 +135,81 @@ module.exports = (store, __exports) => {
|
||||
}
|
||||
clearSearch() {
|
||||
this.lastSearchQuery = undefined;
|
||||
this.$currentTab.getWebContents().stopFindInPage('clearSelection');
|
||||
this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
|
||||
}
|
||||
doneSearch() {
|
||||
this.lastSearchQuery = undefined;
|
||||
this.$currentTab.getWebContents().stopFindInPage('clearSelection');
|
||||
this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
|
||||
this.setState({ searching: false });
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
this.$currentTab.focus();
|
||||
notionIpc.sendIndexToNotion(this.$currentTab, 'search:stopped');
|
||||
this.tabs.$current.focus();
|
||||
notionIpc.sendIndexToNotion(this.tabs.$current, 'search:stopped');
|
||||
}
|
||||
blurListeners() {
|
||||
if (!this.$currentTab) return;
|
||||
if (this.state.searching) this.stopSearch();
|
||||
notionIpc.receiveIndexFromNotion.removeListener(
|
||||
this.$currentTab,
|
||||
focusListeners() {
|
||||
this.tabs.$current.addEventListener('ipc-message', this.setTheme);
|
||||
notionIpc.receiveIndexFromNotion.addListener(
|
||||
this.tabs.$current,
|
||||
'search:start',
|
||||
this.startSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromNotion.removeListener(
|
||||
this.$currentTab,
|
||||
notionIpc.receiveIndexFromNotion.addListener(
|
||||
this.tabs.$current,
|
||||
'search:stop',
|
||||
this.stopSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
this.$search,
|
||||
'search:next',
|
||||
this.nextSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
this.$search,
|
||||
'search:prev',
|
||||
this.prevSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
this.$search,
|
||||
'search:clear',
|
||||
this.clearSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
this.$search,
|
||||
'search:stop',
|
||||
this.doneSearch
|
||||
);
|
||||
}
|
||||
focusListeners() {
|
||||
notionIpc.receiveIndexFromNotion.addListener(
|
||||
this.$currentTab,
|
||||
blurListeners() {
|
||||
if (!this.tabs.$current) return;
|
||||
if (this.state.searching) this.stopSearch();
|
||||
this.tabs.$current.removeEventListener('ipc-message', this.setTheme);
|
||||
notionIpc.receiveIndexFromNotion.removeListener(
|
||||
this.tabs.$current,
|
||||
'search:start',
|
||||
this.startSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromNotion.addListener(
|
||||
this.$currentTab,
|
||||
notionIpc.receiveIndexFromNotion.removeListener(
|
||||
this.tabs.$current,
|
||||
'search:stop',
|
||||
this.stopSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
this.$search,
|
||||
'search:next',
|
||||
this.nextSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
this.$search,
|
||||
'search:prev',
|
||||
this.prevSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
this.$search,
|
||||
'search:clear',
|
||||
this.clearSearch
|
||||
);
|
||||
notionIpc.receiveIndexFromSearch.addListener(
|
||||
notionIpc.receiveIndexFromSearch.removeListener(
|
||||
this.$search,
|
||||
'search:stop',
|
||||
this.doneSearch
|
||||
@ -210,10 +217,10 @@ module.exports = (store, __exports) => {
|
||||
}
|
||||
loadListeners() {
|
||||
if (!this.$search) return;
|
||||
this.tabCache.loading
|
||||
.filter(($notion) => !this.tabCache.active.includes($notion))
|
||||
this.tabs.loading
|
||||
.filter(($notion) => !this.tabs.active.includes($notion))
|
||||
.forEach(($notion) => {
|
||||
this.tabCache.active.push($notion);
|
||||
this.tabs.active.push($notion);
|
||||
$notion.addEventListener('did-fail-load', (error) => {
|
||||
// logger.info('Failed to load:', error);
|
||||
if (
|
||||
@ -326,16 +333,90 @@ module.exports = (store, __exports) => {
|
||||
sendFullScreenChangeEvent
|
||||
);
|
||||
});
|
||||
this.tabCache.loading = [];
|
||||
this.tabs.loading = [];
|
||||
}
|
||||
|
||||
renderTitlebar() {
|
||||
return React.createElement(
|
||||
'header',
|
||||
{
|
||||
id: 'titlebar',
|
||||
ref: ($titlebar) => {
|
||||
this.$titlebar = $titlebar;
|
||||
},
|
||||
},
|
||||
React.createElement('div', { id: 'tabs' })
|
||||
);
|
||||
}
|
||||
renderNotionContainer() {
|
||||
this.tabs.react = Object.fromEntries(
|
||||
this.state.tabIDs.map((id) => {
|
||||
return [
|
||||
id,
|
||||
this.tabs.react[id] ||
|
||||
React.createElement('webview', {
|
||||
className: 'notion',
|
||||
id: `tab-${id}`,
|
||||
style: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'none',
|
||||
},
|
||||
ref: ($notion) => {
|
||||
this.tabs.loading.push($notion);
|
||||
},
|
||||
partition: constants.electronSessionPartition,
|
||||
preload: path.resolve(`${__notion}/app/renderer/preload.js`),
|
||||
src: this.props.notionUrl,
|
||||
}),
|
||||
];
|
||||
})
|
||||
);
|
||||
return React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
flexGrow: 1,
|
||||
display: this.state.error ? 'none' : 'flex',
|
||||
},
|
||||
},
|
||||
...Object.values(this.tabs.react)
|
||||
);
|
||||
}
|
||||
renderSearchContainer() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: this.getSearchContainerStyle() },
|
||||
{
|
||||
style: {
|
||||
position: 'fixed',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
padding: '0 20px',
|
||||
top:
|
||||
(this.state.searchingPeekView
|
||||
? 0
|
||||
: process.platform === 'darwin'
|
||||
? 37
|
||||
: 45) * this.state.zoomFactor,
|
||||
right: (48 - 24) * this.state.zoomFactor,
|
||||
width: 440 * this.state.zoomFactor,
|
||||
height: 72 * this.state.zoomFactor,
|
||||
},
|
||||
},
|
||||
React.createElement('webview', {
|
||||
id: 'search',
|
||||
style: this.getSearchWebviewStyle(),
|
||||
ref: this.handleSearchRef,
|
||||
style: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
transition: `transform 70ms ease-${
|
||||
this.state.searching ? 'out' : 'in'
|
||||
}`,
|
||||
transform: `translateY(${this.state.searching ? '0' : '-100'}%)`,
|
||||
pointerEvents: this.state.searching ? 'auto' : 'none',
|
||||
},
|
||||
ref: ($search) => {
|
||||
this.$search = $search;
|
||||
},
|
||||
partition: constants.electronSessionPartition,
|
||||
preload: `file://${path.resolve(
|
||||
`${__notion}/app/renderer/search.js`
|
||||
@ -346,41 +427,45 @@ module.exports = (store, __exports) => {
|
||||
})
|
||||
);
|
||||
}
|
||||
renderNotionContainer() {
|
||||
this.reactTabs = Object.fromEntries(
|
||||
this.state.tabs.map((id) => {
|
||||
return [
|
||||
id,
|
||||
this.reactTabs[id] ||
|
||||
React.createElement('webview', {
|
||||
className: 'notion',
|
||||
id: `tab-${id}`,
|
||||
style: Index.notionWebviewStyle,
|
||||
ref: this.handleNotionRef,
|
||||
partition: constants.electronSessionPartition,
|
||||
preload: path.resolve(`${__notion}/app/renderer/preload.js`),
|
||||
src: this.props.notionUrl,
|
||||
}),
|
||||
];
|
||||
})
|
||||
);
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: this.getNotionContainerStyle() },
|
||||
...Object.values(this.reactTabs)
|
||||
);
|
||||
}
|
||||
renderErrorContainer() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: this.getErrorContainerStyle() },
|
||||
{
|
||||
style: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: this.state.error ? 'flex' : 'none',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
paddingBottom: '8vh',
|
||||
},
|
||||
},
|
||||
React.createElement('img', {
|
||||
style: Index.frontImageStyle,
|
||||
style: {
|
||||
width: 300,
|
||||
maxWidth: '100%',
|
||||
},
|
||||
src: './onboarding-offline.png',
|
||||
}),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: Index.frontMessageStyle },
|
||||
{
|
||||
style: {
|
||||
paddingTop: 16,
|
||||
paddingBottom: 16,
|
||||
textAlign: 'center',
|
||||
lineHeight: 1.4,
|
||||
fontSize: 17,
|
||||
letterSpacing: '-0.01em',
|
||||
color: '#424241',
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
React.createElement(
|
||||
'div',
|
||||
null,
|
||||
@ -407,109 +492,8 @@ module.exports = (store, __exports) => {
|
||||
null,
|
||||
React.createElement(
|
||||
'button',
|
||||
{ style: Index.reloadButtonStyle, onClick: this.handleReload },
|
||||
React.createElement(notion_intl.FormattedMessage, {
|
||||
id:
|
||||
'desktopLogin.offline.retryConnectingToInternetButton.label',
|
||||
defaultMessage: 'Try again',
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
renderDragRegion() {
|
||||
return React.createElement('div', { style: Index.dragRegionStyle });
|
||||
}
|
||||
render() {
|
||||
const notionLocale = localizationHelper.getNotionLocaleFromElectronLocale(
|
||||
window.navigator.language
|
||||
),
|
||||
result = React.createElement(
|
||||
notion_intl.IntlProvider,
|
||||
{
|
||||
locale: notionLocale,
|
||||
messages: notionLocale === 'ko-KR' ? koMessages : {},
|
||||
},
|
||||
this.renderDragRegion(),
|
||||
this.renderNotionContainer(),
|
||||
this.renderSearchContainer(),
|
||||
this.renderErrorContainer()
|
||||
);
|
||||
this.loadListeners();
|
||||
return result;
|
||||
}
|
||||
getNotionContainerStyle() {
|
||||
const style = {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: this.state.error ? 'none' : 'flex',
|
||||
};
|
||||
return style;
|
||||
}
|
||||
getErrorContainerStyle() {
|
||||
const style = {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: this.state.error ? 'flex' : 'none',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
paddingBottom: '8vh',
|
||||
};
|
||||
return style;
|
||||
}
|
||||
getSearchWebviewStyle() {
|
||||
const style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
transition: 'transform 70ms ease-in',
|
||||
transform: 'translateY(-100%)',
|
||||
pointerEvents: 'none',
|
||||
};
|
||||
if (this.state.searching) {
|
||||
style.transition = 'transform 70ms ease-out';
|
||||
style.transform = 'translateY(0%)';
|
||||
style.pointerEvents = 'auto';
|
||||
}
|
||||
return style;
|
||||
}
|
||||
getSearchContainerStyle() {
|
||||
const style = {
|
||||
position: 'fixed',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
padding: '0 20px',
|
||||
top:
|
||||
(this.state.searchingPeekView
|
||||
? 0
|
||||
: process.platform === 'darwin'
|
||||
? 37
|
||||
: 45) * this.state.zoomFactor,
|
||||
right: (48 - 24) * this.state.zoomFactor,
|
||||
width: 440 * this.state.zoomFactor,
|
||||
height: 72 * this.state.zoomFactor,
|
||||
};
|
||||
return style;
|
||||
}
|
||||
}
|
||||
Index.frontMessageStyle = {
|
||||
paddingTop: 16,
|
||||
paddingBottom: 16,
|
||||
textAlign: 'center',
|
||||
lineHeight: 1.4,
|
||||
fontSize: 17,
|
||||
letterSpacing: '-0.01em',
|
||||
color: '#424241',
|
||||
fontWeight: 500,
|
||||
};
|
||||
Index.reloadButtonStyle = {
|
||||
style: {
|
||||
background: '#fefaf8',
|
||||
border: '1px solid #f1cbca',
|
||||
boxSizing: 'border-box',
|
||||
@ -523,28 +507,41 @@ module.exports = (store, __exports) => {
|
||||
paddingLeft: 12,
|
||||
paddingRight: 12,
|
||||
height: 36,
|
||||
};
|
||||
Index.frontImageStyle = {
|
||||
width: 300,
|
||||
maxWidth: '100%',
|
||||
};
|
||||
Index.notionWebviewStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'none',
|
||||
};
|
||||
Index.dragRegionStyle = {
|
||||
position: 'absolute',
|
||||
zIndex: 9999,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 2,
|
||||
pointerEvents: 'none',
|
||||
WebkitAppRegion: 'drag',
|
||||
};
|
||||
},
|
||||
onClick: this.handleReload,
|
||||
},
|
||||
React.createElement(notion_intl.FormattedMessage, {
|
||||
id:
|
||||
'desktopLogin.offline.retryConnectingToInternetButton.label',
|
||||
defaultMessage: 'Try again',
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const notionLocale = localizationHelper.getNotionLocaleFromElectronLocale(
|
||||
window.navigator.language
|
||||
),
|
||||
result = React.createElement(
|
||||
notion_intl.IntlProvider,
|
||||
{
|
||||
locale: notionLocale,
|
||||
messages: notionLocale === 'ko-KR' ? koMessages : {},
|
||||
},
|
||||
this.renderTitlebar(),
|
||||
this.renderNotionContainer(),
|
||||
this.renderSearchContainer(),
|
||||
this.renderErrorContainer()
|
||||
);
|
||||
this.loadListeners();
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
window['__start'] = () => {
|
||||
document.head.innerHTML += `<link rel="stylesheet" href="${__dirname}/css/tabs.css" />`;
|
||||
|
||||
const parsed = url.parse(window.location.href, true),
|
||||
notionUrl =
|
||||
parsed.query.path ||
|
||||
@ -556,6 +553,7 @@ module.exports = (store, __exports) => {
|
||||
delete parsed.query;
|
||||
const plainUrl = url.format(parsed);
|
||||
window.history.replaceState(undefined, undefined, plainUrl);
|
||||
|
||||
document.title = localizationHelper
|
||||
.createIntlShape(
|
||||
localizationHelper.getNotionLocaleFromElectronLocale(
|
||||
@ -570,11 +568,12 @@ module.exports = (store, __exports) => {
|
||||
},
|
||||
}).documentTitle
|
||||
);
|
||||
const rootElm = document.getElementById('root');
|
||||
const $root = document.getElementById('root');
|
||||
ReactDOM.render(
|
||||
React.createElement(Index, { notionUrl: notionUrl }),
|
||||
rootElm
|
||||
$root
|
||||
);
|
||||
|
||||
tab(0);
|
||||
};
|
||||
} else {
|
||||
|
||||
@ -28,15 +28,15 @@ module.exports = (store, __exports) => {
|
||||
})
|
||||
);
|
||||
|
||||
electron.ipcMain.on('enhancer:set-theme-vars', (event, arg) => {
|
||||
electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => {
|
||||
if (!enhancer_menu) return;
|
||||
enhancer_menu.webContents.send('enhancer:set-theme-vars', arg);
|
||||
enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
|
||||
});
|
||||
electron.ipcMain.on('enhancer:get-theme-vars', (event, arg) => {
|
||||
electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
|
||||
electron.webContents
|
||||
.getAllWebContents()
|
||||
.forEach((webContents) =>
|
||||
webContents.send('enhancer:get-theme-vars', arg)
|
||||
webContents.send('enhancer:get-menu-theme', arg)
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@ module.exports = function (__file, __exports) {
|
||||
(...args) =>
|
||||
!args.length
|
||||
? store(mod.id, mod.defaults)
|
||||
: args.length === 1
|
||||
: args.length === 1 && typeof args[0] === 'object'
|
||||
? store(mod.id, { ...mod.defaults, ...args[0] })
|
||||
: store(args[0], { ...mod.defaults, ...args[1] }),
|
||||
__exports
|
||||
|
||||
Loading…
Reference in New Issue
Block a user