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

style: implement size- utility

Browse Source
This commit is contained in:
dragonwocky 2024-01-30 22:20:58 +11:00
parent 4e1a28df3d
commit c4eacd201c
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
21 changed files with 55 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/archive/corner-action.css
View File

@ -1,55 +0,0 @@
/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
* (https://notion-enhancer.github.io/) under the MIT license
*/
#enhancer--corner-actions {
position: absolute;
bottom: 26px;
right: 26px;
z-index: 101;
cursor: default;
pointer-events: none;
display: flex;
flex-direction: row-reverse;
}
#enhancer--corner-actions > div {
position: static !important;
width: 36px;
height: 36px;
margin-left: 12px;
pointer-events: auto;
border-radius: 100%;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme--icon);
fill: var(--theme--icon);
background: var(--theme--ui_corner_action) !important;
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important;
user-select: none;
cursor: pointer;
}
#enhancer--corner-actions > div:hover {
background: var(--theme--ui_corner_action-hover) !important;
}
#enhancer--corner-actions > div:active {
background: var(--theme--ui_corner_action-active) !important;
}
#enhancer--corner-actions > div.hidden {
display: none;
}
#enhancer--corner-actions > div > svg {
width: 22px;
height: 22px;
color: var(--theme--icon);
fill: var(--theme--icon);
}

43
src/archive/corner-action.mjs
View File

@ -1,43 +0,0 @@
/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/** shared notion-style elements */
import { web } from '../index.mjs';
let $stylesheet, $cornerButtonsContainer;
/**
* adds a button to notion's bottom right corner
* @param {string} icon - an svg string
* @param {function} listener - the function to call when the button is clicked
* @returns {Element} the appended corner action element
*/
export const addCornerAction = async (icon, listener) => {
if (!$stylesheet) {
$stylesheet = web.loadStylesheet('api/components/corner-action.css');
$cornerButtonsContainer = web.html`<div id="enhancer--corner-actions"></div>`;
}
await web.whenReady(['.notion-help-button']);
const $helpButton = document.querySelector('.notion-help-button'),
$onboardingButton = document.querySelector('.onboarding-checklist-button');
if ($onboardingButton) $cornerButtonsContainer.prepend($onboardingButton);
$cornerButtonsContainer.prepend($helpButton);
web.render(
document.querySelector('.notion-app-inner > .notion-cursor-listener'),
$cornerButtonsContainer
);
const $actionButton = web.html`<div class="enhancer--corner-action-button">${icon}</div>`;
$actionButton.addEventListener('click', listener);
web.render($cornerButtonsContainer, $actionButton);
return $actionButton;
};

10
src/common/markup.js
View File

@ -84,18 +84,18 @@ twind.install({
rules: [
["text-(wrap|nowrap|balance|pretty)", "textWrap"],
[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons],
[/^size-\[([^\]]+)\]$/, ({ 1: $1 }) => ({ height: $1, width: $1 })],
],
variants: [
// https://github.com/tw-in-js/twind/blob/main/packages/preset-ext/src/variants.ts
[
"not-([a-z-]+|\\[.+\\])",
({ 1: $1 }) => `&:not(${($1[0] == "[" ? "" : ":") + $1})`,
],
["children", "&>*"],
["siblings", "&~*"],
["sibling", "&+*"],
[/^&/, (match) => match.input],
[/^has-\[([^\]]+)\]/, (match) => `&:has(${match[1]})`],
[
/^not-([a-z-]+|\[.+\])/,
({ 1: $1 }) => `&:not(${($1[0] == "[" ? "" : ":") + $1})`,
],
],
});

6
src/common/system.js
View File

@ -142,10 +142,8 @@ const initDatabase = (namespace, fallbacks = {}) => {
},
reloadApp = () => {
if (IS_ELECTRON && !IS_RENDERER) {
const { app } = require("electron"),
args = process.argv.slice(1).filter((arg) => arg !== "--startup");
app.relaunch({ args });
app.exit();
const { app } = require("electron");
app.relaunch(), app.exit();
} else sendMessage("notion-enhancer", "reload-app");
};

2
src/core/client.mjs
View File

@ -107,7 +107,7 @@ const insertMenu = async (api, db) => {
event.stopPropagation();
$modal.open();
});
window.addEventListener("message", (event) => {
addEventListener("message", (event) => {
// from embedded menu
if (event.data?.channel !== "notion-enhancer") return;
if (event.data?.action === "close-menu") $modal.close();

6
src/core/islands/MenuButton.mjs
View File

@ -20,7 +20,7 @@ function MenuButton(
transition hover:bg-[color:var(--theme--bg-hover)]`,
});
return html`<div ...${props}>
<div class="flex items-center justify-center w-[22px] h-[22px] mr-[8px]">
<div class="flex items-center justify-center size-[22px] mr-[8px]">
<i class="i-${icon}"></i>
</div>
<div>${children}</div>
@ -29,9 +29,9 @@ function MenuButton(
<!-- accents are squashed into one variable for theming:
use rgb to match notion if overrides not loaded -->
<div
class="flex justify-center w-[16px] h-[16px] font-semibold
class="flex justify-center size-[16px] font-semibold mb-[2px]
text-([10px] [color:var(--theme--accent-secondary\\_contrast)])
bg-[color:var(--theme--accent-secondary)] rounded-[3px] mb-[2px]
bg-[color:var(--theme--accent-secondary)] rounded-[3px]
dark:bg-[color:${themeOverridesLoaded
? "var(--theme--accent-secondary)"
: "rgb(180,65,60)"}]"

25
src/core/islands/Panel.mjs
View File

@ -92,12 +92,12 @@ function Panel({
{ addMutationListener, removeMutationListener } = globalThis.__enhancerApi,
$panelToggle = html`<button
aria-label="Toggle side panel"
class="select-none h-[24px] w-[24px] duration-[20ms]
class="select-none size-[24px] duration-[20ms]
transition inline-flex items-center justify-center mr-[10px]
rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]"
>
<i
class="i-chevrons-left w-[20px] h-[20px]
class="i-chevrons-left size-[20px]
text-[color:var(--theme--fg-secondary)] transition-transform
group-&[data-pinned]/panel:rotate-180 duration-[${transitionDuration}ms]"
/>
@ -301,21 +301,22 @@ function Panel({
// moves help button out of the way of open panel.
// normally would place outside of an island, but in
// this case is necessary for syncing up animations
const notionHelp = ".notion-help-button",
repositionHelp = async (width) => {
const $notionHelp = document.querySelector(notionHelp);
if (!$notionHelp) return;
const floatingButtons =
".notion-enhancer--floating-buttons, .notion-help-button",
repositionFloatingButtons = async (width) => {
const $floatingButtons = document.querySelector(floatingButtons);
if (!$floatingButtons) return;
width ??= await getWidth();
if (isNaN(width)) width = minWidth;
if (!isPinned()) width = 0;
const to = `${26 + width}px`,
from = $notionHelp.style.getPropertyValue("right");
from = $floatingButtons.style.getPropertyValue("right");
if (from === to) return;
$notionHelp.style.setProperty("right", to);
animate($notionHelp, [({ right: from }, { right: to })]);
removeMutationListener(repositionHelp);
$floatingButtons.style.setProperty("right", to);
animate($floatingButtons, [({ right: from }, { right: to })]);
removeMutationListener(repositionFloatingButtons);
};
addMutationListener(notionHelp, repositionHelp);
addMutationListener(floatingButtons, repositionFloatingButtons);
$panel.pin = () => {
if (isPinned() || !panelViews.length) return;
@ -376,7 +377,7 @@ function Panel({
const $parent = $panel.parentElement || $panel;
$parent.style.setProperty("--panel--width", `${width}px`);
if ($parent !== $panel) $panel.style.removeProperty("--panel--width");
repositionHelp(width);
repositionFloatingButtons(width);
};
useState(["panelViews"], async ([panelViews = []]) => {

8
src/core/islands/TopbarButton.mjs
View File

@ -1,6 +1,6 @@
/**
* notion-enhancer
* (c) 2023 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
*/
@ -10,20 +10,20 @@ function TopbarButton({ icon, ...props }, ...children) {
const { html, extendProps } = globalThis.__enhancerApi;
extendProps(props, {
tabindex: 0,
role: "button",
class: `notion-enhancer--topbar-button
text-[color:var(--theme--fg-primary)] mr-[2px]
select-none h-[28px] w-[33px] duration-[20ms]
transition inline-flex items-center justify-center
rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]
has-[span]:w-auto &>span:(text-[14px] leading-[1.2] px-[8px])
&[data-active]:bg-[color:var(--theme--bg-hover)]`,
&[data-active]:bg-[color:var(--theme--bg-hover)]
&>i:size-[20px]`,
});
return html`<button ...${props}>
${props.innerHTML || children.length
? children
: html`<i class="i-${icon} w-[20px] h-[20px]" />`}
: html`<i class="i-${icon}" />`}
</button>`;
}

2
src/core/menu/islands/Banner.mjs
View File

@ -80,7 +80,7 @@ function Banner({ updateAvailable, isDevelopmentBuild }) {
>
<div
class="notion-enhancer--menu-update-indicator
absolute h-[12px] w-[12px] right-[-6px] top-[-6px]
absolute size-[12px] right-[-6px] top-[-6px]
${updateAvailable ? "" : "hidden"}"
>
<span

8
src/core/menu/islands/Checkbox.mjs
View File

@ -11,9 +11,9 @@ function Checkbox({ _get, _set, _requireReload = true, ...props }) {
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
$input = html`<input
type="checkbox"
class="hidden checked:sibling:(px-px
class="hidden checked:&+div:(px-px
bg-[color:var(--theme--accent-primary)])
not-checked:sibling:(children:text-transparent
not-checked:&+div:(&>div:text-transparent
border-(& [color:var(--theme--fg-primary)])
hover:bg-[color:var(--theme--bg-hover)])"
...${props}
@ -39,9 +39,9 @@ function Checkbox({ _get, _set, _requireReload = true, ...props }) {
}}
>
${$input}
<div class="flex items-center h-[16px] transition duration-[200ms]">
<div class="flex items-center h-[16px] transition duration-200">
<i
class="i-check w-[14px] h-[14px]
class="i-check size-[14px]
text-[color:var(--theme--accent-primary\\_contrast)]"
></i>
</div>

4
src/core/menu/islands/Input.mjs
View File

@ -96,7 +96,7 @@ function Input({
hover:text-[color:var(--theme--fg-primary)]"
onclick=${() => _set?.({ filename: "", content: "" })}
>
<i class="i-x w-[14px] h-[14px]"></i>
<i class="i-x size-[14px]"></i>
</button>`;
props.accept = extensions
?.map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
@ -119,7 +119,7 @@ function Input({
class="${variant === "lg" ? "pr-[12px]" : "pr-[8px]"}
absolute flex items-center h-full pointer-events-none
text-[color:var(--theme--fg-secondary)] right-0 top-0"
><i class="i-${icon} w-[16px] h-[16px]"></i>
><i class="i-${icon} size-[16px]"></i>
</span>`;
let _initialValue;

2
src/core/menu/islands/Mod.mjs
View File

@ -73,7 +73,7 @@ function Mod({
setState({ transition: "slide-to-right", view: id });
}}
>
<i class="i-settings w-[18px] h-[18px]"></i>
<i class="i-settings size-[18px]"></i>
</button>`
: ""}
<div class="my-auto scale-[1.15]">

2
src/core/menu/islands/Profiles.mjs
View File

@ -123,7 +123,7 @@ function Profile({ id }) {
text-[color:var(--theme--fg-secondary)]
hover:text-[color:var(--theme--fg-primary)]"
>
<i class="i-x w-[14px] h-[14px]"></i>
<i class="i-x size-[14px]"></i>
</button>`,
$confirmName = $successName.cloneNode(true),
$confirm = html`<${Popup}

6
src/core/menu/islands/Select.mjs
View File

@ -10,7 +10,7 @@ import { Popup } from "./Popup.mjs";
function Option({ $icon = "", value = "", _get, _set }) {
const { html, useState } = globalThis.__enhancerApi,
$selected = html`<i class="ml-auto i-check w-[16px] h-[16px]"></i>`,
$selected = html`<i class="ml-auto i-check size-[16px]"></i>`,
$option = html`<div
tabindex="0"
role="option"
@ -65,7 +65,7 @@ function Select({
if (["string", "number"].includes(typeof opt)) opt = { value: opt };
if (!(opt?.$icon instanceof Element)) {
if (typeof opt?.$icon === "string") {
opt.$icon = html`<i class="i-${opt.$icon} h-[16px] w-[16px]" />`;
opt.$icon = html`<i class="i-${opt.$icon} size-[16px]" />`;
} else delete opt.$icon;
}
return {
@ -135,7 +135,7 @@ function Select({
<//>
<i
class="i-chevron-down pointer-events-none
absolute right-[6px] top-[6px] w-[16px] h-[16px]
absolute right-[6px] top-[6px] size-[16px]
text-[color:var(--theme--fg-secondary)]"
></i>
</div>`;

4
src/core/menu/islands/Sidebar.mjs
View File

@ -31,8 +31,8 @@ function SidebarButton({ id, icon, ...props }, ...children) {
${icon
? html`<i
class="i-${icon} ${icon.startsWith("notion-enhancer")
? "w-[17px] h-[17px] ml-[1.5px] mr-[9.5px]"
: "w-[18px] h-[18px] ml-px mr-[9px]"}"
? "size-[17px] ml-[1.5px] mr-[9.5px]"
: "size-[18px] ml-px mr-[9px]"}"
></i>`
: ""}
<span class="leading-[20px]">${children}</span>

6
src/core/menu/islands/Toggle.mjs
View File

@ -11,7 +11,7 @@ function Toggle({ _get, _set, _requireReload = true, ...props }) {
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
$input = html`<input
type="checkbox"
class="hidden checked:sibling:children:(
class="hidden checked:&+div>div:(
bg-[color:var(--theme--accent-primary)]
after:translate-x-[12px])"
...${props}
@ -43,9 +43,9 @@ function Toggle({ _get, _set, _requireReload = true, ...props }) {
class="w-full h-full rounded-[44px] text-[12px]
p-[2px] hover:bg-[color:var(--theme--bg-hover)]
transition duration-200 after:(
inline-block w-[14px] h-[14px] rounded-[44px]
inline-block size-[14px] rounded-[44px]
bg-[color:var(--theme--accent-primary\\_contrast)]
transition duration-200
transition duration-200 content-empty
)"
></div>
</div>

2
src/core/menu/islands/View.mjs
View File

@ -12,7 +12,7 @@ function View({ id }, ...children) {
$view = html`<article
id=${id}
class="notion-enhancer--menu-view absolute h-full w-full
min-w-[580px] px-[60px] pt-[36px] !children:last:pb-[36px]"
min-w-[580px] px-[60px] pt-[36px] !&>*:last:pb-[36px]"
>
${children}
</article>`;

2
src/core/menu/menu.mjs
View File

@ -200,7 +200,7 @@ const importApi = () => {
useState(["rerender"], renderMenu);
};
window.addEventListener("message", async (event) => {
addEventListener("message", async (event) => {
if (event.data?.channel !== "notion-enhancer") return;
await importApi().then(hookIntoState);
const { setState, useState } = globalThis.__enhancerApi;

2
src/extensions/titlebar/buttons.mjs
View File

@ -60,7 +60,7 @@ const createWindowButtons = async () => {
$maximize.style.display = isMaximized ? "none" : "";
$unmaximize.style.display = isMaximized ? "" : "none";
};
window.addEventListener("resize", resizeWindow);
addEventListener("resize", resizeWindow);
resizeWindow();
return html`<div class="flex flex-nowrap">${$minimize}${$maximize}${$unmaximize}${$close}</div>`;

7
src/extensions/topbar/client.mjs
View File

@ -41,7 +41,8 @@ export default async function (api, db) {
addMutationListener(shareSelector, () => {
const $btn = document.querySelector(shareSelector);
let icon = shareIcon?.content;
icon ??= `<i class="i-share2 w-[20px] h-[20px]"></i>`;
icon ??= `<i class="i-share2 size-[20px]"></i>`;
if (!$btn) return;
if (shareButton === "Icon") displayIcon($btn, icon);
if (shareButton === "Disabled" && $btn.style.display !== "none")
$btn.style.display = "none";
@ -53,6 +54,7 @@ export default async function (api, db) {
addMutationListener(commentsSelector, () => {
const $btn = document.querySelector(commentsSelector),
icon = commentsIcon?.content;
if (!$btn) return;
if (commentsButton === "Text") displayLabel($btn);
if (commentsButton === "Icon" && icon) displayIcon($btn, icon);
if (commentsButton === "Disabled" && $btn.style.display !== "none")
@ -65,6 +67,7 @@ export default async function (api, db) {
addMutationListener(updatesSelector, () => {
const $btn = document.querySelector(updatesSelector),
icon = updatesIcon?.content;
if (!$btn) return;
if (updatesButton === "Text") displayLabel($btn);
if (updatesButton === "Icon" && icon) displayIcon($btn, icon);
if (updatesButton === "Disabled" && $btn.style.display !== "none")
@ -77,6 +80,7 @@ export default async function (api, db) {
addMutationListener(favoriteSelector, () => {
const $btn = document.querySelector(favoriteSelector),
icon = favoriteIcon?.content;
if (!$btn) return;
if (favoriteButton === "Text") displayLabel($btn);
if (favoriteButton === "Icon" && icon) displayIcon($btn, icon);
if (favoriteButton === "Disabled" && $btn.style.display !== "none")
@ -89,6 +93,7 @@ export default async function (api, db) {
addMutationListener(moreSelector, () => {
const $btn = document.querySelector(moreSelector),
icon = moreIcon?.content;
if (!$btn) return;
$btn.ariaLabel = "More";
if (moreButton === "Text") displayLabel($btn);
if (moreButton === "Icon" && icon) displayIcon($btn, icon);

2
src/extensions/tweaks/client.mjs
View File

@ -26,7 +26,7 @@ export default async function ({ web }, db) {
document.body.classList.add('enhancer--tweak-responsive_breakpoint');
}
};
window.addEventListener('resize', addResponsiveBreakpoint);
addEventListener('resize', addResponsiveBreakpoint);
addResponsiveBreakpoint();
const tweaks = [