wea_ondara/MangaStatus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make manga updates button look like a progress bar while updating

Browse Source
This commit is contained in:
wea_ondara
2023-09-28 19:17:30 +02:00
parent 3c66c367ef
commit dd0962d155
1 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/navbar/MangaUpdatesUpdater.vue
View File

@@ -46,11 +46,21 @@ export default class MangaUpdatesUpdater extends Vue {
this.progressValue = null;
this.progressMax = null;
}
get progressStyle(): any {
if (this.progressValue === null || this.progressMax === null) {
return {};
}
return {
'--progress-value': this.progressValue / this.progressMax,
};
}
}
</script>
<template>
<button :disabled="!!progressType" class="btn btn-secondary" @click="onUpdateMangaUpdatesDb">
<button :disabled="!!progressType" class="btn btn-secondary progress-btn" :style="progressStyle"
@click="onUpdateMangaUpdatesDb">
<i v-if="!progressType" class="fa fa-refresh"/>
<template v-else>
<span class="text-nowrap">
@@ -65,3 +75,14 @@ export default class MangaUpdatesUpdater extends Vue {
</template>
</button>
</template>
<style>
.progress-btn {
--progress-value: 0;
background: linear-gradient(to right,
var(--bs-success),
var(--bs-success) calc(var(--progress-value) * 100%),
var(--bs-btn-bg) calc(var(--progress-value) * 100%),
var(--bs-btn-bg));
}
</style>