natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lint

This commit is contained in:
Daniela Arcese 2017-07-13 11:39:46 -04:00
parent 9032e42912
commit fcdb905430
4 changed files with 53 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/download.js
View File

@ -13,7 +13,7 @@ $(document).ready(function() {
//initiate progress bar //initiate progress bar
$('#dl-progress').circleProgress({ $('#dl-progress').circleProgress({
value: 0.0, value: 0.0,
startAngle: -Math.PI/2, startAngle: -Math.PI / 2,
fill: '#00C8D7', fill: '#00C8D7',
size: 158 size: 158
}); });
@ -21,16 +21,18 @@ $(document).ready(function() {
function download() { function download() {
const fileReceiver = new FileReceiver(); const fileReceiver = new FileReceiver();
const name = document.createElement('p'); const name = document.createElement('p');
const $btn = $('#download-btn');
fileReceiver.on('progress', progress => { fileReceiver.on('progress', progress => {
$('#download-page-one').hide(); $('#download-page-one').hide();
$('#download-progress').show(); $('#download-progress').show();
let percent = progress[0]/progress[1]; const percent = progress[0] / progress[1];
// update progress bar // update progress bar
$('#dl-progress').circleProgress('value', percent ); $('#dl-progress').circleProgress('value', percent);
$('.percent-number').html(`${Math.floor(percent*100)}`); $('.percent-number').html(`${Math.floor(percent * 100)}`);
$('.progress-text').append(` (${(progress[0]/1000000).toFixed(2)}MB of ${(progress[1]/1000000).toFixed(2)}MB)`); $('.progress-text').append(
` (${(progress[0] / 1000000).toFixed(2)}MB of ${(progress[1] /
1000000).toFixed(2)}MB)`
);
//on complete //on complete
if (percent === 1) { if (percent === 1) {
fileReceiver.removeAllListeners('progress'); fileReceiver.removeAllListeners('progress');

3
frontend/src/fileReceiver.js
View File

@ -13,9 +13,6 @@ class FileReceiver extends EventEmitter {
xhr.onprogress = event => { xhr.onprogress = event => {
if (event.lengthComputable && event.target.status !== 404) { if (event.lengthComputable && event.target.status !== 404) {
const percentComplete = Math.floor(
event.loaded / event.total * 100
);
this.emit('progress', [event.loaded, event.total]); this.emit('progress', [event.loaded, event.total]);
} }
}; };

48
frontend/src/upload.js
View File

@ -47,7 +47,7 @@ $(document).ready(function() {
//disable button for 3s //disable button for 3s
$copyBtn.attr('disabled', true); $copyBtn.attr('disabled', true);
$('#link').attr('disabled', true); $('#link').attr('disabled', true);
$copyBtn.html("<span class='icon-check'></span>"); $copyBtn.html('<span class=\'icon-check\'></span>');
window.setTimeout(() => { window.setTimeout(() => {
$copyBtn.attr('disabled', false); $copyBtn.attr('disabled', false);
$('#link').attr('disabled', false); $('#link').attr('disabled', false);
@ -64,7 +64,7 @@ $(document).ready(function() {
//initiate progress bar //initiate progress bar
$('#ul-progress').circleProgress({ $('#ul-progress').circleProgress({
value: 0.0, value: 0.0,
startAngle: -Math.PI/2, startAngle: -Math.PI / 2,
fill: '#3B9DFF', fill: '#3B9DFF',
size: 158 size: 158
}); });
@ -79,9 +79,7 @@ $(document).ready(function() {
$copyBtn.html('Copy to Clipboard'); $copyBtn.html('Copy to Clipboard');
}); });
//cancel the upload //cancel the upload
$('#cancel-upload').click(() => { $('#cancel-upload').click(() => {});
});
// on file upload by browse or drag & drop // on file upload by browse or drag & drop
function onUpload(event) { function onUpload(event) {
event.preventDefault(); event.preventDefault();
@ -98,14 +96,22 @@ $(document).ready(function() {
$('#page-one').hide(); $('#page-one').hide();
$('#upload-progress').show(); $('#upload-progress').show();
$('#upload-error').hide(); $('#upload-error').hide();
let percent = progress[0]/progress[1]; const percent = progress[0] / progress[1];
// update progress bar // update progress bar
$('#ul-progress').circleProgress('value', percent ); $('#ul-progress').circleProgress('value', percent);
$('.percent-number').html(`${Math.floor(percent*100)}`); $('.percent-number').html(`${Math.floor(percent * 100)}`);
if(progress[1] < 1000000000){ if (progress[1] < 1000000000) {
$('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000).toFixed(1)}MB)`); $('.progress-text').html(
`${file.name} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
);
} else { } else {
$('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000000).toFixed(1)}GB)`); $('.progress-text').html(
`${file.name} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
);
} }
}); });
@ -135,7 +141,7 @@ $(document).ready(function() {
console.log('Finished encrypting'); console.log('Finished encrypting');
} }
}); });
let t = '';
fileSender fileSender
.upload() .upload()
.then(info => { .then(info => {
@ -150,7 +156,7 @@ $(document).ready(function() {
}; };
localStorage.setItem(info.fileId, JSON.stringify(fileData)); localStorage.setItem(info.fileId, JSON.stringify(fileData));
$('#upload-filename').html('Ready to Send'); $('#upload-filename').html('Ready to Send');
const t = window.setTimeout(() => { t = window.setTimeout(() => {
$('#page-one').hide(); $('#page-one').hide();
$('#upload-progress').hide(); $('#upload-progress').hide();
$('#share-link').show(); $('#share-link').show();
@ -210,15 +216,18 @@ $(document).ready(function() {
const url = file.url.trim() + `#${file.secretKey}`.trim(); const url = file.url.trim() + `#${file.secretKey}`.trim();
$('#link').attr('value', url); $('#link').attr('value', url);
$('#copy-text').html('Copy and share the link to send your file: ' + file.name); $('#copy-text').html(
'Copy and share the link to send your file: ' + file.name
);
$popupText.attr('tabindex', '-1'); $popupText.attr('tabindex', '-1');
name.appendChild(cellText); name.appendChild(cellText);
// create delete button // create delete button
del.innerHTML = "<span class='icon-cancel-1' title='Delete' style='margin-left: -7px'></span>"; del.innerHTML =
'<span class=\'icon-cancel-1\' title=\'Delete\' style=\'margin-left: -7px\'></span>';
link.innerHTML = "<span class='icon-docs' title='Copy URL'></span>" link.innerHTML = '<span class=\'icon-docs\' title=\'Copy URL\'></span>';
//copy link to clipboard when icon clicked //copy link to clipboard when icon clicked
$(link).click(function() { $(link).click(function() {
const aux = document.createElement('input'); const aux = document.createElement('input');
@ -273,7 +282,7 @@ $(document).ready(function() {
// create popup // create popup
popupDiv.classList.add('popup'); popupDiv.classList.add('popup');
$popupText.html( $popupText.html(
'<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>' '<span class=\'del-file\'>Delete</span><span class=\'nvm\' > Nevermind</span>'
); );
// delete file // delete file
@ -284,7 +293,7 @@ $(document).ready(function() {
toggleHeader(); toggleHeader();
}); });
}); });
document.getElementById('delete-file').onclick = e => { document.getElementById('delete-file').onclick = () => {
FileSender.delete(file.fileId, file.deleteToken).then(() => { FileSender.delete(file.fileId, file.deleteToken).then(() => {
localStorage.removeItem(file.fileId); localStorage.removeItem(file.fileId);
toggleHeader(); toggleHeader();
@ -296,13 +305,12 @@ $(document).ready(function() {
row.appendChild(name); row.appendChild(name);
row.appendChild(link); row.appendChild(link);
row.appendChild(expiry); row.appendChild(expiry);
//popupDiv.appendChild(btn);
$(popupDiv).append($popupText); $(popupDiv).append($popupText);
del.appendChild(popupDiv); del.appendChild(popupDiv);
row.appendChild(del); row.appendChild(del);
// show popup // show popup
del.addEventListener('click', function(){ del.addEventListener('click', function() {
$popupText.addClass('show'); $popupText.addClass('show');
$popupText.focus(); $popupText.focus();
}); });

35
public/main.css
View File

@ -36,7 +36,7 @@ span {
line-height: 23px; line-height: 23px;
width: 630px; width: 630px;
text-align: center; text-align: center;
margin: 0 auto 60px auto; margin: 0 auto 60px;
color: #0C0C0D; color: #0C0C0D;
} }
@ -74,7 +74,7 @@ span {
#upload-text { #upload-text {
font-size: 22px; font-size: 22px;
color: #737373; color: #737373;
margin: 20px 0 30px 0; margin: 20px 0 30px;
} }
#browse { #browse {
@ -82,7 +82,7 @@ span {
border-radius: 5px; border-radius: 5px;
font-family: 'SF Pro Text', sans-serif; font-family: 'SF Pro Text', sans-serif;
font-size: 15px; font-size: 15px;
color: #FFFFFF; color: #FFF;
width: 240px; width: 240px;
height: 44px; height: 44px;
display: flex; display: flex;
@ -111,7 +111,7 @@ td {
font-size: 15px; font-size: 15px;
vertical-align: top; vertical-align: top;
color: #4A4A4A; color: #4A4A4A;
padding: 17px 19px 0 19px; padding: 17px 19px 0;
line-height: 23px; line-height: 23px;
} }
@ -212,7 +212,7 @@ tbody {
.progress-text { .progress-text {
font-family: 'SF Pro Text', sans-serif; font-family: 'SF Pro Text', sans-serif;
font-size: 15px; font-size: 15px;
color: rgba(0,0,0,0.50); color: rgba(0, 0, 0, 0.5);
letter-spacing: -0.4px; letter-spacing: -0.4px;
margin-top: 24px; margin-top: 24px;
margin-bottom: 74px; margin-bottom: 74px;
@ -265,7 +265,7 @@ tbody {
#link:disabled { #link:disabled {
border: 1px solid #05A700; border: 1px solid #05A700;
background: #FFFFFF; background: #FFF;
} }
#copy-btn { #copy-btn {
@ -289,8 +289,8 @@ tbody {
#delete-file { #delete-file {
width: 176px; width: 176px;
height: 44px; height: 44px;
background: #FFFFFF; background: #FFF;
border: 1px solid rgba(12,12,13,0.30); border: 1px solid rgba(12, 12, 13, 0.3);
border-radius: 5px; border-radius: 5px;
font-size: 15px; font-size: 15px;
font-family: 'SF Pro Text'; font-family: 'SF Pro Text';
@ -310,7 +310,7 @@ tbody {
text-decoration: underline; text-decoration: underline;
} }
/*upload-error*/ /* upload-error */
#upload-error { #upload-error {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -324,7 +324,7 @@ tbody {
margin-top: 5px; margin-top: 5px;
} }
/*unsupported-browser*/ /* unsupported-browser */
#unsupported-browser { #unsupported-browser {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -339,7 +339,7 @@ tbody {
width: 630px; width: 630px;
text-align: center; text-align: center;
color: #7D7D7D; color: #7D7D7D;
margin: 0 auto 23px auto; margin: 0 auto 23px;
} }
#firefox-logo { #firefox-logo {
@ -350,14 +350,14 @@ tbody {
margin-bottom: 181px; margin-bottom: 181px;
width: 260px; width: 260px;
height: 80px; height: 80px;
background: #12bc00; background: #12BC00;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
border: none; border: none;
box-shadow: 0 5px 3px rgb(234,234,234); box-shadow: 0 5px 3px rgb(234, 234, 234);
font-family: 'Fira Sans'; font-family: 'Fira Sans';
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFF;
font-size: 26px; font-size: 26px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -370,7 +370,7 @@ tbody {
margin-left: 20.4px; margin-left: 20.4px;
} }
#dl-firefox-text>span { #dl-firefox-text > span {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
font-weight: 300; font-weight: 300;
font-size: 18px; font-size: 18px;
@ -409,7 +409,7 @@ tbody {
} }
#expired-img { #expired-img {
margin: 51px 0 71px 0; margin: 51px 0 71px;
} }
.expired-description { .expired-description {
@ -418,9 +418,8 @@ tbody {
line-height: 23px; line-height: 23px;
width: 630px; width: 630px;
text-align: center; text-align: center;
font-size: 15px;
color: #7D7D7D; color: #7D7D7D;
margin: 0 auto 23px auto; margin: 0 auto 23px;
} }
#download-progress { #download-progress {