New: show number of items in queue over history icon

This commit is contained in:
Mark McDowall 2014-08-30 17:15:39 -07:00
parent 8bb2659fcd
commit 47b132360c
6 changed files with 55 additions and 12 deletions

View File

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

View File

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

View File

@ -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;
}
});
});

View File

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

View File

@ -23,10 +23,10 @@
<ul class="nav navbar-nav"> <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}}/" 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}}/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}}/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}}/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> <li><a href="http://nzbdrone.com/#donate" target="_blank"><i class="icon-nd-donate"></i> Donate</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">

View File

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