From 9f3044838d4054c18b7770b725c9056ad2ec1ec8 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Wed, 11 May 2011 14:53:43 -0700 Subject: [PATCH] Views for contactscontroller#sharing almost done, cuke for editing aspect memberships started --- app/views/aspects/_aspect_listings.haml | 2 +- app/views/contacts/sharing.haml | 20 ++++---- config/assets.yml | 1 + features/manages_aspects.feature | 13 +++++ features/step_definitions/user_steps.rb | 12 +++++ public/javascripts/contact-edit.js | 29 +++++++++++ public/javascripts/view.js | 8 ++-- public/stylesheets/sass/_mixins.scss | 8 ++-- public/stylesheets/sass/application.sass | 61 +++++++++++++++++++++++- 9 files changed, 135 insertions(+), 19 deletions(-) create mode 100644 public/javascripts/contact-edit.js diff --git a/app/views/aspects/_aspect_listings.haml b/app/views/aspects/_aspect_listings.haml index 8a08fa7cc..64a44d115 100644 --- a/app/views/aspects/_aspect_listings.haml +++ b/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' diff --git a/app/views/contacts/sharing.haml b/app/views/contacts/sharing.haml index ed441c475..5ff074df0 100644 --- a/app/views/contacts/sharing.haml +++ b/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;"} diff --git a/config/assets.yml b/config/assets.yml index 075ac4f28..5e314cf80 100644 --- a/config/assets.yml +++ b/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 diff --git a/features/manages_aspects.feature b/features/manages_aspects.feature index 0bee9e688..8e41a860f 100644 --- a/features/manages_aspects.feature +++ b/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" + diff --git a/features/step_definitions/user_steps.rb b/features/step_definitions/user_steps.rb index 181be70a8..8c613fffc 100644 --- a/features/step_definitions/user_steps.rb +++ b/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 + diff --git a/public/javascripts/contact-edit.js b/public/javascripts/contact-edit.js new file mode 100644 index 000000000..cc3cd1770 --- /dev/null +++ b/public/javascripts/contact-edit.js @@ -0,0 +1,29 @@ +// 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)); + }) + }); +}()) diff --git a/public/javascripts/view.js b/public/javascripts/view.js index ddc0d35b0..8bf203fbc 100644 --- a/public/javascripts/view.js +++ b/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: { diff --git a/public/stylesheets/sass/_mixins.scss b/public/stylesheets/sass/_mixins.scss index 74ffd8db6..f6bdd09ab 100644 --- a/public/stylesheets/sass/_mixins.scss +++ b/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){ diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index dec329b9b..a3067d709 100644 --- a/public/stylesheets/sass/application.sass +++ b/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