dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-08 06:29:03 +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 00e5b3f40e
commit 61b6b6deca
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
9 changed files with 52 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DOCUMENTATION.md
View File

@ -181,7 +181,7 @@ notion's html structure needs some complex selectors to properly modify it,
and it means theme authors don't have to worry about separately updating their theme every time something changes.
the full/up-to-date list of variables and their default values can be found in the
[`variables.css` source file](mods/core/css/variables.css). each variable is named something along the lines of
[core `variables.css` file](mods/core/variables.css). each variable is named something along the lines of
`--theme_mode--target_name-property`. still not sure what a variable does? try changing it and seeing what happens.
these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,

1
mods/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
mods/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)])
);
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)])
'enhancer:set-app-theme',
document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
);
}
}
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
mods/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
mods/core/css/menu.css → mods/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
mods/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
mods/core/css/tabs.css → mods/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
mods/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
mods/core/css/variables.css → mods/core/variables.css
View File