show comments toggle like fb

app/helpers/stream_helper.rb

@@ -5,11 +5,7 @@
 module StreamHelper
   GSUB_THIS = "FIUSDHVIUSHDVIUBAIUHAPOIUXJM"
   def comment_toggle(count, commenting_disabled=false)
-    if count == 0
+    if count <= 3
-      unless commenting_disabled
-        link_to "#{t('comments.new_comment.comment').downcase}", '#', :class => "show_post_comments"
-      end
-    elsif count <= 3
       link_to "#{t('stream_helper.hide_comments')} (#{count})", '#', :class => "show_post_comments"
     else
       link_to "#{t('stream_helper.show_comments')} (#{count})", '#', :class => "show_post_comments"

app/views/comments/_comments.html.haml

@@ -2,6 +2,11 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
+%ul.show_comments{:class => ("hidden" if comment_hashes.size == 0)}
+  %li
+    = image_tag 'icons/spechbubble_2.png', :class => 'more_comments_icon'
+    %b= comment_toggle(comment_hashes.size)
+
 %ul.comments{:id => post_id, :class => ("hidden" if comment_hashes.size == 0)}
   -if comment_hashes.size > 3
     .older_comments{:class => ("hidden inactive" if defined?(condensed) && condensed)}

app/views/shared/_stream_element.html.haml

@@ -31,6 +31,6 @@
 
     .info
       %span.time= link_to(how_long_ago(post), status_message_path(post))
-      = comment_toggle(comments.length, @commenting_disabled)
+      = link_to t('comments.new_comment.comment').downcase, '#', :class => 'focus_comment_textarea'
 
     = render "comments/comments", :post_id => post.id, :comment_hashes => comments, :condensed => true, :commenting_disabled => defined?(@commenting_disabled)

public/javascripts/stream.js

@@ -13,7 +13,12 @@ var Stream = {
     // publisher textarea reset
     $publisher.find("textarea").bind("blur", function(){
       $(this).css('height','42px');
-    })
+    });
+
+    // comment link form focus
+    $stream.delegate(".focus_comment_textarea", "click", function(e){
+      Stream.focusNewComment($(this), e);
+    });
 
     // comment submit action
     $stream.delegate("textarea.comment_box", "keydown", function(e){
@@ -130,11 +135,11 @@ var Stream = {
     evt.preventDefault();
     var $this = $(this),
       text = $this.html(),
-      commentBlock = $this.closest("li").find("ul.comments", ".content"),
+      showUl = $(this).closest('li'),
-      commentBlockMore = $this.closest("li").find(".older_comments", ".content"),
+      commentBlock = $this.closest("li.message").find("ul.comments", ".content"),
+      commentBlockMore = $this.closest("li.message").find(".older_comments", ".content"),
       show = (text.indexOf("show") != -1);
 
-
     if( commentBlockMore.hasClass("inactive") ) {
       commentBlockMore.fadeIn(150, function(){
         commentBlockMore.removeClass("inactive");
@@ -142,14 +147,31 @@ var Stream = {
       });
     } else {
       if(commentBlock.hasClass("hidden")) {
-        commentBlock.fadeIn(150);
+        commentBlock.removeClass('hidden');
+        showUl.css('margin-bottom','-1em');
       }else{
-        commentBlock.hide();
+        commentBlock.addClass('hidden');
+        showUl.css('margin-bottom','1em');
       }
-      commentBlock.toggleClass("hidden");
     }
 
     $this.html(text.replace((show) ? "show" : "hide", (show) ? "hide" : "show"));
+  },
+
+  focusNewComment: function(toggle, evt) {
+    evt.preventDefault();
+    var commentBlock = toggle.closest("li.message").find("ul.comments", ".content");
+
+    if(commentBlock.hasClass('hidden')) {
+      commentBlock.removeClass('hidden');
+      commentBlock.find('textarea').focus();
+    } else {
+      if(!(commentBlock.children().length > 1)){
+        commentBlock.addClass('hidden');
+      } else {
+        commentBlock.find('textarea').focus();
+      }
+    }
   }
 };
 

public/javascripts/web-socket-receiver.js

@@ -10,7 +10,7 @@ var WebSocketReceiver = {
       WSR.debug("connected...");
     };
   },
-  
+
   onMessage: function(evt) {
       var obj = jQuery.parseJSON(evt.data);
       if(obj['notice']){
@@ -81,6 +81,10 @@ processPerson: function(response){
         if( !$(".comments", post).is(':visible') ){
           toggler.click();
         }
+
+        if( $(".show_comments", post).hasClass('hidden') ){
+          $(".show_comments", post).removeClass('hidden');
+        }
       }
 
       if( !opts['mine?'] && opts['my_post?']) {
@@ -136,7 +140,7 @@ processPerson: function(response){
       return ((c =='') || (c== '1'));
   },
   debug: function(str){
-    $("#debug").append("<p>" +  str); 
+    $("#debug").append("<p>" +  str);
   }
 };
 var WSR = WebSocketReceiver

public/stylesheets/sass/application.sass

@@ -521,7 +521,8 @@ li.message
 input.comment_submit
   :display none
 
-ul.comments
+ul.comments,
+ul.show_comments
   :margin 0
     :top 1em
   :padding 0
@@ -535,7 +536,7 @@ ul.comments
   .force_open
     :min-height 2.4em
 
-  li.comment
+  li
     :list
       :style none
     :padding 0.7em
@@ -590,7 +591,6 @@ ul.comments
         :top -0.7em
       :padding 0
 
-
 .profile_photo
   img
     :height 300px
@@ -2111,7 +2111,6 @@ h3,h4
     :right 0
 
 ul.notifications_for_day
-
   :margin 0
   :padding 0
 
@@ -2132,3 +2131,18 @@ ul.notifications_for_day
   :position relative
   :margin
     :bottom 1em
+
+ul.show_comments
+  :margin
+    :bottom -1em
+  > li
+    :font
+      :size smaller
+    img
+      :position relative
+      :top 3px
+      :height 12px
+      :width 12px
+      :margin
+        :left 0.5em
+        :right 0.5em