From eada94b2624e40848a7400a42ea7e61aaad1d024 Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Sun, 13 Aug 2017 11:02:27 -0700 Subject: [PATCH] use svg for progress --- frontend/src/download.js | 2 +- frontend/src/fileList.js | 2 +- frontend/src/main.css | 12 +++++++++++- frontend/src/progress.js | 30 ++++++++++++------------------ frontend/src/upload.js | 2 +- package-lock.json | 9 --------- package.json | 1 - views/download.handlebars | 7 +++++-- views/index.handlebars | 7 +++++-- 9 files changed, 36 insertions(+), 36 deletions(-) diff --git a/frontend/src/download.js b/frontend/src/download.js index cc97b987..2522f1e2 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -5,7 +5,7 @@ import Storage from './storage'; import * as links from './links'; import * as metrics from './metrics'; import * as progress from './progress'; -import $ from 'jquery'; +import $ from 'jquery/dist/jquery.slim'; const storage = new Storage(); function onUnload(size) { diff --git a/frontend/src/fileList.js b/frontend/src/fileList.js index ce5f1fff..93c1f26f 100644 --- a/frontend/src/fileList.js +++ b/frontend/src/fileList.js @@ -2,7 +2,7 @@ import FileSender from './fileSender'; import Storage from './storage'; import * as metrics from './metrics'; import { allowedCopy, copyToClipboard, ONE_DAY_IN_MS } from './utils'; -import $ from 'jquery'; +import $ from 'jquery/dist/jquery.slim'; const storage = new Storage(); let fileList = null; diff --git a/frontend/src/main.css b/frontend/src/main.css index dfa26644..583efd19 100644 --- a/frontend/src/main.css +++ b/frontend/src/main.css @@ -22,6 +22,16 @@ body { position: relative; } +#progress circle { + stroke: #eee; + stroke-width: 0.75em; +} + +#progress #bar { + transition: stroke-dashoffset 300ms linear; + stroke: #3b9dff; +} + .header { align-items: flex-start; box-sizing: border-box; @@ -420,7 +430,7 @@ tbody { position: absolute; letter-spacing: -0.78px; font-family: 'Segoe UI', 'SF Pro Text', sans-serif; - top: 53px; + top: 58px; left: 50%; transform: translateX(-50%); -moz-user-select: none; diff --git a/frontend/src/progress.js b/frontend/src/progress.js index 70d9bc02..a7fdd1fe 100644 --- a/frontend/src/progress.js +++ b/frontend/src/progress.js @@ -1,24 +1,18 @@ import { bytes, percent } from './utils'; -import $ from 'jquery'; -import 'jquery-circle-progress'; -let $progress = null; -let $percent = null; -let $text = null; +let percentText = null; +let text = null; let title = null; +let bar = null; let updateTitle = false; +const radius = 73; +const circumference = 2 * Math.PI * radius; + document.addEventListener('DOMContentLoaded', function() { - $percent = $('.percent-number'); - $text = $('.progress-text'); - $progress = $('.progress-bar'); - $progress.circleProgress({ - value: 0.0, - startAngle: -Math.PI / 2, - fill: '#3B9DFF', - size: 158, - animation: { duration: 300 } - }); + percentText = document.querySelector('.percent-number'); + text = document.querySelector('.progress-text'); + bar = document.getElementById('bar'); title = document.querySelector('title'); }); @@ -33,8 +27,8 @@ document.addEventListener('focus', function() { function setProgress(params) { const ratio = params.complete / params.total; - $progress.circleProgress('value', ratio); - $percent.text(Math.floor(ratio * 100)); + bar.setAttribute('stroke-dashoffset', (1 - ratio) * circumference); + percentText.textContent = Math.floor(ratio * 100); if (updateTitle) { title.textContent = percent(ratio); } @@ -47,7 +41,7 @@ function setProgress(params) { } function setText(str) { - $text.text(str); + text.textContent = str; } export { setProgress, setText }; diff --git a/frontend/src/upload.js b/frontend/src/upload.js index f972a2aa..2863b7e7 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -13,7 +13,7 @@ import Storage from './storage'; import * as metrics from './metrics'; import * as progress from './progress'; import * as fileList from './fileList'; -import $ from 'jquery'; +import $ from 'jquery/dist/jquery.slim'; const storage = new Storage(); diff --git a/package-lock.json b/package-lock.json index 6cd532f4..c67de524 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5266,15 +5266,6 @@ "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=", "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": { "version": "2.1.9", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz", diff --git a/package.json b/package.json index 5b9cd7e0..5eaf0461 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "git-rev-sync": "^1.9.1", "husky": "^0.14.3", "jquery": "^3.2.1", - "jquery-circle-progress": "^1.2.2", "l20n": "^5.0.0", "lint-staged": "^4.0.3", "mocha": "^3.4.2", diff --git a/views/download.handlebars b/views/download.handlebars index 3981b24b..25080ce3 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -20,8 +20,11 @@