ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix update all percentage display (#525)

Browse source
This commit is contained in:
ABevier 2023-04-29 20:40:57 -04:00 committed by GitHub
parent 8ee3f77abd
commit a212697513
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
modules/desktop/src/routes/+page.svelte
View file

@ -14,6 +14,7 @@
import WelcomeModal from "$components/welcome-modal/welcome-modal.svelte";
import Button from "@tea/ui/button/button.svelte";
import log from "$libs/logger";
import { formatPercent } from "@tea/ui/lib/percent";
const { packageList } = packagesStore;
const { session } = authStore;
@ -29,7 +30,9 @@
let packagesScrollY = 0;
$: currentUpdatingPkg = $packageList.find((p) => p.state === PackageStates.UPDATING);
$: updatingMessage = `updating ${currentUpdatingPkg?.full_name} (${currentUpdatingPkg?.install_progress_percentage}%)`;
$: updatingMessage = `updating ${currentUpdatingPkg?.full_name} (${formatPercent(
currentUpdatingPkg?.install_progress_percentage
)}%)`;
$: pkgsToUpdate = $packageList.filter((p: GUIPackage) => p.state === PackageStates.NEEDS_UPDATE);
async function updateAll() {
@ -89,7 +92,7 @@
<!-- 22px right margin to account for the scrollbar on the package cards -->
<div class="mr-[22px] flex items-center justify-end text-sm">
{#if currentUpdatingPkg}
<p class="text-gray px-2">{updatingMessage}</p>
<p class="text-gray px-2 font-mono">{updatingMessage}</p>
{/if}
<div>
<Button

9
modules/ui/src/lib/percent.ts Normal file
View file

@ -0,0 +1,9 @@
// Format the percentage expressed as 0..100 to a number with 2 decimal places.
// we never want to round 99.999% to 100% because makes the experience bad so we can't just use toFixed(2) immediately
// Also make sure that whatever is displaying this is using a monospace font so that the numbers don't jump around
export const formatPercent = (percent?: number) => {
if (!percent) {
return "0.00";
}
return (Math.floor(percent * 100) / 100).toFixed(2);
};

8
modules/ui/src/progress-circle/progress-circle.svelte
View file

@ -1,4 +1,6 @@
<script lang="ts">
import { formatPercent } from "../lib/percent";
export let value = 0;
export let max = 100;
$: progressPath = () => {
@ -18,12 +20,6 @@
return path;
}
};
// Format the percentage expressed as 0..100 to a number with 2 decimal places.
// we never want to round 99.999% to 100% because makes the experience bad so we can't just use toFixed(2) immediately
const formatPercent = (percent: number) => {
return (Math.floor(percent * 100) / 100).toFixed(2);
};
</script>
<div>