diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs index 277ef9c..b7566b1 100644 --- a/src/core/menu/components.mjs +++ b/src/core/menu/components.mjs @@ -127,7 +127,8 @@ function List({ description }, ...children) { return html`
<${Search} items=${children} />

${children} @@ -215,8 +216,8 @@ function Mod({ })}

@@ -286,8 +287,8 @@ function Option({ type, value, description, _get, _set, ...props }) {
${label}
${type === "text" ? $input : ""}

diff --git a/src/core/menu/index.html b/src/core/menu/index.html index 25e951c..e9dd59c 100644 --- a/src/core/menu/index.html +++ b/src/core/menu/index.html @@ -10,9 +10,60 @@ - - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/core/menu/menu.css b/src/core/menu/menu.css index 1bc4c4b..bd93803 100644 --- a/src/core/menu/menu.css +++ b/src/core/menu/menu.css @@ -4,6 +4,15 @@ * (https://notion-enhancer.github.io/) under the MIT license */ +@keyframes skeleton-shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + ::selection { background: var(--theme--accent-primary_transparent); } @@ -27,15 +36,78 @@ background: var(--theme--scrollbar-thumb_hover); } -.notion-enhancer--menu-option a { +body { + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 224.14px auto; + width: 100vw; + height: 100vh; + color: var(--theme--fg-primary); + font-family: var(--theme--font-sans); +} + +body > #skeleton { + background: var(--theme--bg-secondary); +} +body > #skeleton .row { + display: flex; + align-items: center; + padding: 0 15px; + height: 30px; +} +body > #skeleton .shimmer { + height: 14px; + overflow: hidden; + position: relative; + border-radius: 4px; + background: var(--theme--bg-hover); +} +body > #skeleton .shimmer.icon { + margin-left: 1px; + margin-right: 9px; + height: 18px; + width: 18px; +} +body > #skeleton .shimmer::before { + content: ""; + position: absolute; + height: 100%; + width: 100%; + z-index: 1; + animation: 1s linear infinite skeleton-shimmer; + background: linear-gradient( + 90deg, + transparent 0, + var(--theme--bg-hover) 50%, + transparent 100% + ); +} +body > #skeleton .row-group { + height: 21px; + margin-top: 18px; +} +body > #skeleton .row-group:first-child { + margin-top: 10px; +} +body > #skeleton .row-group .shimmer { + height: 11px; +} + +.notion-enhancer--menu-description mark { + color: inherit; + padding: 2px 4px; + border-radius: 3px; + background-color: var(--theme--bg-hover); +} +.notion-enhancer--menu-description a { text-decoration: underline; transition: 100ms ease-in; } -.notion-enhancer--menu-option a:hover { +.notion-enhancer--menu-description a:hover { color: var(--theme--accent-secondary); } -/* coloris theming */ +/* https://coloris.js.org/ */ .clr-picker { background-color: var(--theme--bg-secondary) !important; } diff --git a/src/core/menu/menu.mjs b/src/core/menu/menu.mjs index eeb2d35..5155a06 100644 --- a/src/core/menu/menu.mjs +++ b/src/core/menu/menu.mjs @@ -146,9 +146,8 @@ const render = async () => { id: "themes", title: "Themes", description: `Themes override Notion's colour schemes. To switch between - dark mode and light mode, go to Settings & members → My notifications & - settings → My settings → Appearance.`, + dark mode and light mode, go to Settings & members → My notifications + & settings → My settings → Appearance.`, mods: compatibleMods(await getThemes()), }, { @@ -165,8 +164,7 @@ const render = async () => { title: "Integrations", description: ` Integrations access and modify Notion content. They interact directly with - - https://www.notion.so/api/v3. Use at your own risk.`, + https://www.notion.so/api/v3. Use at your own risk.`, mods: compatibleMods(await getIntegrations()), }, ], @@ -203,8 +201,12 @@ const render = async () => { href: "https://github.com/sponsors/dragonwocky", }, "Settings", - { icon: "sliders-horizontal", id: "core", title: "Core" }, - ...categories.map((c) => ({ icon: c.icon, id: c.id, title: c.title })), + { + id: "core", + title: "Core", + icon: "sliders-horizontal", + }, + ...categories.map((c) => ({ id: c.id, title: c.title, icon: c.icon })), ]; // view wrapper necessary for transitions @@ -218,7 +220,8 @@ const render = async () => { $views.append(html`<${View} id=${id}>${$list}`, ...$mods); } - document.body.append(renderSidebar(sidebar, categories), $views); + const $skeleton = document.querySelector("#skeleton"); + $skeleton.replaceWith(renderSidebar(sidebar, categories), $views); }; window.addEventListener("focus", () => setState({ rerender: true }));