dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-07 22:19:02 +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
src/core/menu
islands
Footer.mjs
menu.css

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

@ -16,8 +16,7 @@ function Footer({ categories, transitionDuration = 150 }) {
icon="refresh-cw"
onclick=${reloadApp}
style="display: none"
>
Reload & Apply Changes
>Reload & Apply Changes
<//>`,
$categories = categories.map(({ id, title, mods }) => {
return [
@ -25,8 +24,7 @@ function Footer({ categories, transitionDuration = 150 }) {
html`<${Button}
icon="chevron-left"
onclick=${() => setState({ transition: "slide-to-left", view: id })}
>
${title}
>${title}
<//>`,
];
});
@ -35,19 +33,21 @@ function Footer({ categories, transitionDuration = 150 }) {
let [footerOpen] = useState(["databaseUpdated"]);
footerOpen ||= $categories.some(([ids]) => ids.some((id) => id === view));
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]) => {
$reload.style.display = databaseUpdated ? "" : "none";
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
class="notion-enhancer--menu-footer px-[60px] py-[16px]

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

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