mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
feat: merge and update topbar-icons and always-on-top
This commit is contained in:
parent
4df00ca870
commit
1a709f5a84
GPG Key ID:
7998D08F7D7BD7A8
@ -95,6 +95,7 @@ twind.install({
|
||||
["siblings", "&~*"],
|
||||
["sibling", "&+*"],
|
||||
[/^&/, (match) => match.input],
|
||||
[/^has-\[([^\]]+)\]/, (match) => `&:has(${match[1]})`],
|
||||
],
|
||||
});
|
||||
|
||||
@ -552,7 +553,11 @@ const h = (type, props, ...children) => {
|
||||
: document.createElement(type);
|
||||
for (const prop in props ?? {}) {
|
||||
if (typeof props[prop] === "undefined") continue;
|
||||
if (htmlAttributes.includes(prop) || prop.startsWith("data-")) {
|
||||
const isAttr =
|
||||
htmlAttributes.includes(prop) ||
|
||||
prop.startsWith("data-") ||
|
||||
prop.startsWith("aria-");
|
||||
if (isAttr) {
|
||||
if (typeof props[prop] === "boolean") {
|
||||
if (!props[prop]) continue;
|
||||
elem.setAttribute(prop, "");
|
||||
|
||||
@ -87,15 +87,12 @@ function Panel({
|
||||
maxWidth = 640,
|
||||
transitionDuration = 300,
|
||||
}) {
|
||||
const { html, useState, addKeyListener } = globalThis.__enhancerApi,
|
||||
const { modDatabase, isEnabled } = globalThis.__enhancerApi,
|
||||
{ html, useState, addKeyListener } = globalThis.__enhancerApi,
|
||||
{ addMutationListener, removeMutationListener } = globalThis.__enhancerApi,
|
||||
$topbarToggle = html`<${TopbarButton}
|
||||
aria-label="Toggle side panel"
|
||||
icon="panel-right"
|
||||
/>`,
|
||||
$panelToggle = html`<button
|
||||
aria-label="Toggle side panel"
|
||||
class="user-select-none h-[24px] w-[24px] duration-[20ms]
|
||||
class="select-none h-[24px] w-[24px] duration-[20ms]
|
||||
transition inline-flex items-center justify-center mr-[10px]
|
||||
rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]"
|
||||
>
|
||||
@ -139,16 +136,31 @@ function Panel({
|
||||
<${View} ...${{ _get: _getView }} />
|
||||
</aside>
|
||||
</div>`;
|
||||
$panelToggle.onclick = $topbarToggle.onclick = () => $panel.toggle();
|
||||
|
||||
const topbarFavorite = ".notion-topbar-favorite-button",
|
||||
const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
|
||||
topbarFavorite = ".notion-topbar-favorite-button",
|
||||
$topbarToggle = html`<${TopbarButton}
|
||||
aria-label="Toggle side panel"
|
||||
icon="panel-right"
|
||||
/>`,
|
||||
addToTopbar = () => {
|
||||
if (document.contains($topbarToggle)) return;
|
||||
document.querySelector(topbarFavorite)?.after($topbarToggle);
|
||||
};
|
||||
$panelToggle.onclick = $topbarToggle.onclick = () => $panel.toggle();
|
||||
addMutationListener(topbarFavorite, addToTopbar);
|
||||
addToTopbar(topbarFavorite);
|
||||
|
||||
isEnabled(topbarId).then(async (topbarEnabled) => {
|
||||
if (!topbarEnabled) return;
|
||||
const topbarDatabase = await modDatabase(topbarId),
|
||||
panelButton = await topbarDatabase.get("panelButton"),
|
||||
panelIcon = await topbarDatabase.get("panelIcon");
|
||||
if (panelButton === "Text") {
|
||||
$topbarToggle.innerHTML = `<span>${$topbarToggle.ariaLabel}</span>`;
|
||||
} else if (panelIcon.content) $topbarToggle.innerHTML = panelIcon.content;
|
||||
});
|
||||
|
||||
let preDragWidth, dragStartX, _animatedAt;
|
||||
const getWidth = async (width) => {
|
||||
if (width && !isNaN(width)) {
|
||||
|
||||
@ -38,10 +38,10 @@ function Tooltip(props, ...children) {
|
||||
if (typeof x === "function") x = x();
|
||||
if (typeof y === "function") y = y();
|
||||
if (x < edgePadding) x = $tooltip.clientWidth + edgePadding;
|
||||
if (x + $tooltip.clientWidth > clientWidth + edgePadding)
|
||||
if (x + $tooltip.clientWidth > clientWidth - edgePadding)
|
||||
x = clientWidth - $tooltip.clientWidth - edgePadding;
|
||||
if (y < edgePadding) y = $tooltip.clientHeight + edgePadding;
|
||||
if (y + $tooltip.clientHeight > clientHeight + edgePadding)
|
||||
if (y + $tooltip.clientHeight > clientHeight - edgePadding)
|
||||
y = clientHeight - $tooltip.clientHeight - edgePadding;
|
||||
$tooltip.style.left = `${x}px`;
|
||||
$tooltip.style.top = `${y}px`;
|
||||
|
||||
@ -13,9 +13,10 @@ function TopbarButton({ icon, ...props }, ...children) {
|
||||
role: "button",
|
||||
class: `notion-enhancer--topbar-button
|
||||
text-[color:var(--theme--fg-primary)] mr-[2px]
|
||||
user-select-none h-[28px] w-[33px] duration-[20ms]
|
||||
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)]`,
|
||||
});
|
||||
|
||||
|
||||
@ -45,6 +45,7 @@ body {
|
||||
grid-template-columns: 240px auto;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
color: var(--theme--fg-primary);
|
||||
font-family: var(--theme--font-sans);
|
||||
overflow: hidden;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
|
||||
"name": "notion-enhancer",
|
||||
"version": "0.11.1",
|
||||
"id": "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
|
||||
"description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
|
||||
"tags": ["core"],
|
||||
"authors": [
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
@ -1,47 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: integrated titlebar
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
.always_on_top--button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar > .always_on_top--button {
|
||||
margin: 0 0 0.75rem auto;
|
||||
}
|
||||
|
||||
.always_on_top--button button {
|
||||
user-select: none;
|
||||
transition: background 20ms ease-in 0s;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 3px;
|
||||
height: 28px;
|
||||
width: 33px;
|
||||
padding: 0 0.25px 0 0;
|
||||
|
||||
margin-left: 2px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
}
|
||||
.always_on_top--button button svg {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--theme--icon);
|
||||
color: var(--theme--icon);
|
||||
}
|
||||
|
||||
.always_on_top--button button:focus,
|
||||
.always_on_top--button button:hover {
|
||||
background: var(--theme--ui_interactive-hover);
|
||||
}
|
||||
.always_on_top--button button:active {
|
||||
background: var(--theme--ui_interactive-active);
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: always on top
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
export const createButton = async ({ electron, web, components }, db) => {
|
||||
let pinIcon =
|
||||
(await db.get(['pin_icon'])) ||
|
||||
`<svg viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5036 1.13488C14.3765 0.925602 14.2483 0.707495 14.1174 0.479601L14.9536 0C15.6901 1.28291 16.3103 2.18846 17.0583 2.94838C17.8041 3.70619 18.6966 4.33897 20 5.04819L19.5391 5.89451C19.3035 5.76631 19.0792 5.63964 18.865 5.5134L15.0521 9.80084C15.4553 11.0798 15.495 12.4878 15.0464 13.8871C14.727 14.8833 14.1631 15.8645 13.3206 16.7832C13.1407 16.9793 12.8358 16.9926 12.6396 16.8128C12.6328 16.8065 12.6262 16.8001 12.6198 16.7936C12.6184 16.7923 12.6171 16.7909 12.6158 16.7896L12.6157 16.7896L8.83994 13.0156L0.819221 19.8752C0.357424 20.2701 -0.27004 19.6423 0.124825 19.1811L6.98768 11.1642L3.21189 7.39021L3.21188 7.39019C3.21074 7.38905 3.2096 7.38791 3.20847 7.38676C3.19722 7.37583 3.18639 7.36425 3.17604 7.35202C3.00408 7.1489 3.02943 6.84489 3.23266 6.67301C3.87295 6.13148 4.53111 5.70968 5.19581 5.39767C6.91511 4.59063 8.64205 4.5275 10.1724 4.98295L14.5036 1.13488ZM15.0286 1.95762L11.1853 5.37229C12.6878 6.08669 13.9221 7.31677 14.6512 8.80124L16.2331 7.02243L14.6084 5.39847C14.4202 5.21031 14.4202 4.90525 14.6084 4.7171C14.7967 4.52895 15.1019 4.52895 15.2901 4.7171L16.8747 6.30098L18.0377 4.99329C17.4012 4.56407 16.861 4.12205 16.371 3.62414C15.8839 3.12926 15.4531 2.58595 15.0286 1.95762ZM4.26612 7.08121L7.97786 10.7912C7.97786 10.7912 7.97787 10.7912 7.97788 10.7912C8.15977 10.973 8.171 11.264 8.00385 11.4593L8.00384 11.4593L4.79816 15.204L8.54467 11.9999C8.54468 11.9999 8.54468 11.9999 8.54468 11.9999C8.74012 11.8328 9.03128 11.8441 9.21312 12.0258L12.9392 15.7502C13.5101 15.0445 13.8964 14.3165 14.1283 13.5931C15.6562 8.82761 10.5772 3.93621 5.60561 6.26987C5.15973 6.47917 4.71155 6.74739 4.26612 7.08121ZM0.193019 19.1425C0.19283 19.1427 0.192641 19.1428 0.192451 19.143L0.499031 19.5011L0.491164 19.4944L0.499031 19.5011L0.505838 19.5091L0.499032 19.5011L0.857328 19.8076C0.85747 19.8074 0.857613 19.8072 0.857755 19.8071L0.857333 19.8076L0.499031 19.5011L0.192456 19.143L0.193019 19.1425ZM0.499031 19.5011H0.499031L0.499031 19.5011H0.499032L0.499031 19.5011Z"/>
|
||||
</svg>`,
|
||||
unpinIcon =
|
||||
(await db.get(['unpin_icon'])) ||
|
||||
`<svg viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M14.5036 1.13488C14.3765 0.925602 14.2483 0.707495 14.1174 0.479601L14.9536 0C15.6901 1.28291 16.3103 2.18846 17.0583 2.94839C17.8041 3.70619 18.6966 4.33897 20 5.04819L19.5391 5.89451C19.3035 5.76631 19.0792 5.63965 18.865 5.5134L15.0521 9.80084C15.4553 11.0798 15.495 12.4878 15.0464 13.8871C14.727 14.8833 14.1631 15.8645 13.3206 16.7832C13.1407 16.9793 12.8358 16.9926 12.6396 16.8128C12.6328 16.8065 12.6262 16.8001 12.6198 16.7936L12.6158 16.7896L8.83994 13.0156L0.819221 19.8752C0.357424 20.2701 -0.27004 19.6423 0.124825 19.1811L6.98768 11.1642L3.21189 7.39021L3.20847 7.38676C3.19722 7.37583 3.18639 7.36425 3.17604 7.35203C3.00408 7.1489 3.02943 6.84489 3.23266 6.67301C3.87295 6.13148 4.53111 5.70968 5.19581 5.39767C6.91511 4.59063 8.64205 4.5275 10.1724 4.98295L14.5036 1.13488Z"/>
|
||||
</svg>`;
|
||||
pinIcon = pinIcon.trim();
|
||||
unpinIcon = unpinIcon.trim();
|
||||
|
||||
pinIcon =
|
||||
pinIcon.startsWith('<svg') && pinIcon.endsWith('</svg>') ? pinIcon : web.escape(pinIcon);
|
||||
unpinIcon =
|
||||
unpinIcon.startsWith('<svg') && unpinIcon.endsWith('</svg>')
|
||||
? unpinIcon
|
||||
: web.escape(unpinIcon);
|
||||
|
||||
const $button = web.html`<div class="always_on_top--button"></div>`,
|
||||
$pin = web.html`<button id="always_on_top--pin">${pinIcon}</button>`,
|
||||
$unpin = web.html`<button id="always_on_top--unpin">${unpinIcon}</button>`;
|
||||
components.addTooltip($pin, '**Pin window to top**');
|
||||
components.addTooltip($unpin, '**Unpin window from top**');
|
||||
web.render($button, $pin);
|
||||
|
||||
$pin.addEventListener('click', () => {
|
||||
$pin.replaceWith($unpin);
|
||||
electron.browser.setAlwaysOnTop(true);
|
||||
});
|
||||
$unpin.addEventListener('click', () => {
|
||||
$unpin.replaceWith($pin);
|
||||
electron.browser.setAlwaysOnTop(false);
|
||||
});
|
||||
|
||||
return $button;
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: always on top
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
import { createButton } from './button.mjs';
|
||||
|
||||
export default async function (api, db) {
|
||||
const { web } = api,
|
||||
topbarActionsSelector = '.notion-topbar-action-buttons';
|
||||
|
||||
await web.whenReady([topbarActionsSelector]);
|
||||
const $topbarActions = document.querySelector(topbarActionsSelector),
|
||||
$button = await createButton(api, db);
|
||||
$topbarActions.after($button);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: always on top
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
import { createButton } from './button.mjs';
|
||||
|
||||
export default async function (api, db) {
|
||||
const { web } = api,
|
||||
sidebarSelector = '.sidebar',
|
||||
windowButtonsSelector = '.integrated_titlebar--buttons';
|
||||
|
||||
await web.whenReady([sidebarSelector]);
|
||||
await new Promise(requestAnimationFrame);
|
||||
const $sidebar = document.querySelector(sidebarSelector),
|
||||
$windowButtons = document.querySelector(windowButtonsSelector),
|
||||
$button = await createButton(api, db);
|
||||
($windowButtons || $sidebar).prepend($button);
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "always on top",
|
||||
"id": "be2d75f5-48f5-4ece-98bd-772244e559f3",
|
||||
"environments": ["linux", "win32", "darwin"],
|
||||
"version": "0.2.0",
|
||||
"description": "adds a button that can be used to pin the notion window on top of all other windows at all times.",
|
||||
"preview": "always-on-top.jpg",
|
||||
"tags": ["extension", "app"],
|
||||
"authors": [
|
||||
{
|
||||
"name": "dragonwocky",
|
||||
"email": "thedragonring.bod@gmail.com",
|
||||
"homepage": "https://dragonwocky.me/",
|
||||
"avatar": "https://dragonwocky.me/avatar.jpg"
|
||||
}
|
||||
],
|
||||
"css": {
|
||||
"client": ["button.css"],
|
||||
"menu": ["button.css"]
|
||||
},
|
||||
"js": {
|
||||
"client": ["client.mjs"],
|
||||
"menu": ["menu.mjs"]
|
||||
},
|
||||
"options": [
|
||||
{
|
||||
"type": "text",
|
||||
"key": "pin_icon",
|
||||
"label": "pin window icon",
|
||||
"tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
|
||||
"value": ""
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "unpin_icon",
|
||||
"label": "unpin window icon",
|
||||
"tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
|
||||
"value": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -15,7 +15,10 @@ export default async (api, db) => {
|
||||
const { onMessage, addMutationListener } = api,
|
||||
$buttons = await createWindowButtons(),
|
||||
topbarMore = ".notion-topbar-more-button",
|
||||
addToTopbar = () => document.querySelector(topbarMore)?.after($buttons),
|
||||
addToTopbar = () => {
|
||||
if (document.contains($buttons)) return;
|
||||
document.querySelector(topbarMore)?.after($buttons)
|
||||
},
|
||||
showIfNoTabBar = async () => {
|
||||
const { isShowingTabBar } = await __electronApi.electronAppFeatures.get();
|
||||
$buttons.style.display = isShowingTabBar ? "none" : "";
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
{
|
||||
"id": "a5658d03-21c6-4088-bade-fa4780459133",
|
||||
"name": "Titlebar",
|
||||
"version": "0.11.1",
|
||||
"platforms": ["linux", "win32"],
|
||||
"id": "a5658d03-21c6-4088-bade-fa4780459133",
|
||||
"description": "Replaces the operating system's default window titlebar with buttons inset into the app.",
|
||||
"thumbnail": "integrated-titlebar.jpg",
|
||||
"tags": ["extension", "layout"],
|
||||
"platforms": ["linux", "win32"],
|
||||
"authors": [
|
||||
{
|
||||
"name": "dragonwocky",
|
||||
@ -24,25 +23,25 @@
|
||||
{
|
||||
"type": "file",
|
||||
"key": "minimizeIcon",
|
||||
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
|
||||
"description": "Replaces the icon used for the integrated titlebar's maximize button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "maximizeIcon",
|
||||
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
|
||||
"description": "Replaces the icon used for the integrated titlebar's maximize button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "unmaximizeIcon",
|
||||
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
|
||||
"description": "Replaces the icon used for the integrated titlebar's maximize button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "closeIcon",
|
||||
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
|
||||
"description": "Replaces the icon used for the integrated titlebar's maximize button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
}
|
||||
],
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer: topbar icons
|
||||
* (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
export default async function ({ web, components }, db) {
|
||||
await web.whenReady(['.notion-topbar-action-buttons']);
|
||||
|
||||
const observeButton = (selector, label = '') => {
|
||||
const updateButton = () => {
|
||||
const $btns = document.querySelectorAll(selector);
|
||||
$btns.forEach(($btn) => {
|
||||
$btn.style.width = 'auto';
|
||||
$btn.style.fontSize = '14px';
|
||||
$btn.style.lineHeight = '1.2';
|
||||
$btn.style.paddingLeft = '8px';
|
||||
$btn.style.paddingRight = '8px';
|
||||
const innerHTML = label || $btn.ariaLabel;
|
||||
if ($btn.innerHTML !== innerHTML) $btn.innerHTML = innerHTML;
|
||||
});
|
||||
};
|
||||
web.addDocumentObserver(updateButton, [selector]);
|
||||
updateButton();
|
||||
};
|
||||
|
||||
if ((await db.get(['share'])) === true) {
|
||||
const selector = '.notion-topbar-share-menu',
|
||||
label = await components.feather('share-2', {
|
||||
style: 'width:16px;height:16px;color:var(--theme--icon);',
|
||||
});
|
||||
observeButton(selector, label);
|
||||
}
|
||||
|
||||
if ((await db.get(['comments'])) === false) {
|
||||
const selector = '.notion-topbar-comments-button';
|
||||
observeButton(selector);
|
||||
}
|
||||
|
||||
if ((await db.get(['updates'])) === false) {
|
||||
const selector =
|
||||
'.notion-topbar-updates-button, .notion-topbar-share-menu ~ [aria-label="Updates"]';
|
||||
observeButton(selector);
|
||||
}
|
||||
|
||||
if ((await db.get(['favorite'])) === false) {
|
||||
const selector = '.notion-topbar-share-menu ~ [aria-label^="Fav"]';
|
||||
observeButton(selector);
|
||||
}
|
||||
|
||||
if ((await db.get(['more'])) === false) {
|
||||
const selector = '.notion-topbar-more-button',
|
||||
label = 'More';
|
||||
observeButton(selector, label);
|
||||
}
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "topbar icons",
|
||||
"id": "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
|
||||
"version": "0.3.0",
|
||||
"description": "choose between text or icons for the topbar buttons.",
|
||||
"preview": "topbar-icons.jpg",
|
||||
"tags": ["extension", "customisation"],
|
||||
"authors": [
|
||||
{
|
||||
"name": "CloudHill",
|
||||
"email": "rh.cloudhill@gmail.com",
|
||||
"homepage": "https://github.com/CloudHill",
|
||||
"avatar": "https://avatars.githubusercontent.com/u/54142180"
|
||||
}
|
||||
],
|
||||
"js": {
|
||||
"client": ["client.mjs"]
|
||||
},
|
||||
"css": {},
|
||||
"options": [
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "share",
|
||||
"label": "share",
|
||||
"tooltip": "**on = icon, off = text**",
|
||||
"value": false
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "comments",
|
||||
"label": "comments",
|
||||
"tooltip": "**on = icon, off = text**",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "updates",
|
||||
"label": "updates",
|
||||
"tooltip": "**on = icon, off = text**",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "favorite",
|
||||
"label": "favorite",
|
||||
"tooltip": "**on = icon, off = text**",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "more",
|
||||
"label": "more (3 dots)",
|
||||
"tooltip": "**on = icon, off = text**",
|
||||
"value": true
|
||||
}
|
||||
]
|
||||
}
|
||||
132
src/extensions/topbar/client.mjs
Normal file
132
src/extensions/topbar/client.mjs
Normal file
@ -0,0 +1,132 @@
|
||||
/**
|
||||
* notion-enhancer: topbar
|
||||
* (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
import { Tooltip } from "../../core/islands/Tooltip.mjs";
|
||||
import { TopbarButton } from "../../core/islands/TopbarButton.mjs";
|
||||
|
||||
const pinLabel = "Pin always on top",
|
||||
unpinLabel = "Unpin always on top",
|
||||
pinTooltip = "Pin window as always on top",
|
||||
unpinTooltip = "Unpin window from always on top";
|
||||
|
||||
export default async function (api, db) {
|
||||
const { html, sendMessage, addMutationListener } = api,
|
||||
displayLabel = ($btn) => {
|
||||
if ($btn.innerHTML === $btn.ariaLabel) return;
|
||||
$btn.style.width = "auto";
|
||||
$btn.style.fontSize = "14px";
|
||||
$btn.style.lineHeight = "1.2";
|
||||
$btn.style.padding = "0px 8px";
|
||||
$btn.innerHTML = $btn.ariaLabel;
|
||||
},
|
||||
displayIcon = ($btn, icon) => {
|
||||
if ($btn.innerHTML === icon) return;
|
||||
$btn.style.width = "33px";
|
||||
$btn.style.padding = "0px";
|
||||
$btn.style.justifyContent = "center";
|
||||
$btn.innerHTML = icon;
|
||||
};
|
||||
|
||||
// share button is text by default
|
||||
const shareSelector = ".notion-topbar-share-menu",
|
||||
shareButton = await db.get("shareButton"),
|
||||
shareIcon = await db.get("shareIcon");
|
||||
addMutationListener(shareSelector, () => {
|
||||
const $btn = document.querySelector(shareSelector);
|
||||
let icon = shareIcon?.content;
|
||||
icon ??= `<i class="i-share2 w-[20px] h-[20px]"></i>`;
|
||||
if (shareButton === "Icon") displayIcon($btn, icon);
|
||||
if (shareButton === "Disabled") $btn.style.display = "none";
|
||||
});
|
||||
|
||||
const commentsSelector = ".notion-topbar-comments-button",
|
||||
commentsButton = await db.get("commentsButton"),
|
||||
commentsIcon = await db.get("commentsIcon");
|
||||
addMutationListener(commentsSelector, () => {
|
||||
const $btn = document.querySelector(commentsSelector),
|
||||
icon = commentsIcon?.content;
|
||||
if (commentsButton === "Text") displayLabel($btn);
|
||||
if (commentsButton === "Icon" && icon) displayIcon($btn, icon);
|
||||
if (commentsButton === "Disabled") $btn.style.display = "none";
|
||||
});
|
||||
|
||||
const updatesSelector = ".notion-topbar-updates-button",
|
||||
updatesButton = await db.get("updatesButton"),
|
||||
updatesIcon = await db.get("updatesIcon");
|
||||
addMutationListener(updatesSelector, () => {
|
||||
const $btn = document.querySelector(updatesSelector),
|
||||
icon = updatesIcon?.content;
|
||||
if (updatesButton === "Text") displayLabel($btn);
|
||||
if (updatesButton === "Icon" && icon) displayIcon($btn, icon);
|
||||
if (updatesButton === "Disabled") $btn.style.display = "none";
|
||||
});
|
||||
|
||||
const favoriteSelector = ".notion-topbar-favorite-button",
|
||||
favoriteButton = await db.get("favoriteButton"),
|
||||
favoriteIcon = await db.get("favoriteIcon");
|
||||
addMutationListener(favoriteSelector, () => {
|
||||
const $btn = document.querySelector(favoriteSelector),
|
||||
icon = favoriteIcon?.content;
|
||||
if (favoriteButton === "Text") displayLabel($btn);
|
||||
if (favoriteButton === "Icon" && icon) displayIcon($btn, icon);
|
||||
if (favoriteButton === "Disabled") $btn.style.display = "none";
|
||||
});
|
||||
|
||||
const moreSelector = ".notion-topbar-more-button",
|
||||
moreButton = await db.get("moreButton"),
|
||||
moreIcon = await db.get("moreIcon");
|
||||
addMutationListener(moreSelector, () => {
|
||||
const $btn = document.querySelector(moreSelector),
|
||||
icon = moreIcon?.content;
|
||||
$btn.ariaLabel = "More";
|
||||
if (moreButton === "Text") displayLabel($btn);
|
||||
if (moreButton === "Icon" && icon) displayIcon($btn, icon);
|
||||
if (moreButton === "Disabled") $btn.style.display = "none";
|
||||
});
|
||||
|
||||
const alwaysOnTopButton = await db.get("alwaysOnTopButton");
|
||||
if (alwaysOnTopButton === "Disabled") return;
|
||||
|
||||
const topbarFavorite = ".notion-topbar-favorite-button",
|
||||
pinIcon = await db.get("pinIcon"),
|
||||
unpinIcon = await db.get("unpinIcon"),
|
||||
$pin = html`<${TopbarButton}
|
||||
onclick=${() => {
|
||||
sendMessage("notion-enhancer:topbar", "pin-always-on-top");
|
||||
$pin.style.display = "none";
|
||||
$unpin.style.display = "";
|
||||
}}
|
||||
aria-label="${pinLabel}"
|
||||
innerHTML="${alwaysOnTopButton === "Icon"
|
||||
? pinIcon?.content
|
||||
: `<span>${pinLabel}</span>`}"
|
||||
icon="pin"
|
||||
/>`,
|
||||
$unpin = html`<${TopbarButton}
|
||||
onclick=${() => {
|
||||
sendMessage("notion-enhancer:topbar", "unpin-always-on-top");
|
||||
$unpin.style.display = "none";
|
||||
$pin.style.display = "";
|
||||
}}
|
||||
aria-label="${unpinLabel}"
|
||||
innerHTML="${alwaysOnTopButton === "Icon"
|
||||
? unpinIcon?.content
|
||||
: `<span>${unpinLabel}</span>`}"
|
||||
style="display: none"
|
||||
icon="pin-off"
|
||||
/>`,
|
||||
addToTopbar = () => {
|
||||
if (document.contains($pin) && document.contains($unpin)) return;
|
||||
document.querySelector(topbarFavorite)?.after($pin, $unpin);
|
||||
};
|
||||
html`<${Tooltip}><b>${pinTooltip}</b><//>`.attach($pin, "bottom");
|
||||
html`<${Tooltip}><b>${unpinTooltip}</b><//>`.attach($unpin, "bottom");
|
||||
addMutationListener(topbarFavorite, addToTopbar);
|
||||
addToTopbar(topbarFavorite);
|
||||
}
|
||||
16
src/extensions/topbar/electron.cjs
Normal file
16
src/extensions/topbar/electron.cjs
Normal file
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* notion-enhancer: topbar
|
||||
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
module.exports = async ({}, db) => {
|
||||
const { ipcMain, BrowserWindow } = require("electron");
|
||||
ipcMain.on("notion-enhancer:topbar", ({ sender }, message) => {
|
||||
const window = BrowserWindow.fromWebContents(sender);
|
||||
if (message === "pin-always-on-top") window.setAlwaysOnTop(true);
|
||||
if (message === "unpin-always-on-top") window.setAlwaysOnTop(false);
|
||||
});
|
||||
};
|
||||
123
src/extensions/topbar/mod.json
Normal file
123
src/extensions/topbar/mod.json
Normal file
@ -0,0 +1,123 @@
|
||||
{
|
||||
"name": "Topbar",
|
||||
"version": "0.4.0",
|
||||
"id": "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
|
||||
"description": "Customise the Notion interface's topbar and add an always on top toggle to the window on desktop.",
|
||||
"thumbnail": "topbar-icons.jpg",
|
||||
"authors": [
|
||||
{
|
||||
"name": "dragonwocky",
|
||||
"homepage": "https://dragonwocky.me/",
|
||||
"avatar": "https://dragonwocky.me/avatar.jpg"
|
||||
},
|
||||
{
|
||||
"name": "CloudHill",
|
||||
"homepage": "https://github.com/CloudHill",
|
||||
"avatar": "https://avatars.githubusercontent.com/u/54142180"
|
||||
}
|
||||
],
|
||||
"options": [
|
||||
{ "type": "heading", "label": "Share" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "shareButton",
|
||||
"description": "Configures how the share button in the Notion topbar is displayed.",
|
||||
"values": ["Text", "Icon", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "shareIcon",
|
||||
"description": "Replaces the icon used for the share button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{ "type": "heading", "label": "Comments" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "commentsButton",
|
||||
"description": "Configures how the comments button in the Notion topbar is displayed.",
|
||||
"values": ["Icon", "Text", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "commentsIcon",
|
||||
"description": "Replaces the icon used for the comments button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{ "type": "heading", "label": "Updates" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "updatesButton",
|
||||
"description": "Configures how the updates button in the Notion topbar is displayed.",
|
||||
"values": ["Icon", "Text", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "updatesIcon",
|
||||
"description": "Replaces the icon used for the updates button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{ "type": "heading", "label": "Favorite" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "favoriteButton",
|
||||
"description": "Configures how the favorite button in the Notion topbar is displayed.",
|
||||
"values": ["Icon", "Text", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "favoriteIcon",
|
||||
"description": "Replaces the icon used for the favorite button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{ "type": "heading", "label": "Always on Top" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "alwaysOnTopButton",
|
||||
"description": "Adds a button to the topbar that can be used to pin the Notion window above all other windows regardless of which window currently has focus.",
|
||||
"platforms": ["linux", "win32", "darwin"],
|
||||
"values": ["Icon", "Text", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "pinIcon",
|
||||
"description": "Replaces the icon used for the always on top pin button with the uploaded .svg image.",
|
||||
"platforms": ["linux", "win32", "darwin"],
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "unpinIcon",
|
||||
"description": "Replaces the icon used for the always on top unpin button with the uploaded .svg image.",
|
||||
"platforms": ["linux", "win32", "darwin"],
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{ "type": "heading", "label": "Panel" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "panelButton",
|
||||
"description": "This button activates an additional sidebar on the right-hand side of the screen and will appear in the topbar only if an extension is enabled that displays information through this panel (e.g. the Outliner).",
|
||||
"values": ["Icon", "Text"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "panelIcon",
|
||||
"description": "Replaces the icon used for the panel button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
},
|
||||
{ "type": "heading", "label": "More" },
|
||||
{
|
||||
"type": "select",
|
||||
"key": "moreButton",
|
||||
"description": "Configures how the more button in the Notion topbar is displayed.",
|
||||
"values": ["Icon", "Text", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "moreIcon",
|
||||
"description": "Replaces the icon used for the more button with the uploaded .svg image.",
|
||||
"extensions": ["svg"]
|
||||
}
|
||||
],
|
||||
"clientScripts": ["client.mjs"],
|
||||
"electronScripts": [[".webpack/main/index", "electron.cjs"]]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@ -19,11 +19,8 @@ if (isElectron()) {
|
||||
const { enhancerUrl } = globalThis.__enhancerApi,
|
||||
{ getMods, isEnabled, modDatabase } = globalThis.__enhancerApi;
|
||||
|
||||
const mainScript = ".webpack/main/index",
|
||||
rendererScript = ".webpack/renderer/tab_browser_view/preload";
|
||||
|
||||
module.exports = async (target, __exports, __eval) => {
|
||||
if (target === mainScript) require("./worker.js");
|
||||
if (target === ".webpack/main/index") require("./worker.js");
|
||||
else {
|
||||
// expose globalThis.__enhancerApi to scripts
|
||||
const { contextBridge } = require("electron"),
|
||||
|
||||
@ -1 +1 @@
|
||||
["core", "extensions/titlebar", "themes/classic-dark"]
|
||||
["core", "extensions/titlebar", "extensions/topbar", "themes/classic-dark"]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user