diff --git a/package-lock.json b/package-lock.json index e6e5966..bf61c5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index da5a36f..fcc8bc2 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/rollup.config.js b/rollup.config.js index a3e32e2..cc856de 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -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: { diff --git a/src/App.svelte b/src/App.svelte index 363ae74..664a271 100644 --- a/src/App.svelte +++ b/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; @@ -27,52 +41,92 @@ - Quetzalcoatl - me@horizonco.de{loggedIn ? "Quetzalcoatl" : "Guest"} + + {loggedIn ? "me@horizonco.de" : "Please log in!"} + + {#if loggedIn} + + + Profile + + {/if} Profile - Settings + + Settings + - Sign out + {#if loggedIn} + (loggedIn = false)} + > + + Sign out + + {:else} + (loggedIn = true)} + > + + Login + + + + Register + + {/if} -
+
{ + rand = Math.random() * 100; + loading = true; + }}>Launch Patching {patch ? "enabled" : "disabled"} - + {#if loading} +
+

Waiting...

+ +
+ {/if}
@@ -80,6 +134,6 @@ .container { text-align: center; padding: 1em; - margin: 0 auto; + margin: auto; } diff --git a/src/app.pcss b/src/app.pcss index 0884375..561d0cf 100644 --- a/src/app.pcss +++ b/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%; + } +} diff --git a/src/lib/Progressbar.svelte b/src/lib/Progressbar.svelte new file mode 100644 index 0000000..35b24fd --- /dev/null +++ b/src/lib/Progressbar.svelte @@ -0,0 +1,89 @@ + + +{#if labelOutside} +
+ {labelOutside} + {progress}% +
+{/if} + +
+ {#if labelInside} + {#if !indeterminate} +
+ {$_progress.toFixed(precision)}% +
+ {:else} +
+ {/if} + {:else if !indeterminate} +
+ {:else} +
+ {/if} +
diff --git a/tsconfig.json b/tsconfig.json index 2a107e2..25c2d9f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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" + ] } }