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

load menu.css and variables.css into enhancer menu

Browse Source
This commit is contained in:
dragonwocky 2020-11-11 22:14:05 +11:00
parent 2fc1e66cff
commit fb88dc5a90
8 changed files with 51 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
repo/core/app.css
View File

@ -5,6 +5,5 @@
*/
@import './css/theme.css';
@import './css/variables.css';
@import './css/scrollbars.css';
@import './css/titlebar.css';

75
repo/core/client.js
View File

@ -140,81 +140,18 @@ module.exports = (store, __exports) => {
}
});
function setThemeVars() {
function setAppTheme() {
electron.ipcRenderer.send(
'enhancer:set-menu-theme',
[
'--theme--main',
'--theme--sidebar',
'--theme--overlay',
'--theme--dragarea',
'--theme--box-shadow_strong',
'--theme--font_sans',
'--theme--font_code',
'--theme--font_label-size',
'--theme--scrollbar',
'--theme--scrollbar-border',
'--theme--scrollbar_hover',
'--theme--card',
'--theme--table-border',
'--theme--interactive_hover',
'--theme--interactive_hover-border',
'--theme--button_close',
'--theme--button_close-fill',
'--theme--selected',
'--theme--primary',
'--theme--primary_click',
'--theme--option-color',
'--theme--option-background',
'--theme--option_active-background',
'--theme--option_active-color',
'--theme--option_hover-color',
'--theme--option_hover-background',
'--theme--text',
'--theme--text_ui',
'--theme--text_ui_info',
'--theme--select_yellow',
'--theme--select_green',
'--theme--select_blue',
'--theme--select_red',
'--theme--line_text',
'--theme--line_yellow',
'--theme--line_yellow-text',
'--theme--line_green',
'--theme--line_green-text',
'--theme--line_blue',
'--theme--line_blue-text',
'--theme--line_red',
'--theme--line_red-text',
'--theme--code_inline-text',
'--theme--code_inline-background',
].map((rule) => [rule, getStyle(rule)])
'enhancer:set-app-theme',
document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
);
if (tabsEnabled) {
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--option_active-background',
'--theme--selected',
'--theme--text',
].map((rule) => [rule, getStyle(rule)])
);
}
}
setThemeVars();
new MutationObserver(setThemeVars).observe(
setAppTheme();
new MutationObserver(setAppTheme).observe(
document.querySelector('.notion-app-inner'),
{ attributes: true }
);
electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars);
electron.ipcRenderer.on('enhancer:get-app-theme', setAppTheme);
if (tabsEnabled) {
let tab_title = { img: '', emoji: '', text: '' };

51
repo/core/enhancerMenu.js
View File

@ -7,7 +7,7 @@
'use strict';
const store = require('../../pkg/store.js'),
helpers = require('../../pkg/helpers.js'),
{ createElement, getEnhancements } = require('../../pkg/helpers.js'),
fs = require('fs-extra'),
path = require('path'),
electron = require('electron'),
@ -17,13 +17,14 @@ window['__start'] = async () => {
document.body.setAttribute('data-platform', process.platform);
// mod loader
const modules = helpers.getEnhancements();
if (modules.loaded.length)
const modules = getEnhancements();
if (modules.loaded.length) {
console.info(
`<notion-enhancer> enhancements loaded: ${modules.loaded
.map((mod) => mod.name)
.join(', ')}.`
);
}
if (modules.invalid.length) {
createAlert(
'error',
@ -43,6 +44,28 @@ window['__start'] = async () => {
: store(args[0], { ...mod.defaults, ...args[1] });
};
for (let mod of modules.loaded) {
if (
mod.alwaysActive ||
store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled
) {
const fileExists = (file) => fs.pathExistsSync(path.resolve(file));
for (let sheet of ['menu', 'variables']) {
if (fileExists(`${__dirname}/../${mod.dir}/${sheet}.css`)) {
document.head.appendChild(
createElement(
`<link rel="stylesheet" href="enhancement://${mod.dir}/${sheet}.css">`
)
);
}
}
}
}
electron.ipcRenderer.send('enhancer:get-app-theme');
electron.ipcRenderer.on('enhancer:set-app-theme', (event, theme) => {
document.body.className = `notion-${theme}-theme`;
});
const buttons = require('./buttons.js')(() => ({
'72886371-dada-49a7-9afc-9f275ecf29d3': {
enabled: (store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
@ -53,16 +76,10 @@ window['__start'] = async () => {
}));
document.querySelector('#titlebar').appendChild(buttons.element);
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]);
});
function createAlert(type, message) {
if (!type)
throw Error('<notion-enhancer> @ createAlert: no alert type specified');
const el = helpers.createElement(`
const el = createElement(`
<section class="${type}" role="alert">
<p>${message}</p>
</section>
@ -182,9 +199,7 @@ window['__start'] = async () => {
.update();
document
.querySelector('#colorpicker')
.appendChild(
helpers.createElement('<button class="close-modal"></button>')
);
.appendChild(createElement('<button class="close-modal"></button>'));
document.querySelectorAll('#popup .close-modal').forEach((el) =>
el.addEventListener('click', (event) => {
$popup.classList.remove('visible');
@ -325,7 +340,7 @@ window['__start'] = async () => {
throw Error('<notion-enhancer> @ createTag: no tagname specified');
if (!onclick)
throw Error('<notion-enhancer> @ createTag: no action specified');
const el = helpers.createElement(
const el = createElement(
`<span class="selected" ${
color ? `style="--tag_color: ${color}" ` : ''
}tabindex="0">${tagname}</span>`
@ -470,7 +485,7 @@ window['__start'] = async () => {
</label>
`;
}
$opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
$opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
if (opt.type === 'color') {
$opt
.querySelector(`#${opt.type}_${id}--${opt.key}`)
@ -498,9 +513,7 @@ window['__start'] = async () => {
for (let font of mod.fonts || []) {
document
.querySelector('head')
.appendChild(
helpers.createElement(`<link rel="stylesheet" href="${font}">`)
);
.appendChild(createElement(`<link rel="stylesheet" href="${font}">`));
}
const enabled =
@ -516,7 +529,7 @@ window['__start'] = async () => {
link: `https://github.com/${mod.author}`,
avatar: `https://github.com/${mod.author}.png`,
};
mod.elem = helpers.createElement(`
mod.elem = createElement(`
<section class="${enabled ? 'enabled' : 'disabled'}" id="${mod.id}">
<div class="meta">
<h3 ${

20
repo/core/css/menu.css → repo/core/menu.css
View File

@ -4,8 +4,8 @@
* under the MIT license
*/
@import './buttons.css';
@import './scrollbars.css';
@import './css/buttons.css';
@import './css/scrollbars.css';
@keyframes spin {
from {
@ -44,22 +44,6 @@ body {
color: var(--theme--text);
}
body:not([style]) > * {
display: none !important;
}
body:not([style])::after {
content: '';
position: absolute;
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;
}
main {
padding: 1em 1em 2.9em 1em;
height: 100%;

3
repo/core/menu.html
View File

@ -6,9 +6,8 @@
<title>notion-enhancer menu</title>
<script src="./colorjoe/min.js"></script>
<link rel="stylesheet" href="./colorjoe/picker.css" />
<link rel="stylesheet" href="./css/menu.css" />
</head>
<body>
<body class="notion-dark-theme">
<header id="titlebar"></header>
<main>
<div id="alerts"></div>

2
repo/core/css/tabs.css → repo/core/tabs.css
View File

@ -4,7 +4,7 @@
* under the MIT license
*/
@import './buttons.css';
@import './css/buttons.css';
* {
box-sizing: border-box;

15
repo/core/tray.js
View File

@ -57,15 +57,18 @@ module.exports = (store, __exports) => {
// menu
electron.ipcMain.on('enhancer:open-menu', openEnhancerMenu);
electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => {
if (!enhancer_menu) return;
enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
});
electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
electron.ipcMain.on('enhancer:set-app-theme', (event, arg) => {
electron.webContents
.getAllWebContents()
.forEach((webContents) =>
webContents.send('enhancer:get-menu-theme', arg)
webContents.send('enhancer:set-app-theme', arg)
);
});
electron.ipcMain.on('enhancer:get-app-theme', (event, arg) => {
electron.webContents
.getAllWebContents()
.forEach((webContents) =>
webContents.send('enhancer:get-app-theme', arg)
);
});
electron.ipcMain.on('enhancer:close-tab', (event, target, tab) => {

0
repo/core/css/variables.css → repo/core/variables.css
View File