Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: upload item background color

Browse source
This commit is contained in:
Phan An 2024-04-19 00:55:05 +02:00
parent 6fb7484ccf
commit 218d25add6
1 changed files with 6 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/assets/js/components/ui/upload/UploadItem.vue
View file

@ -4,10 +4,7 @@
:title="file.message"
class="upload-item relative rounded min-h-[32px] overflow-hidden bg-k-bg-secondary"
>
<span
:style="{ width: `${file.progress}%` }"
class="absolute h-full top-0 left-0 z-0 duration-200 ease-out bg-k-highlight"
/>
<span class="progress absolute h-full top-0 left-0 z-0 duration-200 ease-out bg-k-highlight" />
<span class="details z-10 absolute h-full w-full flex items-center content-between">
<span class="name px-4 flex-1">{{ file.name }}</span>
<span class="flex items-center">
@ -39,25 +36,22 @@ const { file } = toRefs(props)
const canRetry = computed(() => file.value.status === 'Canceled' || file.value.status === 'Errored')
const canRemove = computed(() => file.value.status !== 'Uploading') // we're not supporting cancel tokens (yet).
const cssClass = computed(() => slugify(file.value.status).toLowerCase())
const progressBarWidth = computed(() => file.value.status === 'Uploading' ? `${file.value.progress}%` : '0')
const remove = () => uploadService.remove(file.value)
const retry = () => uploadService.retry(file.value)
</script>
<style lang="postcss" scoped>
.progress {
width: v-bind(progressBarWidth);
}
.uploaded {
@apply bg-k-success;
.progress {
@apply bg-transparent;
}
}
.errored {
@apply bg-k-danger;
.progress {
@apply bg-transparent;
}
}
</style>