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

common tweaks ext: #168, #176 - scrollbars, thicker bold, responsiveness, hide help, snappy transitions, dragarea height

Browse Source
This commit is contained in:
dragonwocky 2020-10-26 23:38:46 +11:00
parent f66c78a381
commit a21bcc9803
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
20 changed files with 217 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CHANGELOG.md
View File

@ -13,10 +13,7 @@ a flexibility update.
higher up on the list = higher priority of application = loaded last in order to override others.
(excluding the core, which though pinned to the top of the list is always loaded first so theming
variables can be modified.)
- new: in-page columns are disabled/wrapped and pages are wider when
the window is narrower than 600px for improved responsiveness.
- new: relaunch button in tray menu.
- new: a core mod option to make transitions snappy/0s.
- new: a core mod option for a default page id/url (all new windows will load it instead of the
normal "most recent" page).
- new: css variables for increasing line spacing/paragraph margins.
@ -57,19 +54,26 @@ a flexibility update.
originally by zeno rocha and friends.
- extension: "tabs" = have multiple notion pages open in a single window.
- extension: "scroll to top" = add an arrow above the help button to scroll back to the top of a page.
- extension: "tweaks" = common style/layout changes. includes:
- new: make transitions snappy/0s.
- new: in-page columns are disabled/wrapped and pages are wider when
the window is narrower than 600px for improved responsiveness.
- new: thicker bold text for better visibility.
- moved: smooth scrollbars.
- moved: change dragarea height.
- moved: hide help.
a fork of notion-deb-builder that does generate an app.asar has been created and is once again supported.
// todo
- bugfix: night shift working on macOS.
- bugfix: windows are properly hidden/shown on macOS.
- extension: "tweaks" = common style/layout changes.
- new: more readable line spacing.
MACOS SPECIFIC FIXES
- close to tray: perma-true
- frameless mode: perma-false
- open ext. menu hotkey not working?
### v0.9.1 (2020-09-26)

4
mods/calendar-scroll/mod.js
View File

@ -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 id="calendar-scroll-to-week">Scroll</button>'
);
button.addEventListener('click', (event) => {

10
mods/core/client.js
View File

@ -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('<div class="window-dragarea"></div>'));
document.documentElement.style.setProperty(
'--configured--dragarea_height',
`${store().dragarea_height + 2}px`
);
}
// window buttons

26
mods/core/css/responsive.css
View File

@ -1,26 +0,0 @@
/*
* notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (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;
}

12
mods/core/css/scrollbars.css
View File

@ -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);
}

15
mods/core/enhancerMenu.js
View File

@ -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(`
<section class="${
mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' || enabled
? 'enabled'
: 'disabled'
}" id="${mod.id}">
<section class="${enabled ? 'enabled' : 'disabled'}" id="${mod.id}">
<div class="meta">
<h3 ${
mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082'
mod.alwaysActive
? `>${mod.name}`
: `class="toggle">
<input type="checkbox" id="enable_${mod.id}"

2
mods/core/menu.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="smooth-scrollbars" lang="en">
<html data-tweaks="[smooth_scrollbars]" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

21
mods/core/mod.js
View File

@ -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:',

2
mods/core/render.js
View File

@ -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]};`
);
});

1
mods/core/styles.css
View File

@ -8,4 +8,3 @@
@import './css/variables.css';
@import './css/scrollbars.css';
@import './css/titlebar.css';
@import './css/responsive.css';

4
mods/custom-inserts/mod.js
View File

@ -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(
`<style type="text/css">${fs.readFileSync(
store().css
)}</style>`

16
mods/hide-help/mod.js
View File

@ -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',
};

9
mods/hide-help/styles.css
View File

@ -1,9 +0,0 @@
/*
* hide help button
* (c) 2020 coryzibell
* under the MIT license
*/
.notion-help-button {
display: none !important;
}

4
mods/property-layout/mod.js
View File

@ -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(
'<button class="propertylayout-toggle" data-action="show">properties</button>'
);
toggle.addEventListener('click', (event) => {

91
mods/tweaks/mod.js Normal file
View File

@ -0,0 +1,91 @@
/*
* tweaks
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (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();
});
},
},
};

38
mods/tweaks/styles.css Normal file
View File

@ -0,0 +1,38 @@
/*
* tweaks
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (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;
}

65
mods/weekly-view/mod.js
View File

@ -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;
});
}
});
}
},
},
};

33
mods/word-counter/mod.js
View File

@ -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])
? `<p><b>${
details[key][0]
}</b> ${key} ${questionBubble.replace(
'<svg',
`<svg data-tooltip="${details[key][1]}"`
)}</p>`
? `<p>
<b>${details[key][0]}</b> ${key}
<!-- from https://fontawesome.com/icons/question-circle?style=regular -->
<svg data-tooltip="${details[key][1]}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
fill="currentColor"
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003
248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200
0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200
200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627
0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579
0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666
2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112
261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841
42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
></path>
</svg>
</p>`
: `<p><b>${details[key]}</b> ${key}</p>`),
''
)}`;

3
pkg/helpers.js
View File

@ -117,12 +117,14 @@ function getEnhancements() {
for (let dir of modules.dirs) {
try {
const mod = require(`../mods/${dir}/mod.js`);
if (!mod.tags) mod.tags = [];
if (
!mod.id ||
modules.IDs.includes(mod.id) ||
!mod.name ||
!mod.version ||
!mod.author ||
!mod.tags.every((tag) => typeof tag === 'string') ||
(mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) ||
(mod.options &&
!mod.options.every((opt) =>
@ -140,6 +142,7 @@ function getEnhancements() {
...mod,
dir,
});
if (!mod.tags.includes('core')) mod.alwaysActive = false;
} catch (err) {
// console.error(err);
modules.invalid.push(dir);

4
pkg/loader.js
View File

@ -60,7 +60,7 @@ module.exports = function (__file, __exports) {
...modules.loaded.filter((m) => !m.tags.includes('core')).reverse(),
]) {
if (
mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' ||
mod.alwaysActive ||
store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled
) {
if (
@ -91,7 +91,7 @@ module.exports = function (__file, __exports) {
const other_mod = modules.loaded.find((m) => m.id === args[0]);
return store(args[0], {
...(other_mod ? other_mod.defaults : {}),
...args[1],
...(args[1] || {}),
});
}, __exports);
}