dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-11 15:59: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: [ rules: [
["text-(wrap|nowrap|balance|pretty)", "textWrap"], ["text-(wrap|nowrap|balance|pretty)", "textWrap"],
[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons], [/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons],
[/^size-\[([^\]]+)\]$/, ({ 1: $1 }) => ({ height: $1, width: $1 })],
], ],
variants: [ 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", "&>*"], ["children", "&>*"],
["siblings", "&~*"], ["siblings", "&~*"],
["sibling", "&+*"], ["sibling", "&+*"],
[/^&/, (match) => match.input], [/^&/, (match) => match.input],
[/^has-\[([^\]]+)\]/, (match) => `&:has(${match[1]})`], [/^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 = () => { reloadApp = () => {
if (IS_ELECTRON && !IS_RENDERER) { if (IS_ELECTRON && !IS_RENDERER) {
const { app } = require("electron"), const { app } = require("electron");
args = process.argv.slice(1).filter((arg) => arg !== "--startup"); app.relaunch(), app.exit();
app.relaunch({ args });
app.exit();
} else sendMessage("notion-enhancer", "reload-app"); } else sendMessage("notion-enhancer", "reload-app");
}; };

2
src/core/client.mjs
View File

@ -107,7 +107,7 @@ const insertMenu = async (api, db) => {
event.stopPropagation(); event.stopPropagation();
$modal.open(); $modal.open();
}); });
window.addEventListener("message", (event) => { addEventListener("message", (event) => {
// from embedded menu // from embedded menu
if (event.data?.channel !== "notion-enhancer") return; if (event.data?.channel !== "notion-enhancer") return;
if (event.data?.action === "close-menu") $modal.close(); 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)]`, transition hover:bg-[color:var(--theme--bg-hover)]`,
}); });
return html`<div ...${props}> 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> <i class="i-${icon}"></i>
</div> </div>
<div>${children}</div> <div>${children}</div>
@ -29,9 +29,9 @@ function MenuButton(
<!-- accents are squashed into one variable for theming: <!-- accents are squashed into one variable for theming:
use rgb to match notion if overrides not loaded --> use rgb to match notion if overrides not loaded -->
<div <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)]) 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 dark:bg-[color:${themeOverridesLoaded
? "var(--theme--accent-secondary)" ? "var(--theme--accent-secondary)"
: "rgb(180,65,60)"}]" : "rgb(180,65,60)"}]"

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

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

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

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

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

@ -80,7 +80,7 @@ function Banner({ updateAvailable, isDevelopmentBuild }) {
> >
<div <div
class="notion-enhancer--menu-update-indicator class="notion-enhancer--menu-update-indicator
absolute h-[12px] w-[12px] right-[-6px] top-[-6px] absolute size-[12px] right-[-6px] top-[-6px]
${updateAvailable ? "" : "hidden"}" ${updateAvailable ? "" : "hidden"}"
> >
<span <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, const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
$input = html`<input $input = html`<input
type="checkbox" type="checkbox"
class="hidden checked:sibling:(px-px class="hidden checked:&+div:(px-px
bg-[color:var(--theme--accent-primary)]) bg-[color:var(--theme--accent-primary)])
not-checked:sibling:(children:text-transparent not-checked:&+div:(&>div:text-transparent
border-(& [color:var(--theme--fg-primary)]) border-(& [color:var(--theme--fg-primary)])
hover:bg-[color:var(--theme--bg-hover)])" hover:bg-[color:var(--theme--bg-hover)])"
...${props} ...${props}
@ -39,9 +39,9 @@ function Checkbox({ _get, _set, _requireReload = true, ...props }) {
}} }}
> >
${$input} ${$input}
<div class="flex items-center h-[16px] transition duration-[200ms]"> <div class="flex items-center h-[16px] transition duration-200">
<i <i
class="i-check w-[14px] h-[14px] class="i-check size-[14px]
text-[color:var(--theme--accent-primary\\_contrast)]" text-[color:var(--theme--accent-primary\\_contrast)]"
></i> ></i>
</div> </div>

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

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

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

@ -73,7 +73,7 @@ function Mod({
setState({ transition: "slide-to-right", view: id }); setState({ transition: "slide-to-right", view: id });
}} }}
> >
<i class="i-settings w-[18px] h-[18px]"></i> <i class="i-settings size-[18px]"></i>
</button>` </button>`
: ""} : ""}
<div class="my-auto scale-[1.15]"> <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)] text-[color:var(--theme--fg-secondary)]
hover:text-[color:var(--theme--fg-primary)]" hover:text-[color:var(--theme--fg-primary)]"
> >
<i class="i-x w-[14px] h-[14px]"></i> <i class="i-x size-[14px]"></i>
</button>`, </button>`,
$confirmName = $successName.cloneNode(true), $confirmName = $successName.cloneNode(true),
$confirm = html`<${Popup} $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 }) { function Option({ $icon = "", value = "", _get, _set }) {
const { html, useState } = globalThis.__enhancerApi, 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 $option = html`<div
tabindex="0" tabindex="0"
role="option" role="option"
@ -65,7 +65,7 @@ function Select({
if (["string", "number"].includes(typeof opt)) opt = { value: opt }; if (["string", "number"].includes(typeof opt)) opt = { value: opt };
if (!(opt?.$icon instanceof Element)) { if (!(opt?.$icon instanceof Element)) {
if (typeof opt?.$icon === "string") { 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; } else delete opt.$icon;
} }
return { return {
@ -135,7 +135,7 @@ function Select({
<//> <//>
<i <i
class="i-chevron-down pointer-events-none 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)]" text-[color:var(--theme--fg-secondary)]"
></i> ></i>
</div>`; </div>`;

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

@ -31,8 +31,8 @@ function SidebarButton({ id, icon, ...props }, ...children) {
${icon ${icon
? html`<i ? html`<i
class="i-${icon} ${icon.startsWith("notion-enhancer") class="i-${icon} ${icon.startsWith("notion-enhancer")
? "w-[17px] h-[17px] ml-[1.5px] mr-[9.5px]" ? "size-[17px] ml-[1.5px] mr-[9.5px]"
: "w-[18px] h-[18px] ml-px mr-[9px]"}" : "size-[18px] ml-px mr-[9px]"}"
></i>` ></i>`
: ""} : ""}
<span class="leading-[20px]">${children}</span> <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, const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
$input = html`<input $input = html`<input
type="checkbox" type="checkbox"
class="hidden checked:sibling:children:( class="hidden checked:&+div>div:(
bg-[color:var(--theme--accent-primary)] bg-[color:var(--theme--accent-primary)]
after:translate-x-[12px])" after:translate-x-[12px])"
...${props} ...${props}
@ -43,9 +43,9 @@ function Toggle({ _get, _set, _requireReload = true, ...props }) {
class="w-full h-full rounded-[44px] text-[12px] class="w-full h-full rounded-[44px] text-[12px]
p-[2px] hover:bg-[color:var(--theme--bg-hover)] p-[2px] hover:bg-[color:var(--theme--bg-hover)]
transition duration-200 after:( 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)] bg-[color:var(--theme--accent-primary\\_contrast)]
transition duration-200 transition duration-200 content-empty
)" )"
></div> ></div>
</div> </div>

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

@ -12,7 +12,7 @@ function View({ id }, ...children) {
$view = html`<article $view = html`<article
id=${id} id=${id}
class="notion-enhancer--menu-view absolute h-full w-full 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} ${children}
</article>`; </article>`;

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

@ -200,7 +200,7 @@ const importApi = () => {
useState(["rerender"], renderMenu); useState(["rerender"], renderMenu);
}; };
window.addEventListener("message", async (event) => { addEventListener("message", async (event) => {
if (event.data?.channel !== "notion-enhancer") return; if (event.data?.channel !== "notion-enhancer") return;
await importApi().then(hookIntoState); await importApi().then(hookIntoState);
const { setState, useState } = globalThis.__enhancerApi; 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" : ""; $maximize.style.display = isMaximized ? "none" : "";
$unmaximize.style.display = isMaximized ? "" : "none"; $unmaximize.style.display = isMaximized ? "" : "none";
}; };
window.addEventListener("resize", resizeWindow); addEventListener("resize", resizeWindow);
resizeWindow(); resizeWindow();
return html`<div class="flex flex-nowrap">${$minimize}${$maximize}${$unmaximize}${$close}</div>`; 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, () => { addMutationListener(shareSelector, () => {
const $btn = document.querySelector(shareSelector); const $btn = document.querySelector(shareSelector);
let icon = shareIcon?.content; 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 === "Icon") displayIcon($btn, icon);
if (shareButton === "Disabled" && $btn.style.display !== "none") if (shareButton === "Disabled" && $btn.style.display !== "none")
$btn.style.display = "none"; $btn.style.display = "none";
@ -53,6 +54,7 @@ export default async function (api, db) {
addMutationListener(commentsSelector, () => { addMutationListener(commentsSelector, () => {
const $btn = document.querySelector(commentsSelector), const $btn = document.querySelector(commentsSelector),
icon = commentsIcon?.content; icon = commentsIcon?.content;
if (!$btn) return;
if (commentsButton === "Text") displayLabel($btn); if (commentsButton === "Text") displayLabel($btn);
if (commentsButton === "Icon" && icon) displayIcon($btn, icon); if (commentsButton === "Icon" && icon) displayIcon($btn, icon);
if (commentsButton === "Disabled" && $btn.style.display !== "none") if (commentsButton === "Disabled" && $btn.style.display !== "none")
@ -65,6 +67,7 @@ export default async function (api, db) {
addMutationListener(updatesSelector, () => { addMutationListener(updatesSelector, () => {
const $btn = document.querySelector(updatesSelector), const $btn = document.querySelector(updatesSelector),
icon = updatesIcon?.content; icon = updatesIcon?.content;
if (!$btn) return;
if (updatesButton === "Text") displayLabel($btn); if (updatesButton === "Text") displayLabel($btn);
if (updatesButton === "Icon" && icon) displayIcon($btn, icon); if (updatesButton === "Icon" && icon) displayIcon($btn, icon);
if (updatesButton === "Disabled" && $btn.style.display !== "none") if (updatesButton === "Disabled" && $btn.style.display !== "none")
@ -77,6 +80,7 @@ export default async function (api, db) {
addMutationListener(favoriteSelector, () => { addMutationListener(favoriteSelector, () => {
const $btn = document.querySelector(favoriteSelector), const $btn = document.querySelector(favoriteSelector),
icon = favoriteIcon?.content; icon = favoriteIcon?.content;
if (!$btn) return;
if (favoriteButton === "Text") displayLabel($btn); if (favoriteButton === "Text") displayLabel($btn);
if (favoriteButton === "Icon" && icon) displayIcon($btn, icon); if (favoriteButton === "Icon" && icon) displayIcon($btn, icon);
if (favoriteButton === "Disabled" && $btn.style.display !== "none") if (favoriteButton === "Disabled" && $btn.style.display !== "none")
@ -89,6 +93,7 @@ export default async function (api, db) {
addMutationListener(moreSelector, () => { addMutationListener(moreSelector, () => {
const $btn = document.querySelector(moreSelector), const $btn = document.querySelector(moreSelector),
icon = moreIcon?.content; icon = moreIcon?.content;
if (!$btn) return;
$btn.ariaLabel = "More"; $btn.ariaLabel = "More";
if (moreButton === "Text") displayLabel($btn); if (moreButton === "Text") displayLabel($btn);
if (moreButton === "Icon" && icon) displayIcon($btn, icon); 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'); document.body.classList.add('enhancer--tweak-responsive_breakpoint');
} }
}; };
window.addEventListener('resize', addResponsiveBreakpoint); addEventListener('resize', addResponsiveBreakpoint);
addResponsiveBreakpoint(); addResponsiveBreakpoint();
const tweaks = [ const tweaks = [