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

feat(menu): apply menuButtonIconStyle to icon in menu sidebar

Browse Source
This commit is contained in:
dragonwocky 2023-01-12 15:37:33 +11:00
parent 8fe05b2888
commit 09268a538a
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/client.mjs
View File

@ -53,6 +53,7 @@ export default async (api, db) => {
_notionTheme = notionTheme; _notionTheme = notionTheme;
const msg = { const msg = {
namespace: "notion-enhancer", namespace: "notion-enhancer",
iconStyle: menuButtonIconStyle,
mode: notionTheme, mode: notionTheme,
}; };
$menuFrame?.contentWindow.postMessage(msg, "*"); $menuFrame?.contentWindow.postMessage(msg, "*");

7
src/core/menu/components.mjs
View File

@ -29,10 +29,9 @@ function SidebarSection({}, ...children) {
function SidebarButton({ icon, ...props }, ...children) { function SidebarButton({ icon, ...props }, ...children) {
const { html } = globalThis.__enhancerApi, const { html } = globalThis.__enhancerApi,
iconSize = iconSize = icon.startsWith("notion-enhancer")
icon === "notion-enhancer" ? "w-[17px] h-[17px] ml-[1.5px] mr-[9.5px]"
? "w-[16px] h-[16px] ml-[2px] mr-[10px]" : "w-[18px] h-[18px] ml-px mr-[9px]",
: "w-[18px] h-[18px] ml-px mr-[9px]",
$el = html`<${props.href ? "a" : "button"} $el = html`<${props.href ? "a" : "button"}
class="flex select-none cursor-pointer w-full class="flex select-none cursor-pointer w-full
items-center py-[5px] px-[15px] text-[14px] last:mb-[12px] items-center py-[5px] px-[15px] text-[14px] last:mb-[12px]

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

@ -14,7 +14,7 @@ import {
} from "./components.mjs"; } from "./components.mjs";
let renderStarted; let renderStarted;
const render = async () => { const render = async (iconStyle) => {
const { html, getCore } = globalThis.__enhancerApi; const { html, getCore } = globalThis.__enhancerApi;
if (!html || !getCore || renderStarted) return; if (!html || !getCore || renderStarted) return;
renderStarted = true; renderStarted = true;
@ -24,7 +24,10 @@ const render = async () => {
const $sidebar = html`<${Sidebar}> const $sidebar = html`<${Sidebar}>
${[ ${[
"notion-enhancer", "notion-enhancer",
{ icon: "notion-enhancer", title: "Welcome" }, {
icon: `notion-enhancer${iconStyle === "Monochrome" ? "?mask" : ""}`,
title: "Welcome",
},
{ {
icon: "message-circle", icon: "message-circle",
title: "Community", title: "Community",
@ -94,7 +97,7 @@ window.addEventListener("message", async (event) => {
// load stylesheets from enabled themes // load stylesheets from enabled themes
await import("../../load.mjs"); await import("../../load.mjs");
// wait for api globals to be available // wait for api globals to be available
requestIdleCallback(render); requestIdleCallback(() => render(event.data?.iconStyle));
}); });
useState(["theme"], ([mode]) => { useState(["theme"], ([mode]) => {
if (mode === "dark") document.body.classList.add("dark"); if (mode === "dark") document.body.classList.add("dark");