Represent downloads as list

webui-src/app/downloads.js

@@ -114,12 +114,28 @@ function fileAction(hash, action) {
 };
 
 function actionButton(file, action) {
-  return m('button', {
-      onclick: function() {
-        fileAction(file.hash, action);
-      }
-    },
-    action);
+  switch (action) {
+    case 'resume':
+      return m('button', {
+        onclick: function() {
+          fileAction(file.hash, 'resume');
+        },
+      }, m('i.fas.fa-play'));
+
+    case 'pause':
+      return m('button', {
+        onclick: function() {
+          fileAction(file.hash, 'pause');
+        },
+      }, m('i.fas.fa-pause'));
+
+    case 'cancel':
+      return m('button.red', {
+        onclick: function() {
+          fileAction(file.hash, 'cancel');
+        },
+      }, m('i.fas.fa-times'));
+  }
 };
 
 let backgroundCallback = function() {
@@ -132,6 +148,7 @@ let isComponentActive = function() {
   return (m.route.get() === '/downloads');
 }
 
+//Downloads.statusMap.set('fa', {fname:'File',transfered:1,size:1000,tfRate:500})
 component = {
   oninit: function() {
     rs.setBackgroundTask(backgroundCallback, 1000, isComponentActive);
@@ -143,13 +160,16 @@ component = {
         m('hr'),
         Array.from(Downloads.statusMap, function(fileStatus) {
           let info = fileStatus[1];
+            console.log(info);
           let progress = info.transfered / info.size * 100;
           return m('.file-view', [
-            info.name,
-            makeFriendlyUnit(info.size),
-            makeFriendlyUnit(info.tfRate * 1024) + '/s',
-            info.download_status,
+            m('p', info.fname),
+            actionButton(info, 'cancel'),
+            actionButton(info, info.downloadStatus ===
+              FT_STATE_PAUSED ? 'resume' : 'pause'),
             progressBar(progress),
+            m('span', makeFriendlyUnit(info.size)),
+            m('span', makeFriendlyUnit(info.tfRate * 1024) + '/s'),
           ]);
         }),
       ]),

webui-src/app/theme.css

@@ -46,6 +46,10 @@ button {
     outline: none;
     box-shadow: inset 3px 3px 0 #0d69ac;
 }
+button.red {
+    background: #f00202;
+    box-shadow: inset -3px -3px 0 #bd0909;
+}
 
 table {
     padding: 20px;
@@ -97,7 +101,7 @@ table {
 .progressbar {
     width: 100%;
     border-radius: 500px;
-    background-color: white;
+    background-color: #eef3f6;
     position: relative;
     text-align: left;
 }.progressbar:before {
@@ -108,8 +112,9 @@ table {
 }.progress-status {
     display: inline-block;
     height: 100%;
+    padding: 5px;
     border-radius: 500px;
-    color: #333;
+    color: #555;
     background-color: #3ba4d7;
     text-align: center;
 }
@@ -150,6 +155,11 @@ Animations
     animation: fadein 0.5s;
 }
 
+@keyframes swipe-from-left {
+    from { margin-left: 100%; }
+    to { margin-left: 0; }
+}
+
 @keyframes expand-left-border {
     from { border-left: 0; }
     to   { border-left: 5px solid #3ba4d7; }
@@ -215,11 +225,22 @@ a.tab-menu-item {
 
 /* View for upload/download file information */
 .file-view {
+    width: 90%;
     border-radius: 10px;
     border: 1px solid #ccc;
-    background-color: white;
-    margin-top: 1em;
+    margin-top: 2em;
     padding: 1em;
+    animation: swipe-from-left 0.5s;
+}.file-view > p {
+    margin: 0.5em;
+    font-size: 1.1em;
+}.file-view > span {
+    margin: 0 1em;
+    font-size: 0.9em;
+}.file-view > .progressbar {
+    width: 70%;
+}.file-view button {
+    float: right;
 }
 
 /* Sidebar from config panel */