Archives/ohwgiles_laminar
1
0
Fork 0
mirror of https://github.com/ohwgiles/laminar.git synced 2024-10-27 20:34:20 +00:00
Code Issues Projects Releases Wiki Activity

progress bar: fix initial delayed update

Browse Source 
when the displayed frontend state changes, any progress bar
should begin in the initial correct state before smoothly
transitioning with time.
This commit is contained in:
Oliver Giles 2020-11-20 14:08:02 +13:00
parent 3e993d35a0
commit b851c72d53
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/resources/js/app.js
View File

@ -123,7 +123,10 @@ Vue.mixin({
// - the current job has started (practically hard to reach) // - the current job has started (practically hard to reach)
clearInterval(this.updateTimer); clearInterval(this.updateTimer);
if (val.length) { if (val.length) {
// TODO: first, a non-animated progress update // set the current progress update first
this.jobsRunning.forEach(this.updateProgress);
this.$forceUpdate();
// then update with animation every second
this.updateTimer = setInterval(() => { this.updateTimer = setInterval(() => {
this.jobsRunning.forEach(this.updateProgress); this.jobsRunning.forEach(this.updateProgress);
this.$forceUpdate(); this.$forceUpdate();

1
src/resources/style.css
View File

@ -165,7 +165,6 @@ button:not([disabled]) { cursor: pointer; color: var(--main-fg); }
} }
.progress-bar { .progress-bar {
height: 100%; height: 100%;
width: 100%;
background-color: var(--running); background-color: var(--running);
background-image: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.18) 35% 65%, transparent 65%); background-image: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.18) 35% 65%, transparent 65%);
background-size: 1rem; background-size: 1rem;