Merge pull request #764 from mozilla/prog

added indefinite progress mode
This commit is contained in:
Danny Coates 2018-02-21 14:17:11 -08:00 committed by GitHub
commit 12443db891
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 9 deletions

View File

@ -18,6 +18,10 @@ export default class FileReceiver extends Nanobus {
return this.progress[0] / this.progress[1];
}
get progressIndefinite() {
return this.state !== 'downloading';
}
get sizes() {
return {
partialSize: bytes(this.progress[0]),

View File

@ -20,6 +20,10 @@ export default class FileSender extends Nanobus {
return this.progress[0] / this.progress[1];
}
get progressIndefinite() {
return ['fileSizeProgress', 'notifyUploadDone'].indexOf(this.msg) === -1;
}
get sizes() {
return {
partialSize: bytes(this.progress[0]),

View File

@ -24,7 +24,7 @@ module.exports = function(state, emit) {
<div class="description">
${state.translate('downloadingPageMessage')}
</div>
${progress(transfer.progressRatio)}
${progress(transfer.progressRatio, transfer.progressIndefinite)}
<div class="progressSection">
<div class="progressSection__text">
${state.translate(transfer.msg, transfer.sizes)}

View File

@ -14,7 +14,7 @@ module.exports = function(state, emit) {
})}
</div>
<div class="description"></div>
${progress(transfer.progressRatio)}
${progress(transfer.progressRatio, transfer.progressIndefinite)}
<div class="progressSection">
<div class="progressSection__text">
${state.translate(transfer.msg, transfer.sizes)}

View File

@ -6,9 +6,14 @@ const oRadius = radius + 10;
const oDiameter = oRadius * 2;
const circumference = 2 * Math.PI * radius;
module.exports = function(progressRatio) {
const dashOffset = (1 - progressRatio) * circumference;
const percentComplete = percent(progressRatio);
module.exports = function(progressRatio, indefinite = false) {
const p = indefinite ? 0.2 : progressRatio;
const dashOffset = (1 - p) * circumference;
const progressPercent = html`
<text class="progress__percent" text-anchor="middle" x="50%" y="98">
${percent(progressRatio)}
</text>`;
return html`
<div class="progress">
<svg
@ -23,7 +28,7 @@ module.exports = function(progressRatio) {
cy="${oRadius}"
fill="transparent"/>
<circle
class="progress__bar"
class="${indefinite ? 'progress__indefinite' : 'progress__bar'}"
r="${radius}"
cx="${oRadius}"
cy="${oRadius}"
@ -31,9 +36,7 @@ module.exports = function(progressRatio) {
transform="rotate(-90 ${oRadius} ${oRadius})"
stroke-dasharray="${circumference}"
stroke-dashoffset="${dashOffset}"/>
<text class="progress__percent" text-anchor="middle" x="50%" y="98">
${percentComplete}
</text>
${indefinite ? '' : progressPercent}
</svg>
</div>
`;

View File

@ -18,6 +18,23 @@
transition: stroke-dashoffset 300ms linear;
}
.progress__indefinite {
stroke: #3b9dff;
stroke-width: 0.75em;
animation: 1s linear infinite spin;
transform-origin: center;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.progress__percent {
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
font-size: 43.2px;