add custom progressbar, adjust icons
This commit is contained in:
parent
a4faa9dd1a
commit
0eb42c138b
93
package-lock.json
generated
93
package-lock.json
generated
|
|
@ -26,12 +26,14 @@
|
|||
"electron-builder": "^23.6.0",
|
||||
"flowbite": "^2.2.1",
|
||||
"flowbite-svelte": "^0.44.21",
|
||||
"flowbite-svelte-icons": "^0.4.5",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-load-config": "^5.0.2",
|
||||
"rollup": "^4.9.2",
|
||||
"rollup-plugin-css-only": "^4.5.2",
|
||||
"rollup-plugin-livereload": "^2.0.5",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-progress": "^1.1.2",
|
||||
"rollup-plugin-svelte": "^7.1.6",
|
||||
"sirv-cli": "^2.0.2",
|
||||
"svelte": "^4.2.8",
|
||||
|
|
@ -3475,6 +3477,17 @@
|
|||
"svelte": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/flowbite-svelte-icons": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.4.5.tgz",
|
||||
"integrity": "sha512-IBudEfw9B4UE2gCRMhbRnyE8p7qq7DDMauy0mPVIShzjaN3yVk2AmAHia1JRe9jUC98Wn7xNk/IdJlXeQj19Iw==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"svelte": "^3.54.0 || ^4.0.0",
|
||||
"tailwind-merge": "^2.0.0",
|
||||
"tailwindcss": "^3.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.4",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
|
||||
|
|
@ -5986,6 +5999,86 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-progress/-/rollup-plugin-progress-1.1.2.tgz",
|
||||
"integrity": "sha512-6ehSZOMTZdAlRpe45kf56BnIOsDYC2GKWhGlK/Dh/Ae/AMUneMDyKdiv9ZlRrW/HVc986frTZcc2Zka+oF6W7Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.2"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^1.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-progress/node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-svelte": {
|
||||
"version": "7.1.6",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.6.tgz",
|
||||
|
|
|
|||
|
|
@ -50,12 +50,14 @@
|
|||
"electron-builder": "^23.6.0",
|
||||
"flowbite": "^2.2.1",
|
||||
"flowbite-svelte": "^0.44.21",
|
||||
"flowbite-svelte-icons": "^0.4.5",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-load-config": "^5.0.2",
|
||||
"rollup": "^4.9.2",
|
||||
"rollup-plugin-css-only": "^4.5.2",
|
||||
"rollup-plugin-livereload": "^2.0.5",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-progress": "^1.1.2",
|
||||
"rollup-plugin-svelte": "^7.1.6",
|
||||
"sirv-cli": "^2.0.2",
|
||||
"svelte": "^4.2.8",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import postcss from "rollup-plugin-postcss";
|
|||
import image from "@rollup/plugin-image";
|
||||
import sveltePreprocess from "svelte-preprocess";
|
||||
import typescript from "@rollup/plugin-typescript";
|
||||
import progress from "rollup-plugin-progress";
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
|
|
@ -46,6 +47,7 @@ export default {
|
|||
file: "public/build/bundle.js",
|
||||
},
|
||||
plugins: [
|
||||
progress({ clearLine: true }),
|
||||
svelte({
|
||||
preprocess: sveltePreprocess({ sourceMap: !production }),
|
||||
compilerOptions: {
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -4,6 +4,11 @@
|
|||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
|
||||
"compilerOptions": {
|
||||
"typeRoots": ["node_modules/@types", "src/types"]
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"node_modules/@sveltejs",
|
||||
"node_modules/@sveltejs/types",
|
||||
"src/types"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user