add custom progressbar, adjust icons
This commit is contained in:
104
src/App.svelte
104
src/App.svelte
@@ -8,11 +8,25 @@
|
||||
Button,
|
||||
Checkbox,
|
||||
DarkMode,
|
||||
Progressbar,
|
||||
} from "flowbite-svelte";
|
||||
|
||||
import Progressbar from "./lib/Progressbar.svelte";
|
||||
|
||||
import {
|
||||
AddressCardSolid,
|
||||
ArrowRightFromBracketSolid,
|
||||
ArrowRightToBracketSolid,
|
||||
ReplyAllSolid,
|
||||
UserPlusSolid,
|
||||
UserSettingsSolid,
|
||||
} from "flowbite-svelte-icons";
|
||||
|
||||
import ezppLogo from "../public/favicon.png";
|
||||
|
||||
let loggedIn = true;
|
||||
|
||||
let patch = true;
|
||||
let loading = false;
|
||||
let rand = 0;
|
||||
</script>
|
||||
|
||||
@@ -27,52 +41,92 @@
|
||||
<DarkMode class="dark:border-gray-700"></DarkMode>
|
||||
<Avatar
|
||||
class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
|
||||
src="https://a.ez-pp.farm/1001"
|
||||
src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
|
||||
id="avatar-menu"
|
||||
/>
|
||||
</div>
|
||||
<Dropdown placement="bottom" triggeredBy="#avatar-menu">
|
||||
<DropdownHeader>
|
||||
<span class="block text-sm">Quetzalcoatl</span>
|
||||
<span class="block truncate text-sm font-medium text-gray-200"
|
||||
>me@horizonco.de</span
|
||||
<span class="block text-sm">{loggedIn ? "Quetzalcoatl" : "Guest"}</span>
|
||||
<span
|
||||
class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
|
||||
>
|
||||
{loggedIn ? "me@horizonco.de" : "Please log in!"}
|
||||
</span>
|
||||
</DropdownHeader>
|
||||
{#if loggedIn}
|
||||
<DropdownItem
|
||||
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
>
|
||||
<AddressCardSolid class="select-none outline-none border-none" />
|
||||
Profile
|
||||
</DropdownItem>
|
||||
{/if}
|
||||
<DropdownItem
|
||||
class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
>Profile</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
>Settings</DropdownItem
|
||||
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
>
|
||||
<UserSettingsSolid class="select-none outline-none border-none" />
|
||||
Settings
|
||||
</DropdownItem>
|
||||
<DropdownDivider />
|
||||
<DropdownItem
|
||||
class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
>Sign out</DropdownItem
|
||||
>
|
||||
{#if loggedIn}
|
||||
<DropdownItem
|
||||
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
on:click={() => (loggedIn = false)}
|
||||
>
|
||||
<ArrowRightFromBracketSolid
|
||||
class="select-none outline-none border-none"
|
||||
/>
|
||||
Sign out
|
||||
</DropdownItem>
|
||||
{:else}
|
||||
<DropdownItem
|
||||
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
on:click={() => (loggedIn = true)}
|
||||
>
|
||||
<ArrowRightToBracketSolid
|
||||
class="select-none outline-none border-none"
|
||||
/>
|
||||
Login
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
|
||||
>
|
||||
<UserPlusSolid class="select-none outline-none border-none" />
|
||||
Register
|
||||
</DropdownItem>
|
||||
{/if}
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<main class="p-5">
|
||||
<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
|
||||
<div
|
||||
class="container flex flex-col items-center justify-center gap-5 border border-gray-300 dark:border-gray-700 rounded-lg"
|
||||
>
|
||||
<Button
|
||||
color="light"
|
||||
size="xl"
|
||||
on:click={() => (rand = Math.random() * 100)}>Launch</Button
|
||||
on:click={() => {
|
||||
rand = Math.random() * 100;
|
||||
loading = true;
|
||||
}}>Launch</Button
|
||||
>
|
||||
<Checkbox color="primary" bind:checked={patch}>
|
||||
Patching {patch ? "enabled" : "disabled"}
|
||||
</Checkbox>
|
||||
<Progressbar
|
||||
animate={true}
|
||||
progress={rand}
|
||||
labelInside={true}
|
||||
size="h-6"
|
||||
labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
|
||||
/>
|
||||
{#if loading}
|
||||
<div class="w-full flex flex-col justify-center items-center gap-2">
|
||||
<p class="m-0 p-0 dark:text-gray-100">Waiting...</p>
|
||||
<Progressbar
|
||||
animate={true}
|
||||
progress={rand}
|
||||
labelInside={true}
|
||||
size="h-6"
|
||||
indeterminate
|
||||
labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -80,6 +134,6 @@
|
||||
.container {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
margin: 0 auto;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
28
src/app.pcss
28
src/app.pcss
@@ -28,3 +28,31 @@ html.dark .cet-titlebar .cet-control-icon svg {
|
||||
.cet-titlebar .cet-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.indeterminate {
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
rgb(217 5 89) -1%,
|
||||
rgb(217 5 89) 10%,
|
||||
#d3d3d3 10%,
|
||||
#d3d3d3 90%
|
||||
);
|
||||
background-size: 200%;
|
||||
background-position-x: 15%;
|
||||
animation: progress-loading 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
html.dark .indeterminate {
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
rgb(217 5 89) -1%,
|
||||
rgb(217 5 89) 10%,
|
||||
#535353 10%,
|
||||
#535353 90%
|
||||
);
|
||||
}
|
||||
@keyframes progress-loading {
|
||||
50% {
|
||||
background-position-x: -115%;
|
||||
}
|
||||
}
|
||||
|
||||
89
src/lib/Progressbar.svelte
Normal file
89
src/lib/Progressbar.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script lang="ts">
|
||||
import { cubicOut } from "svelte/easing";
|
||||
import { tweened } from "svelte/motion";
|
||||
import { twMerge, twJoin } from "tailwind-merge";
|
||||
|
||||
export let progress: string | number | undefined = "45";
|
||||
export let precision = 0;
|
||||
export let tweenDuration = 400;
|
||||
export let animate = false;
|
||||
export let size = "h-2.5";
|
||||
export let labelInside = false;
|
||||
export let labelOutside = "";
|
||||
export let easing = cubicOut;
|
||||
export let color = "primary";
|
||||
export let labelInsideClass =
|
||||
"text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
|
||||
export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
|
||||
export let indeterminate = false;
|
||||
|
||||
const barColors: Record<string, string> = {
|
||||
primary: "bg-primary-600",
|
||||
blue: "bg-blue-600",
|
||||
gray: "bg-gray-600 dark:bg-gray-300",
|
||||
red: "bg-red-600 dark:bg-red-500",
|
||||
green: "bg-green-600 dark:bg-green-500",
|
||||
yellow: "bg-yellow-400",
|
||||
purple: "bg-purple-600 dark:bg-purple-500",
|
||||
indigo: "bg-indigo-600 dark:bg-indigo-500",
|
||||
};
|
||||
|
||||
const _progress = tweened(0, {
|
||||
duration: animate && !indeterminate ? tweenDuration : 0,
|
||||
easing,
|
||||
});
|
||||
|
||||
$: {
|
||||
if (!indeterminate) {
|
||||
_progress.set(Number(progress));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if labelOutside}
|
||||
<div
|
||||
{...$$restProps}
|
||||
class={twMerge("flex justify-between mb-1", $$props.classLabelOutside)}
|
||||
>
|
||||
<span class="text-base font-medium text-blue-700 dark:text-white"
|
||||
>{labelOutside}</span
|
||||
>
|
||||
<span class="text-sm font-medium text-blue-700 dark:text-white"
|
||||
>{progress}%</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class={twMerge(divClass, size, $$props.class)}>
|
||||
{#if labelInside}
|
||||
{#if !indeterminate}
|
||||
<div
|
||||
class={twJoin(labelInsideClass, barColors[color])}
|
||||
style="width: {$_progress}%"
|
||||
>
|
||||
{$_progress.toFixed(precision)}%
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class={twJoin(
|
||||
barColors[color],
|
||||
size,
|
||||
"indeterminate rounded-full animate-pulse"
|
||||
)}
|
||||
/>
|
||||
{/if}
|
||||
{:else if !indeterminate}
|
||||
<div
|
||||
class={twJoin(barColors[color], size, "rounded-full")}
|
||||
style="width: {$_progress}%"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class={twJoin(
|
||||
barColors[color],
|
||||
size,
|
||||
"indeterminate rounded-full animate-pulse"
|
||||
)}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user