made dropdown selectors sexi

app/helpers/aspect_global_helper.rb

@@ -83,9 +83,14 @@ module AspectGlobalHelper
   end
 
   def aspect_dropdown_list_item(aspect, contact, person)
-    checked = (contact.persisted? && contact.aspect_memberships.detect{ |am| am.aspect_id == aspect.id}) ? "checked=\"checked\"" : ""
-    str = "<li data-aspect_id=#{aspect.id}>"
-    str << "<input #{checked} id=\"in_aspect\" name=\"in_aspect\" type=\"checkbox\" value=\"in_aspect\" />"
+    checked = (contact.persisted? && contact.aspect_memberships.detect{ |am| am.aspect_id == aspect.id})
+    klass = checked ? "selected" : ""
+    hidden = !checked ? "hidden" : ""
+
+    str = "<li data-aspect_id=#{aspect.id} class='#{klass}'>"
+    #str << "<input #{checked} id=\"in_aspect\" name=\"in_aspect\" type=\"checkbox\" value=\"in_aspect\" />"
+    str << "<img src='/images/icons/check_yes_ok.png' width=18 height=18 class='check #{hidden}'/>"
+    str << "<img src='/images/icons/check_yes_ok_white.png' width=18 height=18 class='checkWhite'/>"
     str << aspect.name
     str << "<div class=\"hidden\">"
     str << aspect_membership_button(aspect, contact, person)

app/views/sessions/new.haml

@@ -34,12 +34,11 @@
           = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link", :class => 'hidden', :tabindex => 5
 
       %br
-      %p#controls.hidden
+      %p#controls
         %span#remember_me
           - if devise_mapping.rememberable?
             = f.check_box :remember_me, :tabindex => 3
             = f.label :remember_me, t('devise.sessions.new.remember_me')
-        %br
         = f.submit t('devise.sessions.new.sign_in'), :tabindex => 4
 
 

app/views/tags/show.haml

@@ -18,7 +18,7 @@
   %h1.tag
     = "##{params[:name]}"
 
-.span-15
+.span-13
   #main_stream.stream
     - if @posts.length > 0
       = render 'shared/stream', :posts => @posts
@@ -27,7 +27,7 @@
     - else
       = t('.nobody_talking', :tag => "##{params[:name]}")
 
-.prepend-2.span-7.last
+.prepend-2.span-9.last
   %h3
     = t('people', :count => @people_count)
 
@@ -38,6 +38,7 @@
         - if current_user
           - contact = current_user.contacts.find_by_person_id(person.id)
           - contact ||= Contact.new(:person => person)
+          - unless person == current_user.person
             .right
               = render 'contacts/aspect_dropdown', :contact => contact, :person => person, :hang => 'left'
 

public/javascripts/contact-edit.js

@@ -8,15 +8,11 @@ var ContactEdit = {
       ContactEdit.processClick($(this), evt);
     });
   },
+
   updateNumber: function(personId){
-    console.log(personId);
-    var dropdown = $(".dropdown_list[data-person_id=" + personId.toString() +"]")
-    console.log(dropdown);
-
-    var number =  dropdown.find("input[type=checkbox]:checked").length
-
-    console.log(number);
-    var element = dropdown.parents(".dropdown").children('.button.toggle');
+    var dropdown = $(".dropdown_list[data-person_id=" + personId.toString() +"]"),
+        number = dropdown.find(".selected").length,
+        element = dropdown.parents(".dropdown").children('.button.toggle');
 
     var replacement;
 
@@ -33,26 +29,21 @@ var ContactEdit = {
       replacement = Diaspora.widgets.i18n.t('aspect_dropdown.toggle.other', { count: number.toString()})
     }
 
-    element.html(replacement);
+    element.html(replacement + ' ▼');
   },
   
   toggleCheckbox: 
-    function(checkbox){
-      if(checkbox.attr('checked')){
-        checkbox.removeAttr('checked');
-      } else {
-        checkbox.attr('checked', true);
-      }
+    function(check){
+      check.toggleClass('hidden');
+      check.parent('li').toggleClass('selected');
     },
 
   processClick: function(li, evt){
     var button = li.find('.button');
     if(button.hasClass('disabled') || li.hasClass('newItem')){ return; }
 
-    if( evt.target.type != "checkbox" ) {
-      var checkbox = li.find('input[type=checkbox]');
+    var checkbox = li.find('img.check');
     ContactEdit.toggleCheckbox(checkbox);
-    }
 
     $.fn.callRemote.apply(button);
   },

public/stylesheets/sass/application.sass

@@ -249,63 +249,6 @@ ul.dropdown
 
 //////////////////////////////////
 
-.dropdown
-  :position relative
-  :display inline-block
-
-  .button
-    :width 240px
-
-  .wrapper
-    :z-index 20
-    :position absolute
-    :display none
-    :width 140px
-    :padding 2px 0
-    :margin-top 3px
-    :background
-      :color #eee
-    :border 1px solid #AAA
-
-    ul
-      @include user-select(none)
-      :padding 0
-
-      > li
-        :padding 1px 6px
-
-        input
-          :position relative
-          :display inline
-          :top 1px
-
-  &.hang_right
-    .wrapper
-      :right 4px
-
-  &.hang_left
-    .wrapper
-      :left 0px
-
-  &.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

public/stylesheets/sass/ui.sass

@@ -17,10 +17,10 @@
 
   :display inline
 
-  :padding 5px 5px
+  :padding 5px 7px
   :min-width 26px
 
-  :font-size 13px
+  :font-size 12px
   :line
     :height 13px
 
@@ -115,3 +115,109 @@ ul.button_set
   :border 4px solid #000
   :padding 2em
 
+
+
+
+.dropdown
+  :position relative
+  :display inline-block
+
+  .button
+    :width 240px
+
+  .wrapper
+    @include box-shadow(0, 2px, 5px, #666)
+
+    :z-index 20
+    :position absolute
+    :display none
+    :width 140px
+    :padding 4px 0
+    :margin-top 2px
+    :background
+      :color #fff
+    :border 1px solid #999
+
+    ul
+      @include user-select(none)
+
+      :padding 0 !important
+      :margin 0 !important
+      :color #333
+
+      > li
+        :font-size 11px !important
+        :padding 3px 2px 
+          :left 24px
+        :position relative
+
+        .check,
+        .checkWhite
+          :position absolute
+          :left 4px
+          :top 1px
+
+        .checkWhite
+          :display none
+          :top 0px
+
+        &.newItem
+          a
+            :color #999
+            :font-style italic
+
+            &:hover
+              :text-decoration none
+          
+
+  &.hang_right
+    .wrapper
+      @include border-radius(3px, 0, 3px, 3px)
+      :right 3px
+
+  &.hang_left
+    .wrapper
+      @include border-radius(0, 3px, 3px, 3px)
+      :left 0px
+
+  &.active
+    .wrapper
+      :display block
+
+    .button
+      @include border-radius(3px, 3px, 0, 0)
+      :border 1px solid #444
+        :bottom none
+    
+    .selected
+      :font-weight bold
+
+    .button,
+    .wrapper ul > li:hover
+      :background #666
+      :color #fff
+      :text-shadow none
+
+
+    .wrapper ul > li:hover
+      :border
+        :top 1px solid #444
+        :bottom 1px solid #444
+      :padding
+        :top 2px
+        :bottom 2px
+
+      a
+        :color #ccc
+
+    .wrapper ul > li,
+    .wrapper ul > li *
+      :cursor pointer
+
+    .selected:hover .checkWhite
+      :display block
+
+    .selected:hover .check
+      :display none
+
+