style. also, made sense of aspect-edit.js

app/views/aspects/manage.html.haml

@@ -10,7 +10,7 @@
   %h2
     Manage aspects
   .right
-    = link_to(t('.add_a_new_aspect'), "#add_aspect_pane", :class => "new_aspect add_aspect_button button", :title => t('.add_a_new_aspect'))
+    = link_to("+ #{t('.add_a_new_aspect')}", "#add_aspect_pane", :class => "new_aspect add_aspect_button button", :title => t('.add_a_new_aspect'))
 
 .span-4.append-1.last
   %h3=t('.requests')
@@ -21,10 +21,8 @@
         %li.grey No new requests
       - else
         - for request in @remote_requests
-          %li.requested_person{:id => request.person.id, :request_id => request.id}
+          %li.person.request{:data=>{:guid=>request.id, :person_id=>request.person.id}}
             = person_image_tag(request.person)
-            .name
-              = request.person.real_name
 
   %h3 Remove from Aspect
   .aspect_remove
@@ -36,32 +34,34 @@
 .span-19.last
   %ul#aspect_list
     - for aspect in @aspects
-      %li.aspect
+      %li.aspect{:data=>{:guid=>aspect.id}}
 
         .aspect_name
           %span.edit_name_field
-            %h3{:contenteditable => true}= aspect.name
+            %h3{:contenteditable=>true}
+              = aspect.name
             %span.tip click to edit
 
           %ul.tools
             %li= link_to t('.add_a_new_friend'), "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
             %li!= remove_link(aspect)
 
-        %ul.dropzone{:id => aspect.id}
+        %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}}
-              %li.person{:id => person.id, :class => person.id, :from_aspect_id => aspect.id}
                 .delete
                   .x
                     X
                   .circle
                 = person_image_tag(person)
 
+
+
           .fancybox_content
             %div{:id => "add_request_pane_#{aspect.id}"}
               = render "requests/new_request", :aspect => aspect

public/javascripts/aspect-edit.js

@@ -4,9 +4,9 @@
 */
 
 function decrementRequestsCounter() {
-  var $new_requests = $(".new_requests"),
+  var $new_requests     = $(".new_requests");
-      request_html  = $new_requests.html(),
+  var request_html      = $new_requests.html();
-      old_request_count = request_html.match(/\d+/);
+  var old_request_count = request_html.match(/\d+/);
 
   if( old_request_count == 1 ) {
     $new_requests.html(
@@ -19,112 +19,84 @@ function decrementRequestsCounter() {
   }
 }
 
+// Dragging person between aspects
 $(function() {
-  // Multiple classes here won't work
+  $("ul .person").draggable({ revert: true });
-  $("ul .person").draggable({
+  $("ul .requested_person").draggable({ revert: true });
-    revert: true
-  });
 
-  $("ul .requested_person").draggable({
+  $(".aspect ul.dropzone").droppable({
-    revert: true
-  });
-
-  $(".aspect ul").droppable({
     hoverClass: 'active',
     drop: function(event, ui) {
 
-      if ($(ui.draggable[0]).hasClass('requested_person')){
+      var dropzone = $(this);
+      var person   = ui.draggable;
+
+      if( person.hasClass('request') ){
         $.ajax({
           type: "DELETE",
-          url: "/requests/" + ui.draggable[0].getAttribute('request_id') ,
+          url: "/requests/" + person.attr('data-guid'),
-          data: {"accept" : true  , "aspect_id" : $(this)[0].id },
+          data: {"accept" : true, "aspect_id" : dropzone.attr('data-aspect_id') },
           success: function(data){
             decrementRequestsCounter();
           }
         });
-
       };
-        var dropzone = $(this)[0];
-
-        if ($(this)[0].id == ui.draggable[0].getAttribute('from_aspect_id')){
-          ui.draggable.css('background','none');
-        } else {
-          ui.draggable.css('background','none');
-          $.ajax({
-            url: "/aspects/move_friend/",
-            data: {"friend_id" : ui.draggable[0].id,
-                   "from" : ui.draggable[0].getAttribute('from_aspect_id'),
-                   "to" : { "to" : dropzone.id }},
-            success: function(data){
-              ui.draggable.attr('from_aspect_id', dropzone.id);
-              ui.draggable.css('background','none');
-            }});
 
+      if( dropzone.attr('data-aspect_id') != person.attr('data-aspect_id' )){
+        $.ajax({
+          url: "/aspects/move_friend/",
+          data: {"friend_id" : person.attr('data-guid'),
+                 "from"      : person.attr('data-aspect_id'),
+                 "to"        : { "to" : dropzone.attr('data-aspect_id') }},
+          success: function(data){
+            person.attr('data-aspect_id', dropzone.attr('data-aspect_id'));
+          }});
         }
-      $(this).closest("ul").append(ui.draggable);
+
+      $(this).closest("ul").append(person);
     }
   });
 
+
   $(".aspect_remove ul").droppable({
     hoverClass: 'active',
     drop: function(event, ui) {
-      if ($( "." + ui.draggable[0].id).length == 1) {
+
+      var person = ui.draggable;
+
+      if ( person.attr('data-guid').length == 1 ) {
         alert("You can not remove the person from the last aspect");
+
       } else {
-        if (!$(ui.draggable[0]).hasClass('requested_person')){
+        if( !person.hasClass('request') ){
-          var aspect = ui.draggable[0].getAttribute('from_aspect_id')
+
-          var person_id =  ui.draggable[0].id
           $.ajax({
             type: "POST",
             url: "/aspects/remove_from_aspect",
             data:{
-                  'friend_id' : person_id,
+                  'friend_id' : person.attr('data-guid'),
-                  'aspect_id' : aspect
+                  'aspect_id' : person.attr('data-aspect_id') }
-                  }
           });
         }
-      $(ui.draggable[0]).fadeOut('slow'); 
+      person.fadeOut('slow', $(this).remove());
-      $(ui.draggable[0]).remove();
       }
     }
   });
 
 
-  $(".aspect h3").live( 'focus', function() {
-
-    var $this = $(this),
-        id    = $this.closest("li").children("ul").attr("id"),
-        link  = "/aspects/"+ id;
-
-    $this.keypress(function(e) {
-      if (e.which == 13) {
-        e.preventDefault();
-        $this.blur();
-
-        //save changes
-        $.ajax({
-          type: "PUT",
-          url: link,
-          data: {"aspect" : {"name" : $this.text() }}
-        });
-      }
-      //update all other aspect links
-      $this.keyup(function(e) {
-        $("#aspect_nav a[href='"+link+"']").text($this.text());
-      });
-    });
-  });
 });
 
 
-//deletion
+// Person deletion
 $(".delete").live("click", function() {
 
   var person = $(this).closest("li.person");
-      request_id = person.attr("request_id");
 
-  if (request_id){
+  if (person.hasClass('request')){
-    if( confirm("Remove this person from all aspects?") ){
+
+    if( confirm("Ignore request?") ){
+      var request_id = person.attr("data-guid");
+
       $.ajax({
         type: "DELETE",
         url: "/requests/" + request_id,
@@ -135,9 +107,9 @@ $(".delete").live("click", function() {
     }
 
   } else {
-    if( confirm("Remove this person from all aspects?") ){
 
-      var person_id = $(this).closest("li.person").attr('id');
+    if( confirm("Remove this person from all aspects?") ){
+      var person_id = $(this).closest("li.person").attr('data-guid');
 
       $.ajax({
         type: "DELETE",
@@ -150,3 +122,29 @@ $(".delete").live("click", function() {
   }
 });
 
+
+// Editing aspect name
+$(".aspect h3").live('focus', function() {
+
+  var $this = $(this);
+  var id    = $this.closest("li.aspect").attr("data-guid");
+  var link  = "/aspects/"+ id;
+
+  $this.keypress(function(e) {
+    if (e.which == 13) {
+      e.preventDefault();
+      $this.blur();
+
+      //save changes
+      $.ajax({
+        type: "PUT",
+        url: link,
+        data: {"aspect" : {"name" : $this.text() }}
+      });
+    }
+    //update all other aspect links
+    $this.keyup(function(e) {
+      $("#aspect_nav a[href='"+link+"']").text($this.text());
+    });
+  });
+});

public/stylesheets/sass/application.sass

@@ -903,13 +903,7 @@ h1.big_text
       :padding 2px
 
 
-.aspect,
+.aspect
-.requests,
-.remove,
-.aspect_remove
-  :list
-    :style none
-
   h3
     :display inline-block
 
@@ -944,7 +938,11 @@ h1.big_text
         &:last-child
           :margin
             :right 0
-
+.aspect,
+.requests,
+.aspect_remove
+  :list
+    :style none
   .grey
     :color #999
     :cursor default
@@ -954,25 +952,27 @@ h1.big_text
     :min-height 20px
     :margin 0
       :bottom 25px
-    :background
+
-      :color #efefef
+    :-webkit-border-radius 10px
-    :border 1px solid #ccc
+    :-moz-border-radius 10px
+    :border-radius 10px
+
     :list
       :style none
     :padding 15px
+    :border 2px dashed #ccc
 
     &.active
       :background
-        :color #fafafa
+        :color rgba(255,252,127,0.2)
 
-  .person,
+  .person
-  .requested_person
     :display inline-block
     :cursor move
     :z-index 10
     :position relative
     :padding 0
-    :margin 0
+    :margin 5px
 
     :color #eee
 
@@ -980,6 +980,7 @@ h1.big_text
       :height 70px
       :width 70px
       :border-radius 5px
+      :-webkit-box-shadow 0 1px 2px #999
 
     &:hover
       .delete
@@ -1034,6 +1035,10 @@ h1.big_text
             :color rgba(208,49,43,1)
 
 
+.requests
+  ul.dropzone
+    :border 2px solid #ccc
+
 ul#settings_nav
   :display inline
   :list
@@ -1152,6 +1157,10 @@ header
 
   h2
     :display inline
+  
+  .right
+    :margin
+      :top 10px
 
 .modal_title_bar
   :width 100%