diff --git a/frontend/src/download.js b/frontend/src/download.js index 47dac9f3..dc707083 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -13,7 +13,7 @@ $(document).ready(function() { //initiate progress bar $('#dl-progress').circleProgress({ value: 0.0, - startAngle: -Math.PI/2, + startAngle: -Math.PI / 2, fill: '#00C8D7', size: 158 }); @@ -21,16 +21,18 @@ $(document).ready(function() { function download() { const fileReceiver = new FileReceiver(); const name = document.createElement('p'); - const $btn = $('#download-btn'); fileReceiver.on('progress', progress => { $('#download-page-one').hide(); $('#download-progress').show(); - let percent = progress[0]/progress[1]; + const percent = progress[0] / progress[1]; // update progress bar - $('#dl-progress').circleProgress('value', percent ); - $('.percent-number').html(`${Math.floor(percent*100)}`); - $('.progress-text').append(` (${(progress[0]/1000000).toFixed(2)}MB of ${(progress[1]/1000000).toFixed(2)}MB)`); + $('#dl-progress').circleProgress('value', percent); + $('.percent-number').html(`${Math.floor(percent * 100)}`); + $('.progress-text').append( + ` (${(progress[0] / 1000000).toFixed(2)}MB of ${(progress[1] / + 1000000).toFixed(2)}MB)` + ); //on complete if (percent === 1) { fileReceiver.removeAllListeners('progress'); diff --git a/frontend/src/fileReceiver.js b/frontend/src/fileReceiver.js index e65781fa..c73c6ae7 100644 --- a/frontend/src/fileReceiver.js +++ b/frontend/src/fileReceiver.js @@ -13,9 +13,6 @@ class FileReceiver extends EventEmitter { xhr.onprogress = event => { if (event.lengthComputable && event.target.status !== 404) { - const percentComplete = Math.floor( - event.loaded / event.total * 100 - ); this.emit('progress', [event.loaded, event.total]); } }; diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 303395f9..5ab4227f 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -47,7 +47,7 @@ $(document).ready(function() { //disable button for 3s $copyBtn.attr('disabled', true); $('#link').attr('disabled', true); - $copyBtn.html(""); + $copyBtn.html(''); window.setTimeout(() => { $copyBtn.attr('disabled', false); $('#link').attr('disabled', false); @@ -64,7 +64,7 @@ $(document).ready(function() { //initiate progress bar $('#ul-progress').circleProgress({ value: 0.0, - startAngle: -Math.PI/2, + startAngle: -Math.PI / 2, fill: '#3B9DFF', size: 158 }); @@ -79,9 +79,7 @@ $(document).ready(function() { $copyBtn.html('Copy to Clipboard'); }); //cancel the upload - $('#cancel-upload').click(() => { - - }); + $('#cancel-upload').click(() => {}); // on file upload by browse or drag & drop function onUpload(event) { event.preventDefault(); @@ -98,14 +96,22 @@ $(document).ready(function() { $('#page-one').hide(); $('#upload-progress').show(); $('#upload-error').hide(); - let percent = progress[0]/progress[1]; + const percent = progress[0] / progress[1]; // update progress bar - $('#ul-progress').circleProgress('value', percent ); - $('.percent-number').html(`${Math.floor(percent*100)}`); - if(progress[1] < 1000000000){ - $('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000).toFixed(1)}MB)`); + $('#ul-progress').circleProgress('value', percent); + $('.percent-number').html(`${Math.floor(percent * 100)}`); + if (progress[1] < 1000000000) { + $('.progress-text').html( + `${file.name} (${(progress[0] / 1000000).toFixed( + 1 + )}MB of ${(progress[1] / 1000000).toFixed(1)}MB)` + ); } 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'); } }); - + let t = ''; fileSender .upload() .then(info => { @@ -150,7 +156,7 @@ $(document).ready(function() { }; localStorage.setItem(info.fileId, JSON.stringify(fileData)); $('#upload-filename').html('Ready to Send'); - const t = window.setTimeout(() => { + t = window.setTimeout(() => { $('#page-one').hide(); $('#upload-progress').hide(); $('#share-link').show(); @@ -210,15 +216,18 @@ $(document).ready(function() { const url = file.url.trim() + `#${file.secretKey}`.trim(); $('#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'); name.appendChild(cellText); // create delete button - del.innerHTML = ""; + del.innerHTML = + ''; - link.innerHTML = "" + link.innerHTML = ''; //copy link to clipboard when icon clicked $(link).click(function() { const aux = document.createElement('input'); @@ -273,7 +282,7 @@ $(document).ready(function() { // create popup popupDiv.classList.add('popup'); $popupText.html( - 'Delete Nevermind' + 'Delete Nevermind' ); // delete file @@ -284,7 +293,7 @@ $(document).ready(function() { toggleHeader(); }); }); - document.getElementById('delete-file').onclick = e => { + document.getElementById('delete-file').onclick = () => { FileSender.delete(file.fileId, file.deleteToken).then(() => { localStorage.removeItem(file.fileId); toggleHeader(); @@ -296,13 +305,12 @@ $(document).ready(function() { row.appendChild(name); row.appendChild(link); row.appendChild(expiry); - //popupDiv.appendChild(btn); $(popupDiv).append($popupText); del.appendChild(popupDiv); row.appendChild(del); // show popup - del.addEventListener('click', function(){ + del.addEventListener('click', function() { $popupText.addClass('show'); $popupText.focus(); }); diff --git a/public/main.css b/public/main.css index 6f2bf5d2..bbe1e6ba 100644 --- a/public/main.css +++ b/public/main.css @@ -36,7 +36,7 @@ span { line-height: 23px; width: 630px; text-align: center; - margin: 0 auto 60px auto; + margin: 0 auto 60px; color: #0C0C0D; } @@ -74,7 +74,7 @@ span { #upload-text { font-size: 22px; color: #737373; - margin: 20px 0 30px 0; + margin: 20px 0 30px; } #browse { @@ -82,7 +82,7 @@ span { border-radius: 5px; font-family: 'SF Pro Text', sans-serif; font-size: 15px; - color: #FFFFFF; + color: #FFF; width: 240px; height: 44px; display: flex; @@ -111,7 +111,7 @@ td { font-size: 15px; vertical-align: top; color: #4A4A4A; - padding: 17px 19px 0 19px; + padding: 17px 19px 0; line-height: 23px; } @@ -212,7 +212,7 @@ tbody { .progress-text { font-family: 'SF Pro Text', sans-serif; font-size: 15px; - color: rgba(0,0,0,0.50); + color: rgba(0, 0, 0, 0.5); letter-spacing: -0.4px; margin-top: 24px; margin-bottom: 74px; @@ -265,7 +265,7 @@ tbody { #link:disabled { border: 1px solid #05A700; - background: #FFFFFF; + background: #FFF; } #copy-btn { @@ -289,8 +289,8 @@ tbody { #delete-file { width: 176px; height: 44px; - background: #FFFFFF; - border: 1px solid rgba(12,12,13,0.30); + background: #FFF; + border: 1px solid rgba(12, 12, 13, 0.3); border-radius: 5px; font-size: 15px; font-family: 'SF Pro Text'; @@ -310,7 +310,7 @@ tbody { text-decoration: underline; } -/*upload-error*/ +/* upload-error */ #upload-error { display: flex; justify-content: center; @@ -324,7 +324,7 @@ tbody { margin-top: 5px; } -/*unsupported-browser*/ +/* unsupported-browser */ #unsupported-browser { display: flex; justify-content: center; @@ -339,7 +339,7 @@ tbody { width: 630px; text-align: center; color: #7D7D7D; - margin: 0 auto 23px auto; + margin: 0 auto 23px; } #firefox-logo { @@ -350,14 +350,14 @@ tbody { margin-bottom: 181px; width: 260px; height: 80px; - background: #12bc00; + background: #12BC00; border-radius: 3px; cursor: pointer; 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-weight: 500; - color: #FFFFFF; + color: #FFF; font-size: 26px; display: flex; justify-content: center; @@ -370,7 +370,7 @@ tbody { margin-left: 20.4px; } -#dl-firefox-text>span { +#dl-firefox-text > span { font-family: 'Fira Sans'; font-weight: 300; font-size: 18px; @@ -409,7 +409,7 @@ tbody { } #expired-img { - margin: 51px 0 71px 0; + margin: 51px 0 71px; } .expired-description { @@ -418,9 +418,8 @@ tbody { line-height: 23px; width: 630px; text-align: center; - font-size: 15px; color: #7D7D7D; - margin: 0 auto 23px auto; + margin: 0 auto 23px; } #download-progress {