mirror of
https://gitlab.com/timvisee/send.git
synced 2024-11-10 05:02:45 +01:00
pr comment changes and progress line starts from top instead of right
Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
parent
8d80ba1f69
commit
a6a3cae5e9
@ -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 { bytes, locale } from './utils';
|
||||
import okDialog from './ui/okDialog';
|
||||
import FileReceiver from './fileReceiver';
|
||||
import FileSender from './fileSender';
|
||||
import copyDialog from './ui/copyDialog';
|
||||
import faviconProgressbar from './ui/faviconProgressbar';
|
||||
import okDialog from './ui/okDialog';
|
||||
import shareDialog from './ui/shareDialog';
|
||||
import signupDialog from './ui/signupDialog';
|
||||
import surveyDialog from './ui/surveyDialog';
|
||||
import { bytes, locale } from './utils';
|
||||
import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
|
||||
|
||||
export default function(state, emitter) {
|
||||
let lastRender = 0;
|
||||
@ -29,6 +30,7 @@ export default function(state, emitter) {
|
||||
if (updateTitle) {
|
||||
emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
|
||||
}
|
||||
faviconProgressbar.updateFavicon(state.transfer.progressRatio);
|
||||
render();
|
||||
}
|
||||
|
||||
@ -37,6 +39,7 @@ export default function(state, emitter) {
|
||||
document.addEventListener('focus', () => {
|
||||
updateTitle = false;
|
||||
emitter.emit('DOMTitleChange', 'Send');
|
||||
faviconProgressbar.updateFavicon(0);
|
||||
});
|
||||
checkFiles();
|
||||
});
|
||||
|
@ -3,7 +3,6 @@
|
||||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const assets = require('../../common/assets');
|
||||
const faviconProgressBar = require('./faviconProgressbar');
|
||||
const {
|
||||
bytes,
|
||||
copyToClipboard,
|
||||
@ -398,7 +397,6 @@ module.exports.uploading = function(state, emit) {
|
||||
const progress = state.transfer.progressRatio;
|
||||
const progressPercent = percent(progress);
|
||||
const archive = state.archive;
|
||||
faviconProgressBar.updateFavicon(progressPercent);
|
||||
return html`
|
||||
<send-upload-area
|
||||
id="${archive.id}"
|
||||
|
@ -1,48 +1,43 @@
|
||||
const { platform } = require('../utils');
|
||||
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') {
|
||||
let progress = parseInt(percentageString.replace('%', ''));
|
||||
const link = document.querySelector("link[rel*='icon']");
|
||||
const progress = progressRatio * 100;
|
||||
if (progress === 0 || progress === 100) {
|
||||
const link = document.querySelector("link[rel*='icon']");
|
||||
link.type = 'image/png';
|
||||
link.href = assets.get('favicon-32x32.png');
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
return;
|
||||
}
|
||||
progress = progress * 0.01;
|
||||
const link = document.querySelector("link[rel*='icon']");
|
||||
const canvas = document.createElement('canvas');
|
||||
const size = 32;
|
||||
|
||||
const loaderWidth = 5;
|
||||
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();
|
||||
link.href = drawNewFavicon(progressRatio);
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
}
|
||||
};
|
||||
|
@ -3,7 +3,6 @@ const { list } = require('../utils');
|
||||
const archiveTile = require('./archiveTile');
|
||||
const modal = require('./modal');
|
||||
const intro = require('./intro');
|
||||
const faviconProgressbar = require('./faviconProgressbar');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const archives = state.storage.files
|
||||
@ -14,10 +13,8 @@ module.exports = function(state, emit) {
|
||||
if (state.uploading) {
|
||||
left = archiveTile.uploading(state, emit);
|
||||
} else if (state.archive.numFiles > 0) {
|
||||
faviconProgressbar.updateFavicon('0%');
|
||||
left = archiveTile.wip(state, emit);
|
||||
} else {
|
||||
faviconProgressbar.updateFavicon('0%');
|
||||
left = archiveTile.empty(state, emit);
|
||||
}
|
||||
archives.reverse();
|
||||
|
Loading…
Reference in New Issue
Block a user