elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: add progress bar for uploading images

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-05-07 16:31:00 +02:00
parent bb33c43950
commit 221b572a1f
8 changed files with 45 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/UI/Image/UploadingImageCounter.svelte
View file

@ -42,6 +42,7 @@
failed.addCallbackAndRun((failed) => {
dismissed = Math.min(failed, dismissed)
})
let progress = state.imageUploadManager.progressCurrentImage
</script>
{#if $debugging}
@ -53,11 +54,20 @@
{#if $pending - $failed > 0}
<div class="alert">
<Loading>
{#if $pending - $failed === 1}
<Tr t={t.upload.one.uploading} />
{:else if $pending - $failed > 1}
<Tr t={t.upload.multiple.uploading.Subs({ count: $pending })} />
{/if}
<div class="w-full flex flex-col">
<div class="w-full flex justify-between">
{#if $pending - $failed === 1}
<Tr t={t.upload.one.uploading} />
{:else if $pending - $failed > 1}
<Tr t={t.upload.multiple.uploading.Subs({ count: $pending })} />
{/if}
{$progress}%
</div>
<div class="w-full low-interaction h-1">
<div class="bg-black h-1" style={`width: calc(${$progress}%)`}></div>
</div>
</div>
</Loading>
</div>
{/if}