New: Progress bar for Activity: Queue

src/UI/Activity/Queue/ProgressCell.js

@@ -0,0 +1,29 @@
+'use strict';
+
+define(
+    [
+        'Cells/NzbDroneCell'
+    ], function (NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'progress-cell',
+
+            render: function () {
+                this.$el.empty();
+
+                if (this.cellValue) {
+
+                    var status = this.model.get('status').toLowerCase();
+
+                    if (status === 'downloading') {
+                        var progress = 100 - (this.model.get('sizeleft') / this.model.get('size') * 100);
+
+                        this.$el.html('<div class="progress" title="{0}%">'.format(progress.toFixed(1)) +
+                        '<div class="progress-bar progress-bar-purple" style="width: {0}%;"></div></div>'.format(progress));
+                    }
+                }
+
+                return this;
+            }
+        });
+    });

src/UI/Activity/Queue/QueueLayout.js

@@ -10,6 +10,7 @@ define(
         'Cells/QualityCell',
         'Activity/Queue/QueueStatusCell',
         'Activity/Queue/TimeleftCell',
+        'Activity/Queue/ProgressCell',
         'Shared/Grid/Pager'
     ], function (Marionette,
                  Backgrid,
@@ -20,6 +21,7 @@ define(
                  QualityCell,
                  QueueStatusCell,
                  TimeleftCell,
+                 ProgressCell,
                  GridPager) {
         return Marionette.Layout.extend({
             template: 'Activity/Queue/QueueLayoutTemplate',
@@ -66,6 +68,12 @@ define(
                         label     : 'Timeleft',
                         cell      : TimeleftCell,
                         cellValue : 'this'
+                    },
+                    {
+                        name      : 'episode',
+                        label     : 'Progress',
+                        cell      : ProgressCell,
+                        cellValue : 'this'
                     }
                 ],
 

src/UI/Cells/cells.less

@@ -81,7 +81,7 @@
   }
 }
 
-td.episode-status-cell, td.quality-cell, td.history-quality-cell {
+td.episode-status-cell, td.quality-cell, td.history-quality-cell, td.progress-cell {
   text-align: center;
   width: 80px;