mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-03 12:19:02 +00:00
feat(tweaks): normalised database scrolling
This commit is contained in:
parent
6dce77714e
commit
71ed1ddb1f
GPG Key ID:
7998D08F7D7BD7A8
@ -9,6 +9,9 @@ import { Tooltip } from "./Tooltip.mjs";
|
||||
import { TopbarButton } from "./TopbarButton.mjs";
|
||||
import { Select } from "../menu/islands/Select.mjs";
|
||||
|
||||
const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
|
||||
coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082";
|
||||
|
||||
// note: these islands are not reusable.
|
||||
// panel views can be added via addPanelView,
|
||||
// do not instantiate additional panels
|
||||
@ -135,8 +138,7 @@ function Panel({
|
||||
</aside>
|
||||
</div>`;
|
||||
|
||||
const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
|
||||
topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
|
||||
const topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
|
||||
$topbarToggle = html`<${TopbarButton}
|
||||
aria-label="Toggle side panel"
|
||||
icon="panel-right"
|
||||
@ -207,7 +209,11 @@ function Panel({
|
||||
|
||||
const animationState = { ...closedWidth },
|
||||
animate = ($target, keyframes) => {
|
||||
const opts = { fill: "forwards", duration: transitionDuration, easing: "ease" };
|
||||
const opts = {
|
||||
fill: "forwards",
|
||||
duration: transitionDuration,
|
||||
easing: "ease",
|
||||
};
|
||||
$target.animate(keyframes, opts);
|
||||
},
|
||||
animatePanel = (to) => {
|
||||
@ -278,12 +284,11 @@ function Panel({
|
||||
// hovering over the peek trigger will temporarily
|
||||
// pop out an interactive preview of the panel
|
||||
let _peekDebounce, _peekPanelOnHover;
|
||||
const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
|
||||
$peekTrigger = html`<div
|
||||
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
|
||||
const $peekTrigger = html`<div
|
||||
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
|
||||
group-[&[data-peeked]]/panel:(w-[calc(var(--panel--width,0)+8px)])
|
||||
group-[&[data-pinned]]/panel:(w-[calc(var(--panel--width,0)+8px)])"
|
||||
></div>`;
|
||||
></div>`;
|
||||
modDatabase(coreId).then(async (db) => {
|
||||
_peekPanelOnHover = await db.get("peekPanelOnHover");
|
||||
if (_peekPanelOnHover) $panel.prepend($peekTrigger);
|
||||
|
||||
@ -1,18 +1,44 @@
|
||||
/**
|
||||
* notion-enhancer: tweaks
|
||||
* (c) 2024 1280px
|
||||
* (c) 2020 Arecsu
|
||||
* (c) 2024 1280px
|
||||
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
/* interface */
|
||||
|
||||
/* pages */
|
||||
|
||||
body[data-tweaks*=",normalisedDatabaseScrolling,"] {
|
||||
.notion-page-content {
|
||||
.notion-collection_view-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
.notion-board-view {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
:is(.notion-collection_view-block, .notion-collection-view-body)
|
||||
> [style*="padding"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
min-width: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* typography */
|
||||
|
||||
.enhancer--tweak-responsive_breakpoint
|
||||
.notion-column_list-block
|
||||
[style='display: flex;']
|
||||
[style="display: flex;"]
|
||||
> div {
|
||||
width: 100% !important;
|
||||
}
|
||||
.enhancer--tweak-responsive_breakpoint .notion-column_list-block [style='display: flex;'] {
|
||||
.enhancer--tweak-responsive_breakpoint
|
||||
.notion-column_list-block
|
||||
[style="display: flex;"] {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.enhancer--tweak-responsive_breakpoint .notion-app-inner,
|
||||
@ -21,29 +47,6 @@
|
||||
--theme--page-padding: calc(48px + env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.enhancer--tweak-normalise_table_scroll
|
||||
.notion-frame
|
||||
.notion-page-content
|
||||
.notion-collection_view-block,
|
||||
.enhancer--tweak-normalise_table_scroll .notion-peek-renderer .notion-collection_view-block,
|
||||
.enhancer--tweak-normalise_table_scroll
|
||||
.notion-page-template-modal
|
||||
.notion-collection_view-block,
|
||||
.enhancer--tweak-normalise_table_dscroll .notion-collection-view-body .notion-table-view {
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.enhancer--tweak-normalise_table_scroll
|
||||
.notion-collection_view-block
|
||||
> [contenteditable]
|
||||
> .notion-scroller
|
||||
> [class$='view'][style*='padding'],
|
||||
.enhancer--tweak-normalise_table_scroll
|
||||
.notion-collection_view-block
|
||||
> :first-child[style*='padding-right'] {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
.enhancer--tweak-snappy_transitions * {
|
||||
animation-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
@ -57,26 +60,39 @@
|
||||
}
|
||||
|
||||
.enhancer--tweak-hide_slash_for_commands [contenteditable]:empty:after {
|
||||
content: ' ' !important;
|
||||
content: " " !important;
|
||||
}
|
||||
|
||||
.enhancer--tweak-hide_default_page_icons
|
||||
.notion-sidebar a > div > div:has(.notion-record-icon svg.page),
|
||||
.notion-sidebar
|
||||
a
|
||||
> div
|
||||
> div:has(.notion-record-icon svg.page),
|
||||
.enhancer--tweak-hide_default_page_icons
|
||||
.layout a > div > div > div > div:has(.notion-record-icon svg.page) {
|
||||
.layout
|
||||
a
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div:has(.notion-record-icon svg.page) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.enhancer--tweak-thicker_bold .notion-page-content span[style*='font-weight:600'] {
|
||||
.enhancer--tweak-thicker_bold
|
||||
.notion-page-content
|
||||
span[style*="font-weight:600"] {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.enhancer--tweak-spaced_lines .notion-page-content .notion-selectable.notion-text-block {
|
||||
.enhancer--tweak-spaced_lines
|
||||
.notion-page-content
|
||||
.notion-selectable.notion-text-block {
|
||||
line-height: 1.65 !important;
|
||||
margin-top: 0.75em !important;
|
||||
}
|
||||
|
||||
.enhancer--tweak-condensed_bullets .notion-selectable.notion-bulleted_list-block {
|
||||
.enhancer--tweak-condensed_bullets
|
||||
.notion-selectable.notion-bulleted_list-block {
|
||||
margin-top: -1.5px !important;
|
||||
margin-bottom: -1.5px !important;
|
||||
}
|
||||
@ -85,12 +101,12 @@
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.enhancer--tweak-bracketed_links .notion-link-token:before {
|
||||
content: '[[';
|
||||
content: "[[";
|
||||
opacity: 0.7;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
.enhancer--tweak-bracketed_links .notion-link-token:after {
|
||||
content: ']]';
|
||||
content: "]]";
|
||||
opacity: 0.7;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
@ -102,32 +118,42 @@
|
||||
.enhancer--tweak-accented_links .notion-link-token {
|
||||
color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
.enhancer--tweak-accented_links .notion-link-token span[style*='border-bottom:0.05em'] {
|
||||
.enhancer--tweak-accented_links
|
||||
.notion-link-token
|
||||
span[style*="border-bottom:0.05em"] {
|
||||
opacity: 1 !important;
|
||||
border-color: var(--theme--accent_blue) !important;
|
||||
}
|
||||
|
||||
.enhancer--tweak-quotation_marks
|
||||
.notion-quote-block
|
||||
[style*='border-left: 3px solid currentcolor;'] {
|
||||
[style*="border-left: 3px solid currentcolor;"] {
|
||||
position: relative;
|
||||
padding-left: 24px !important;
|
||||
padding-right: 18px !important;
|
||||
}
|
||||
.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::before,
|
||||
.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::after {
|
||||
.enhancer--tweak-quotation_marks
|
||||
.notion-quote-block
|
||||
[placeholder="Empty quote"]::before,
|
||||
.enhancer--tweak-quotation_marks
|
||||
.notion-quote-block
|
||||
[placeholder="Empty quote"]::after {
|
||||
font-family: Georgia, serif;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
}
|
||||
.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::before {
|
||||
content: '\201C';
|
||||
.enhancer--tweak-quotation_marks
|
||||
.notion-quote-block
|
||||
[placeholder="Empty quote"]::before {
|
||||
content: "\201C";
|
||||
left: 8px;
|
||||
top: -2px;
|
||||
}
|
||||
.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::after {
|
||||
content: '\201D';
|
||||
.enhancer--tweak-quotation_marks
|
||||
.notion-quote-block
|
||||
[placeholder="Empty quote"]::after {
|
||||
content: "\201D";
|
||||
right: 2px;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
@ -1,56 +1,17 @@
|
||||
/**
|
||||
* notion-enhancer: tweaks
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
|
||||
export default async (api, db) => {
|
||||
const { getMods } = api,
|
||||
[{ options }] = await getMods((mod) => mod.id === tweaksId),
|
||||
tweaks = options.filter((opt) => opt.key).map((opt) => opt.key);
|
||||
|
||||
export default async function ({ web }, db) {
|
||||
const cssInsert = await db.get(['insert.css']);
|
||||
if (cssInsert?.filename) {
|
||||
document.head.append(
|
||||
web.html`<style id="enhancer--tweak-${cssInsert.filename}">${cssInsert.content}</style>`
|
||||
);
|
||||
}
|
||||
|
||||
const responsiveBreakpointPx = +(await db.get(['tweak.responsive_breakpoint_px'])),
|
||||
responsiveBreakpointPercent =
|
||||
screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
|
||||
addResponsiveBreakpoint = () => {
|
||||
document.body.classList.remove('enhancer--tweak-responsive_breakpoint');
|
||||
if (
|
||||
window.innerWidth <= responsiveBreakpointPx ||
|
||||
window.innerWidth <= responsiveBreakpointPercent
|
||||
) {
|
||||
document.body.classList.add('enhancer--tweak-responsive_breakpoint');
|
||||
}
|
||||
};
|
||||
addEventListener('resize', addResponsiveBreakpoint);
|
||||
addResponsiveBreakpoint();
|
||||
|
||||
const tweaks = [
|
||||
'full_width_pages',
|
||||
'normalise_table_scroll',
|
||||
'hide_help',
|
||||
'hide_slash_for_commands',
|
||||
'hide_default_page_icons',
|
||||
'snappy_transitions',
|
||||
'thicker_bold',
|
||||
'spaced_lines',
|
||||
'condensed_bullets',
|
||||
'bracketed_links',
|
||||
'accented_links',
|
||||
'quotation_marks',
|
||||
];
|
||||
for (const tweak of tweaks) {
|
||||
if (await db.get([`tweak.${tweak}`])) {
|
||||
document.body.classList.add(`enhancer--tweak-${tweak}`);
|
||||
}
|
||||
}
|
||||
|
||||
const imgAlignment = await db.get(['tweak.img_alignment']);
|
||||
if (imgAlignment !== 'center') {
|
||||
document.body.classList.add(`enhancer--tweak-img_alignment-${imgAlignment}`);
|
||||
}
|
||||
}
|
||||
// inc. leading & trailing comma for selectors (see client.css)
|
||||
let enabled = ",";
|
||||
for (const tweak of tweaks) if (await db.get(tweak)) enabled += tweak + ",";
|
||||
document.body.dataset.tweaks = enabled;
|
||||
};
|
||||
|
||||
@ -59,9 +59,9 @@
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "normalisedTableScrolling",
|
||||
"description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow.",
|
||||
"value": false
|
||||
"key": "normalisedDatabaseScrolling",
|
||||
"description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow. Enabling this is recommended if you are using panel mods, otherwise databases may overflow.",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
@ -130,5 +130,7 @@
|
||||
"description": "Changes the default horizontal alignment of images embedded within pages. Note that this replaces Notion's built-in central alignment, i.e. setting this to left or right will remove the option to centre images entirely.",
|
||||
"values": ["Centre", "Left", "Right"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"clientStyles": ["client.css"],
|
||||
"clientScripts": ["client.mjs"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user