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

feat(menu): loading skeleton

Browse Source
This commit is contained in:
dragonwocky 2023-01-16 16:47:27 +11:00
parent f57e5b7f9b
commit 4456871f6d
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
4 changed files with 148 additions and 21 deletions

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

@ -127,7 +127,8 @@ function List({ description }, ...children) {
return html`<div class="flex flex-col gap-y-[14px]">
<${Search} items=${children} />
<p
class="text-([12px] [color:var(--theme--fg-secondary)])"
class="notion-enhancer--menu-description
text-([12px] [color:var(--theme--fg-secondary)])"
innerHTML=${description}
></p>
${children}
@ -215,8 +216,8 @@ function Mod({
})}
</div>
<p
class="text-[12px] leading-[16px] mb-[6px]
text-[color:var(--theme--fg-secondary)]"
class="notion-enhancer--menu-description leading-[16px]
mb-[6px] text-([12px] [color:var(--theme--fg-secondary)])"
innerHTML=${description}
></p>
<div class="mt-auto flex gap-x-[8px] text-[12px] leading-[16px]">
@ -286,8 +287,8 @@ function Option({ type, value, description, _get, _set, ...props }) {
<h5 class="text-[14px] mb-[2px] mt-0">${label}</h5>
${type === "text" ? $input : ""}
<p
class="text-[12px] leading-[16px]
text-[color:var(--theme--fg-secondary)]"
class="notion-enhancer--menu-description leading-[16px]
text-([12px] [color:var(--theme--fg-secondary)])"
innerHTML=${description}
></p>
</div>

61
src/core/menu/index.html
View File

@ -10,9 +10,60 @@
<script src="../../vendor/coloris.min.js" type="module"></script>
<script src="./menu.mjs" type="module" defer></script>
</head>
<!-- prettier-ignore -->
<body
class="grid grid-rows-1 grid-cols-[224.14px auto] w-screen h-screen
text-[color:var(--theme--fg-primary)] font-[family:var(--theme--font-sans)]"
></body>
<body>
<div id="skeleton">
<div class="row row-group">
<div class="shimmer" style="width: 110px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 60px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 72px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 78px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 96px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 79px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 51px"></div>
</div>
<div class="row row-group">
<div class="shimmer" style="width: 53px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 30px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 48px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 65px"></div>
</div>
<div class="row">
<div class="shimmer icon"></div>
<div class="shimmer" style="width: 75px"></div>
</div>
<div class="row row-group">
<div class="shimmer" style="width: 44px"></div>
</div>
<div class="row">
<div class="shimmer" style="width: 74px"></div>
</div>
</div>
</body>
</html>

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

@ -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;
}

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

@ -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 <span class="py-[2px] px-[4px] rounded-[3px]
bg-[color:var(--theme--bg-hover)]">Settings & members → My notifications &
settings → My settings → Appearance</span>.`,
dark mode and light mode, go to <mark>Settings & members → My notifications
& settings → My settings → Appearance</mark>.`,
mods: compatibleMods(await getThemes()),
},
{
@ -165,8 +164,7 @@ const render = async () => {
title: "Integrations",
description: `<span class="text-[color:var(--theme--fg-red)]">
Integrations access and modify Notion content. They interact directly with
<span class="py-[2px] px-[4px] rounded-[3px] bg-[color:var(--theme--bg-hover)]">
https://www.notion.so/api/v3</span>. Use at your own risk.</span>`,
<mark>https://www.notion.so/api/v3</mark>. Use at your own risk.</span>`,
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 }));