refactor: ui improve uploading progress (#296)
This commit is contained in:
parent
130435c387
commit
f8d6859354
2 changed files with 7 additions and 7 deletions
|
@ -107,11 +107,6 @@ body {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-status span {
|
|
||||||
width: 70px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
padding: 3.3em 1em 0;
|
padding: 3.3em 1em 0;
|
||||||
}
|
}
|
||||||
|
@ -138,6 +133,11 @@ body {
|
||||||
padding-left: 0.6em;
|
padding-left: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cell-status span {
|
||||||
|
width: 80px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.paths-table thead a {
|
.paths-table thead a {
|
||||||
color: unset;
|
color: unset;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -183,10 +183,10 @@ class Uploader {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const speed = (event.loaded - this.uploaded) / (now - this.lastUptime) * 1000;
|
const speed = (event.loaded - this.uploaded) / (now - this.lastUptime) * 1000;
|
||||||
const [speedValue, speedUnit] = formatSize(speed);
|
const [speedValue, speedUnit] = formatSize(speed);
|
||||||
const speedText = `${speedValue}${speedUnit.toLowerCase()}/s`;
|
const speedText = `${speedValue} ${speedUnit}/s`;
|
||||||
const progress = formatPercent((event.loaded / event.total) * 100);
|
const progress = formatPercent((event.loaded / event.total) * 100);
|
||||||
const duration = formatDuration((event.total - event.loaded) / speed)
|
const duration = formatDuration((event.total - event.loaded) / speed)
|
||||||
this.$uploadStatus.innerHTML = `<span>${speedText}</span><span>${progress}</span><span>${duration}</span>`;
|
this.$uploadStatus.innerHTML = `<span>${speedText}</span><span>${progress} ${duration}</span>`;
|
||||||
this.uploaded = event.loaded;
|
this.uploaded = event.loaded;
|
||||||
this.lastUptime = now;
|
this.lastUptime = now;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue