added support for multi-button groups to toolbar

This commit is contained in:
kay.one 2013-04-23 22:56:51 -07:00 committed by Keivan Beigi
commit 19732ba31a
14 changed files with 115 additions and 49 deletions

View file

@ -0,0 +1,11 @@
"use strict";
define(['app', 'Shared/Toolbar/CommandView'], function () {
NzbDrone.Shared.Toolbar.ButtonGroupView = Backbone.Marionette.CollectionView.extend({
className: 'btn-group',
itemView : NzbDrone.Shared.Toolbar.CommandView
});
});

View file

@ -0,0 +1 @@
<i class="{{icon}}"/> {{title}}

View file

@ -0,0 +1,21 @@
"use strict";
define(['app'], function () {
NzbDrone.Shared.Toolbar.CommandView = Backbone.Marionette.ItemView.extend({
template : 'Shared/Toolbar/CommandTemplate',
className: 'btn',
events: {
'click': 'onClick'
},
onClick: function () {
window.alert('click');
}
});
});

View file

@ -0,0 +1,40 @@
"use strict";
define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollection'], function () {
NzbDrone.Shared.Toolbar.ToolbarLayout = Backbone.Marionette.Layout.extend({
template: 'Shared/Toolbar/ToolbarLayoutTemplate',
regions: {
left_1 : '.x-toolbar-left-1',
left_2 : '.x-toolbar-left-2',
right_1: '.x-toolbar-right-1',
right_2: '.x-toolbar-right-2'
},
initialize: function (options) {
this.left = options.left;
this.right = options.right;
},
onShow: function () {
if (this.left) {
_.each(this.left, this._showToolbarLeft, this);
}
if (this.right) {
_.each(this.right, this._showToolbarRight, this);
}
},
_showToolbarLeft: function (element, index) {
this['left_' + (index + 1).toString()].show(new NzbDrone.Shared.Toolbar.ButtonGroupView({collection: element}));
},
_showToolbarRight: function (element, index) {
this['right_' + (index + 1).toString()].show(new NzbDrone.Shared.Toolbar.ButtonGroupView({collection: element}));
}
});
});

View file

@ -0,0 +1,8 @@
<div class="pull-left page-toolbar">
<div class="x-toolbar-left-1 btn-group"/>
<div class="x-toolbar-left-2 btn-group"/>
</div>
<div class="pull-right page-toolbar">
<div class="x-toolbar-right-1 btn-group"/>
<div class="x-toolbar-right-2 btn-group"/>
</div>

View file

@ -1,18 +0,0 @@
 <div class="btn-group">
{{#commands}}
<a class="btn" href="{{target}}" data-target="0">
<i class="{{icon}}"/>
{{title}}
</a>
{{/commands}}
</div>
<div class="pull-right">
<div class="btn-group">
<a class="btn x-series-change-view x-series-show-table" href="#" title="Table" data-target="0"><i class="icon-table"></i></a>
<a class="btn x-series-change-view x-series-show-list" href="#" title="List" data-target="1"><i class="icon-list"></i></a>
</div>
</div>
<!--replace this with padding-->
<br/>
<br/>

View file

@ -1,21 +0,0 @@
"use strict";
define(['app', 'Shared/Toolbar/CommandCollection'], function () {
NzbDrone.Shared.Toolbar.ToolbarView = Backbone.Marionette.ItemView.extend({
template: 'Shared/Toolbar/ToolbarTemplate',
initialize: function () {
if (!this.collection) {
throw 'CommandCollection needs to be provided';
}
this.model = new Backbone.Model();
this.model.set('commands', this.collection.toJSON());
}
});
});