From 27fc51da488edf6959fdf08840c608a6a39f7693 Mon Sep 17 00:00:00 2001 From: Keivan Beigi Date: Tue, 14 May 2013 18:17:24 -0700 Subject: [PATCH] Cleaned up modals in the UI. added empty modal for episode info --- UI/Controller.js | 24 ++------------ UI/Episode/Layout.js | 9 +++++ UI/Episode/Search/Layout.js | 10 ++++++ UI/Episode/Search/LayoutTemplate.html | 12 +++++++ UI/Series/Delete/DeleteSeriesView.js | 2 -- UI/Series/Details/EpisodeDetailCell.js | 20 +++++++++++ UI/Series/Details/SeasonLayout.js | 15 ++++++--- UI/Series/Edit/EditSeriesView.js | 2 -- UI/Series/Index/List/ItemView.js | 9 ++--- UI/Series/Index/Posters/ItemView.js | 9 ++--- UI/Series/Index/Table/Row.js | 10 ++---- .../Quality/Profile/EditQualityProfileView.js | 2 -- .../Quality/Profile/QualityProfileView.js | 9 ++--- UI/Shared/Modal/Region.js | 33 +++++++++++++++++++ UI/Shared/ModalRegion.js | 7 ++-- UI/app.js | 12 ++++--- 16 files changed, 118 insertions(+), 67 deletions(-) create mode 100644 UI/Episode/Layout.js create mode 100644 UI/Episode/Search/Layout.js create mode 100644 UI/Episode/Search/LayoutTemplate.html create mode 100644 UI/Series/Details/EpisodeDetailCell.js create mode 100644 UI/Shared/Modal/Region.js diff --git a/UI/Controller.js b/UI/Controller.js index 8312cc968..e86e42d3c 100644 --- a/UI/Controller.js +++ b/UI/Controller.js @@ -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(); }); diff --git a/UI/Episode/Layout.js b/UI/Episode/Layout.js new file mode 100644 index 000000000..b12afc538 --- /dev/null +++ b/UI/Episode/Layout.js @@ -0,0 +1,9 @@ +"use strict"; +define(['app'], function () { + + NzbDrone.Episode.Layout = Backbone.Marionette.ItemView.extend({ + template: 'Episode/Search/LayoutTemplate' + + }); + +}); \ No newline at end of file diff --git a/UI/Episode/Search/Layout.js b/UI/Episode/Search/Layout.js new file mode 100644 index 000000000..4cfbc24e5 --- /dev/null +++ b/UI/Episode/Search/Layout.js @@ -0,0 +1,10 @@ +"use strict"; +define(['app'], function () { + + NzbDrone.Episode.Search.Layout = Backbone.Marionette.Layout.extend({ + template: 'Episode/Search/LayoutTemplate' + + + }); + +}); \ No newline at end of file diff --git a/UI/Episode/Search/LayoutTemplate.html b/UI/Episode/Search/LayoutTemplate.html new file mode 100644 index 000000000..ddcf6d049 --- /dev/null +++ b/UI/Episode/Search/LayoutTemplate.html @@ -0,0 +1,12 @@ +
+ +

Delete: {{title}}

+
+
+

Searching for episodes!!!

+
+
+ + +
+ diff --git a/UI/Series/Delete/DeleteSeriesView.js b/UI/Series/Delete/DeleteSeriesView.js index 1a9243615..f3bfdf890 100644 --- a/UI/Series/Delete/DeleteSeriesView.js +++ b/UI/Series/Delete/DeleteSeriesView.js @@ -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' diff --git a/UI/Series/Details/EpisodeDetailCell.js b/UI/Series/Details/EpisodeDetailCell.js new file mode 100644 index 000000000..2c64e9332 --- /dev/null +++ b/UI/Series/Details/EpisodeDetailCell.js @@ -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(''); + return this; + }, + + showDetails: function () { + var view = new NzbDrone.Episode.Layout({ model: this.model }); + NzbDrone.modalRegion.show(view); + } + }); +}); diff --git a/UI/Series/Details/SeasonLayout.js b/UI/Series/Details/SeasonLayout.js index f6bee513c..9b57c0212 100644 --- a/UI/Series/Details/SeasonLayout.js +++ b/UI/Series/Details/SeasonLayout.js @@ -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() } ], diff --git a/UI/Series/Edit/EditSeriesView.js b/UI/Series/Edit/EditSeriesView.js index 1cb8f01d2..640356ec4 100644 --- a/UI/Series/Edit/EditSeriesView.js +++ b/UI/Series/Edit/EditSeriesView.js @@ -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', diff --git a/UI/Series/Index/List/ItemView.js b/UI/Series/Index/List/ItemView.js index 2359d4965..24f93743d 100644 --- a/UI/Series/Index/List/ItemView.js +++ b/UI/Series/Index/List/ItemView.js @@ -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) { diff --git a/UI/Series/Index/Posters/ItemView.js b/UI/Series/Index/Posters/ItemView.js index f12a74eb5..9420cfa36 100644 --- a/UI/Series/Index/Posters/ItemView.js +++ b/UI/Series/Index/Posters/ItemView.js @@ -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 () { diff --git a/UI/Series/Index/Table/Row.js b/UI/Series/Index/Table/Row.js index ca7c0d901..455e98a99 100644 --- a/UI/Series/Index/Table/Row.js +++ b/UI/Series/Index/Table/Row.js @@ -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); } }); \ No newline at end of file diff --git a/UI/Settings/Quality/Profile/EditQualityProfileView.js b/UI/Settings/Quality/Profile/EditQualityProfileView.js index 791772820..86af8ac24 100644 --- a/UI/Settings/Quality/Profile/EditQualityProfileView.js +++ b/UI/Settings/Quality/Profile/EditQualityProfileView.js @@ -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' diff --git a/UI/Settings/Quality/Profile/QualityProfileView.js b/UI/Settings/Quality/Profile/QualityProfileView.js index 6aa240d02..4bab5441f 100644 --- a/UI/Settings/Quality/Profile/QualityProfileView.js +++ b/UI/Settings/Quality/Profile/QualityProfileView.js @@ -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); } }); }); diff --git a/UI/Shared/Modal/Region.js b/UI/Shared/Modal/Region.js new file mode 100644 index 000000000..42ec1e586 --- /dev/null +++ b/UI/Shared/Modal/Region.js @@ -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'); + } + }); +}); \ No newline at end of file diff --git a/UI/Shared/ModalRegion.js b/UI/Shared/ModalRegion.js index 7afbbc02c..bf9ab9811 100644 --- a/UI/Shared/ModalRegion.js +++ b/UI/Shared/ModalRegion.js @@ -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; }); diff --git a/UI/app.js b/UI/app.js index 20d55e1bc..d2265164f 100644 --- a/UI/app.js +++ b/UI/app.js @@ -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();