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

font imports working in menu + font-chooser improvements

Browse Source
This commit is contained in:
dragonwocky 2020-09-02 11:10:01 +10:00
parent ae3760e193
commit 850610b213
14 changed files with 84 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
repo/core/buttons.js
View File

@ -7,13 +7,13 @@
'use strict';
module.exports = (store) => {
const electron = require('electron'),
const helpers = require('../../pkg/helpers.js'),
path = require('path'),
fs = require('fs-extra'),
browser = require('electron').remote.getCurrentWindow(),
is_mac = process.platform === 'darwin',
buttons = {
element: document.createElement('div'),
element: helpers.createElement('<div class="window-buttons-area"></div>'),
insert: [
'alwaysontop',
...(store().frameless && !is_mac
@ -77,7 +77,6 @@ module.exports = (store) => {
};
(async () => {
buttons.element.className = 'window-buttons-area';
for (let btn of buttons.insert) {
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
btn

5
repo/core/client.js
View File

@ -40,8 +40,9 @@ module.exports = (store, __exports) => {
if (store().frameless) {
document.body.classList.add('frameless');
// draggable area
const dragarea = document.createElement('div');
dragarea.className = 'window-dragarea';
const dragarea = helpers.createElement(
'<div class="window-dragarea"></div>'
);
document.querySelector('.notion-topbar').prepend(dragarea);
document.documentElement.style.setProperty(
'--configured--dragarea_height',

36
repo/core/menu.js
View File

@ -47,15 +47,10 @@ window['__start'] = async () => {
document.body.style.setProperty(style[0], style[1]);
});
function createElement(html) {
const template = document.createElement('template');
template.innerHTML = html.trim();
return template.content.firstElementChild;
}
function createAlert(type, message) {
if (!type)
throw Error('<notion-enhancer> @ createAlert: no alert type specified');
const el = createElement(`
const el = helpers.createElement(`
<section class="${type}" role="alert">
<p>${message}</p>
</section>
@ -152,7 +147,9 @@ window['__start'] = async () => {
document
.querySelector('#colorpicker')
.appendChild(createElement('<button class="close-modal"></button>'));
.appendChild(
helpers.createElement('<button class="close-modal"></button>')
);
document.querySelectorAll('#popup .close-modal').forEach((el) =>
el.addEventListener('click', (event) => {
$popup.classList.remove('visible');
@ -195,7 +192,7 @@ window['__start'] = async () => {
throw Error('<notion-enhancer> @ createTag: no tagname specified');
if (!onclick)
throw Error('<notion-enhancer> @ createTag: no action specified');
const el = createElement(
const el = helpers.createElement(
`<span class="selected" ${
color ? `style="--tag_color: ${color}" ` : ''
}tabindex="0">${tagname}</span>`
@ -345,7 +342,7 @@ window['__start'] = async () => {
</label>
`;
}
$opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
$opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
if (opt.type === 'color') {
$opt
.querySelector(`#${opt.type}_${id}--${opt.key}`)
@ -377,18 +374,13 @@ window['__start'] = async () => {
? 1
: a.name.localeCompare(b.name)
)) {
// mod styling - necessary for fonts
// if (
// fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`))
// ) {
// document
// .querySelector('head')
// .appendChild(
// createElement(
// `<link rel="stylesheet" href="enhancement://${mod.dir}/styles.css">`
// )
// );
// }
for (let fonts of mod.fonts || []) {
document
.querySelector('head')
.appendChild(
helpers.createElement(`<link rel="stylesheet" href="${fonts}">`)
);
}
const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
.enabled,
@ -400,7 +392,7 @@ window['__start'] = async () => {
link: `https://github.com/${mod.author}`,
avatar: `https://github.com/${mod.author}.png`,
};
mod.elem = createElement(`
mod.elem = helpers.createElement(`
<section class="${
mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
}" id="${mod.id}">

136
repo/font-chooser/mod.js
View File

@ -1,95 +1,59 @@
/*
* font chooser
* (c) 2020 torchatlas (https://bit.ly/torchatlas)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
tags: ['extension'],
name: 'font chooser',
desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.',
version: '0.1.0',
author: 'torchatlas',
options: [
{
key: 'sansSerif',
label: 'Sans Serif and UI',
type: 'input',
value: '',
},
{
key: 'serif',
label: 'Serif',
type: 'input',
value: ''
},
{
key: 'mono',
label: 'Monospace',
type: 'input',
value: ''
},
{
key: 'code',
label: 'Code',
type: 'input',
value: ''
}
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
if (store().sansSerif != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_sans',
store().sansSerif
);
document.documentElement.style.setProperty(
'--theme_light--font_sans',
store().sansSerif
);
}
if (store().serif != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_serif',
store().serif
);
document.documentElement.style.setProperty(
'--theme_light--font_serif',
store().serif
);
}
if (store().mono != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_mono',
store().mono
);
document.documentElement.style.setProperty(
'--theme_light--font_mono',
store().mono
);
}
if (store().code != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_code',
store().code
);
document.documentElement.style.setProperty(
'--theme_light--font_code',
store().code
);
}
});
}
}
}
id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
tags: ['extension'],
name: 'font chooser',
desc:
'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.',
version: '0.1.1',
author: 'torchatlas',
options: [
{
key: 'sans',
label: 'sans-serif (inc. ui):',
type: 'input',
value: '',
},
{
key: 'serif',
label: 'serif:',
type: 'input',
value: '',
},
{
key: 'mono',
label: 'monospace:',
type: 'input',
value: '',
},
{
key: 'code',
label: 'code:',
type: 'input',
value: '',
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
const attempt_interval = setInterval(enhance, 500);
async function enhance() {
if (!document.querySelector('.notion-app-inner')) return;
clearInterval(attempt_interval);
for (let style of ['sans', 'serif', 'mono', 'code']) {
if (!store()[style]) return;
document
.querySelector('.notion-app-inner')
.style.setProperty(`--theme--font_${style}`, store()[style]);
}
}
},
},
};

5
repo/gameish/mod.js
View File

@ -12,11 +12,14 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'gameish',
desc: 'a purple, "gamer-styled" theme with a blocky-font.',
version: '0.1.2',
version: '0.1.3',
author: {
name: 'LVL100ShrekCultist',
link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
avatar:
'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
},
fonts: [
'https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap',
],
};

2
repo/gameish/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap');
:root {
--theme_dark--main: #1e1c26;
--theme_dark--sidebar: #24222c;

3
repo/littilepig-dark/mod.js
View File

@ -12,11 +12,12 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'littlepig dark',
desc: 'a purple monospaced theme using emojis and colourful text.',
version: '0.1.0',
version: '0.1.1',
author: {
name: 'Lizishan',
link: 'https://www.reddit.com/user/Lizishan/',
avatar:
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
},
fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
};

2
repo/littilepig-dark/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
:root {
--theme_dark--main: #1e1c26;
--theme_dark--sidebar: #24222c;

3
repo/littlepig-light/mod.js
View File

@ -12,11 +12,12 @@ module.exports = {
tags: ['theme', 'light'],
name: 'littlepig light',
desc: 'a bright monospaced theme using emojis and colourful text.',
version: '0.1.0',
version: '0.1.1',
author: {
name: 'Lizishan',
link: 'https://www.reddit.com/user/Lizishan/',
avatar:
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
},
fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
};

2
repo/littlepig-light/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
:root {
--theme_light--font_sans: 'JetBrains Mono';
--theme_light--font_mono: 'JetBrains Mono';

6
repo/neutral/mod.js
View File

@ -12,6 +12,10 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'neutral',
desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
version: '0.1.1',
version: '0.1.2',
author: 'arecsu',
fonts: [
'https://rsms.me/inter/inter.css',
'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap',
],
};

3
repo/neutral/styles.css
View File

@ -5,9 +5,6 @@
* under the MIT license
*/
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
:root {
/** dark **/

3
repo/pastel-dark/mod.js
View File

@ -12,11 +12,12 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'pastel dark',
desc: 'a smooth-transition true dark theme with a hint of pastel.',
version: '0.1.1',
version: '0.1.2',
author: {
name: 'zenith_illinois',
link: 'https://www.reddit.com/user/zenith_illinois/',
avatar:
'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128',
},
fonts: ['https://rsms.me/inter/inter.css'],
};

2
repo/pastel-dark/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://rsms.me/inter/inter.css');
:root {
--theme_dark--main: #0b0b0b;
--theme_dark--sidebar: #0f0f0f;