refactor: ui improve uploading progress (#296)

This commit is contained in:
sigoden 2023-11-26 10:23:37 +08:00 committed by GitHub
parent 130435c387
commit f8d6859354
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 7 deletions

View file

@ -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;

View file

@ -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;
} }