animated filtering, removed background from fileView

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');