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

fix(topbar): custom topbar icons + window dragging in peek view

Browse Source 
i have discovered that extra topbar icons e.g. window min/max/close are not accessible in peek mode. this is probably fine?
This commit is contained in:
dragonwocky 2024-02-05 12:59:58 +11:00
parent 6bfe1d8b07
commit 3601680c24
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/extensions/titlebar/client.css
View File

@ -10,6 +10,7 @@
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.notion-tabs :is([aria-label], [draggable], .notion-enhancer--topbar-button), .notion-tabs :is([aria-label], [draggable], .notion-enhancer--topbar-button),
.notion-peek-renderer [style*="height: 44px;"] > div,
.notion-topbar > div > * { .notion-topbar > div > * {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }

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

@ -27,12 +27,12 @@ export default async function (api, db) {
$btn.innerHTML = $btn.ariaLabel; $btn.innerHTML = $btn.ariaLabel;
}, },
displayIcon = ($btn, $icon) => { displayIcon = ($btn, $icon) => {
if ($btn.contains($icon)) return; if ($btn.style.width === "33px") return;
$btn.style.width = "33px"; $btn.style.width = "33px";
$btn.style.padding = "0px"; $btn.style.padding = "0px";
$btn.style.justifyContent = "center"; $btn.style.justifyContent = "center";
$btn.innerHTML = ""; $btn.innerHTML = "";
$btn.append($icon); $btn.append($icon.cloneNode(true));
}; };
// share button is text by default // share button is text by default
@ -43,11 +43,11 @@ export default async function (api, db) {
? html(shareIcon.content) ? html(shareIcon.content)
: html`<i class="i-share2 size-[20px]"></i>`; : html`<i class="i-share2 size-[20px]"></i>`;
addMutationListener(shareSelector, () => { addMutationListener(shareSelector, () => {
const $btn = document.querySelector(shareSelector); for (const $btn of document.querySelectorAll(shareSelector)) {
if (!$btn) return; if (shareButton === "Icon") displayIcon($btn, $shareIcon);
if (shareButton === "Icon") displayIcon($btn, $shareIcon); if (shareButton === "Disabled" && $btn.style.display !== "none")
if (shareButton === "Disabled" && $btn.style.display !== "none") $btn.style.display = "none";
$btn.style.display = "none"; }
}); });
const commentsSelector = ".notion-topbar-comments-button", const commentsSelector = ".notion-topbar-comments-button",
@ -55,13 +55,13 @@ export default async function (api, db) {
commentsIcon = await db.get("commentsIcon"), commentsIcon = await db.get("commentsIcon"),
$commentsIcon = commentsIcon ? html(commentsIcon.content) : undefined; $commentsIcon = commentsIcon ? html(commentsIcon.content) : undefined;
addMutationListener(commentsSelector, () => { addMutationListener(commentsSelector, () => {
const $btn = document.querySelector(commentsSelector); for (const $btn of document.querySelectorAll(commentsSelector)) {
if (!$btn) return; if (commentsButton === "Text") displayLabel($btn);
if (commentsButton === "Text") displayLabel($btn); if (commentsButton === "Icon" && commentsIcon)
if (commentsButton === "Icon" && commentsIcon) displayIcon($btn, $commentsIcon);
displayIcon($btn, $commentsIcon); if (commentsButton === "Disabled" && $btn.style.display !== "none")
if (commentsButton === "Disabled" && $btn.style.display !== "none") $btn.style.display = "none";
$btn.style.display = "none"; }
}); });
const updatesSelector = ".notion-topbar-updates-button", const updatesSelector = ".notion-topbar-updates-button",
@ -69,27 +69,27 @@ export default async function (api, db) {
updatesIcon = await db.get("updatesIcon"), updatesIcon = await db.get("updatesIcon"),
$updatesIcon = updatesIcon ? html(updatesIcon.content) : undefined; $updatesIcon = updatesIcon ? html(updatesIcon.content) : undefined;
addMutationListener(updatesSelector, () => { addMutationListener(updatesSelector, () => {
const $btn = document.querySelector(updatesSelector); for (const $btn of document.querySelectorAll(updatesSelector)) {
if (!$btn) return; if (updatesButton === "Text") displayLabel($btn);
if (updatesButton === "Text") displayLabel($btn); if (updatesButton === "Icon" && updatesIcon)
if (updatesButton === "Icon" && updatesIcon) displayIcon($btn, $updatesIcon);
displayIcon($btn, $updatesIcon); if (updatesButton === "Disabled" && $btn.style.display !== "none")
if (updatesButton === "Disabled" && $btn.style.display !== "none") $btn.style.display = "none";
$btn.style.display = "none"; }
}); });
const favoriteSelector = ".notion-topbar-favorite-button", const favoriteSelector = " n",
favoriteButton = await db.get("favoriteButton"), favoriteButton = await db.get("favoriteButton"),
favoriteIcon = await db.get("favoriteIcon"), favoriteIcon = await db.get("favoriteIcon"),
$favoriteIcon = favoriteIcon ? html(favoriteIcon.content) : undefined; $favoriteIcon = favoriteIcon ? html(favoriteIcon.content) : undefined;
addMutationListener(favoriteSelector, () => { addMutationListener(favoriteSelector, () => {
const $btn = document.querySelector(favoriteSelector); for (const $btn of document.querySelectorAll(favoriteSelector)) {
if (!$btn) return; if (favoriteButton === "Text") displayLabel($btn);
if (favoriteButton === "Text") displayLabel($btn); if (favoriteButton === "Icon" && favoriteIcon)
if (favoriteButton === "Icon" && favoriteIcon) displayIcon($btn, $favoriteIcon);
displayIcon($btn, $favoriteIcon); if (favoriteButton === "Disabled" && $btn.style.display !== "none")
if (favoriteButton === "Disabled" && $btn.style.display !== "none") $btn.style.display = "none";
$btn.style.display = "none"; }
}); });
const moreSelector = ".notion-topbar-more-button", const moreSelector = ".notion-topbar-more-button",
@ -97,13 +97,13 @@ export default async function (api, db) {
moreIcon = await db.get("moreIcon"), moreIcon = await db.get("moreIcon"),
$moreIcon = moreIcon ? html(moreIcon.content) : undefined; $moreIcon = moreIcon ? html(moreIcon.content) : undefined;
addMutationListener(moreSelector, () => { addMutationListener(moreSelector, () => {
const $btn = document.querySelector(moreSelector); for (const $btn of document.querySelectorAll(moreSelector)) {
if (!$btn) return; if (!$btn.ariaLabel) $btn.ariaLabel = "More";
if (!$btn.ariaLabel) $btn.ariaLabel = "More"; if (moreButton === "Text") displayLabel($btn);
if (moreButton === "Text") displayLabel($btn); if (moreButton === "Icon" && moreIcon) displayIcon($btn, $moreIcon);
if (moreButton === "Icon" && moreIcon) displayIcon($btn, $moreIcon); if (moreButton === "Disabled" && $btn.style.display !== "none")
if (moreButton === "Disabled" && $btn.style.display !== "none") $btn.style.display = "none";
$btn.style.display = "none"; }
}); });
const alwaysOnTopButton = await db.get("alwaysOnTopButton"); const alwaysOnTopButton = await db.get("alwaysOnTopButton");