Merge pull request #513 from mozilla/svg-progress

use svg for progress
This commit is contained in:
Danny Coates 2017-08-14 10:05:03 -07:00 committed by GitHub
commit 24917f8aa5
9 changed files with 36 additions and 36 deletions

View File

@ -5,7 +5,7 @@ import Storage from './storage';
import * as links from './links'; import * as links from './links';
import * as metrics from './metrics'; import * as metrics from './metrics';
import * as progress from './progress'; import * as progress from './progress';
import $ from 'jquery'; import $ from 'jquery/dist/jquery.slim';
const storage = new Storage(); const storage = new Storage();
function onUnload(size) { function onUnload(size) {

View File

@ -2,7 +2,7 @@ import FileSender from './fileSender';
import Storage from './storage'; import Storage from './storage';
import * as metrics from './metrics'; import * as metrics from './metrics';
import { allowedCopy, copyToClipboard, ONE_DAY_IN_MS } from './utils'; import { allowedCopy, copyToClipboard, ONE_DAY_IN_MS } from './utils';
import $ from 'jquery'; import $ from 'jquery/dist/jquery.slim';
const storage = new Storage(); const storage = new Storage();
let fileList = null; let fileList = null;

View File

@ -22,6 +22,16 @@ body {
position: relative; position: relative;
} }
#progress circle {
stroke: #eee;
stroke-width: 0.75em;
}
#progress #bar {
transition: stroke-dashoffset 300ms linear;
stroke: #3b9dff;
}
.header { .header {
align-items: flex-start; align-items: flex-start;
box-sizing: border-box; box-sizing: border-box;
@ -420,7 +430,7 @@ tbody {
position: absolute; position: absolute;
letter-spacing: -0.78px; letter-spacing: -0.78px;
font-family: 'Segoe UI', 'SF Pro Text', sans-serif; font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
top: 53px; top: 58px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
-moz-user-select: none; -moz-user-select: none;

View File

@ -1,24 +1,18 @@
import { bytes, percent } from './utils'; import { bytes, percent } from './utils';
import $ from 'jquery';
import 'jquery-circle-progress';
let $progress = null; let percentText = null;
let $percent = null; let text = null;
let $text = null;
let title = null; let title = null;
let bar = null;
let updateTitle = false; let updateTitle = false;
const radius = 73;
const circumference = 2 * Math.PI * radius;
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
$percent = $('.percent-number'); percentText = document.querySelector('.percent-number');
$text = $('.progress-text'); text = document.querySelector('.progress-text');
$progress = $('.progress-bar'); bar = document.getElementById('bar');
$progress.circleProgress({
value: 0.0,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
size: 158,
animation: { duration: 300 }
});
title = document.querySelector('title'); title = document.querySelector('title');
}); });
@ -33,8 +27,8 @@ document.addEventListener('focus', function() {
function setProgress(params) { function setProgress(params) {
const ratio = params.complete / params.total; const ratio = params.complete / params.total;
$progress.circleProgress('value', ratio); bar.setAttribute('stroke-dashoffset', (1 - ratio) * circumference);
$percent.text(Math.floor(ratio * 100)); percentText.textContent = Math.floor(ratio * 100);
if (updateTitle) { if (updateTitle) {
title.textContent = percent(ratio); title.textContent = percent(ratio);
} }
@ -47,7 +41,7 @@ function setProgress(params) {
} }
function setText(str) { function setText(str) {
$text.text(str); text.textContent = str;
} }
export { setProgress, setText }; export { setProgress, setText };

View File

@ -13,7 +13,7 @@ import Storage from './storage';
import * as metrics from './metrics'; import * as metrics from './metrics';
import * as progress from './progress'; import * as progress from './progress';
import * as fileList from './fileList'; import * as fileList from './fileList';
import $ from 'jquery'; import $ from 'jquery/dist/jquery.slim';
const storage = new Storage(); const storage = new Storage();

9
package-lock.json generated
View File

@ -5266,15 +5266,6 @@
"integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=", "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=",
"dev": true "dev": true
}, },
"jquery-circle-progress": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/jquery-circle-progress/-/jquery-circle-progress-1.2.2.tgz",
"integrity": "sha1-Jg6RMKyOK1Vy6qepO56Kaye8juo=",
"dev": true,
"requires": {
"jquery": "3.2.1"
}
},
"js-base64": { "js-base64": {
"version": "2.1.9", "version": "2.1.9",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",

View File

@ -34,7 +34,6 @@
"git-rev-sync": "^1.9.1", "git-rev-sync": "^1.9.1",
"husky": "^0.14.3", "husky": "^0.14.3",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"jquery-circle-progress": "^1.2.2",
"l20n": "^5.0.0", "l20n": "^5.0.0",
"lint-staged": "^4.0.3", "lint-staged": "^4.0.3",
"mocha": "^3.4.2", "mocha": "^3.4.2",

View File

@ -20,8 +20,11 @@
<div id="download-progress" hidden="true"> <div id="download-progress" hidden="true">
<div id="dl-title" class="title"></div> <div id="dl-title" class="title"></div>
<div class="description" data-l10n-id="downloadingPageMessage"></div> <div class="description" data-l10n-id="downloadingPageMessage"></div>
<!-- progress bar here --> <div class="progress-bar">
<div class="progress-bar" id="dl-progress"> <svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
<circle r="73" cx="83" cy="83" fill="transparent"/>
<circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
</svg>
<div class="percentage"> <div class="percentage">
<span class="percent-number"></span> <span class="percent-number"></span>
<span class="percent-sign">%</span> <span class="percent-sign">%</span>

View File

@ -37,8 +37,11 @@
<div id="upload-progress" hidden="true"> <div id="upload-progress" hidden="true">
<div class="title" id="upload-filename"></div> <div class="title" id="upload-filename"></div>
<div class="description"></div> <div class="description"></div>
<!-- progress bar here --> <div class="progress-bar">
<div class="progress-bar" id="ul-progress"> <svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
<circle r="73" cx="83" cy="83" fill="transparent"/>
<circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
</svg>
<div class="percentage"> <div class="percentage">
<span class="percent-number">0</span> <span class="percent-number">0</span>
<span class="percent-sign">%</span> <span class="percent-sign">%</span>