From 9e228417b4d1a8a0456e82cc835703ad5451dc83 Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:23:12 -0400 Subject: [PATCH 1/2] add progress bars --- frontend/src/download.js | 19 ++++++--- frontend/src/upload.js | 39 +++++++++++------- public/main.css | 87 ++++++++++++++++++++++++++------------- views/download.handlebars | 25 ++++++++--- views/index.handlebars | 2 + 5 files changed, 118 insertions(+), 54 deletions(-) diff --git a/frontend/src/download.js b/frontend/src/download.js index 1048647c..355b32f0 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -2,6 +2,7 @@ const FileReceiver = require('./fileReceiver'); const $ = require('jquery'); $(document).ready(function() { + $('#download-progress').hide(); $('#send-file').click(() => { window.location.replace(`${window.location.origin}`); }); @@ -10,16 +11,22 @@ $(document).ready(function() { let li = document.createElement('li'); let name = document.createElement('p'); - let progress = document.createElement('p'); - let btn = $('#download-btn'); + let $btn = $('#download-btn'); fileReceiver.on('progress', percentComplete => { - progress.innerText = `Progress: ${percentComplete}%`; - + $('#download-page-one').hide(); + $('.send-new').hide(); + $('#download-progress').show(); + // update progress bar + document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + $('#progress-text').html(`${percentComplete}%`); + //on complete if (percentComplete === 100) { fileReceiver.removeAllListeners('progress'); - btn.text('Download complete!'); - btn.attr('disabled', 'true'); + $('#download-text').html('Download complete!'); + $('.send-new').show(); + $btn.text('Download complete!'); + $btn.attr('disabled', 'true'); } }); diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 72c02f36..dd66d659 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -3,25 +3,32 @@ const $ = require('jquery'); $(document).ready(function() { // reset copy button - let copyBtn = $('#copy-btn'); - copyBtn.attr('disabled', false); - copyBtn.html('Copy'); + let $copyBtn = $('#copy-btn'); + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); $('#page-one').show(); $('#file-list').hide(); $('#upload-progress').hide(); $('#share-link').hide(); + //load existing uploads + for (fileId in localStorage){ + + } + // copy link to clipboard - copyBtn.click(() => { + $copyBtn.click(() => { var aux = document.createElement('input'); aux.setAttribute('value', $('#link').attr('value')); document.body.appendChild(aux); aux.select(); document.execCommand('copy'); document.body.removeChild(aux); - copyBtn.attr('disabled', true); - copyBtn.html('Copied!'); + //disable button for 3s + $copyBtn.attr('disabled', true) + $copyBtn.html('Copied!'); + }); // link back to home page @@ -30,8 +37,8 @@ $(document).ready(function() { $('#file-list').show(); $('#upload-progress').hide(); $('#share-link').hide(); - copyBtn.attr('disabled', false); - copyBtn.html('Copy'); + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); }); // on file upload by browse or drag & drop @@ -49,11 +56,11 @@ $(document).ready(function() { let link = document.createElement('td'); let expiry = document.createElement('td'); let del = document.createElement('td'); + del.setAttribute('align', 'center'); let btn = document.createElement('button'); let popupDiv = document.createElement('div'); let $popupText = $('', { 'class': 'popuptext' }); let cellText = document.createTextNode(file.name); - let progress = document.createElement('p'); name.appendChild(cellText); @@ -75,7 +82,6 @@ $(document).ready(function() { $(popupDiv).append($popupText); del.appendChild(popupDiv); row.appendChild(del); - $fileList.append(row); //add row to table const fileSender = new FileSender(file); fileSender.on('progress', percentComplete => { @@ -83,7 +89,9 @@ $(document).ready(function() { $('#file-list').hide(); $('#upload-progress').show(); $('#upload-filename').innerHTML += file.name; - progress.innerText = `Progress: ${percentComplete}%`; + // update progress bar + document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + $('#progress-text').html(`${percentComplete}%`); }); fileSender.upload().then(info => { const url = info.url.trim() + `#${info.secretKey}`.trim(); @@ -96,17 +104,20 @@ $(document).ready(function() { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) - ).then(() => { - // + ).then(() => { $(e.target).parents('tr').remove(); localStorage.removeItem(info.fileId); }); }); // show popup - btn.addEventListener('click', toggleShow); + del.addEventListener('click', toggleShow); // hide popup $popupText.find('.nvm').click(toggleShow); + + $fileList.append(row); //add row to table + $('#page-one').hide(); + $('#file-list').hide(); $('#upload-progress').hide(); $('#share-link').show(); }); diff --git a/public/main.css b/public/main.css index 38fd83e3..28c17bf4 100644 --- a/public/main.css +++ b/public/main.css @@ -43,6 +43,7 @@ input, select, textarea, button { justify-content: center; align-items: center; flex-direction: column; + text-align: center; } #browse { @@ -110,49 +111,55 @@ td { /* Popup container */ .popup { - position: relative; - display: inline-block; - cursor: pointer; + position: relative; + display: inline-block; + cursor: pointer; } /* The actual popup (appears on top) */ .popup .popuptext { - visibility: hidden; - width: 160px; - background-color: #555; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 8px 0; - position: absolute; - z-index: 1; - bottom: 125%; - left: 50%; - margin-left: -80px; - transition: opacity 0.5s; - opacity: 0; + visibility: hidden; + width: 160px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -80px; + transition: opacity 0.5s; + opacity: 0; } /* Popup arrow */ .popup .popuptext::after { - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: #555 transparent transparent transparent; + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; } .popup .show { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } /** upload-progress **/ - +#progress-bar { + width: 300px; + height: 5px; + background: linear-gradient(90deg, #FD9800, #D73000 var(--progress), white var(--progress)); + border: 0.5px solid; + border-radius: 5px; +} /** share-link **/ .share-window { @@ -233,10 +240,32 @@ td { cursor: auto; } -#download { +#download-page-one { + margin: 0 auto; + width: 470px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; text-align: center; } #expired-img { display: none; } + +#download-progress { + margin: 0 auto; + width: 470px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +#download-text { + margin-bottom: 40px; +} diff --git a/views/download.handlebars b/views/download.handlebars index e1fa05d4..f845e7c0 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -16,15 +16,29 @@ Your friend is sending you a file:
{{{filename}}} ({{{filesize}}}) - - + --> diff --git a/views/index.handlebars b/views/index.handlebars index 2cf237e5..f06b780f 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -52,6 +52,8 @@
+
+
From 4e040eece0e8c2d90d77ba50effdaf0dad03db9f Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:36:43 -0400 Subject: [PATCH 2/2] enable copy button again --- frontend/src/upload.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/upload.js b/frontend/src/upload.js index dd66d659..033f7233 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -28,7 +28,10 @@ $(document).ready(function() { //disable button for 3s $copyBtn.attr('disabled', true) $copyBtn.html('Copied!'); - + window.setTimeout(()=>{ + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); + }, 3000); }); // link back to home page