Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed season menu in favour of minimizing seasons

This commit is contained in:
Mark McDowall 2013-09-04 22:01:22 -07:00
parent f00c0f0cca
commit 4bcd5ce5c6
10 changed files with 91 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
UI/Content/theme.less
View File

@ -12,7 +12,7 @@
@import "../Shared/Styles/clickable";
@import "../Shared/Styles/card";
.progress {
.progress.episode-progress {
width : 125px;
position : relative;
margin-bottom : 2px;
@ -21,6 +21,7 @@
font-size : 11.844px;
font-weight : bold;
text-align : center;
cursor : default;
}
.progressbar-back-text {
@ -33,6 +34,7 @@
display : block;
width : 125px;
}
.bar {
position : absolute;
overflow : hidden;

74
UI/Series/Details/SeasonLayout.js
View File

@ -8,8 +8,9 @@ define(
'Cells/EpisodeTitleCell',
'Cells/RelativeDateCell',
'Cells/EpisodeStatusCell',
'Shared/Actioneer'
], function (App, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, Actioneer) {
'Shared/Actioneer',
'moment'
], function (App, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, Actioneer, Moment) {
return Marionette.Layout.extend({
template: 'Series/Details/SeasonLayoutTemplate',
@ -21,12 +22,14 @@ define(
events: {
'click .x-season-search' : '_seasonSearch',
'click .x-season-monitored': '_seasonMonitored',
'click .x-season-rename' : '_seasonRename'
'click .x-season-monitored' : '_seasonMonitored',
'click .x-season-rename' : '_seasonRename',
'click .x-show-hide-episodes' : '_showHideEpisodes',
'dblclick .series-season h2' : '_showHideEpisodes'
},
regions: {
episodeGrid: '#x-episode-grid'
episodeGrid: '.x-episode-grid'
},
columns:
@ -67,6 +70,8 @@ define(
}
],
templateHelpers: {},
initialize: function (options) {
if (!options.episodeCollection) {
@ -76,6 +81,9 @@ define(
this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
this.series = options.series;
this.showingEpisodes = this._shouldShowEpisodes();
this.templateHelpers.showingEpisodes = this.showingEpisodes;
this.listenTo(this.model, 'sync', function () {
this._afterSeasonMonitored();
}, this);
@ -86,11 +94,9 @@ define(
},
onRender: function () {
this.episodeGrid.show(new Backgrid.Grid({
columns : this.columns,
collection: this.episodeCollection,
className : 'table table-hover season-grid'
}));
if (this.showingEpisodes) {
this._showEpisodes();
}
this._setSeasonMonitoredState();
},
@ -159,6 +165,54 @@ define(
_afterRename: function () {
App.vent.trigger(App.Events.SeasonRenamed, { series: this.series, seasonNumber: this.model.get('seasonNumber') });
},
_showEpisodes: function () {
this.episodeGrid.show(new Backgrid.Grid({
columns : this.columns,
collection: this.episodeCollection,
className : 'table table-hover season-grid'
}));
},
_shouldShowEpisodes: function () {
var startDate = Moment().add('month', -1);
var endDate = Moment().add('year', 1);
var result = this.episodeCollection.some(function(episode) {
var airDate = episode.get('airDateUtc');
if (airDate)
{
var airDateMoment = Moment(airDate);
if (airDateMoment.isAfter(startDate) && airDateMoment.isBefore(endDate)) {
return true;
}
}
return false;
});
return result;
},
_showHideEpisodes: function () {
if (this.showingEpisodes) {
this.showingEpisodes = false;
this.episodeGrid.$el.slideUp();
this.episodeGrid.close();
}
else {
this.showingEpisodes = true;
this._showEpisodes();
this.episodeGrid.$el.slideDown();
}
this.templateHelpers.showingEpisodes = this.showingEpisodes;
this.render();
}
});
});

13
UI/Series/Details/SeasonLayoutTemplate.html
View File

@ -1,15 +1,26 @@
<div class="series-season" id="season-{{seasonNumber}}">
<h2>
<i class="x-season-monitored clickable" title="Toggle season monitored status"/>
{{#if seasonNumber}}
Season {{seasonNumber}}
{{else}}
Specials
{{/if}}
<span class="season-actions pull-right">
<i class="icon-nd-rename x-season-rename" title="Rename all episodes in season {{seasonNumber}}"/>
<i class="icon-search x-season-search" title="Search for all episodes in season {{seasonNumber}}"/>
</span>
</h2>
<div id="x-episode-grid"/>
<div class="x-episode-grid"></div>
<div class="show-hide-episodes x-show-hide-episodes">
<h4>
{{#if showingEpisodes}}
<i class="icon-chevron-sign-up"/> Hide Episodes
{{else}}
<i class="icon-chevron-sign-down"/> Show Episodes
{{/if}}
</h4>
</div>
</div>

31
UI/Series/Details/SeasonMenu/CollectionView.js
View File

@ -1,31 +0,0 @@
'use strict';
define(
[
'marionette',
'Series/Details/SeasonMenu/ItemView'
], function (Marionette, ItemView) {
return Marionette.CollectionView.extend({
itemView: ItemView,
initialize: function (options) {
if (!options.episodeCollection) {
throw 'episodeCollection is needed';
}
this.episodeCollection = options.episodeCollection;
},
itemViewOptions: function () {
return {
episodeCollection: this.episodeCollection
};
},
appendHtml: function(collectionView, itemView){
var childrenContainer = $(collectionView.childrenContainer || collectionView.el);
childrenContainer.prepend(itemView.el);
}
});
});

88
UI/Series/Details/SeasonMenu/ItemView.js
View File

@ -1,88 +0,0 @@
'use strict';
define(
[
'marionette',
'Shared/Actioneer'
], function (Marionette, Actioneer) {
return Marionette.ItemView.extend({
template: 'Series/Details/SeasonMenu/ItemViewTemplate',
tagName : 'span',
ui: {
seasonMonitored: '.x-season-monitored'
},
events: {
'click .x-season-monitored': '_seasonMonitored',
'click .x-text': '_gotoSeason'
},
initialize: function (options) {
if (!options.episodeCollection) {
throw 'episodeCollection is needed';
}
this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
var allDownloaded = _.all(this.episodeCollection.models, function (model) {
var hasFile = model.get('hasFile');
return hasFile;
});
this.model.set({
allFilesDownloaded: allDownloaded
});
this.listenTo(this.model, 'sync', function () {
this.render();
}, this);
},
onRender: function () {
this._setSeasonMonitoredState();
},
_seasonSearch: function () {
Actioneer.ExecuteCommand({
command : 'seasonSearch',
properties : {
seriesId : this.model.get('seriesId'),
seasonNumber: this.model.get('seasonNumber')
},
element : this.ui.seasonSearch,
errorMessage: 'Search for season {0} failed'.format(this.model.get('seasonNumber')),
startMessage: 'Search for season {0} started'.format(this.model.get('seasonNumber'))
});
},
_seasonMonitored: function (e) {
e.preventDefault();
var name = 'monitored';
this.model.set(name, !this.model.get(name));
Actioneer.SaveModel({
context : this,
element : this.ui.seasonMonitored
});
},
_setSeasonMonitoredState: function () {
this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
if (this.model.get('monitored')) {
this.ui.seasonMonitored.addClass('icon-bookmark');
this.ui.seasonMonitored.removeClass('icon-bookmark-empty');
}
else {
this.ui.seasonMonitored.addClass('icon-bookmark-empty');
this.ui.seasonMonitored.removeClass('icon-bookmark');
}
},
_gotoSeason: function () {
window.location.hash = '#season-' + this.model.get('seasonNumber');
}
});
});

14
UI/Series/Details/SeasonMenu/ItemViewTemplate.html
View File

@ -1,14 +0,0 @@
{{#if allFilesDownloaded}}
<span class="label label-info season-menu-item">
{{else}}
<span class="label label-white season-menu-item">
{{/if}}
<i class="x-season-monitored clickable" title="Toggle season monitored status"/>
<span class="x-text text" title="Go to season">
{{#if_eq seasonNumber compare=0}}
Specials
{{else}}
S{{Pad2 seasonNumber}}
{{/if_eq}}
</span>
</span>

8
UI/Series/Details/SeriesDetailsLayout.js
View File

@ -7,7 +7,6 @@ define(
'Series/EpisodeFileCollection',
'Series/SeasonCollection',
'Series/Details/SeasonCollectionView',
'Series/Details/SeasonMenu/CollectionView',
'Series/Details/InfoView',
'Shared/LoadingView',
'Shared/Actioneer',
@ -19,7 +18,6 @@ define(
EpisodeFileCollection,
SeasonCollection,
SeasonCollectionView,
SeasonMenuCollectionView,
InfoView,
LoadingView,
Actioneer) {
@ -29,7 +27,6 @@ define(
template : 'Series/Details/SeriesDetailsTemplate',
regions: {
seasonMenu: '#season-menu',
seasons : '#seasons',
info : '#info'
},
@ -200,11 +197,6 @@ define(
});*/
self.seasons.show(seasonCollectionView);
self.seasonMenu.show(new SeasonMenuCollectionView({
collection : self.seasonCollection,
episodeCollection: self.episodeCollection
}));
});
},

3
UI/Series/Details/SeriesDetailsTemplate.html
View File

@ -18,9 +18,6 @@
<div id="info" class="row">
</div>
<div class="row">
<div id="season-menu" class="season-menu"></div>
</div>
</div>
</div>
<div id="seasons"></div>

6
UI/Series/Index/EpisodeProgressPartial.html
View File

@ -1,12 +1,12 @@
{{#if_eq episodeFileCount compare=episodeCount}}
{{#if_eq status compare="continuing"}}
<div class="progress">
<div class="progress episode-progress">
{{else}}
<div class="progress progress-success">
<div class="progress progress-success episode-progress">
{{/if_eq}}
{{else}}
<div class="progress progress-danger">
<div class="progress progress-danger episode-progress">
{{/if_eq}}
<span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span>

24
UI/Series/series.less
View File

@ -48,26 +48,16 @@
.series-season {
.card;
margin : 80px 10px;
padding : 20px 40px;
margin : 30px 10px;
padding : 10px 25px;
.opacity(0.9);
}
.season-menu {
margin-top: 5px;
.show-hide-episodes {
.clickable();
text-align: center;
.season-menu-item {
.text {
.clickable;
}
a:hover {
text-decoration: none;
}
i:before {
width: 10px;
i {
.clickable();
}
}
}