Merge pull request #105 from mozilla/ui

Progress bars

frontend/src/download.js

@@ -3,23 +3,32 @@ const { notify } = require('./utils');
 const $ = require('jquery');
 
 $(document).ready(function() {
+  $('#download-progress').hide();
   $('#send-file').click(() => {
     window.location.replace(`${window.location.origin}`);
   });
   const download = () => {
     const fileReceiver = new FileReceiver();
     const name = document.createElement('p');
-    const progress = document.createElement('p');
-    const btn = $('#download-btn');
+    const $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');
+        $('#download-text').html('Download complete!');
+        $('.send-new').show();
+        $btn.text('Download complete!');
+        $btn.attr('disabled', 'true');
         notify('Your download has finished.');
-        btn.text('Download complete!');
-        btn.attr('disabled', 'true');
       }
     });
 

frontend/src/upload.js

@@ -4,9 +4,9 @@ const $ = require('jquery');
 
 $(document).ready(function() {
   // reset copy button
-  const copyBtn = $('#copy-btn');
-  copyBtn.attr('disabled', false);
-  copyBtn.html('Copy');
+  const $copyBtn = $('#copy-btn');
+  $copyBtn.attr('disabled', false);
+  $copyBtn.html('Copy');
 
   $('#page-one').show();
   $('#file-list').hide();
@@ -14,15 +14,20 @@ $(document).ready(function() {
   $('#share-link').hide();
 
   // copy link to clipboard
-  copyBtn.click(() => {
-    const aux = document.createElement('input');
+  $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!');
+    window.setTimeout(() => {
+      $copyBtn.attr('disabled', false);
+      $copyBtn.html('Copy');
+    }, 3000);
   });
 
   // link back to home page
@@ -31,8 +36,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
@@ -44,12 +49,14 @@ $(document).ready(function() {
     } else {
       file = event.target.files[0];
     }
+
     const $fileList = $('#uploaded-files');
     const row = document.createElement('tr');
     const name = document.createElement('td');
     const link = document.createElement('td');
     const expiry = document.createElement('td');
     const del = document.createElement('td');
+    del.setAttribute('align', 'center');
     const btn = document.createElement('button');
     const popupDiv = document.createElement('div');
     const $popupText = $('<span>', { class: 'popuptext' });
@@ -76,7 +83,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 => {
@@ -84,7 +90,11 @@ $(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}%`);
       if (percentComplete === 100) {
         notify('Your upload has finished.');
       }
@@ -101,16 +111,19 @@ $(document).ready(function() {
           info.fileId,
           localStorage.getItem(info.fileId)
         ).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();
     });

public/main.css

@@ -43,6 +43,7 @@ input, select, textarea, button {
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  text-align: center;
 }
 
 #browse {
@@ -151,6 +152,18 @@ td {
 }
 
 /**   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 {
@@ -230,10 +243,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;
+}

server/portal_server.js

@@ -79,11 +79,14 @@ app.get('/assets/download/:id', (req, res) => {
         const file_stream = storage.get(id);
 
         file_stream.on(notLocalHost ? 'finish' : 'close', () => {
-          storage.forceDelete(id).then(err => {
+          storage
+            .forceDelete(id)
+            .then(err => {
               if (!err) {
                 log.info('Deleted:', id);
               }
-          }).catch(err => {
+            })
+            .catch(err => {
               log.info('DeleteError:', id);
             });
         });
@@ -112,7 +115,7 @@ app.post('/delete/:id', (req, res) => {
 
   storage
     .delete(id, delete_token)
-    .then((err) => {
+    .then(err => {
       if (!err) {
         log.info('Deleted:', id);
         res.sendStatus(200);

views/download.handlebars

@@ -19,15 +19,29 @@
         Your friend is sending you a file: <br />
         {{{filename}}} ({{{filesize}}})
       </div>
-
-      <div class="share-window">
+      <div id="download-page-one">
+        <div>
           <button id="download-btn" onclick="download()">Download File</button>
-        <img id="expired-img" src="/resources/link_expired.png" alt="Link expired" />
         </div>
+      </div>
+
+      <div id="download-progress">
+        <div  id="download-text">
+          Downloading File...
+        </div>
+        <div class="upload">
+          <!-- progress bar here -->
+          <div id="progress-bar"></div>
+          <div id="progress-text"></div>
+        </div>
+      </div>
+
       <div class="send-new" id="send-file">
         Send your own files
       </div>
+
       {{else}}
+
       <div class="title">
         This link has expired or never existed in the first place.
       </div>

views/index.handlebars

@@ -57,6 +57,8 @@
         <div id="upload-img"><img src="/resources/upload.svg" alt="Upload" /></div>
         <div class="upload">
           <!-- progress bar here -->
+          <div id="progress-bar"></div>
+          <div id="progress-text"></div>
         </div>
       </div>
     </div>