From 1e24b46986edd019a8c600033370fa2559a00657 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
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