fix up aspects/edit popup a little

app/views/aspects/edit.html.haml

@@ -2,22 +2,8 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-- content_for :head do
-  = include_javascripts :aspects
-
 #aspect_edit_pane
   #facebox_header{:data=>{:guid=>@aspect.id}}
-    .right
-      = t('contacts', :count =>@aspect_contacts_count)
-
-      - if @aspect.contacts_visible
-        = link_to image_tag('icons/padlock-open.png', :height => 16, :width => 16, :id => "contact_visibility_padlock", :class => 'open', :title => t('.aspect_list_is_visible')),
-                  aspect_toggle_contact_visibility_path(@aspect), :method => :put, :remote => true
-          
-      - else
-        = link_to image_tag('icons/padlock-closed.png', :height => 16, :width => 16, :id => "contact_visibility_padlock", :title => t('.aspect_list_is_not_visible')),
-                  aspect_toggle_contact_visibility_path(@aspect), :method => :put, :remote => true
-          
     %h3#aspect_name_title
       %span.name= @aspect
       %span.tiny_text
@@ -35,5 +21,13 @@
   .bottom_submit_section
     .left
       = button_to t('delete'), @aspect, :method => "delete", :confirm => t('.confirm_remove_aspect'), :class => 'button delete'
+      - if @aspect.contacts_visible
+        = link_to image_tag('icons/padlock-open.png', :height => 16, :width => 16, :id => "contact_visibility_padlock", :class => 'open', :title => t('.aspect_list_is_visible')),
+                  aspect_toggle_contact_visibility_path(@aspect), :method => :put, :remote => true
+          
+      - else
+        = link_to image_tag('icons/padlock-closed.png', :height => 16, :width => 16, :id => "contact_visibility_padlock", :title => t('.aspect_list_is_not_visible')),
+                  aspect_toggle_contact_visibility_path(@aspect), :method => :put, :remote => true
+          
     = submit_tag t('.done'), :class => 'button creation', :rel => 'close'
 

app/views/shared/_contact_list.html.haml

@@ -3,15 +3,18 @@
 -#   the COPYRIGHT file.
 
 
+.contact_list_controls
+  = search_field_tag :contact_search, "", :id => 'contact_list_search', :results => 5, :placeholder => t('.all_contacts')
+  = t('contacts', :count =>@aspect_contacts_count)
+
 .contact_list
-  = search_field_tag :contact_search, "", :class => 'contact_list_search', :results => 5, :placeholder => t('.all_contacts')
   %ul
     - for contact in contacts
       %li{:data=>{:contact_id=>contact.id}}
         = person_image_tag contact.person
-        %h4.name
+        .name
           = link_to contact.person.name, contact.person
-          .description
+          .diaspora_id
             = contact.person.diaspora_handle
         .right
           = aspect_membership_button(aspect, contact, contact.person)

public/javascripts/contact-list.js

@@ -5,17 +5,15 @@
 
 var List = {
   initialize: function() {
-    $(".contact_list_search").live("keyup", function(e) {
+    $("#contact_list_search").live("keyup", function(e) {
       var search = $(this);
-      var list   = $(this).siblings("ul").first();
+      var list   = $("ul", ".contact_list");
       var query  = new RegExp(search.val(),'i');
 
-      $("> li", list).each( function() {
-        var element = $(this);
-        if( !element.text().match(query) ) {
-          if( !element.hasClass('hidden') ) {
-            element.addClass('hidden');
-          }
+      $("> li", list).each( function(idx, element) {
+        element = $(element);
+        if( !element.find(".name").text().match(query) ) {
+          element.addClass('hidden');
         } else {
           element.removeClass('hidden');
         }
@@ -23,22 +21,21 @@ var List = {
     });
   },
   disconnectUser: function(contact_id){
-        $.ajax({
-            url: "/contacts/" + contact_id,
-            type: "DELETE",
-            success: function(){
-                if( $('.contact_list').length == 1){
-                  $('.contact_list li[data-contact_id='+contact_id+']').fadeOut(200);
-                } else if($('#aspects_list').length == 1) {
-                  $.facebox.close();
-                };
-              }
-            });
+    $.ajax({
+        url: "/contacts/" + contact_id,
+        type: "DELETE",
+        success: function(){
+          if( $('.contact_list').length == 1){
+              $('.contact_list li[data-contact_id='+contact_id+']').fadeOut(200);
+          } else if($('#aspects_list').length == 1) {
+            $.facebox.close();
+          };
+        }
+    });
   }
 };
 
 $(document).ready(function() {
-
   $('.added').live('ajax:loading', function() {
     $(this).addClass('disabled');
     $(this).fadeTo(200,0.4);

public/javascripts/facebox-custom.js

@@ -83,7 +83,7 @@
 
   $.extend($.facebox, {
     settings: {
-      opacity      : 0.2,
+      opacity      : 0.7,
       overlay      : true,
       loadingImage : '/images/facebox/loading.gif',
       closeImage   : '/images/facebox/closelabel.png',

public/stylesheets/sass/application.sass

@@ -1054,14 +1054,17 @@ img.scaled_full
 #thumbnails
   a
     :display inline-block
-    :height 150px
+    :width 100px
+    :min-width 100px
+    :height 100px
+    :min-height 100px
     :margin
-      :bottom 8px
-      :right 2px
-    :vertical-align middle
+      :bottom 15px
+      :right 15px
 
     img
-      :max-height 150px
+      :height 100px
+      :width 100px
 
 #global_search
   :display inline
@@ -1679,39 +1682,49 @@ ul#request_result
       :bottom 2.5em
       :padding 0
 
+.contact_list_controls
+  :height 30px
+  :margin
+    :bottom 5px
+  :vertical-align middle
+
+#contact_list_search
+  :width 200px
+  :margin
+    :top 0
+  :float right
+
 .contact_list,
 .aspect_list
-  :height 450px
-  :max-height 450px
+  @include border-radius(3px)
+
+  :height 300px
+  :max-height 300px
 
   :overflow-y auto
   :overflow-x hidden
 
-  :border 2px solid #eee
+  :border 1px solid #bbb
 
   :background
     :color rgb(252,252,252)
 
   .name
     :position absolute
-    :left 70px
+    :left 65px
     :top 10px
 
+  .diaspora_id
+    :color #777
+    :font
+      :size smaller
+
   .avatar
     :position absolute
     :left 6px
     :height 50px
     :width 50px
 
-  :-webkit-border-radius 0 0 5px 5px
-  :-moz-border-radius 0 0 5px 5px
-  :border-radius 0 0 5px 5px
-
-  input.contact_list_search
-    :width 100%
-    :margin
-      :top 0
-
   .button.share
     :padding
       :right 20px
@@ -1721,31 +1734,47 @@ ul#request_result
 
   > ul
     :margin 0
-    :padding 0
+    :padding 5px
+      :right 0
 
     > li
-      :position relative
-      :height 50px
-      :padding 4px
-      :border
-        :bottom 1px solid #eee
+      @include border-radius(3px)
+      :background
+        :color #fff
+
+      :position relative
+      :display inline-block
+
+      &.hidden
+        :display none
+
+      :height 50px
+      :width 170px
+
+      :margin
+        :bottom 5px
+        :right 5px
+
+      :padding 8px
+      :border 1px solid #ccc
+
+      > .right
+        :right -5px
+        :bottom 2px
+
+      a.button
+        @include box-shadow(0,0,0)
 
-      &:last-child
         :border
           :bottom none
 
-      &:hover
-        :background
-          :color rgb(245,245,245)
+        :height 12px !important
+        :width 12px !important
 
-      > .right
-        :right 8px
-        :top 12px
-
-      a.button
         :padding
           :right 4px
           :left 4px
+
         &.added
           @include linear-gradient(rgb(158,255,153), rgb(92,199,86))
 
@@ -2206,7 +2235,7 @@ ul.show_comments,
   :top 10px
 
 #aspect_edit_pane
-  :width 400px
+  :width 790px
   .person_tiles
     .tile
       @include border-radius(2px)
@@ -3087,9 +3116,8 @@ ul.left_nav
     :bottom 25px
 
   :border 1px solid #999
+  :width 220px
 
-  :width 240px
-    
   h4
     :margin
       :bottom 10px

public/stylesheets/vendor/facebox.css

@@ -8,7 +8,7 @@
 
 #facebox .popup{
   position:relative;
-  border:3px solid rgba(0,0,0,0);
+  border:1px solid #888;
   -webkit-border-radius:2px;
   -moz-border-radius:2px;
   border-radius:2px;
@@ -73,6 +73,6 @@
 }
 
 .facebox_overlayBG {
-  background-color: #000;
+  background-color: #fff;
   z-index: 99;
 }