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

stricter theme application, ipc broadcasting

Browse Source
This commit is contained in:
dragonwocky 2021-12-09 21:14:49 +11:00
parent e071940a0d
commit eaf9c001dd
20 changed files with 205 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
repo/always-on-top/button.css
View File

@ -34,6 +34,8 @@
display: block;
width: 20px;
height: 20px;
fill: var(--theme--icon);
color: var(--theme--icon);
}
.always_on_top--button button:focus,

2
repo/global-block-links/client.css
View File

@ -24,7 +24,7 @@
display: block;
height: 16px;
width: 16px;
fill: var(--theme--icon_secondary);
fill: var(--theme--icon);
}
.global_block_links--topbar_copy > span {
margin-left: 2px;

2
repo/gruvbox-light/variables.css
View File

@ -6,7 +6,7 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
:root:not(.dark) {
:root.light {
/*
* variables are named for consistency with gruvbox dark,
* but the _light variants are actually darker here

2
repo/icon-sets/client.mjs
View File

@ -208,7 +208,7 @@ export default async function ({ web, fs, components, notion }, db) {
);
web.render($setsList, $title, $set);
} catch (err) {
console.log(err);
console.error(err);
web.render(
$setsList,
web.html`<div class="icon_sets--error">

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

@ -42,6 +42,8 @@
display: block;
width: 20px;
height: 20px;
fill: var(--theme--icon);
color: var(--theme--icon);
}
.integrated_titlebar--buttons button:focus,

2
repo/light+/variables.css
View File

@ -5,7 +5,7 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
:root:not(.dark) {
:root.light {
--theme--accent_blue: var(--light_plus--accent_blue, rgb(46, 170, 220));
--theme--accent_blue-selection: var(
--light_plus--accent_blue-selection,

2
repo/menu/menu.mjs
View File

@ -23,7 +23,7 @@ import './styles.mjs';
}
const errors = await registry.errors();
if (errors.length) {
console.log('[notion-enhancer] registry errors:');
console.error('[notion-enhancer] registry errors:');
console.table(errors);
const $errNotification = await notifications.add({
icon: 'alert-circle',

2
repo/pinky-boom/variables.css
View File

@ -5,7 +5,7 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
:root:not(.dark) {
:root.light {
--pinky_boom--brown: #a52a2a80;
--pinky_boom--orange: #ffa60080;
--pinky_boom--yellow: #ffff0080;

73
repo/tabs/rendererIndex.cjs
View File

@ -6,7 +6,7 @@
'use strict';
module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
module.exports = async function ({ components, env, web, fs }, db, __exports, __eval) {
const url = require('url'),
electron = require('electron'),
electronWindow = electron.remote.getCurrentWindow(),
@ -27,9 +27,14 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
></webview>
`;
#firstQuery = true;
constructor(notionUrl = 'notion://www.notion.so/') {
this.navigate(notionUrl);
this.$notion.src = notionUrl;
const fromNotion = (channel, listener) =>
notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener),
fromSearch = (channel, listener) =>
notionIpc.receiveIndexFromSearch.addListener(this.$search, channel, listener),
toSearch = (channel, data) => notionIpc.sendIndexToSearch(this.$search, channel, data);
this.$notion.addEventListener('dom-ready', () => {
this.focusNotion();
@ -48,44 +53,22 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
const matches = result
? { count: result.matches, index: result.activeMatchOrdinal }
: { count: 0, index: 0 };
notionIpc.sendIndexToSearch(this.$search, 'search:result', matches);
toSearch('search:result', matches);
});
notionIpc.proxyAllMainToNotion(this.$notion);
});
notionIpc.receiveIndexFromNotion.addListener(this.$notion, 'search:start', () => {
this.startSearch();
});
notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:clear', () => {
this.clearSearch();
});
notionIpc.receiveIndexFromNotion.addListener(this.$notion, 'search:stop', () => {
this.stopSearch();
});
notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:stop', () => {
this.stopSearch();
});
notionIpc.receiveIndexFromNotion.addListener(
this.$notion,
'search:set-theme',
(theme) => {
notionIpc.sendIndexToSearch(this.$search, 'search:set-theme', theme);
}
);
notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:next', (query) => {
this.searchNext(query);
});
notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:prev', (query) => {
this.searchPrev(query);
});
notionIpc.proxyAllMainToNotion(this.$notion);
fromNotion('search:start', () => this.startSearch());
fromNotion('search:stop', () => this.stopSearch());
fromNotion('search:set-theme', (theme) => toSearch('search:set-theme', theme));
fromSearch('search:clear', () => this.clearSearch());
fromSearch('search:stop', () => this.stopSearch());
fromSearch('search:next', (query) => this.searchNext(query));
fromSearch('search:prev', (query) => this.searchPrev(query));
return this;
}
navigate(notionUrl) {
this.$notion.src = notionUrl;
}
webContents() {
return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
}
@ -100,6 +83,7 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
this.$search.focus();
}
#firstQuery = true;
startSearch() {
this.$search.classList.add('search-active');
this.focusSearch();
@ -133,11 +117,24 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
}
}
window['__start'] = () => {
const tab = new Tab(url.parse(window.location.href, true).query.path);
web.render(document.body, tab.$search);
web.render(document.body, tab.$notion);
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 $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();
});

69
repo/tabs/tabs.css
View File

@ -4,6 +4,62 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: var(--theme--bg) !important;
}
body {
display: flex;
flex-direction: column;
}
#tabs {
display: flex;
background: var(--theme--bg_secondary);
width: 100%;
padding-top: 4px;
user-select: none;
-webkit-app-region: drag;
}
#tabs .tab {
display: flex;
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;
-webkit-app-region: no-drag;
}
#tabs .tab .tab-title {
/* padding: 0.2em; */
}
#tabs .tab .tab-close {
width: 20px;
height: 20px;
}
#tabs .tab .tab-close svg {
width: 14px;
height: 14px;
fill: var(--theme--icon_secondary);
}
#root {
flex-grow: 1;
}
.notion-webview {
width: 100%;
height: 100%;
}
.search-webview {
width: 100%;
height: 60px;
@ -18,16 +74,3 @@
transform: translateY(0%);
pointer-events: auto;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.notion-webview {
width: 100%;
height: 100%;
}

45
repo/theming/client.mjs
View File

@ -16,19 +16,42 @@ export default async function ({ web, registry, storage, electron }, db) {
web.loadStylesheet('repo/theming/colors.css');
}
const updateTheme = () => {
storage
.set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light')
.then(() => {
electron.sendMessageToHost('update-theme');
});
document.documentElement.classList[
document.body.classList.contains('dark') ? 'add' : 'remove'
]('dark');
const updateTheme = async () => {
await storage.set(
['theme'],
document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
);
const mode = await storage.get(['theme'], 'light'),
inactive = mode === 'light' ? 'dark' : 'light';
document.documentElement.classList.add(mode);
document.documentElement.classList.remove(inactive);
electron.sendMessage('update-theme');
const searchThemeVars = [
'bg',
'text',
'icon',
'icon_secondary',
'accent_blue',
'accent_blue-text',
'accent_blue-hover',
'accent_blue-active',
'ui_shadow',
'ui_divider',
'ui_input',
'ui_interactive-hover',
'ui_interactive-active',
].map((key) => [
key,
window.getComputedStyle(document.documentElement).getPropertyValue(`--theme--${key}`),
]);
electron.sendMessage('set-search-theme', searchThemeVars);
};
web.addDocumentObserver((mutation) => {
if (mutation.target === document.body && document.hasFocus()) updateTheme();
const potentialThemeChange = [document.body, document.documentElement].includes(
mutation.target
);
if (potentialThemeChange && document.hasFocus()) updateTheme();
});
if (document.hasFocus()) updateTheme();
updateTheme();
document.addEventListener('visibilitychange', updateTheme);
}

38
repo/theming/electronSearch.css
View File

@ -4,58 +4,58 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
body > style + #container {
#container {
background: var(--theme--bg) !important;
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
}
body > style + #container #results {
#container #results {
color: var(--theme--text) !important;
}
body > style + #container #prev,
body > style + #container #next {
#container #prev,
#container #next {
border-color: var(--theme--ui_divider) !important;
}
body > style + #container .enabled:focus,
body > style + #container .enabled:hover {
#container .enabled:focus,
#container .enabled:hover {
background: var(--theme--ui_interactive-hover) !important;
}
body > style + #container .enabled:active {
#container .enabled:active {
background: var(--theme--ui_interactive-active) !important;
}
body > style + #container #prev svg,
body > style + #container #next svg {
#container #prev svg,
#container #next svg {
fill: var(--theme--icon_secondary) !important;
}
body > style + #container #button-separator {
#container #button-separator {
background: var(--theme--ui_divider) !important;
}
body > style + #container #search-icon svg,
body > style + #container #clear-icon svg {
#container #search-icon svg,
#container #clear-icon svg {
fill: var(--theme--icon) !important;
}
body > style + #container #input-wrap #search {
#container #input-wrap #search {
background: var(--theme--ui_input) !important;
color: var(--theme--text) !important;
}
body > style + #container #done {
#container #done {
background: var(--theme--accent_blue) !important;
color: var(--theme--accent_blue-text) !important;
}
body > style + #container #done:focus,
body > style + #container #done:hover {
#container #done:focus,
#container #done:hover {
background: var(--theme--accent_blue-hover) !important;
}
body > style + #container #done:active {
#container #done:active {
background: var(--theme--accent_blue-active) !important;
}
body > style + #container .enabled::after,
body > style + #container #done::after {
#container .enabled::after,
#container #done::after {
background: transparent !important;
}

21
repo/theming/main.cjs Normal file
View File

@ -0,0 +1,21 @@
/**
* notion-enhancer: theming
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
module.exports = async function ({}, db, __exports, __eval) {
const electron = require('electron');
electron.ipcMain.on('notion-enhancer:update-theme', () => {
electron.webContents
.getAllWebContents()
.forEach((webContents) => webContents.send('notion-enhancer:update-theme'));
});
electron.ipcMain.on('notion-enhancer:set-search-theme', (event, theme) => {
electron.webContents
.getAllWebContents()
.forEach((webContents) => webContents.send('notion-enhancer:set-search-theme', theme));
});
};

15
repo/theming/menu.mjs
View File

@ -6,15 +6,18 @@
'use strict';
export default async function ({ web, registry, storage }, db) {
export default async function ({ web, registry, storage, electron }, db) {
await web.whenReady();
const loadTheme = async () => {
document.documentElement.className =
(await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
const updateTheme = async () => {
const mode = await storage.get(['theme'], 'light'),
inactive = mode === 'light' ? 'dark' : 'light';
document.documentElement.classList.add(mode);
document.documentElement.classList.remove(inactive);
};
document.addEventListener('visibilitychange', loadTheme);
loadTheme();
document.addEventListener('visibilitychange', updateTheme);
electron.onMessage('update-theme', updateTheme);
updateTheme();
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
for (const sheet of mod.css?.menu || []) {

1
repo/theming/mod.json
View File

@ -21,6 +21,7 @@
"client": ["client.mjs"],
"menu": ["menu.mjs"],
"electron": [
{ "source": "main.cjs", "target": "main/main.js" },
{ "source": "rendererIndex.cjs", "target": "renderer/index.js" },
{ "source": "rendererSearch.cjs", "target": "renderer/search.js" }
]

11
repo/theming/rendererIndex.cjs
View File

@ -6,9 +6,18 @@
'use strict';
module.exports = async function ({ registry, web, storage }, db, __exports, __eval) {
module.exports = async function ({ registry, web, storage, electron }, db, __exports, __eval) {
await web.whenReady();
const updateTheme = async () => {
const mode = await storage.get(['theme'], 'light'),
inactive = mode === 'light' ? 'dark' : 'light';
document.documentElement.classList.add(mode);
document.documentElement.classList.remove(inactive);
};
electron.onMessage('update-theme', updateTheme);
updateTheme();
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
for (const sheet of mod.css?.frame || []) {
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);

20
repo/theming/rendererSearch.cjs
View File

@ -6,19 +6,13 @@
'use strict';
module.exports = async function ({ registry, web, storage, electron }, db, __exports, __eval) {
await web.whenReady(['#search']);
module.exports = async function ({ web, electron }, db, __exports, __eval) {
await web.whenReady();
web.loadStylesheet('repo/theming/electronSearch.css');
const loadTheme = async () => {
document.documentElement.className =
(await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
};
document.querySelector('#search').addEventListener('focus', loadTheme);
loadTheme();
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
for (const sheet of mod.css?.frame || []) {
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
electron.onMessage('set-search-theme', (event, theme) => {
for (const [key, value] of theme) {
document.documentElement.style.setProperty(`--theme--${key}`, value);
}
}
});
};

2
repo/theming/variables.css
View File

@ -31,7 +31,7 @@
--theme--accent_red-text: #fff;
}
:root:not(.dark) {
:root.light {
--theme--bg: #fff;
--theme--bg_secondary: rgb(247, 246, 243);
--theme--bg_card: #fff;

1
repo/truncated-titles/client.mjs
View File

@ -46,7 +46,6 @@ export default async function ({ web, components }, db) {
$title.firstElementChild.firstElementChild.style.maxWidth = '400px';
});
$timelineItem.addEventListener('mouseout', async (event) => {
console.log(event, $timelineItem.matches(':hover'));
if (!$timelineItem.matches(':hover')) {
$title.style.width = $timelineItem.clientWidth + 'px';
$title.firstElementChild.firstElementChild.style.maxWidth =

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

@ -85,4 +85,6 @@
display: block;
width: 14px;
height: 14px;
fill: var(--theme--icon);
color: var(--theme--icon);
}