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 {
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 {

View File

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

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',
'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) {

View File

@ -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">

View File

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