From 850610b2133d6b9992c5ea644ac17e8c9b8c655c Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 11:10:01 +1000 Subject: [PATCH] font imports working in menu + font-chooser improvements --- repo/core/buttons.js | 5 +- repo/core/client.js | 5 +- repo/core/menu.js | 36 ++++----- repo/font-chooser/mod.js | 136 ++++++++++++-------------------- repo/gameish/mod.js | 5 +- repo/gameish/styles.css | 2 - repo/littilepig-dark/mod.js | 3 +- repo/littilepig-dark/styles.css | 2 - repo/littlepig-light/mod.js | 3 +- repo/littlepig-light/styles.css | 2 - repo/neutral/mod.js | 6 +- repo/neutral/styles.css | 3 - repo/pastel-dark/mod.js | 3 +- repo/pastel-dark/styles.css | 2 - 14 files changed, 84 insertions(+), 129 deletions(-) diff --git a/repo/core/buttons.js b/repo/core/buttons.js index f664432..9b6cafd 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -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('
'), 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 += `')); + .appendChild( + helpers.createElement('') + ); document.querySelectorAll('#popup .close-modal').forEach((el) => el.addEventListener('click', (event) => { $popup.classList.remove('visible'); @@ -195,7 +192,7 @@ window['__start'] = async () => { throw Error(' @ createTag: no tagname specified'); if (!onclick) throw Error(' @ createTag: no action specified'); - const el = createElement( + const el = helpers.createElement( `${tagname}` @@ -345,7 +342,7 @@ window['__start'] = async () => { `; } - $opt = createElement(`

${$opt}

`); + $opt = helpers.createElement(`

${$opt}

`); 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( - // `` - // ) - // ); - // } + for (let fonts of mod.fonts || []) { + document + .querySelector('head') + .appendChild( + helpers.createElement(``) + ); + } 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(`
diff --git a/repo/font-chooser/mod.js b/repo/font-chooser/mod.js index 60b5cec..03cd2ca 100644 --- a/repo/font-chooser/mod.js +++ b/repo/font-chooser/mod.js @@ -1,95 +1,59 @@ /* * font chooser * (c) 2020 torchatlas (https://bit.ly/torchatlas) + * (c) 2020 dragonwocky (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 - ); - } - - }); - } - } -} \ No newline at end of file + 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]); + } + } + }, + }, +}; diff --git a/repo/gameish/mod.js b/repo/gameish/mod.js index 405aabe..66a5bf6 100644 --- a/repo/gameish/mod.js +++ b/repo/gameish/mod.js @@ -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', + ], }; diff --git a/repo/gameish/styles.css b/repo/gameish/styles.css index b0c914b..62500b1 100644 --- a/repo/gameish/styles.css +++ b/repo/gameish/styles.css @@ -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; diff --git a/repo/littilepig-dark/mod.js b/repo/littilepig-dark/mod.js index 1720a8e..a655447 100644 --- a/repo/littilepig-dark/mod.js +++ b/repo/littilepig-dark/mod.js @@ -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'], }; diff --git a/repo/littilepig-dark/styles.css b/repo/littilepig-dark/styles.css index 4c752e1..fbc0efe 100644 --- a/repo/littilepig-dark/styles.css +++ b/repo/littilepig-dark/styles.css @@ -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; diff --git a/repo/littlepig-light/mod.js b/repo/littlepig-light/mod.js index fbeb9f7..319d127 100644 --- a/repo/littlepig-light/mod.js +++ b/repo/littlepig-light/mod.js @@ -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'], }; diff --git a/repo/littlepig-light/styles.css b/repo/littlepig-light/styles.css index 5414d6f..334b27c 100644 --- a/repo/littlepig-light/styles.css +++ b/repo/littlepig-light/styles.css @@ -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'; diff --git a/repo/neutral/mod.js b/repo/neutral/mod.js index 23a352e..51c13a3 100644 --- a/repo/neutral/mod.js +++ b/repo/neutral/mod.js @@ -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', + ], }; diff --git a/repo/neutral/styles.css b/repo/neutral/styles.css index c814737..2a7b441 100644 --- a/repo/neutral/styles.css +++ b/repo/neutral/styles.css @@ -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 **/ diff --git a/repo/pastel-dark/mod.js b/repo/pastel-dark/mod.js index a69ff80..31e9358 100644 --- a/repo/pastel-dark/mod.js +++ b/repo/pastel-dark/mod.js @@ -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'], }; diff --git a/repo/pastel-dark/styles.css b/repo/pastel-dark/styles.css index 49c44bc..5ba0826 100644 --- a/repo/pastel-dark/styles.css +++ b/repo/pastel-dark/styles.css @@ -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;