dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-08 06:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: no more menu skeleton fouc

Browse Source
This commit is contained in:
dragonwocky 2024-01-24 13:09:54 +11:00
parent ff002044aa
commit 54594350bd
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/core/menu/islands/Footer.mjs
View File

@ -16,8 +16,7 @@ function Footer({ categories, transitionDuration = 150 }) {
icon="refresh-cw" icon="refresh-cw"
onclick=${reloadApp} onclick=${reloadApp}
style="display: none" style="display: none"
> >Reload & Apply Changes
Reload & Apply Changes
<//>`, <//>`,
$categories = categories.map(({ id, title, mods }) => { $categories = categories.map(({ id, title, mods }) => {
return [ return [
@ -25,8 +24,7 @@ function Footer({ categories, transitionDuration = 150 }) {
html`<${Button} html`<${Button}
icon="chevron-left" icon="chevron-left"
onclick=${() => setState({ transition: "slide-to-left", view: id })} onclick=${() => setState({ transition: "slide-to-left", view: id })}
> >${title}
${title}
<//>`, <//>`,
]; ];
}); });
@ -35,19 +33,21 @@ function Footer({ categories, transitionDuration = 150 }) {
let [footerOpen] = useState(["databaseUpdated"]); let [footerOpen] = useState(["databaseUpdated"]);
footerOpen ||= $categories.some(([ids]) => ids.some((id) => id === view)); footerOpen ||= $categories.some(([ids]) => ids.some((id) => id === view));
setState({ footerOpen }); setState({ footerOpen });
if (!footerOpen) return;
// only toggle buttons if footer is open,
// otherwise leave as is during transition
for (const [ids, $btn] of $categories) {
const viewInCategory = ids.some((id) => id === view);
$btn.style.display = viewInCategory ? "" : "none";
}
}); });
useState(["databaseUpdated"], ([databaseUpdated]) => { useState(["databaseUpdated"], ([databaseUpdated]) => {
$reload.style.display = databaseUpdated ? "" : "none"; $reload.style.display = databaseUpdated ? "" : "none";
if (databaseUpdated) setState({ footerOpen: true }); if (databaseUpdated) setState({ footerOpen: true });
}); });
useState(["footerOpen"], ([footerOpen]) => {
// only toggle buttons if footer is open,
// otherwise leave as is during transition
if (!footerOpen) return;
const [view] = useState(["view"]);
for (const [ids, $btn] of $categories) {
const viewInCategory = ids.some((id) => id === view);
$btn.style.display = viewInCategory ? "" : "none";
}
});
return html`<footer return html`<footer
class="notion-enhancer--menu-footer px-[60px] py-[16px] class="notion-enhancer--menu-footer px-[60px] py-[16px]

6
src/core/menu/menu.css
View File

@ -51,7 +51,7 @@ body {
} }
body > #skeleton { body > #skeleton {
background: var(--theme--bg-secondary); background: rgba(86, 86, 86, 0.1);
} }
body > #skeleton .row { body > #skeleton .row {
display: flex; display: flex;
@ -64,7 +64,7 @@ body > #skeleton .shimmer {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
background: var(--theme--bg-hover); background: rgba(86, 86, 86, 0.1);
} }
body > #skeleton .shimmer.icon { body > #skeleton .shimmer.icon {
margin-left: 1px; margin-left: 1px;
@ -82,7 +82,7 @@ body > #skeleton .shimmer::before {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
transparent 0, transparent 0,
var(--theme--bg-hover) 50%, rgba(86, 86, 86, 0.1) 50%,
transparent 100% transparent 100%
); );
} }