contact list on aspect#show is ajaxy

app/controllers/aspects_controller.rb

@@ -51,11 +51,7 @@ class AspectsController < ApplicationController
       render :file => "#{Rails.root}/public/404.html", :layout => false, :status => 404
     else
       @aspect_contacts = @aspect.contacts
-      #@posts           = current_user.visible_posts( :by_members_of => @aspect, :_type => "StatusMessage" ).paginate :per_page => 15, :order => 'created_at DESC'
       @posts = @aspect.posts.find_all_by__type("StatusMessage", :order => 'created_at desc').paginate :per_page => 15
-
-      pp @aspect.post_ids
-
       respond_with @aspect
     end
   end
@@ -87,26 +83,41 @@ class AspectsController < ApplicationController
   end
 
   def add_to_aspect
-    if current_user.add_person_to_aspect( params[:person_id], params[:aspect_id])
+    begin current_user.add_person_to_aspect( params[:person_id], params[:aspect_id])
-      flash[:notice] =  I18n.t 'aspects.add_to_aspect.success'
+      @person_id = params[:person_id]
-    else 
+      @aspect_id = params[:aspect_id]
-      flash[:error] =  I18n.t 'aspects.add_to_aspect.failure'
+      flash.now[:notice] =  I18n.t 'aspects.add_to_aspect.success'
-    end
 
-    if params[:manage]
+      respond_to do |format|
-      redirect_to aspects_manage_path
+        format.js { render :status => 200 }
-    else
+        format.html{ redirect_to aspect_path(@aspect_id)}
-      redirect_to aspect_path(params[:aspect_id])
+      end
+    rescue Exception => e
+      flash.now[:error] =  I18n.t 'aspects.add_to_aspect.failure'
+      respond_to do |format|
+        format.js  { render :text => e, :status => 403 }
+        format.html{ redirect_to aspect_path(@aspect_id)}
+      end
     end
   end
 
   def remove_from_aspect
     begin current_user.delete_person_from_aspect(params[:person_id], params[:aspect_id])
+      @person_id = params[:person_id]
+      @aspect_id = params[:aspect_id]
       flash.now[:notice] = I18n.t 'aspects.remove_from_aspect.success'
-      render :nothing => true, :status => 200
+
+      respond_to do |format|
+        format.js { render :status => 200 }
+        format.html{ redirect_to aspect_path(@aspect_id)}
+      end
     rescue Exception => e
       flash.now[:error] = I18n.t 'aspects.remove_from_aspect.failure'
-      render :text => e, :status => 403
+
+      respond_to do |format|
+        format.js  { render :text => e, :status => 403 }
+        format.html{ redirect_to aspect_path(@aspect_id)}
+      end
     end
   end
 end

app/helpers/aspects_helper.rb

@@ -14,4 +14,12 @@ module AspectsHelper
       "<span class='grey' title=#{I18n.t('aspects.helper.aspect_not_empty')}>#{I18n.t('aspects.helper.remove')}</span>"
     end
   end
+
+  def add_to_aspect_button(aspect_id, person_id)
+    link_to '+', {:action => 'add_to_aspect', :aspect_id => aspect_id, :person_id => person_id}, :remote => true, :class => 'add button'
+  end
+
+  def remove_from_aspect_button(aspect_id, person_id)
+    link_to 'x', {:action => 'remove_from_aspect', :aspect_id => aspect_id, :person_id => person_id}, :remote => true, :class => 'remove button'
+  end
 end

app/views/aspects/add_to_aspect.js.haml

@@ -0,0 +1,7 @@
+-#   Copyright (c) 2010, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+
+= remove_from_aspect_button(@aspect_id,@person_id)
+

app/views/aspects/remove_from_aspect.js.haml

@@ -0,0 +1,7 @@
+-#   Copyright (c) 2010, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+
+= add_to_aspect_button(@aspect_id,@person_id)
+

app/views/shared/_aspect_contacts.haml

@@ -6,16 +6,20 @@
   :javascript
     $("#edit_aspect_trigger").live("click",
       function(){
-        if( $("#edit_aspect_pane").hasClass("active") ) {
+        EditPane.toggle();
-          editPaneFadeOut();
-        } else {
-          editPaneFadeIn();
-        }
       }
     );
 
-    editPaneFadeIn = function(){
+    var EditPane = {
+      toggle: function() {
+        if( $("#edit_aspect_pane").hasClass("active") ) {
+          EditPane.fadeOut();
+        } else {
+          EditPane.fadeIn();
+        }
+      },
 
+      fadeIn: function(){
         var trigger = $("#edit_aspect_trigger");
 
         $("#edit_aspect_pane").addClass("active");
@@ -23,10 +27,9 @@
           $("#edit_aspect_pane").fadeIn(200);
           trigger.html("done editing");
         });
-    };
+      },
-
-    editPaneFadeOut = function(){
 
+      fadeOut: function(){
         var trigger = $("#edit_aspect_trigger");
         trigger.html("edit aspect");
 
@@ -34,12 +37,14 @@
         $("#edit_aspect_pane").fadeOut(200, function(){
           $(".contact_pictures").fadeIn(200);
         });
+      }
     };
 
+
   - if aspect != :all && aspect.contacts.count == 0
     :javascript
       $(document).ready(function(){
-        editPaneFadeIn();
+        EditPane.fadeIn();
       });
 
 - if (aspect == :all) && @request_count > 0
@@ -59,7 +64,7 @@
       .right
         = link_to "edit aspect", "#", :id => "edit_aspect_trigger", :class => "button"
 
-    %span{:style=>"color:#999;font-size:14px;"}
+    %span.aspect_contact_count{:style=>"color:#999;font-size:14px;"}
       = aspect.contacts.count
       - if aspect.contacts.count == 1
         contact

app/views/shared/_contact_list.html.haml

@@ -3,8 +3,12 @@
 -#   the COPYRIGHT file.
 
 
+- content_for :head do
   :javascript
     $(document).ready( function(){
+
+      var ContactList = {
+        initialize: function(){
           $(".contact_list_search").keyup(function(e){
             var search = $(this);
             var list   = $(this).siblings("ul").first();
@@ -14,13 +18,45 @@
               var element = $(this);
               if( !element.text().match(query) ){
                 if( !element.hasClass('invis') ){
-            element.addClass('invis').slideUp(100);
+                  element.addClass('invis').fadeOut(100);
                 }
               } else {
-          element.removeClass('invis').slideDown(100);
+                element.removeClass('invis').fadeIn(100);
               }
             });
           });
+        },
+
+        refreshContactCount: function(){
+          var contactCountElement = $(".aspect_contact_count"),
+              contactCount = $(".contact_pictures")[0].childElementCount,
+              newHTML = contactCountElement.html().replace(/\d+/,contactCount);
+
+          contactCountElement.html(newHTML);
+        }
+      };
+
+      $('.remove').live('ajax:success', function(data, html, xhr) {
+        var person_id = $(this).closest("li").find(".avatar").attr("data-person_id");
+        $(".contact_pictures").find("img[data-person_id='"+person_id+"']").parent().remove();
+
+        $(this).parent().html(html);
+        ContactList.refreshContactCount();
+      });
+
+      $('.remove').live('ajax:failure', function(data, html, xhr) {
+        alert("Cannot remove person from last aspect.");
+      });
+
+      $('.add').live('ajax:success', function(data, html, xhr) {
+        var person_image = $(this).closest("li").find(".avatar")
+        person_image.parent().clone().appendTo(".contact_pictures");
+
+        $(this).parent().html(html);
+        ContactList.refreshContactCount();
+      });
+
+      ContactList.initialize();
     });
 
 
@@ -31,25 +67,15 @@
     - for contact in contacts
       %li
         - unless contact.aspect_ids.include?(aspect.id)
-          = form_tag '/aspects/add_to_aspect' do
+          = person_image_link contact.person
-            = person_image_tag contact.person
           %span.name
             = link_to contact.person.real_name, contact.person
           .right
-              = hidden_field_tag :aspect_id, aspect.id
+            = add_to_aspect_button(aspect.id, contact.person.id)
-              = hidden_field_tag :person_id, contact.person.id
-              - if defined?(manage) && manage
-                = hidden_field_tag :manage, true
-              = submit_tag '+', :class => 'add', :title => t('.add_to', :name => contact.person.real_name, :aspect => aspect)
-        - else
-          = form_tag '/aspects/remove_from_aspect' do
-            = person_image_tag contact.person
-            %span.name
-              = link_to contact.person.real_name, contact.person
-            .right
-              = hidden_field_tag :aspect_id, aspect.id
-              = hidden_field_tag :person_id, contact.person.id
-              - if defined?(manage) && manage
-                = hidden_field_tag :manage, true
-              = submit_tag 'x', :class => 'remove', :title => t('.remove_from', :name => contact.person.real_name, :aspect => aspect)
 
+        - else
+          = person_image_link contact.person
+          %span.name
+            = link_to contact.person.real_name, contact.person
+          .right
+            = remove_from_aspect_button(aspect.id, contact.person.id)

app/views/shared/_publisher.haml

@@ -49,7 +49,7 @@
         .public_toggle
           %p.checkbox_select
             = status.check_box( :public, {}, true, false )
-            = status.label :public, t('.make_public')
+            = status.label :public, "publish to services"
             = link_to (image_tag "social_media_logos/feed-16x16.png", :title => "RSS"), current_user.public_url 
             - if current_user.services
               - for service in current_user.services      

public/javascripts/view.js

@@ -93,6 +93,10 @@ $(document).ready(function(){
     $("#q").focus();
   });
 
+  $(window).bind('keyup', 'ctrl+e', function(){
+    EditPane.toggle();
+  });
+
 });//end document ready
 
 

public/stylesheets/sass/application.sass

@@ -780,8 +780,10 @@ label
   :min-height 53px
   :margin
     :bottom 10px
+    :top 0
   :padding 12px
     :top 0
+  :top 0
 
   :border
     :bottom 2px #777 solid
@@ -1665,19 +1667,20 @@ ul#request_result
           :color rgb(250,250,250)
 
       .right
-        :top -6px
+        :top 8px
+        :right 6px
 
       .avatar
         :height 22px
         :width 22px
         :position absolute
-        :top -2px
+        :top 6px
 
       span.name
         :padding
           :left 30px
 
-      input
+      a
         &.add
           :color green
 

public/stylesheets/sass/ui.sass

@@ -20,8 +20,8 @@
 
   :min-height 10px
 
-  :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#FCFCFC), to(#d0d0d0))
+  :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#F6F6F6), to(#d0d0d0))
-  :background -moz-linear-gradient(top, #FCFCFC, #d0d0d0)
+  :background -moz-linear-gradient(top, #F6F6F6, #d0d0d0)
 
   :border 1px solid #aaa
     :top 1px solid #bbb
@@ -37,8 +37,8 @@
 
   &:hover
     :color #444
-    :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#DCDCDC), to(#b0b0b0))
+    :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#D6D6D6), to(#b0b0b0))
-    :background -moz-linear-gradient(top, #DCDCDC, #b0b0b0)
+    :background -moz-linear-gradient(top, #D6D6D6, #b0b0b0)
 
   &:active
     :color #111