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

basic tabs: open/close/navigate between, integrated titlebar btns

Browse Source
This commit is contained in:
dragonwocky 2021-12-10 00:05:28 +11:00
parent eaf9c001dd
commit 58b44d556e
7 changed files with 217 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
repo/integrated-titlebar/buttons.css
View File

@ -37,6 +37,7 @@
border: none;
background: transparent;
font-size: 18px;
-webkit-app-region: no-drag;
}
.integrated_titlebar--buttons button svg {
display: block;

5
repo/integrated-titlebar/client.mjs
View File

@ -9,14 +9,15 @@
import { createWindowButtons } from './buttons.mjs';
export default async function (api, db) {
const { web, electron } = api,
const { web, registry, electron } = api,
tilingMode = await db.get(['tiling']),
dragareaHeight = await db.get(['dragarea_height']),
tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'),
sidebarSelector = '.notion-sidebar',
panelSelector = '#enhancer--panel',
topbarSelector = '.notion-topbar',
topbarActionsSelector = '.notion-topbar-action-buttons';
if (tilingMode) return;
if (tilingMode || tabsEnabled) return;
let sidebarWidth = '0px',
panelWidth = '0px';

27
repo/integrated-titlebar/rendererIndex.cjs
View File

@ -6,27 +6,22 @@
'use strict';
module.exports = async function ({ registry }, db, __exports, __eval) {
const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
await new Promise((res, rej) => {
let isReadyInt;
isReadyInt = setInterval(isReadyTest, 100);
function isReadyTest() {
if (document.querySelector(dragareaSelector)) {
clearInterval(isReadyInt);
res(true);
}
}
isReadyTest();
});
module.exports = async function ({ fs, web, registry }, db, __exports, __eval) {
const tilingMode = await db.get(['tiling']),
dragareaHeight = await db.get(['dragarea_height']),
tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42');
if (tabsEnabled) {
if (tabsEnabled && !tilingMode) {
await web.whenReady();
const script = document.createElement('script');
script.type = 'module';
script.src = fs.localPath('repo/integrated-titlebar/tabs.mjs');
document.head.appendChild(script);
web.loadStylesheet('repo/integrated-titlebar/buttons.css');
} else {
const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
await web.whenReady([dragareaSelector]);
const dragarea = document.querySelector(dragareaSelector);
dragarea.style.top = '2px';
dragarea.style.height = tilingMode ? '0' : `${dragareaHeight}px`;

29
repo/integrated-titlebar/tabs.mjs Normal file
View File

@ -0,0 +1,29 @@
/**
* notion-enhancer: integrated titlebar
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
import * as api from '../../api/index.mjs';
import { createWindowButtons } from './buttons.mjs';
(async () => {
const db = await api.registry.db('a5658d03-21c6-4088-bade-fa4780459133'),
{ web } = api,
windowActionsSelector = '#window-actions';
await web.whenReady([windowActionsSelector]);
// const $tabs = document.querySelector(topbarActionsSelector),
// $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
// $tabs.prepend($dragarea);
// document.documentElement.style.setProperty(
// '--integrated_titlebar--dragarea-height',
// dragareaHeight + 'px'
// );
const $topbarActions = document.querySelector(windowActionsSelector),
$windowButtons = await createWindowButtons(api, db);
web.render($topbarActions, $windowButtons);
})();

119
repo/tabs/rendererIndex.cjs
View File

@ -12,6 +12,8 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
electronWindow = electron.remote.getCurrentWindow(),
notionIpc = env.notionRequire('helpers/notionIpc');
let focusedTab, xIcon;
const tabCache = new Map();
class Tab {
$notion = web.html`
<webview class="notion-webview" partition="persist:notion"
@ -27,9 +29,75 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
></webview>
`;
constructor(notionUrl = 'notion://www.notion.so/') {
this.$notion.src = notionUrl;
$tabTitle = web.html`<span class="tab-title">v0.11.0 plan v0.11.0 plan v0.11.0 plan v0.11.0 plan</span>`;
$closeTab = web.html`<span class="tab-close">${xIcon}</span>`;
$tab = web.render(
web.html`<button class="tab" draggable="true"></button>`,
this.$tabTitle,
this.$closeTab
);
constructor($tabs, $root, notionUrl = 'notion://www.notion.so/') {
this.$notion.src = notionUrl;
tabCache.set($tab, this);
web.render($tabs, this.$tab);
web.render($root, this.$search);
web.render($root, this.$notion);
electronWindow.on('focus', () => {
if (focusedTab === this) this.$notion.focus();
});
this.$tab.addEventListener('click', (event) => {
if (event.target !== this.$closeTab && !this.$closeTab.contains(event.target)) {
this.focusTab();
}
});
this.$closeTab.addEventListener('click', () => this.closeTab());
this.focusTab();
this.listen();
return this;
}
focusTab() {
document.querySelectorAll('.notion-webview, .search-webview').forEach(($webview) => {
if (![this.$notion, this.$search].includes($webview)) $webview.style.display = '';
});
document.querySelectorAll('.tab.current').forEach(($tab) => {
if ($tab !== this.$tab) $tab.classList.remove('current');
});
this.$tab.classList.add('current');
this.$notion.style.display = 'flex';
this.$search.style.display = 'flex';
this.focusNotion();
focusedTab = this;
}
closeTab() {
const $sibling = this.$tab.nextElementSibling || this.$tab.previousElementSibling;
if ($sibling) {
this.$tab.remove();
this.$notion.remove();
this.$search.remove();
if (focusedTab === this) $sibling.click();
}
}
webContents() {
return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
}
focusNotion() {
document.activeElement?.blur?.();
this.$notion.blur();
this.$notion.focus();
}
focusSearch() {
document.activeElement?.blur?.();
this.$search.blur();
this.$search.focus();
}
listen() {
const fromNotion = (channel, listener) =>
notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener),
fromSearch = (channel, listener) =>
@ -58,6 +126,7 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
});
notionIpc.proxyAllMainToNotion(this.$notion);
fromNotion('search:start', () => this.startSearch());
fromNotion('search:stop', () => this.stopSearch());
fromNotion('search:set-theme', (theme) => toSearch('search:set-theme', theme));
@ -66,21 +135,9 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
fromSearch('search:next', (query) => this.searchNext(query));
fromSearch('search:prev', (query) => this.searchPrev(query));
return this;
}
webContents() {
return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
}
focusNotion() {
document.activeElement?.blur?.();
this.$notion.blur();
this.$notion.focus();
}
focusSearch() {
document.activeElement?.blur?.();
this.$search.blur();
this.$search.focus();
fromNotion('zoom', (zoomFactor) => {
this.webContents().setZoomFactor(zoomFactor);
});
}
#firstQuery = true;
@ -118,25 +175,17 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
}
window['__start'] = async () => {
const $topbar = web.html`
<header id="tabs">
<button class="tab current" draggable="true">
<span class="tab-title">v0.11.0 plan</span>
<span class="tab-close">
${await components.feather('x')}
</span>
</button>
<button class="tab new"><span>+</span></button>
</header>
`;
document.body.prepend($topbar);
const $header = web.html`<header></header>`,
$tabs = web.html`<div id="tabs"></div>`,
$newTab = web.html`<button class="new-tab">${await components.feather('plus')}</button>`,
$root = document.querySelector('#root'),
$windowActions = web.html`<div id="window-actions"></div>`;
document.body.prepend(web.render($header, $tabs, $newTab, $windowActions));
xIcon = await components.feather('x');
const $root = document.querySelector('#root');
const tab = new Tab(url.parse(window.location.href, true).query.path);
web.render($root, tab.$search);
web.render($root, tab.$notion);
electronWindow.on('focus', () => {
tab.$notion.focus();
$newTab.addEventListener('click', () => {
new Tab($tabs, $root, url.parse(window.location.href, true).query.path);
});
$newTab.click();
};
};

95
repo/tabs/tabs.css
View File

@ -4,6 +4,10 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
@ -11,6 +15,7 @@ body {
margin: 0;
padding: 0;
background: var(--theme--bg) !important;
overflow: hidden;
}
body {
@ -18,38 +23,110 @@ body {
flex-direction: column;
}
#tabs {
header {
display: flex;
background: var(--theme--bg_secondary);
width: 100%;
padding-top: 4px;
padding: 12px 8px 0 8px;
user-select: none;
-webkit-app-region: drag;
z-index: 3;
}
#tabs {
display: flex;
}
#tabs .tab {
display: flex;
flex-grow: 1;
max-width: 14em;
padding: 10.4px 9.6px 6.4px 9.6px;
margin-top: -4px;
color: var(--theme--text_secondary);
background: var(--theme--bg);
font-family: var(--theme--font_sans);
border: none;
padding: 0.4em 0.6em;
border-bottom: 2px solid var(--theme--ui_divider);
font-size: 16px;
font-weight: 500;
border: none;
border-bottom: 3px solid var(--theme--ui_divider);
-webkit-app-region: no-drag;
}
#tabs .tab .tab-title {
/* padding: 0.2em; */
white-space: nowrap;
overflow: hidden;
}
#tabs .tab .tab-close {
width: 20px;
transition: background 20ms ease-in 0s;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 3px;
height: 20px;
width: 20px;
padding: 0 0.25px 0 0;
margin-left: auto;
border: none;
background: transparent;
font-size: 18px;
}
#tabs .tab .tab-close svg {
width: 14px;
height: 14px;
fill: var(--theme--icon_secondary);
}
#tabs .tab:hover {
background: var(--theme--ui_interactive-hover);
}
#tabs .tab.current {
background: var(--theme--ui_interactive-active);
}
.new-tab {
transition: background 20ms ease-in 0s;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 3px;
height: 28px;
width: 33px;
padding: 0 0.25px 0 0;
margin-left: 6px;
border: none;
background: transparent;
font-size: 18px;
-webkit-app-region: no-drag;
}
.new-tab svg {
display: block;
width: 20px;
height: 20px;
fill: var(--theme--icon);
color: var(--theme--icon);
}
.new-tab:focus,
.new-tab:hover,
#tabs .tab-close:focus,
#tabs .tab-close:hover {
background: var(--theme--ui_interactive-hover);
}
.new-tab:active,
#tabs .tab-close:active {
background: var(--theme--ui_interactive-active);
}
#window-actions {
margin-left: auto;
}
#window-actions > * {
-webkit-app-region: no-drag;
}
#root {
flex-grow: 1;
@ -58,16 +135,18 @@ body {
.notion-webview {
width: 100%;
height: 100%;
display: none;
}
.search-webview {
width: 100%;
height: 60px;
display: none;
transition: transform 70ms ease-in;
transform: translateY(-100%);
pointer-events: none;
position: absolute;
z-index: 999;
z-index: 2;
}
.search-webview.search-active {
transition: transform 70ms ease-out;

2
repo/view-scale/client.mjs
View File

@ -79,7 +79,9 @@ export default async function ({ electron, web, components }, db) {
web.addHotkeyListener(['Ctrl', '+'], updateScale);
web.addHotkeyListener(['Ctrl', '-'], updateScale);
web.addHotkeyListener(['Ctrl', '0'], updateScale);
web.addHotkeyListener(['Command', '+'], updateScale);
web.addHotkeyListener(['Command', '-'], updateScale);
web.addHotkeyListener(['Command', '0'], updateScale);
}
}