JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: add indeterminate progress bar

Browse Source 
Display indeterminate progress bars in upload modal if progress is less
than 1.

Change-Id: Icdad8e59914985f3ed8fd25dd01dba7e9ff88cf0
This commit is contained in:
Cameron 2023-07-21 15:42:07 -04:00
parent 8ed4c573db
commit b16c8ba2e4
3 changed files with 66 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/package.json
View File

@ -73,4 +73,4 @@
"browserslist": [
"defaults"
]
}
}

42
web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue
View File

@ -16,7 +16,8 @@
</div>
</div>
<div v-if="!isClosable" class="modal__header__left__track">
<div class="modal__header__left__track__fill" :style="progressStyle" />
<div v-if="progress" class="modal__header__left__track__fill" :style="progressStyle" />
<div v-else class="modal__header__left__track__indeterminate" />
</div>
</div>
<div class="modal__header__right">
@ -129,16 +130,21 @@ const statusLabel = computed((): string => {
});
/**
* Returns progress bar style.
* Returns upload progress.
*/
const progressStyle = computed((): Record<string, string> => {
const progress = uploading.value.reduce((total: number, item: UploadingBrowserObject) => {
const progress = computed((): number => {
return uploading.value.reduce((total: number, item: UploadingBrowserObject) => {
total += item.progress || 0;
return total;
}, 0) / uploading.value.length;
});
/**
* Returns progress bar style.
*/
const progressStyle = computed((): Record<string, string> => {
return {
width: `${progress}%`,
width: `${progress.value}%`,
};
});
@ -323,6 +329,7 @@ onMounted(() => {
border-radius: 4px;
position: relative;
background-color: var(--c-grey-11);
overflow: hidden;
&__fill {
position: absolute;
@ -333,6 +340,31 @@ onMounted(() => {
border-radius: 4px;
max-width: 100%;
}
&__indeterminate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--c-blue-1);
border-radius: 4px;
max-width: 100%;
width: 50%;
animation: indeterminate-progress-bar;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes indeterminate-progress-bar {
from {
left: -50%;
}
to {
left: 100%;
}
}
}
}

29
web/satellite/src/components/modals/objectUpload/UploadItem.vue
View File

@ -12,7 +12,8 @@
<div class="item__right">
<template v-if="item.status === UploadingStatus.InProgress">
<div class="item__right__track">
<div class="item__right__track__fill" :style="progressStyle" />
<div v-if="item.progress" class="item__right__track__fill" :style="progressStyle" />
<div v-else class="item__right__track__indeterminate" />
</div>
<CloseIcon class="item__right__cancel" @click="cancelUpload" />
</template>
@ -183,6 +184,7 @@ function cancelUpload(): void {
position: relative;
margin-right: 34px;
background-color: var(--c-blue-1);
overflow: hidden;
&__fill {
position: absolute;
@ -193,6 +195,31 @@ function cancelUpload(): void {
border-radius: 3px;
max-width: 100%;
}
&__indeterminate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--c-blue-3);
border-radius: 3px;
max-width: 100%;
width: 50%;
animation: indeterminate-progress-bar;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes indeterminate-progress-bar {
from {
left: -50%;
}
to {
left: 100%;
}
}
}
&__cancel {