publisher collapsed by default on all pages. removed button styling from add photos button. publisher only collapses on ajax success. comment buttons use show() instead of fadeIn().

app/views/photos/_new_photo.haml

@@ -13,12 +13,12 @@
        button: document.getElementById('file-upload'),
        sizeLimit: 4194304,
 
-      
+
        onProgress: function(id, fileName, loaded, total){
         var progress = Math.round(loaded / total * 100 );
          $('#fileInfo').text(fileName + ' ' + progress + '%');
        },
-       
+
        messages: {
            typeError: "#{t('.invalid_ext')}",
            sizeError: "#{t('.size_error')}",
@@ -31,7 +31,7 @@
         $("#publisher .options_and_submit").fadeIn(50);
         $("#publisher_spinner").fadeIn(100);
        },
-       
+
        onComplete: function(id, fileName, responseJSON){
         $('#fileInfo').text(fileName + ' completed').fadeOut(2000);
         $("#publisher_spinner").fadeOut(100);
@@ -39,10 +39,15 @@
         var id = responseJSON.data.photo.id;
         var url = responseJSON.data.photo.url;
         $('#new_status_message').append("<input type='hidden' value='" + id + "' name='photos[]' />");
-        $('#photodropzone').append("<li><img src='" + url +"' data-id='" + id + "' /></li>");
+        $('#photodropzone').append(
+          "<li style='position:relative;'>" +
+            "<img src='" + url +"' data-id='" + id + "' />" +
+          "</li>"
+          );
         $('#publisher').find("input[type='submit']").removeAttr('disabled');
        }
-       
+
    });
  }
+
  window.onload = createUploader;

app/views/shared/_publisher.haml

@@ -8,43 +8,46 @@
     $(document).ready(function(){
       $("div.public_toggle input").live("click", function(evt){
         if($(this).attr('checked') == true){
-          $(".question_mark").click(); 
-        }; 
-      });
-      
-      $("#publisher textarea, #publisher input").live("focus", function(evt){
-        $("#publisher .options_and_submit").fadeIn(50);
+          $(".question_mark").click();
+        };
       });
 
-      $("#publisher form").live("submit", function(evt){
-        $("#photodropzone").find('li').remove(); 
-        $("#publisher .options_and_submit").hide();
+      $("#publisher textarea, #publisher input").bind("focus", function(evt){
+        $("#publisher .options_and_submit").show();
       });
 
-      $("#content_creation_button").bind("click", function(evt){
+      $("#publisher form").live("ajax:success", function(){
+        $("#publisher").addClass("closed", function(){
+          $("#photodropzone").find('li').remove();
+        });
+      });
+
+      $("#click_to_share").find("a").bind("click", function(evt){
         $("#publisher").removeClass("closed");
         $("#publisher").find("textarea").focus();
       });
     });
 
-#publisher{:class=>("closed" if aspect == :all)}
+#publisher{:class=>"closed"}
 
-  - if aspect == :all
-    #content_creation_button
-      = image_tag 'icons/monotone_chat_talk.png', :id => 'share_bubble'
-      %h4= t('.share_with_all')
+  #click_to_share
+    = image_tag 'icons/doc_edit.png', :id => 'share_bubble'
+    - if aspect == :all
+      = link_to t('.share_with_all'), '#'
+    - else
+      = link_to t('.post_a_message_to', :aspect => aspect), '#'
 
   .content_creation
     = form_for(StatusMessage.new, :remote => true) do |status|
       %ul#photodropzone
       = status.error_messages
-      #file-upload.button
+      #file-upload
+        = image_tag 'icons/photos.png'
+        %br
         = t('.add_photos')
 
       %p
         %params
-          - unless aspect == :all
-            = status.label :message, t('.post_a_message_to', :aspect => (aspect == :all ? t('.all_contacts') : aspect))
           = status.text_area :message, :rows => 2, :value => params[:prefill]
 
       = status.hidden_field :aspect_ids, :value => (aspect == :all ? aspect : aspect.id)
@@ -64,9 +67,9 @@
             %p.checkbox_select
               = status.check_box( :public, {}, true, false )
               = status.label :public, t('.make_public')
-              = link_to (image_tag "social_media_logos/feed-16x16.png", :title => "RSS"), current_user.public_url 
+              = 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      
+                - for service in current_user.services
                   = image_tag "social_media_logos/#{service.provider}-16x16.png", :title => service.provider
 
             = link_to '(?)', "#question_mark_pane", :class => 'question_mark', :style=>"display:none;"

public/javascripts/stream.js

@@ -11,15 +11,11 @@ var Stream = {
     $stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments);
 
     // publisher textarea reset
-    $publisher.find("textarea").bind("blur", function(){ 
+    $publisher.find("textarea").bind("blur", function(){
       $(this).css('height','42px');
-    });
+    })
 
     // comment submit action
-    $stream.delegate("a.comment_submit", "click", function(evt) {
-      $(this).closest("form").children(".comment_box").attr("rows", 1);
-    });
-
     $stream.delegate("textarea.comment_box", "keydown", function(e){
       if (e.shiftKey && e.keyCode === 13) {
         $(this).closest("form").submit();
@@ -29,7 +25,7 @@ var Stream = {
     $stream.delegate("textarea.comment_box", "focus", function(evt) {
       var commentBox = $(this);
       commentBox
-        .closest("form").find(".comment_submit").fadeIn(200);
+        .closest("form").find(".comment_submit").show();
     });
 
     $stream.delegate("textarea.comment_box", "blur", function(evt) {
@@ -110,7 +106,7 @@ var Stream = {
       alert('failed to post message!');
     });
 
-    $(".delete").live('ajax:success', function(data, html, xhr) {
+    $(".stream").find(".delete").live('ajax:success', function(data, html, xhr) {
       $(this).parents(".message").fadeOut(150);
     });
 

public/stylesheets/sass/application.sass

@@ -767,8 +767,6 @@ label
     :width 100%
 
 #publisher
-  :background
-    :color #eee
   :color #999
   :position relative
   :margin
@@ -780,18 +778,9 @@ label
 
   :border
     :bottom 2px #777 solid
+    :top 1px #777 solid
 
   &.closed
-    &:hover
-      :background
-        :color #fafafa
-
-      h4
-        :color #777
-
-      img
-        :opacity 0.7
-
     .content_creation
       :display none
 
@@ -811,7 +800,7 @@ label
 
   input[type='text'],
   textarea
-    :width 460px
+    :width 435px
     :margin 0
   textarea
     :height 42px
@@ -844,57 +833,72 @@ label
 
   .content_creation
     :margin
-      :top 12px
+      :top 1em
 
-  #content_creation_button
-    :padding 10px
-      :left 5px
-      :top 15px
-      :bottom 5px
+  #click_to_share
     :position relative
+    :padding 1em
     :margin
-      :bottom -12px
+      :bottom -1em
 
-    &:hover
-      :cursor pointer
-
-    h4
+    a
       :margin
-        :left 40px
+        :left 1em
       :font
         :weight bold
       :text-shadow 0 1px 0 #fff
 
     #share_bubble
-      :height 40px
-      :width 40px
       :display inline
       :position absolute
-      :top 5px
+      :top 1em
+      :left 0px
 
   #file-upload
     :z-index 10
     :float right
-    :height 34px
-    :width 70px
+    :height 42px
+    :width 103px
     :margin 0
-    :background
-      :color #107FC9
 
     :-webkit-border-radius 5px
     :-moz-border-radius 5px
     :border-radius 5px
 
-    :background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,123,194)), color-stop(1, rgb(65,182,250)))
-    :background -moz-linear-gradient( center bottom, rgb(0,123,194) 0%, rgb(65,182,250) 100%)
+    :border 2px dashed #ccc
 
-    :padding 9px
+    :padding 0.3em
 
     :font
-      :size 16px
       :weight bold
-    :color #eee
-    :text-shadow 0 1px 0 #333
+      :size smaller
+    :text
+      :align center
+      :shadow 0 1px 0 #eee
+
+    img
+      :display inline-block
+      :margin 0
+      :padding 0
+      :margin
+        :bottom -3px
+
+      :opacity 0.4
+
+    &:hover
+      :background
+        :color #eee
+      :cursor pointer
+
+      :color #666
+      img
+        :opacity 0.6
+
+    &:active
+      :text-shadow 0 1px 0 #fafafa
+      :color #ccc
+      img
+        :opacity 0.1
 
     &.loading
       :opacity 0.5