Cleaned up modals in the UI.

added empty modal for episode info
This commit is contained in:
Keivan Beigi 2013-05-14 18:17:24 -07:00
parent 7cf7b5e051
commit 27fc51da48
16 changed files with 118 additions and 67 deletions

View File

@ -1,16 +1,15 @@
"use strict";
define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout',
define(['app', 'AddSeries/AddSeriesLayout',
'Series/Index/SeriesIndexLayout',
'Calendar/CalendarCollectionView', 'Shared/NotificationView',
'Shared/NotFoundView', 'MainMenuView',
'Series/Details/SeriesDetailsView', 'Series/EpisodeCollection',
'Settings/SettingsLayout', 'Missing/MissingLayout',
'History/HistoryLayout'],
function (app, modalRegion) {
function () {
var controller = Backbone.Marionette.Controller.extend({
series: function () {
series : function () {
this._setTitle('NzbDrone');
NzbDrone.mainRegion.show(new NzbDrone.Series.Index.SeriesIndexLayout());
},
@ -74,23 +73,6 @@ define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout',
}
});
//Modal dialog initializer
NzbDrone.addInitializer(function () {
NzbDrone.addRegions({ modalRegion: modalRegion });
NzbDrone.vent.on(NzbDrone.Events.OpenModalDialog, function (options) {
console.log('opening modal dialog ' + options.view.template);
NzbDrone.modalRegion.show(options.view);
});
NzbDrone.vent.on(NzbDrone.Events.CloseModalDialog, function () {
console.log('closing modal dialog');
NzbDrone.modalRegion.close();
});
});
return new controller();
});

9
UI/Episode/Layout.js Normal file
View File

@ -0,0 +1,9 @@
"use strict";
define(['app'], function () {
NzbDrone.Episode.Layout = Backbone.Marionette.ItemView.extend({
template: 'Episode/Search/LayoutTemplate'
});
});

View File

@ -0,0 +1,10 @@
"use strict";
define(['app'], function () {
NzbDrone.Episode.Search.Layout = Backbone.Marionette.Layout.extend({
template: 'Episode/Search/LayoutTemplate'
});
});

View File

@ -0,0 +1,12 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Delete: {{title}}</h3>
</div>
<div class="modal-body">
<h1>Searching for episodes!!!</h1>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">cancel</button>
<button class="btn btn-danger x-confirm-delete">delete</button>
</div>

View File

@ -3,8 +3,6 @@ define(['app', 'Series/SeriesModel'], function () {
NzbDrone.Series.Delete.DeleteSeriesView = Backbone.Marionette.ItemView.extend({
template : 'Series/Delete/DeleteSeriesTemplate',
tagName : 'div',
className: "modal",
events: {
'click .x-confirm-delete': 'removeSeries'

View File

@ -0,0 +1,20 @@
"use strict";
define(['app', 'Episode/Layout'], function () {
NzbDrone.Series.Details.EpisodeDetailCell = Backgrid.Cell.extend({
events: {
'click': 'showDetails'
},
render: function () {
this.$el.empty();
this.$el.html('<i class="icon-ellipsis-vertical x-detail-icon"/>');
return this;
},
showDetails: function () {
var view = new NzbDrone.Episode.Layout({ model: this.model });
NzbDrone.modalRegion.show(view);
}
});
});

View File

@ -1,5 +1,5 @@
'use strict';
define(['app'], function () {
define(['app', 'Series/Details/EpisodeDetailCell'], function () {
NzbDrone.Series.Details.SeasonLayout = Backbone.Marionette.Layout.extend({
template: 'Series/Details/SeasonLayoutTemplate',
@ -8,6 +8,11 @@ define(['app'], function () {
},
columns: [
{
name : 'details',
editable: false,
cell : NzbDrone.Series.Details.EpisodeDetailCell
},
{
name : 'episodeNumber',
label : '#',
@ -22,10 +27,10 @@ define(['app'], function () {
cell : 'string'
},
{
name : 'airDate',
label : 'Air Date',
editable : false,
cell : 'date'
name : 'airDate',
label : 'Air Date',
editable: false,
cell : 'date'
//formatter: new Backgrid.AirDateFormatter()
}
],

View File

@ -3,8 +3,6 @@ define(['app', 'Series/SeriesModel', 'Series/Delete/DeleteSeriesView', 'Quality/
NzbDrone.Series.Edit.EditSeriesView = Backbone.Marionette.ItemView.extend({
template : 'Series/Edit/EditSeriesTemplate',
tagName : 'div',
className: "modal",
ui: {
progressbar : '.progress .bar',

View File

@ -28,17 +28,12 @@ define([
editSeries: function () {
var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
},
removeSeries: function () {
var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
},
showEpisodeList: function (e) {

View File

@ -37,17 +37,12 @@ define([
editSeries: function () {
var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
},
removeSeries: function () {
var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
},
posterHoverAction: function () {

View File

@ -1,3 +1,4 @@
"use strict";
NzbDrone.Series.Index.Table.Row = Backgrid.Row.extend({
events: {
'click .x-edit' : 'editSeries',
@ -6,16 +7,11 @@ NzbDrone.Series.Index.Table.Row = Backgrid.Row.extend({
editSeries: function () {
var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
},
removeSeries: function () {
var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
}
});

View File

@ -3,8 +3,6 @@ define(['app', 'Quality/QualityProfileModel'], function () {
NzbDrone.Settings.Quality.Profile.EditQualityProfileView = Backbone.Marionette.ItemView.extend({
template : 'Settings/Quality/Profile/EditQualityProfileTemplate',
tagName : 'div',
className: "modal",
events: {
'click .x-save': 'saveQualityProfile'

View File

@ -22,17 +22,12 @@ define([
editSeries: function () {
var view = new NzbDrone.Settings.Quality.Profile.EditQualityProfileView({ model: this.model});
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
},
removeSeries: function () {
var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
NzbDrone.modalRegion.show(view);
}
});
});

33
UI/Shared/Modal/Region.js Normal file
View File

@ -0,0 +1,33 @@
"use strict";
define(function () {
return Backbone.Marionette.Region.extend({
el: "#modal-region",
constructor: function () {
_.bindAll(this);
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on("show", this.showModal, this);
},
getEl: function (selector) {
var $el = $(selector);
$el.on("hidden", this.close);
return $el;
},
showModal: function (view) {
view.on("close", this.hideModal, this);
this.$el.addClass('modal hide fade');
//need tab index so close on escape works
//https://github.com/twitter/bootstrap/issues/4663
this.$el.attr('tabindex','-1');
this.$el.modal({'show': true, 'keyboard': true});
},
hideModal: function () {
this.$el.modal('hide');
}
});
});

View File

@ -1,5 +1,6 @@
define(['app'], function () {
return Backbone.Marionette.Region.extend({
"use strict";
define('modal', function () {
var modal = Backbone.Marionette.Region.extend({
el: "#modal-region",
constructor: function () {
@ -23,6 +24,8 @@
this.$el.modal('hide');
}
});
return modal;
});

View File

@ -26,7 +26,7 @@ require.config({
}
});
define('app', function () {
define('app', ['shared/modal/region'], function (ModalRegion) {
window.NzbDrone = new Backbone.Marionette.Application();
window.NzbDrone.Config = {};
@ -49,6 +49,10 @@ define('app', function () {
RootFolders: {}
};
window.NzbDrone.Episode = {
Search: {}
};
window.NzbDrone.Quality = {};
@ -77,9 +81,6 @@ define('app', function () {
window.NzbDrone.History = {};
window.NzbDrone.Events = {
//TODO: Move to commands
OpenModalDialog : 'openModal',
CloseModalDialog: 'closeModal',
SeriesAdded : 'seriesAdded'
};
@ -99,7 +100,8 @@ define('app', function () {
NzbDrone.addRegions({
mainRegion : '#main-region',
notificationRegion: '#notification-region'
notificationRegion: '#notification-region',
modalRegion : ModalRegion
});
window.NzbDrone.start();