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('{1}'.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 @@