New: show number of items in queue over history icon

src/UI/Content/navbar.less

@@ -117,11 +117,13 @@
       }
     }
 
-    .health {
+    .navbar-info {
       .label {
-        position : absolute;
-        top      : 10px;
-        right    : 10px;
+        position      : absolute;
+        top           : 10px;
+        right         : 10px;
+        padding-left  : 4px;
+        padding-right : 4px;
       }
     }
   }
@@ -141,7 +143,7 @@
         background-color: transparent;
       }
 
-      .health {
+      .navbar-info  {
         margin-left: 5px;
 
         .label {

src/UI/Content/variables.less

@@ -3,6 +3,7 @@
 @nzbdronePurple : #7932ea;
 @nzbdronePink   : #F43565;
 @droneTeal      : #35c5f4;
+@brand-info     : @droneTeal;
 
 @screen-tn-max: @screen-xs-min - 1;
 @tn: ~'(max-width: @{screen-tn-max})';

src/UI/History/Queue/QueueView.js

@@ -0,0 +1,37 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'marionette',
+        'History/Queue/QueueCollection'
+    ], function (_, Marionette, QueueCollection) {
+        return Marionette.ItemView.extend({
+            tagName: 'span',
+
+            initialize: function () {
+                this.listenTo(QueueCollection, 'sync', this.render);
+                QueueCollection.fetch();
+            },
+
+            render: function () {
+                this.$el.empty();
+
+                if (QueueCollection.length === 0) {
+                    return this;
+                }
+
+                var count = QueueCollection.length;
+                var label = 'label-info';
+                var errors = QueueCollection.some(function (model) {
+                    return model.get('errorMessage') !== '';
+                });
+
+                if (errors) {
+                    label = 'label-danger';
+                }
+
+                this.$el.html('<span class="label {0}">{1}</span>'.format(label, count));
+                return this;
+            }
+        });
+    });

src/UI/Navbar/NavbarLayout.js

@@ -4,13 +4,15 @@ define(
         'marionette',
         'jquery',
         'Health/HealthView',
+        'History/Queue/QueueView',
         'Navbar/Search'
-    ], function (Marionette, $, HealthView) {
+    ], function (Marionette, $, HealthView, QueueView) {
         return Marionette.Layout.extend({
             template: 'Navbar/NavbarLayoutTemplate',
 
             regions: {
-                health: '#x-health'
+                health : '#x-health',
+                queue  : '#x-queue-count'
             },
 
             ui: {
@@ -25,6 +27,7 @@ define(
             onRender: function () {
                 this.ui.search.bindSearch();
                 this.health.show(new HealthView());
+                this.queue.show(new QueueView());
             },
 
             onClick: function (event) {

src/UI/Navbar/NavbarLayoutTemplate.hbs

@@ -23,10 +23,10 @@
             <ul class="nav navbar-nav">
                 <li><a href="{{UrlBase}}/" class="x-series-nav"><i class="icon-play"></i> Series</a></li>
                 <li><a href="{{UrlBase}}/calendar" class="x-calendar-nav"><i class="icon-calendar"></i> Calendar</a></li>
-                <li><a href="{{UrlBase}}/history" class="x-history-nav"><i class="icon-time"></i> History</a></li>
+                <li><a href="{{UrlBase}}/history" class="x-history-nav"><i class="icon-time"></i> History<span id="x-queue-count" class="navbar-info"></span></a></li>
                 <li><a href="{{UrlBase}}/wanted" class="x-wanted-nav"><i class="icon-warning-sign"></i> Wanted</a></li>
                 <li><a href="{{UrlBase}}/settings" class="x-settings-nav"><i class="icon-cogs"></i> Settings</a></li>
-                <li><a href="{{UrlBase}}/system" class="x-system-nav"><i class="icon-laptop"></i> System<span id="x-health" class="health"></span></a></li>
+                <li><a href="{{UrlBase}}/system" class="x-system-nav"><i class="icon-laptop"></i> System<span id="x-health" class="navbar-info"></span></a></li>
                 <li><a href="http://nzbdrone.com/#donate" target="_blank"><i class="icon-nd-donate"></i> Donate</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">

src/UI/app.js

@@ -235,7 +235,7 @@ define(
         'marionette',
         'jQuery/RouteBinder',
         'Shared/SignalRBroadcaster',
-        'Navbar/NavbarView',
+        'Navbar/NavbarLayout',
         'AppLayout',
         'Series/SeriesController',
         'Router',
@@ -251,7 +251,7 @@ define(
                  Marionette,
                  RouteBinder,
                  SignalRBroadcaster,
-                 NavbarView,
+                 NavbarLayout,
                  AppLayout,
                  SeriesController,
                  Router,
@@ -282,7 +282,7 @@ define(
         app.addInitializer(function () {
             Backbone.history.start({ pushState: true, root: serverStatusModel.get('urlBase') });
             RouteBinder.bind();
-            AppLayout.navbarRegion.show(new NavbarView());
+            AppLayout.navbarRegion.show(new NavbarLayout());
             $('body').addClass('started');
         });