From 9f8d9030ae87c2ac86cbd9d5bb1e3e8a251ca633 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 19 Nov 2024 21:22:41 +1100 Subject: [PATCH] feat(indent-guides): alternating indentation guide colours --- src/core/client.mjs | 8 +- src/extensions/indent-guides/client.css | 3 + src/extensions/indent-guides/client.mjs | 119 +++++++++++++----------- src/extensions/indent-guides/mod.json | 4 +- 4 files changed, 73 insertions(+), 61 deletions(-) diff --git a/src/core/client.mjs b/src/core/client.mjs index 69fd3d9..8da34ff 100644 --- a/src/core/client.mjs +++ b/src/core/client.mjs @@ -37,9 +37,11 @@ const shouldLoadThemeOverrides = async (api, db) => { const { html } = api, customStyles = (await db.get("customStyles"))?.content; if (!customStyles) return; - return document.head.append(html``); + const $customStyles = html``; + return document.head.append($customStyles); }; const insertMenu = async (api, db) => { diff --git a/src/extensions/indent-guides/client.css b/src/extensions/indent-guides/client.css index d3fe8ca..74c1165 100644 --- a/src/extensions/indent-guides/client.css +++ b/src/extensions/indent-guides/client.css @@ -8,6 +8,7 @@ body { --guide--style: solid; --guide--color: var(--theme--fg-border); + --guide--opacity: 0; } /* add indent guides to nested blocks */ @@ -28,6 +29,7 @@ body { top: var(--guide--offset); margin-inline-start: var(--guide--indent); border-left: 1px var(--guide--style) var(--guide--color); + opacity: var(--guide--opacity); } } @@ -59,6 +61,7 @@ body { height: 100%; margin-inline-start: var(--guide--indent); border-left: 1px var(--guide--style) var(--guide--color); + opacity: var(--guide--opacity); } } diff --git a/src/extensions/indent-guides/client.mjs b/src/extensions/indent-guides/client.mjs index 762c2b6..e5c4df0 100644 --- a/src/extensions/indent-guides/client.mjs +++ b/src/extensions/indent-guides/client.mjs @@ -6,63 +6,70 @@ */ export default async function (api, db) { - const lineType = await db.get("lineType"), + const { html } = api, + guideStyle = await db.get("guideStyle"), rainbowMode = await db.get("rainbowMode"); - document.body.style.setProperty("--guide--style", lineType.toLowerCase()); + document.body.style.setProperty("--guide--style", guideStyle.toLowerCase()); - // switch (await db.get(["style"])) { - // case "dashed": - // style = "dashed"; - // break; - // case "dotted": - // style = "dotted"; - // break; - // case "soft": - // opacity = 0.25; - // break; - // case "rainbow": - // opacity = 0.7; - // rainbow = true; - // break; - // } + const nestedTargets = [], + outlineTargets = []; + for (const [listType, selectors] of [ + ["to-doList", [".notion-to_do-block"]], + ["bulletedList", [".notion-bulleted_list-block"]], + ["numberedList", [".notion-numbered_list-block"]], + ["toggleList", [".notion-toggle-block"]], + [ + "toggleHeadings", + [ + ".notion-header-block", + ".notion-sub_header-block", + ".notion-sub_sub_header-block", + ], + ], + ]) { + if (await db.get(listType)) nestedTargets.push(...selectors); + } + if (await db.get("tableOfContents")) + outlineTargets.push(".notion-table_of_contents-block"); + if (await db.get("outliner")) + outlineTargets.push(".notion-enhancer--outliner-heading"); - // const colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow']; - // colors.push(...colors, ...colors, ...colors, 'gray'); - - // for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) { - // if (!(await db.get([listType]))) continue; - // css += ` - // .notion-page-content .notion-${listType}-block > div > div:last-child::before { - // border-left: 1px ${style} var(--indentation_lines--color, currentColor); - // opacity: ${opacity}; - // }`; - - // if (rainbow) { - // for (let i = 0; i < colors.length; i++) { - // css += ` - // .notion-page-content ${`.notion-${listType}-block `.repeat(i + 1)} - // > div > div:last-child::before { - // --indentation_lines--color: var(--theme--text_${colors[i]}); - // }`; - // } - // } - // } - - // if (await db.get(['toggle_header'])) { - // css += ` - // .notion-page-content [class$=header-block] > div > div > div:last-child::before { - // border-left: 1px ${style} var(--indentation_lines--color, currentColor); - // opacity: ${opacity}; - // }`; - - // if (rainbow) { - // for (let i = 0; i < colors.length; i++) { - // css += ` - // .notion-page-content ${`[class$=header-block] `.repeat(i + 1)} - // > div > div > div:last-child::before{ - // --indentation_lines--color: var(--theme--text_${colors[i]}); - // }`; - // } - // } - // } + let css = `${[...nestedTargets, ...outlineTargets].join(",")} { + --guide--opacity: 1; + }`; + if (rainbowMode) { + const selector = `:is(${nestedTargets.join(",")})`, + opacity = `--guide--opacity: 0.5;`, + colours = [ + "red", + "pink", + "purple", + "blue", + "green", + "yellow", + "orange", + "brown", + ]; + colours.push(...colours, ...colours, ...colours, "gray"); + for (let i = 0; i < colours.length; i++) { + css += `${(selector + " ").repeat(i + 1)} { + --guide--color: var(--theme--fg-${colours[i]}); + ${opacity} + }`; + } + css += ` + .notion-table_of_contents-block [contenteditable="false"] a + > div[style*="margin-left: 24px"], + .notion-enhancer--outliner-heading.pl-\\[36px\\] { + --guide--color: var(--theme--fg-${colours[0]}); + ${opacity} + } + .notion-table_of_contents-block [contenteditable="false"] a + > div[style*="margin-left: 48px"], + .notion-enhancer--outliner-heading.pl-\\[54px\\] { + --guide--color: var(--theme--fg-${colours[1]}); + ${opacity} + }`; + } + document.head.append(html``); } diff --git a/src/extensions/indent-guides/mod.json b/src/extensions/indent-guides/mod.json index 6d43688..0f5d1cc 100644 --- a/src/extensions/indent-guides/mod.json +++ b/src/extensions/indent-guides/mod.json @@ -20,8 +20,8 @@ "options": [ { "type": "select", - "key": "lineType", - "description": "The line style to use for indent guides.", + "key": "guideStyle", + "description": "The type of line to use for indent guides.", "values": ["Solid", "Dashed", "Dotted"] }, {