From d80d89e687094c4c3430376d76c9b8e0df631abf Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Fri, 31 Jan 2014 17:47:59 -0800 Subject: [PATCH] Calendar and series details show download progress --- src/UI/Calendar/CalendarView.js | 17 +++++++++++++++ src/UI/Calendar/calendar.less | 12 ++++++++--- src/UI/Cells/EpisodeStatusCell.js | 10 ++++++++- src/UI/Cells/cells.less | 6 ++++++ src/UI/Content/progress-bars.less | 36 +++++++++++++++++++++++++++++++ src/UI/Content/theme.less | 30 +------------------------- src/UI/Content/variables.less | 3 ++- 7 files changed, 80 insertions(+), 34 deletions(-) create mode 100644 src/UI/Content/progress-bars.less diff --git a/src/UI/Calendar/CalendarView.js b/src/UI/Calendar/CalendarView.js index 702a0a73c..e687abc90 100644 --- a/src/UI/Calendar/CalendarView.js +++ b/src/UI/Calendar/CalendarView.js @@ -43,6 +43,12 @@ define( eventRender : function (event, element) { self.$(element).addClass(event.statusLevel); self.$(element).children('.fc-event-inner').addClass(event.statusLevel); + + if (event.progress > 0) { + self.$(element).find('.fc-event-time') + .after('{0}%' + .format(event.progress.toFixed(0))); + } }, eventClick : function (event) { vent.trigger(vent.Commands.ShowEpisodeDetails, {episode: event.model}); @@ -85,6 +91,7 @@ define( end : end, allDay : false, statusLevel : _instance._getStatusLevel(model, end), + progress : _instance._getDownloadProgress(model), model : model }; @@ -129,6 +136,16 @@ define( _reloadCalendarEvents: function () { this.$el.fullCalendar('removeEvents'); this._setEventData(this.collection); + }, + + _getDownloadProgress: function (element) { + var downloading = QueueCollection.findEpisode(element.get('id')); + + if (!downloading) { + return 0; + } + + return 100 - (downloading.get('sizeleft') / downloading.get('size') * 100); } }); }); diff --git a/src/UI/Calendar/calendar.less b/src/UI/Calendar/calendar.less index 50c84e0b2..29d5a48bd 100644 --- a/src/UI/Calendar/calendar.less +++ b/src/UI/Calendar/calendar.less @@ -2,6 +2,7 @@ @import "../Content/Bootstrap/variables"; @import "../Content/Bootstrap/buttons"; @import "../Shared/Styles/clickable"; +@import "../Content/variables"; .calendar { th, td { @@ -100,7 +101,7 @@ } .purple { - border-color : #7932ea; + border-color : @nzbdronePurple; } .episode-title { @@ -148,7 +149,12 @@ } .purple { - border-color : #7932ea; - background-color : #7932ea; + border-color : @nzbdronePurple; + background-color : @nzbdronePurple; + } + + .downloading-progress { + margin-right: 3px; + font-size: 11px; } } diff --git a/src/UI/Cells/EpisodeStatusCell.js b/src/UI/Cells/EpisodeStatusCell.js index 8a7fc89ac..d8ab15259 100644 --- a/src/UI/Cells/EpisodeStatusCell.js +++ b/src/UI/Cells/EpisodeStatusCell.js @@ -57,7 +57,15 @@ define( var model = this.model; var downloading = QueueCollection.findEpisode(model.get('id')); - if (downloading || this.model.get('downloading')) { + if (downloading) { + var progress = 100 - (downloading.get('sizeleft') / downloading.get('size') * 100); + + this.$el.html('
'.format(progress.toFixed(1)) + + '
'.format(progress)); + return; + } + + else if (this.model.get('downloading')) { icon = 'icon-nd-downloading'; tooltip = 'Episode is downloading'; } diff --git a/src/UI/Cells/cells.less b/src/UI/Cells/cells.less index b2ba4d140..8869f0779 100644 --- a/src/UI/Cells/cells.less +++ b/src/UI/Cells/cells.less @@ -51,6 +51,12 @@ td.episode-status-cell, td.quality-cell { .badge { font-size: 9px; } + + .progress { + height : 10px; + margin-top : 5px; + margin-bottom : 0px; + } } .history-details-cell { diff --git a/src/UI/Content/progress-bars.less b/src/UI/Content/progress-bars.less new file mode 100644 index 000000000..40af0839b --- /dev/null +++ b/src/UI/Content/progress-bars.less @@ -0,0 +1,36 @@ +@import "Bootstrap/mixins"; +@import "Bootstrap/variables"; +@import "variables"; + +.progress.episode-progress { + width : 125px; + position : relative; + margin-bottom : 2px; + + .progressbar-back-text, .progressbar-front-text { + font-size : 11.844px; + font-weight : bold; + text-align : center; + cursor : default; + } + + .progressbar-back-text { + position : absolute; + width : 100%; + height : 100%; + } + + .progressbar-front-text { + display : block; + width : 125px; + } + + .bar { + position : absolute; + overflow : hidden; + } +} + +.progress-purple .bar, .progress .bar-purple { + #gradient > .vertical(@purple, @nzbdronePurple); +} \ No newline at end of file diff --git a/src/UI/Content/theme.less b/src/UI/Content/theme.less index 4e72e020b..5f1dd6725 100644 --- a/src/UI/Content/theme.less +++ b/src/UI/Content/theme.less @@ -10,39 +10,11 @@ @import "checkbox-button"; @import "spinner"; @import "legend"; +@import "progress-bars"; @import "../Shared/Styles/clickable"; @import "../Shared/Styles/card"; @import "../Rename/rename"; -.progress.episode-progress { - width : 125px; - position : relative; - margin-bottom : 2px; - - .progressbar-back-text, .progressbar-front-text { - font-size : 11.844px; - font-weight : bold; - text-align : center; - cursor : default; - } - - .progressbar-back-text { - position : absolute; - width : 100%; - height : 100%; - } - - .progressbar-front-text { - display : block; - width : 125px; - } - - .bar { - position : absolute; - overflow : hidden; - } -} - .page-toolbar { margin-top : 10px; margin-bottom : 30px; diff --git a/src/UI/Content/variables.less b/src/UI/Content/variables.less index 8a29e0a50..0495a3c19 100644 --- a/src/UI/Content/variables.less +++ b/src/UI/Content/variables.less @@ -1 +1,2 @@ -@nzbdroneRed: #C4273C; +@nzbdroneRed: #c4273c; +@nzbdronePurple: #7932ea; \ No newline at end of file