6 files changed, 32 insertions, 13 deletions
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index 2a4adf0e7..865812e41 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -186,6 +186,11 @@
     .gradient(top, @yellow, @yellowDark);
     color: @dark;
     border-color: @greenDark;
+
+    .file-row.downloading .bar {
+        .gradient(top, @green, @greenLight);
+    }
+
   }
 
   img { // plugin logo
@@ -255,7 +260,7 @@
   }
 
   .bar {
-    .gradient(top, @green, @greenLight);
+    .gradient(top, @yellow, @yellowDark);
     color: @light;
   }
 
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 260f9fa52..baa8cc413 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -182,10 +182,7 @@ header .logo {
   float: right; //  font-family: SansationRegular, sans-serif;
   margin: 10px 8px 0;
   line-height: 18px;
-  font-size: small; //  i {
-//    margin-top: 0;
-//    vertical-align: text-bottom;
-//  }
+  font-size: small;
 
   .btn {
     margin-top: 6px;
@@ -234,12 +231,15 @@ header .logo {
 
 #progress-area {
   position: relative;
-  text-align: center;
   float: right;
   width: 26%;
   margin-right: 15px;
   line-height: 16px;
 
+  #progress-info {
+    padding-left: 5px;
+  }
+
   .popover { //    display: block;
     max-width: none;
     width: 120%;
diff --git a/module/web/static/js/helpers/fileHelper.js b/module/web/static/js/helpers/fileHelper.js
index d7cf03f53..dde831bdd 100644
--- a/module/web/static/js/helpers/fileHelper.js
+++ b/module/web/static/js/helpers/fileHelper.js
@@ -37,7 +37,7 @@ define('helpers/fileHelper', ['handlebars', 'utils/apitypes'],
             } else if (file.finished)
                 s = "<i class='iconf-ok'></i>&nbsp;" + msg;
             else if(file.downloading)
-                s= "<div class='progress'><div class='bar' style='width: 50%'></div></div>";
+                s= "<div class='progress'><div class='bar' style='width: " + file.progress + "%'></div></div>";
             else
                 s = msg;
 
diff --git a/module/web/static/js/models/File.js b/module/web/static/js/models/File.js
index 2ac6c05f5..22ff231cc 100644
--- a/module/web/static/js/models/File.js
+++ b/module/web/static/js/models/File.js
@@ -22,7 +22,8 @@ define(['jquery', 'backbone', 'underscore', 'utils/apitypes'], function($, Backb
 
             // UI attributes
             selected: false,
-            visible: true
+            visible: true,
+            progress: 0
         },
 
 
diff --git a/module/web/static/js/models/Progress.js b/module/web/static/js/models/Progress.js
index c6a2fc4d1..d2d54bdb4 100644
--- a/module/web/static/js/models/Progress.js
+++ b/module/web/static/js/models/Progress.js
@@ -16,6 +16,12 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
             download: null
         },
 
+        getPercent: function() {
+            if (this.get('total') > 0)
+                return Math.round(this.get('done') * 100 / this.get('total'));
+            return  0;
+        },
+
         // Model Constructor
         initialize: function() {
 
@@ -28,10 +34,7 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
 
         toJSON: function(options) {
             var obj = Backbone.Model.prototype.toJSON.call(this, options);
-            if (obj.total > 0)
-                obj.percent = Math.round(obj.done * 100 / obj.total);
-            else
-                obj.percent = 0;
+            obj.percent = this.getPercent();
 
             return obj;
         },
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index dddae4705..d9c56b332 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -6,7 +6,7 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
             el: 'header',
 
             events: {
-                'click i.iconf-list': 'toggle_taskList',
+                'click .iconf-list': 'toggle_taskList',
                 'click .popover .close': 'hide_taskList',
                 'click .btn-grabber': 'open_grabber'
             },
@@ -169,6 +169,7 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
             },
 
             onProgressUpdate: function(progress) {
+                // generate a unique id
                 _.each(progress, function(prog) {
                     if (prog.download)
                         prog.pid = prog.download.fid;
@@ -177,6 +178,15 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                 });
 
                 this.progressList.update(progress);
+                // update currently open files with progress
+                this.progressList.each(function(prog) {
+                    if(prog.isDownload() && App.dashboard.files){
+                        var file = App.dashboard.files.get(prog.get('download').fid);
+                        if (file)
+                            file.set('progress', prog.getPercent());
+                    }
+                });
+                // TODO: only render when changed
                 this.render();
             },