mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-08 06:29:03 +00:00
feat(menu): loading skeleton
This commit is contained in:
parent
f57e5b7f9b
commit
4456871f6d
GPG Key ID:
7998D08F7D7BD7A8
@ -127,7 +127,8 @@ function List({ description }, ...children) {
|
|||||||
return html`<div class="flex flex-col gap-y-[14px]">
|
return html`<div class="flex flex-col gap-y-[14px]">
|
||||||
<${Search} items=${children} />
|
<${Search} items=${children} />
|
||||||
<p
|
<p
|
||||||
class="text-([12px] [color:var(--theme--fg-secondary)])"
|
class="notion-enhancer--menu-description
|
||||||
|
text-([12px] [color:var(--theme--fg-secondary)])"
|
||||||
innerHTML=${description}
|
innerHTML=${description}
|
||||||
></p>
|
></p>
|
||||||
${children}
|
${children}
|
||||||
@ -215,8 +216,8 @@ function Mod({
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
class="text-[12px] leading-[16px] mb-[6px]
|
class="notion-enhancer--menu-description leading-[16px]
|
||||||
text-[color:var(--theme--fg-secondary)]"
|
mb-[6px] text-([12px] [color:var(--theme--fg-secondary)])"
|
||||||
innerHTML=${description}
|
innerHTML=${description}
|
||||||
></p>
|
></p>
|
||||||
<div class="mt-auto flex gap-x-[8px] text-[12px] leading-[16px]">
|
<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>
|
<h5 class="text-[14px] mb-[2px] mt-0">${label}</h5>
|
||||||
${type === "text" ? $input : ""}
|
${type === "text" ? $input : ""}
|
||||||
<p
|
<p
|
||||||
class="text-[12px] leading-[16px]
|
class="notion-enhancer--menu-description leading-[16px]
|
||||||
text-[color:var(--theme--fg-secondary)]"
|
text-([12px] [color:var(--theme--fg-secondary)])"
|
||||||
innerHTML=${description}
|
innerHTML=${description}
|
||||||
></p>
|
></p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,9 +10,60 @@
|
|||||||
<script src="../../vendor/coloris.min.js" type="module"></script>
|
<script src="../../vendor/coloris.min.js" type="module"></script>
|
||||||
<script src="./menu.mjs" type="module" defer></script>
|
<script src="./menu.mjs" type="module" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<!-- prettier-ignore -->
|
<body>
|
||||||
<body
|
<div id="skeleton">
|
||||||
class="grid grid-rows-1 grid-cols-[224.14px auto] w-screen h-screen
|
<div class="row row-group">
|
||||||
text-[color:var(--theme--fg-primary)] font-[family:var(--theme--font-sans)]"
|
<div class="shimmer" style="width: 110px"></div>
|
||||||
></body>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -4,6 +4,15 @@
|
|||||||
* (https://notion-enhancer.github.io/) under the MIT license
|
* (https://notion-enhancer.github.io/) under the MIT license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@keyframes skeleton-shimmer {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--theme--accent-primary_transparent);
|
background: var(--theme--accent-primary_transparent);
|
||||||
}
|
}
|
||||||
@ -27,15 +36,78 @@
|
|||||||
background: var(--theme--scrollbar-thumb_hover);
|
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;
|
text-decoration: underline;
|
||||||
transition: 100ms ease-in;
|
transition: 100ms ease-in;
|
||||||
}
|
}
|
||||||
.notion-enhancer--menu-option a:hover {
|
.notion-enhancer--menu-description a:hover {
|
||||||
color: var(--theme--accent-secondary);
|
color: var(--theme--accent-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* coloris theming */
|
/* https://coloris.js.org/ */
|
||||||
.clr-picker {
|
.clr-picker {
|
||||||
background-color: var(--theme--bg-secondary) !important;
|
background-color: var(--theme--bg-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -146,9 +146,8 @@ const render = async () => {
|
|||||||
id: "themes",
|
id: "themes",
|
||||||
title: "Themes",
|
title: "Themes",
|
||||||
description: `Themes override Notion's colour schemes. To switch between
|
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]
|
dark mode and light mode, go to <mark>Settings & members → My notifications
|
||||||
bg-[color:var(--theme--bg-hover)]">Settings & members → My notifications &
|
& settings → My settings → Appearance</mark>.`,
|
||||||
settings → My settings → Appearance</span>.`,
|
|
||||||
mods: compatibleMods(await getThemes()),
|
mods: compatibleMods(await getThemes()),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -165,8 +164,7 @@ const render = async () => {
|
|||||||
title: "Integrations",
|
title: "Integrations",
|
||||||
description: `<span class="text-[color:var(--theme--fg-red)]">
|
description: `<span class="text-[color:var(--theme--fg-red)]">
|
||||||
Integrations access and modify Notion content. They interact directly with
|
Integrations access and modify Notion content. They interact directly with
|
||||||
<span class="py-[2px] px-[4px] rounded-[3px] bg-[color:var(--theme--bg-hover)]">
|
<mark>https://www.notion.so/api/v3</mark>. Use at your own risk.</span>`,
|
||||||
https://www.notion.so/api/v3</span>. Use at your own risk.</span>`,
|
|
||||||
mods: compatibleMods(await getIntegrations()),
|
mods: compatibleMods(await getIntegrations()),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -203,8 +201,12 @@ const render = async () => {
|
|||||||
href: "https://github.com/sponsors/dragonwocky",
|
href: "https://github.com/sponsors/dragonwocky",
|
||||||
},
|
},
|
||||||
"Settings",
|
"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
|
// view wrapper necessary for transitions
|
||||||
@ -218,7 +220,8 @@ const render = async () => {
|
|||||||
$views.append(html`<${View} id=${id}>${$list}<//>`, ...$mods);
|
$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 }));
|
window.addEventListener("focus", () => setState({ rerender: true }));
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user