diff options
| -rw-r--r-- | module/web/static/css/default/dashboard.less | 36 | ||||
| -rw-r--r-- | module/web/static/js/views/fileView.js | 11 | ||||
| -rw-r--r-- | module/web/static/js/views/filterView.js | 8 | ||||
| -rw-r--r-- | module/web/static/js/views/linkGrabberModal.js | 3 |
4 files changed, 38 insertions, 20 deletions
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'); |