diff --git a/repo/calendar-scroll/mod.js b/repo/calendar-scroll/mod.js index 13dcd89..4284076 100644 --- a/repo/calendar-scroll/mod.js +++ b/repo/calendar-scroll/mod.js @@ -6,7 +6,7 @@ 'use strict'; -const helpers = require('../../pkg/helpers.js'); +const { createElement } = require('../../pkg/helpers.js'); module.exports = { id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a', @@ -26,7 +26,7 @@ module.exports = { if (!notion_elem) return; clearInterval(attempt_interval); - const button = helpers.createElement( + const button = createElement( '' ); button.addEventListener('click', (event) => { diff --git a/repo/core/client.js b/repo/core/client.js index d094fea..0d97db1 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -79,12 +79,6 @@ module.exports = (store, __exports) => { return; clearInterval(attempt_interval); - // toggleable styles - if (store().smooth_scrollbars) - document.body.classList.add('smooth-scrollbars'); - if (store().snappy_transitions) - document.body.classList.add('snappy-transitions'); - // frameless if (store().frameless && !store().tiling_mode && !tabsEnabled) { document.body.classList.add('frameless'); @@ -92,10 +86,6 @@ module.exports = (store, __exports) => { document .querySelector('.notion-topbar') .prepend(helpers.createElement('
')); - document.documentElement.style.setProperty( - '--configured--dragarea_height', - `${store().dragarea_height + 2}px` - ); } // window buttons diff --git a/repo/core/css/responsive.css b/repo/core/css/responsive.css deleted file mode 100644 index 0b92c03..0000000 --- a/repo/core/css/responsive.css +++ /dev/null @@ -1,26 +0,0 @@ -/* - * notion-enhancer - * (c) 2020 dragonwocky (https://dragonwocky.me/) - * under the MIT license - */ - -@media (max-width: 600px) { - .notion-column_list-block [style='display: flex;'] > div { - width: 100% !important; - } - .notion-column_list-block [style='display: flex;'] { - flex-direction: column !important; - } - - .notion-app-inner { - --theme_dark--page_normal-width: 100%; - --theme_dark--page-padding: calc(48px + env(safe-area-inset-left)); - --theme_light--page_normal-width: 100%; - --theme_light--page-padding: calc(48px + env(safe-area-inset-left)); - } -} - -.snappy-transitions * { - animation-duration: 0s !important; - transition-duration: 0s !important; -} diff --git a/repo/core/css/scrollbars.css b/repo/core/css/scrollbars.css index 2286f9a..a837c92 100644 --- a/repo/core/css/scrollbars.css +++ b/repo/core/css/scrollbars.css @@ -5,25 +5,25 @@ * under the MIT license */ -.smooth-scrollbars .notion-scroller { +[data-tweaks*='[smooth_scrollbars]'] .notion-scroller { cursor: auto; } -.smooth-scrollbars ::-webkit-scrollbar { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar { width: 8px; /* vertical */ height: 8px; /* horizontal */ -webkit-app-region: no-drag; } -.smooth-scrollbars ::-webkit-scrollbar-corner { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-corner { background-color: transparent; /* overlap */ } -.smooth-scrollbars ::-webkit-scrollbar-thumb { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb { border-radius: 5px; } -.smooth-scrollbars ::-webkit-scrollbar-thumb { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb { background-color: var(--theme--scrollbar); border: 1px solid var(--theme--scrollbar-border); } -.smooth-scrollbars ::-webkit-scrollbar-thumb:hover { +[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb:hover { background: var(--theme--scrollbar_hover); } diff --git a/repo/core/enhancerMenu.js b/repo/core/enhancerMenu.js index dbaa2c6..364ce54 100644 --- a/repo/core/enhancerMenu.js +++ b/repo/core/enhancerMenu.js @@ -503,8 +503,11 @@ window['__start'] = async () => { ); } - const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id] - .enabled, + const enabled = + mod.alwaysActive || + store('mods', { + [mod.id]: { enabled: false }, + })[mod.id].enabled, author = typeof mod.author === 'object' ? mod.author @@ -514,14 +517,10 @@ window['__start'] = async () => { avatar: `https://github.com/${mod.author}.png`, }; mod.elem = helpers.createElement(` -
+

${mod.name}` : `class="toggle"> - + diff --git a/repo/core/mod.js b/repo/core/mod.js index 438c5ce..58861b1 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -8,6 +8,7 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', + alwaysActive: true, tags: ['core'], name: 'notion-enhancer core', desc: 'the cli, modloader, menu, & tray.', @@ -53,14 +54,6 @@ module.exports = { type: 'toggle', value: true, }, - { - key: 'dragarea_height', - label: 'height of frameless dragarea:', - description: `the rectangle added at the top of a window in "integrated titlebar" mode, - used to drag/move the window.`, - type: 'input', - value: 15, - }, { key: 'tiling_mode', label: 'tiling window manager mode', @@ -69,18 +62,6 @@ module.exports = { type: 'toggle', value: false, }, - { - key: 'smooth_scrollbars', - label: 'integrated scrollbars', - type: 'toggle', - value: true, - }, - { - key: 'snappy_transitions', - label: 'snappy transitions', - type: 'toggle', - value: false, - }, { key: 'hotkey', label: 'window display hotkey:', diff --git a/repo/core/render.js b/repo/core/render.js index ba57639..aa72adb 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -1071,7 +1071,7 @@ module.exports = (store, __exports) => { dragarea.setAttribute( 'style', `${default_styles} top: 2px; height: ${ - store().dragarea_height + store('cf8a7b27-5a4c-4d45-a4cb-1d2bbc9e9014').dragarea_height }px; left: ${event.args[0]};` ); }); diff --git a/repo/core/styles.css b/repo/core/styles.css index fbfe5be..da69ff5 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -8,4 +8,3 @@ @import './css/variables.css'; @import './css/scrollbars.css'; @import './css/titlebar.css'; -@import './css/responsive.css'; diff --git a/repo/custom-inserts/mod.js b/repo/custom-inserts/mod.js index 8ae3aa4..d793b90 100644 --- a/repo/custom-inserts/mod.js +++ b/repo/custom-inserts/mod.js @@ -6,7 +6,7 @@ 'use strict'; -const helpers = require('../../pkg/helpers.js'); +const { createElement } = require('../../pkg/helpers.js'); module.exports = { id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb', @@ -40,7 +40,7 @@ module.exports = { document .querySelector('head') .appendChild( - helpers.createElement( + createElement( `` diff --git a/repo/hide-help/mod.js b/repo/hide-help/mod.js deleted file mode 100644 index 76e17e8..0000000 --- a/repo/hide-help/mod.js +++ /dev/null @@ -1,16 +0,0 @@ -/* - * hide help button - * (c) 2020 coryzibell - * under the MIT license - */ - -'use strict'; - -module.exports = { - id: 'd4ebe9f3-974a-4c01-a6a9-94bc4296851d', - tags: ['extension'], - name: 'hide help', - desc: "hide the help button if you don't need it.", - version: '1.0.0', - author: 'coryzibell', -}; diff --git a/repo/hide-help/styles.css b/repo/hide-help/styles.css deleted file mode 100644 index 8fc7b8b..0000000 --- a/repo/hide-help/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -/* - * hide help button - * (c) 2020 coryzibell - * under the MIT license - */ - -.notion-help-button { - display: none !important; -} diff --git a/repo/property-layout/mod.js b/repo/property-layout/mod.js index a6957d8..10539da 100644 --- a/repo/property-layout/mod.js +++ b/repo/property-layout/mod.js @@ -7,7 +7,7 @@ 'use strict'; -const helpers = require('../../pkg/helpers.js'); +const { createElement } = require('../../pkg/helpers.js'); module.exports = { id: '4034a578-7dd3-4633-80c6-f47ac5b7b160', @@ -42,7 +42,7 @@ module.exports = { 'propertylayout-enhanced', 'propertylayout-hidden' ); - const toggle = helpers.createElement( + const toggle = createElement( '' ); toggle.addEventListener('click', (event) => { diff --git a/repo/tweaks/mod.js b/repo/tweaks/mod.js new file mode 100644 index 0000000..06f5d7a --- /dev/null +++ b/repo/tweaks/mod.js @@ -0,0 +1,91 @@ +/* + * tweaks + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'cf8a7b27-5a4c-4d45-a4cb-1d2bbc9e9014', + alwaysActive: true, + tags: ['core', 'extension'], + name: 'tweaks', + desc: 'common style/layout changes.', + version: '0.1.0', + author: 'dragonwocky', + options: [ + { + key: 'dragarea_height', + label: 'height of frameless dragarea:', + description: `the rectangle added at the top of a window in "integrated titlebar" mode, + used to drag/move the window.`, + type: 'input', + value: 15, + }, + { + key: 'responsive_breakpoint', + label: 'width to wrap columns at:', + description: `the size in pixels below which in-page columns are resized to appear + full width so content isn't squished.`, + type: 'input', + value: 600, + }, + { + key: 'smooth_scrollbars', + label: 'integrated scrollbars', + description: + "use scrollbars that fit better into notion's ui instead of the default chrome ones.", + type: 'toggle', + value: true, + }, + { + key: 'snappy_transitions', + label: 'snappy transitions', + type: 'toggle', + value: false, + }, + { + key: 'thicker_bold', + label: 'thicker bold text', + type: 'toggle', + value: false, + }, + { + key: 'hide_help', + label: 'hide help button', + type: 'toggle', + value: false, + }, + ], + hacks: { + 'renderer/preload.js': (store, __exports) => { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + document.body.dataset.tweaks = [ + 'smooth_scrollbars', + 'snappy_transitions', + 'hide_help', + 'thicker_bold', + ] + .filter((tweak) => store()[tweak]) + .map((tweak) => `[${tweak}]`) + .join(''); + document.documentElement.style.setProperty( + '--configured--dragarea_height', + `${store().dragarea_height + 2}px` + ); + const addResponsiveBreakpoint = () => { + document.body.dataset.tweaks = document.body.dataset.tweaks.replace( + /\[responsive_breakpoint\]/g, + '' + ); + if (window.outerWidth <= store().responsive_breakpoint) + document.body.dataset.tweaks += '[responsive_breakpoint]'; + }; + window.addEventListener('resize', addResponsiveBreakpoint); + addResponsiveBreakpoint(); + }); + }, + }, +}; diff --git a/repo/tweaks/styles.css b/repo/tweaks/styles.css new file mode 100644 index 0000000..0372fd2 --- /dev/null +++ b/repo/tweaks/styles.css @@ -0,0 +1,38 @@ +/* + * tweaks + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +[data-tweaks*='[responsive_breakpoint]'] + .notion-column_list-block + [style='display: flex;'] + > div { + width: 100% !important; +} +[data-tweaks*='[responsive_breakpoint]'] + .notion-column_list-block + [style='display: flex;'] { + flex-direction: column !important; +} +[data-tweaks*='[responsive_breakpoint]'] .notion-app-inner { + --theme_dark--page_normal-width: 100%; + --theme_dark--page-padding: calc(48px + env(safe-area-inset-left)); + --theme_light--page_normal-width: 100%; + --theme_light--page-padding: calc(48px + env(safe-area-inset-left)); +} + +[data-tweaks*='[snappy_transitions]'] * { + animation-duration: 0s !important; + transition-duration: 0s !important; +} + +[data-tweaks*='[hide_help]'] .notion-help-button { + display: none !important; +} + +[data-tweaks*='[thicker_bold]'] + .notion-page-content + span[style*='font-weight:600'] { + font-weight: 700 !important; +} diff --git a/repo/weekly-view/mod.js b/repo/weekly-view/mod.js index 95a240e..4599e8e 100644 --- a/repo/weekly-view/mod.js +++ b/repo/weekly-view/mod.js @@ -16,41 +16,38 @@ module.exports = { author: 'adihd', hacks: { 'renderer/preload.js'(store, __exports) { - document.addEventListener('readystatechange', (event) => { - if (document.readyState !== 'complete') return false; - const attempt_interval = setInterval(enhance, 500); - function enhance() { - const notion_elem = document.querySelector('.notion-frame'); - if (!notion_elem) return; - clearInterval(attempt_interval); - process([{ target: notion_elem }]); - const observer = new MutationObserver(process); - observer.observe(notion_elem, { - childList: true, - subtree: true, - }); - function process(list, observer) { - document - .querySelectorAll('.notion-collection-view-select') - .forEach((collection_view) => { - if (collection_view.innerText != 'weekly') return; - const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName( - 'notion-calendar-view-day' - ), - today = [...days].find((day) => day.style.background), - height = today - ? getComputedStyle( - today.parentElement.parentElement - ).getPropertyValue('height') - : 0; - for (let day of days) - day.parentElement.parentElement.style.height = 0; - if (today) - today.parentElement.parentElement.style.height = height; - }); - } + const attempt_interval = setInterval(enhance, 500); + function enhance() { + const notion_elem = document.querySelector('.notion-frame'); + if (!notion_elem) return; + clearInterval(attempt_interval); + process([{ target: notion_elem }]); + const observer = new MutationObserver(process); + observer.observe(notion_elem, { + childList: true, + subtree: true, + }); + function process(list, observer) { + document + .querySelectorAll('.notion-collection-view-select') + .forEach((collection_view) => { + if (collection_view.innerText != 'weekly') return; + const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName( + 'notion-calendar-view-day' + ), + today = [...days].find((day) => day.style.background), + height = today + ? getComputedStyle( + today.parentElement.parentElement + ).getPropertyValue('height') + : 0; + for (let day of days) + day.parentElement.parentElement.style.height = 0; + if (today) + today.parentElement.parentElement.style.height = height; + }); } - }); + } }, }, }; diff --git a/repo/word-counter/mod.js b/repo/word-counter/mod.js index 33e0173..b39c37b 100644 --- a/repo/word-counter/mod.js +++ b/repo/word-counter/mod.js @@ -6,9 +6,7 @@ 'use strict'; -const { createElement } = require('../../pkg/helpers.js'), - fs = require('fs-extra'), - path = require('path'); +const { createElement } = require('../../pkg/helpers.js'); module.exports = { id: 'b99deb52-6955-43d2-a53b-a31540cd19a5', @@ -44,10 +42,7 @@ module.exports = { if (2 <= secs) readable += 's'; } return readable; - }, - questionBubble = fs - .readFileSync(path.resolve(`${__dirname}/../core/icons/question.svg`)) - .toString(); + }; document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; @@ -109,12 +104,24 @@ module.exports = { (prev, key) => prev + (Array.isArray(details[key]) - ? `

${ - details[key][0] - } ${key} ${questionBubble.replace( - '` + ? `

+ ${details[key][0]} ${key} + + + + +

` : `

${details[key]} ${key}

`), '' )}`;