From a52870b21cb160ddd7d1c666f07ef000b8e04013 Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Fri, 22 Oct 2010 10:37:27 -0700
Subject: [PATCH] improved animations

---
 app/views/aspects/manage.html.haml       | 26 +++++++++++-------------
 public/javascripts/aspect-edit.js        | 13 ++++++++++--
 public/stylesheets/sass/application.sass | 19 ++++++++++++-----
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml
index c0fdacc89..06f55724a 100644
--- a/app/views/aspects/manage.html.haml
+++ b/app/views/aspects/manage.html.haml
@@ -18,7 +18,7 @@
   .requests
     %ul.dropzone
       - if @remote_requests.size < 1
-        %li.grey No new requests
+        %li No new requests
       - else
         - for request in @remote_requests
           %li.person.request{:data=>{:guid=>request.id, :person_id=>request.person.id}}
@@ -27,7 +27,8 @@
   %h3 Remove from Aspect
   .aspect_remove
     %ul.dropzone
-      %li.grey Drag to remove person from aspect
+      .draggable_info
+        Drag to remove person from aspect
 
   = render 'shared/invitations', :invites => @invites
 
@@ -47,18 +48,15 @@
             %li!= remove_link(aspect)
 
         %ul.dropzone{:data=>{:aspect_id=>aspect.id}}
-
-          -if aspect.people.size < 1
-            %li.grey Drag to add people
-
-          -else
-            -for person in aspect.people
-              %li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
-                .delete
-                  .x
-                    X
-                  .circle
-                = person_image_tag(person)
+          -for person in aspect.people
+            %li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
+              .delete
+                .x
+                  X
+                .circle
+              = person_image_tag(person)
+          .draggable_info
+            Drag to add people
 
 
 
diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js
index 177701ed3..8d3268d58 100644
--- a/public/javascripts/aspect-edit.js
+++ b/public/javascripts/aspect-edit.js
@@ -21,8 +21,17 @@ function decrementRequestsCounter() {
 
 // Dragging person between aspects
 $(function() {
-  $("ul .person").draggable({ revert: true });
-  $("ul .requested_person").draggable({ revert: true });
+  $("ul .person").draggable({
+    revert: true,
+    start: function(event,ui){
+      $(this).children("img").animate({'height':80, 'width':80, 'opacity':0.8},200);
+      $(".draggable_info").fadeIn(100);
+    },
+    stop: function(event,ui){
+      $(this).children("img").animate({'height':70, 'width':70, 'opacity':1},200);
+      $(".draggable_info").fadeOut(100);
+    }
+  });
 
   $(".aspect ul.dropzone").droppable({
     hoverClass: 'active',
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index b6d6516d1..db0b32edc 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -943,12 +943,12 @@ h1.big_text
 .aspect_remove
   :list
     :style none
-  .grey
-    :color #999
-    :cursor default
-    :text-shadow 0 1px #fff
+  :color #999
+  :cursor default
+  :text-shadow 0 1px #fff
 
   ul.dropzone
+    :position relative
     :min-height 20px
     :margin 0
       :bottom 25px
@@ -966,6 +966,16 @@ h1.big_text
       :background
         :color rgba(255,252,127,0.2)
 
+    .draggable_info
+      :position absolute
+      :display none
+      :right 15px 
+      :bottom 10px 
+      :font
+        :style italic
+        :size 14px
+      :color #aaa
+
   .person
     :display inline-block
     :cursor move
@@ -991,7 +1001,6 @@ h1.big_text
       img
         :-webkit-box-shadow 0 1px 3px #000
         :-moz-box-shadow 0 2px 4px #000
-        :opacity 0.9
 
       .delete
         :display none