Views for contactscontroller#sharing almost done, cuke for editing aspect memberships started

app/views/aspects/_aspect_listings.haml

@@ -13,7 +13,7 @@
     = render 'aspects/aspect', :aspect => aspect, :contacts => aspect.contacts
 
   - if @contacts_sharing_with
-    %li{:class => ("dull" if @contacts_sharing_with.size == 0)}
+    %li#sharers{:class => ("dull" if @contacts_sharing_with.size == 0)}
       .right
         %b
           = link_to t('contacts', :count => @contacts_sharing_with.size), contacts_sharing_path, :rel => 'facebox', :class => 'contact-count'

app/views/contacts/sharing.haml

@@ -25,14 +25,18 @@
               .description
                 = contact.person.diaspora_handle
             .right
-              %ul.dropdown
-                %li
-                  .right
-                    ▼
-                  = link_to "Sharing", '#', :class => 'button'
-                %li= "People"
-                %li= "Cats"
-                %li= "Cat-People"
+              
+              .dropdown
+                .button.toggle
+                  Add to aspect
+                  ▼
+
+                .wrapper
+                  %ul.dropdown_list
+                    - for aspect in @all_aspects
+                      %li{:data => {:aspect_id => aspect.id}}
+                        = check_box_tag "yo"
+                        = aspect.name
 
   %br
   %div{:style => "text-align:right;"}

config/assets.yml

@@ -35,6 +35,7 @@ javascripts:
     - public/javascripts/view.js
     - public/javascripts/stream.js
     - public/javascripts/search.js
+    - public/javascripts/contact-edit.js
   mobile:
     - public/javascripts/vendor/jquery152.min.js
     - public/javascripts/custom-mobile-scripting.js

features/manages_aspects.feature

@@ -20,3 +20,16 @@ Feature: User manages aspects
     And I fill in "Name" with "losers" in the modal window
     And I press "Create" in the modal window
     Then I should see "losers" in the header
+
+  Scenario: Editing the aspect memberships of a contact from the 'sharers' facebox
+    Given I am signed in
+    And I have 2 contacts
+    And I have an aspect called "Cat People"
+    When I follow "All Aspects" in the header
+    And I follow "2 contacts" within "#sharers"
+    And I wait for the ajax to finish
+    And I press the first ".toggle.button"
+    And I press the 2nd "li" within ".dropdown.active .dropdown_list"
+    And I wait for the ajax to finish
+    Then I should have 1 contact in "Cat People"
+

features/step_definitions/user_steps.rb

@@ -153,3 +153,15 @@ Given /^many posts from alice for bob$/ do
     time_interval += 1000
   end
 end
+
+Then /^I should have (\d) contacts? in "([^"]*)"$/ do |n_contacts, aspect_name|
+  @me.aspects.where(:name => aspect_name).first.contacts.size.should == n_contacts.to_i
+end
+
+Given /^I have (\d) contacts?$/ do |count|
+  count.to_i.times do
+    u = Factory(:user_with_aspect)
+    u.share_with(@me.person, u.aspects.first)
+  end
+end
+

public/javascripts/contact-edit.js

+//   Copyright (c) 2011, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+(function(){
+  var toggleCheckbox = function(checkbox){
+    if(checkbox.attr('checked')){
+      checkbox.removeAttr('checked');
+    } else {
+      checkbox.attr('checked', true);
+    }
+  };
+  var processClick = function(li, evt){
+    evt.preventDefault();
+
+    var checkbox = li.find('input[type=checkbox]');
+    toggleCheckbox(checkbox);
+
+  };
+
+  $(document).ready(function(){
+    $('.dropdown .dropdown_list > li').live('click', function(evt){
+      processClick($(this), evt);
+    });
+    $('.dropdown .dropdown_list > li *').live('click', function(evt){
+      toggleCheckbox($(evt.target));
+    })
+  });
+}())

public/javascripts/view.js

@@ -227,17 +227,17 @@ var View = {
 
   dropdowns: {
     click: function(evt) {
-      $(this).parent().toggleClass("active");
+      $(this).parent('.dropdown').toggleClass("active");
       evt.preventDefault();
     },
     removeFocus: function(evt) {
       var $target = $(evt.target);
-      if(!$target.closest(View.dropdowns.parentSelector).length || ($target.attr('href') !== undefined && $target.attr('href') != '#')) {
+      if(!$target.is('.dropdown_list *') && !$target.is('.dropdown.active > .toggle')) {
         $(View.dropdowns.selector).parent().removeClass("active");
       }
     },
-    selector: "ul.dropdown li:first-child",
-    parentSelector: "ul.dropdown"
+    selector: ".dropdown > .toggle",
+    parentSelector: ".dropdown > .wrapper"
   },
 
   webFingerForm: {

public/stylesheets/sass/_mixins.scss

@@ -6,10 +6,10 @@
   border-radius: 15px;
 }
 
-@mixin border-radius($radius){
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-  border-radius: $radius;
+@mixin border-radius($tl, $tr:$tl, $br:$tl, $bl:$tl){
+  -moz-border-radius: $tl $tr $br $bl;
+  -webkit-border-radius: $tl $tr $br $bl;
+  border-radius: $tl $tr $br $bl;
 }
 
 @mixin box-shadow($left, $top, $blur, $color:#000){

public/stylesheets/sass/application.sass

@@ -226,22 +226,79 @@ header
       :top 2px
       :display block
 
+//////////////////////////////////
 ul.dropdown
+  :padding 0
+
   li
     :display none
     a
       :display block
+
     &:first-child
-      :display inline
+      :display block
       a
         :height auto
         :display inline
 
   &.active
+    :z-index 30
     li
-      :z-index 30
       :display block
 
+  &.share.active
+    li:first-child
+      :padding-bottom 6px
+
+    :background
+      :color #ccc
+//////////////////////////////////
+
+.dropdown
+  .button
+    :width 240px
+
+  .wrapper
+    :position absolute
+    :right 4px
+    :display none
+    :width 140px
+    :padding 2px 0
+    :margin-top 3px
+    :background
+      :color #eee
+    :border 1px solid #AAA
+
+    ul
+      :padding 0
+
+      > li
+        :padding 1px 6px
+
+        input
+          :position relative
+          :display inline
+          :top 1px
+
+  &.active
+    .wrapper
+      :display block
+
+    .button
+      @include border-radius(3px, 3px, 0, 0)
+
+    .button,
+    .wrapper ul > li:hover
+      :background desaturate($blue,10%)
+      :color #fff
+      :text-shadow none
+
+    .wrapper ul > li,
+    .wrapper ul > li *
+      :cursor pointer
+
+
+
 .unread
   :font-weight bold
   :color #333 !important