pr comment changes and progress line starts from top instead of right

Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
Ashesh Vidyut 2019-03-21 23:37:11 +05:30 committed by timvisee
parent 8d80ba1f69
commit a6a3cae5e9
No known key found for this signature in database
GPG Key ID: B8DB720BC383E172
4 changed files with 37 additions and 44 deletions

View File

@ -1,13 +1,14 @@
import FileSender from './fileSender';
import FileReceiver from './fileReceiver';
import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
import * as metrics from './metrics'; import * as metrics from './metrics';
import { bytes, locale } from './utils'; import FileReceiver from './fileReceiver';
import okDialog from './ui/okDialog'; import FileSender from './fileSender';
import copyDialog from './ui/copyDialog'; import copyDialog from './ui/copyDialog';
import faviconProgressbar from './ui/faviconProgressbar';
import okDialog from './ui/okDialog';
import shareDialog from './ui/shareDialog'; import shareDialog from './ui/shareDialog';
import signupDialog from './ui/signupDialog'; import signupDialog from './ui/signupDialog';
import surveyDialog from './ui/surveyDialog'; import surveyDialog from './ui/surveyDialog';
import { bytes, locale } from './utils';
import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
export default function(state, emitter) { export default function(state, emitter) {
let lastRender = 0; let lastRender = 0;
@ -29,6 +30,7 @@ export default function(state, emitter) {
if (updateTitle) { if (updateTitle) {
emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio)); emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
} }
faviconProgressbar.updateFavicon(state.transfer.progressRatio);
render(); render();
} }
@ -37,6 +39,7 @@ export default function(state, emitter) {
document.addEventListener('focus', () => { document.addEventListener('focus', () => {
updateTitle = false; updateTitle = false;
emitter.emit('DOMTitleChange', 'Send'); emitter.emit('DOMTitleChange', 'Send');
faviconProgressbar.updateFavicon(0);
}); });
checkFiles(); checkFiles();
}); });

View File

@ -3,7 +3,6 @@
const html = require('choo/html'); const html = require('choo/html');
const raw = require('choo/html/raw'); const raw = require('choo/html/raw');
const assets = require('../../common/assets'); const assets = require('../../common/assets');
const faviconProgressBar = require('./faviconProgressbar');
const { const {
bytes, bytes,
copyToClipboard, copyToClipboard,
@ -398,7 +397,6 @@ module.exports.uploading = function(state, emit) {
const progress = state.transfer.progressRatio; const progress = state.transfer.progressRatio;
const progressPercent = percent(progress); const progressPercent = percent(progress);
const archive = state.archive; const archive = state.archive;
faviconProgressBar.updateFavicon(progressPercent);
return html` return html`
<send-upload-area <send-upload-area
id="${archive.id}" id="${archive.id}"

View File

@ -1,48 +1,43 @@
const { platform } = require('../utils'); const { platform } = require('../utils');
const assets = require('../../common/assets'); const assets = require('../../common/assets');
module.exports.updateFavicon = function(percentageString) { const loaderWidth = 5;
const loaderColor = '#0090ed';
function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
canvas.width = canvas.height = outerWidth;
context.translate(outerWidth * 0.5, outerWidth * 0.5);
context.rotate(-Math.PI * 0.5);
const radius = (outerWidth - lineWidth) * 0.5;
context.beginPath();
context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
context.strokeStyle = color;
context.lineCap = 'square';
context.lineWidth = lineWidth;
context.stroke();
}
function drawNewFavicon(progressRatio) {
const canvas = document.createElement('canvas');
const size = 32;
const context = canvas.getContext('2d');
drawCircle(canvas, context, '#efefef', loaderWidth, size, 1);
drawCircle(canvas, context, loaderColor, loaderWidth, size, progressRatio);
return canvas.toDataURL();
}
module.exports.updateFavicon = function(progressRatio) {
if (platform() === 'web') { if (platform() === 'web') {
let progress = parseInt(percentageString.replace('%', '')); const link = document.querySelector("link[rel*='icon']");
const progress = progressRatio * 100;
if (progress === 0 || progress === 100) { if (progress === 0 || progress === 100) {
const link = document.querySelector("link[rel*='icon']");
link.type = 'image/png'; link.type = 'image/png';
link.href = assets.get('favicon-32x32.png'); link.href = assets.get('favicon-32x32.png');
document.getElementsByTagName('head')[0].appendChild(link); document.getElementsByTagName('head')[0].appendChild(link);
return; return;
} }
progress = progress * 0.01;
const link = document.querySelector("link[rel*='icon']");
const canvas = document.createElement('canvas');
const size = 32;
const loaderWidth = 5; link.href = drawNewFavicon(progressRatio);
const loaderColor = '#0090ed';
const span = document.createElement('span');
span.textContent = percentageString;
const context = canvas.getContext('2d');
canvas.width = canvas.height = size;
context.translate(size * 0.5, size * 0.5);
const drawCircle = function(color, lineWidth, outerWidth, percent) {
const radius = (outerWidth - lineWidth) * 0.5;
context.beginPath();
context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
context.strokeStyle = color;
context.lineCap = 'square';
context.lineWidth = lineWidth;
context.stroke();
};
const drawNewFavicon = function() {
drawCircle('#efefef', loaderWidth, size, 1);
drawCircle(loaderColor, loaderWidth, size, progress);
};
drawNewFavicon(link);
link.href = canvas.toDataURL();
document.getElementsByTagName('head')[0].appendChild(link); document.getElementsByTagName('head')[0].appendChild(link);
} }
}; };

View File

@ -3,7 +3,6 @@ const { list } = require('../utils');
const archiveTile = require('./archiveTile'); const archiveTile = require('./archiveTile');
const modal = require('./modal'); const modal = require('./modal');
const intro = require('./intro'); const intro = require('./intro');
const faviconProgressbar = require('./faviconProgressbar');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const archives = state.storage.files const archives = state.storage.files
@ -14,10 +13,8 @@ module.exports = function(state, emit) {
if (state.uploading) { if (state.uploading) {
left = archiveTile.uploading(state, emit); left = archiveTile.uploading(state, emit);
} else if (state.archive.numFiles > 0) { } else if (state.archive.numFiles > 0) {
faviconProgressbar.updateFavicon('0%');
left = archiveTile.wip(state, emit); left = archiveTile.wip(state, emit);
} else { } else {
faviconProgressbar.updateFavicon('0%');
left = archiveTile.empty(state, emit); left = archiveTile.empty(state, emit);
} }
archives.reverse(); archives.reverse();