From 47b132360c9aaf5d2ce3ea00dc66a031feee8430 Mon Sep 17 00:00:00 2001 From: Mark McDowall <markus.mcd5@gmail.com> Date: Sat, 30 Aug 2014 17:15:39 -0700 Subject: [PATCH] New: show number of items in queue over history icon --- src/UI/Content/navbar.less | 12 +++--- src/UI/Content/variables.less | 1 + src/UI/History/Queue/QueueView.js | 37 +++++++++++++++++++ .../Navbar/{NavbarView.js => NavbarLayout.js} | 7 +++- src/UI/Navbar/NavbarLayoutTemplate.hbs | 4 +- src/UI/app.js | 6 +-- 6 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 src/UI/History/Queue/QueueView.js rename src/UI/Navbar/{NavbarView.js => NavbarLayout.js} (87%) diff --git a/src/UI/Content/navbar.less b/src/UI/Content/navbar.less index 0989567fc..4aee6c684 100644 --- a/src/UI/Content/navbar.less +++ b/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 { diff --git a/src/UI/Content/variables.less b/src/UI/Content/variables.less index f320e3498..4b898e1d0 100644 --- a/src/UI/Content/variables.less +++ b/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})'; diff --git a/src/UI/History/Queue/QueueView.js b/src/UI/History/Queue/QueueView.js new file mode 100644 index 000000000..64622ba62 --- /dev/null +++ b/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; + } + }); + }); diff --git a/src/UI/Navbar/NavbarView.js b/src/UI/Navbar/NavbarLayout.js similarity index 87% rename from src/UI/Navbar/NavbarView.js rename to src/UI/Navbar/NavbarLayout.js index d6af8d16a..8a2cd7770 100644 --- a/src/UI/Navbar/NavbarView.js +++ b/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) { diff --git a/src/UI/Navbar/NavbarLayoutTemplate.hbs b/src/UI/Navbar/NavbarLayoutTemplate.hbs index 38168a440..ec5252757 100644 --- a/src/UI/Navbar/NavbarLayoutTemplate.hbs +++ b/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"> diff --git a/src/UI/app.js b/src/UI/app.js index 4d8691952..7b54303f5 100644 --- a/src/UI/app.js +++ b/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'); });