From 1e24b46986edd019a8c600033370fa2559a00657 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Fri, 1 Mar 2013 20:43:19 +0100 Subject: animated filtering, removed background from fileView --- module/web/static/css/default/dashboard.less | 36 ++++++++++++++++---------- module/web/static/js/views/fileView.js | 11 ++++++-- module/web/static/js/views/filterView.js | 8 +++--- module/web/static/js/views/linkGrabberModal.js | 3 ++- 4 files changed, 38 insertions(+), 20 deletions(-) (limited to 'module') diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index 31c648453..d0f7b2eef 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -85,6 +85,15 @@ background-color: @light; } } + + &.ui-selected:hover { + color: @light; + + .package-frame { + background-color: @dark; + } + + } } .package-name { @@ -157,23 +166,20 @@ .file-view { position: relative; - margin-bottom: 3px; - color: @light; - .gradient(top, @blue, @blueLight); // background-color: @blue; - border-radius: 5px; - line-height: 28px; + padding-top: 1px; + border-bottom: 1px dotted @dark; + vertical-align: middle; + line-height: 26px; - &:hover { - .gradient(top, @blue, @blueDark); + &:hover, &.ui-selected:hover { + border-radius: 5px; + .gradient(top, @blue, @blueLight); + color: @light; } &.ui-selected { .gradient(top, @yellow, @yellowDark); color: @dark; - - .iconf-chevron-down:hover { - color: @light; - } } img { @@ -206,7 +212,6 @@ .file-row.first { width: 50%; - font-weight: bold; .icon-white { cursor: move; @@ -215,10 +220,8 @@ } .file-row.second { - color: @light; font-size: small; width: 20%; - .gradient(top, @blueDark, @blueDarker); } .file-row.third { @@ -230,6 +233,11 @@ } +/* + TODO: more colorful states + better fileView design +*/ + //.file-row.finished { // .gradient(top, @green, @greenLight); //} diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js index f4f228559..32ce7d723 100644 --- a/module/web/static/js/views/fileView.js +++ b/module/web/static/js/views/fileView.js @@ -14,6 +14,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], initialize: function() { this.listenTo(this.model, 'change', this.render); + // This will be triggered manually and changed before with silent=true this.listenTo(this.model, 'change:visible', this.visibility_changed); this.listenTo(this.model, 'remove', this.destroy); }, @@ -63,8 +64,14 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], App.vent.trigger('file:selection'); }, - visibility_changed: function() { - + visibility_changed: function(visible) { + // TODO: improve animation + if (visible) + this.$el.slideOut(); + else { + this.$el.calculateHeight(true); + this.$el.slideIn(); + } } }); diff --git a/module/web/static/js/views/filterView.js b/module/web/static/js/views/filterView.js index eef5db92f..2c2aecf0b 100644 --- a/module/web/static/js/views/filterView.js +++ b/module/web/static/js/views/filterView.js @@ -66,8 +66,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], var self = this; App.dashboard.files.map(function(file) { var visible = file.get('visible'); - if (visible !== self.is_visible(file)) - file.set('visible', !visible); + if (visible !== self.is_visible(file)) { + file.set('visible', !visible, {silent: true}); + file.trigger('change:visible', !visible); + } }); }, @@ -78,7 +80,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], if (this.state == Api.DownloadState.Finished) return _.indexOf(Finished, file.get('download').status) > -1; else if (this.state == Api.DownloadState.Unfinished) - return _.indexOf(Finished, file.get('download').status) > -1 && _.indexOf(Failed, file.get('download').status) > -1; + return _.indexOf(Finished, file.get('download').status) == -1 && _.indexOf(Failed, file.get('download').status) == -1; else if (this.state == Api.DownloadState.Failed) return _.indexOf(Failed, file.get('download').status) > -1; diff --git a/module/web/static/js/views/linkGrabberModal.js b/module/web/static/js/views/linkGrabberModal.js index 13900f222..abc92d4e0 100644 --- a/module/web/static/js/views/linkGrabberModal.js +++ b/module/web/static/js/views/linkGrabberModal.js @@ -30,7 +30,8 @@ define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'text!tpl/def type: 'POST', data: { name: JSON.stringify($('#inputPackageName').val()), - links: JSON.stringify(['http://download.pyload.org/random.bin', 'invalid link']) + links: JSON.stringify(['http://download.pyload.org/random.bin', 'invalid link', 'invalid link 2', 'invalid link 3', 'inavlid link 4', + 'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin']) }, success: function() { App.vent.trigger('package:added'); -- cgit v1.2.3