From 7cb9760a1eeda3eeea00c5b1bbdf58bd890a5c36 Mon Sep 17 00:00:00 2001 From: danielvincent Date: Tue, 21 Dec 2010 16:56:20 -0800 Subject: [PATCH] show comments toggle like fb --- app/helpers/stream_helper.rb | 6 +--- app/views/comments/_comments.html.haml | 5 +++ app/views/shared/_stream_element.html.haml | 2 +- public/images/icons/spechbubble_2.png | Bin 0 -> 3345 bytes public/javascripts/stream.js | 36 +++++++++++++++++---- public/javascripts/web-socket-receiver.js | 8 +++-- public/stylesheets/sass/application.sass | 22 ++++++++++--- 7 files changed, 60 insertions(+), 19 deletions(-) create mode 100644 public/images/icons/spechbubble_2.png diff --git a/app/helpers/stream_helper.rb b/app/helpers/stream_helper.rb index 22667c168..4e17e10a6 100644 --- a/app/helpers/stream_helper.rb +++ b/app/helpers/stream_helper.rb @@ -5,11 +5,7 @@ module StreamHelper GSUB_THIS = "FIUSDHVIUSHDVIUBAIUHAPOIUXJM" def comment_toggle(count, commenting_disabled=false) - if count == 0 - unless commenting_disabled - link_to "#{t('comments.new_comment.comment').downcase}", '#', :class => "show_post_comments" - end - elsif count <= 3 + if 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" diff --git a/app/views/comments/_comments.html.haml b/app/views/comments/_comments.html.haml index 80855a484..7d244ef43 100644 --- a/app/views/comments/_comments.html.haml +++ b/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)} diff --git a/app/views/shared/_stream_element.html.haml b/app/views/shared/_stream_element.html.haml index f6a31fb31..42bf7ba5e 100644 --- a/app/views/shared/_stream_element.html.haml +++ b/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) diff --git a/public/images/icons/spechbubble_2.png b/public/images/icons/spechbubble_2.png new file mode 100644 index 0000000000000000000000000000000000000000..f6053cafeea53fe914081add63241b2e9621a1d0 GIT binary patch literal 3345 zcmd5Kc*SqfS?ba;@ z$1oU!5l~_fkw`RxCK986D1H+^kdUZIj3NTlAxc1q7?2>S@7=ZKx>Y41F)m%(_ul9E z{eI8$KJW9seWayn;rPm#l@5nve6)d!q0dRi|JX6;{ia|4=2p|n0kLA*`qBFSwZsIcNyYZO7G1CNg25{CO#M&EMu#l<&tky|8=^BA_ zyRbT!(^W^i>Dp?HCP^3ty)1grSPeGVr2%@K_ z$Jyg@s#=nud_EsR(gaP{Ad4EkSAl%4M$zXO5EcdpbU~9cP*N4lz~npBEDYc{n#c0s znUo4uJ*8%f6pEhD8pk;s^oOhLWqR+d&XZ7k1Xju|!!Q>v!7sJdjV8LB1?Vw|J_0jip* z>XL0p1EPe2Gb$p9q{tw_3&4pMZI~g)Lx7CYJF0VxO?jD(nz8gF5u*qBCC?;;O*1JwrSiqjP1axs+a4w7O>(nL2GjA=%(N(wJ?s*p8u z7UcpsnsJJf$k1FZ%|=`yFBS1{VT$sF*`SZ)Jfz3VMtrrb4dx2nqlylBMF0hM39;8k zI1lG_xmi!dYp{E1Dip2_(jiaSH|Uwi-AnGLzaZHc;PfJ$xBoXHK9&^ zL79>m4&J8a&C8S!Ve}BpZ>?a1q@()lH6K}xr4@8pBWoy2W)d*W+;9v^j9I-p-wi}d zYhg+%vkaG21W1hq-jf1oV-)L{j#DHSVEk;Jmin>URh?-tjhIoBxxnl_p08A3lv8MxQ z5zA5@)s#_y^%EtWh5|j?u?#gqn}#5tEY(nNK$pT6HbQ-|WtPrcqXLpiYbP>@#Y?BP zjl7_=Sh3|35Kl=uhF&n04?Ll%X$-Y-+re-tExM5xCss~kfzOmUT#_MEFwPQHvq>zh zX;ET5D}x-bh(N>clyr1fc9&x+xS33LRD;DjAZ;WCT}6`ec`*C4)D6(}E1gyq9b+NX zq>ik42WnE48sj<81c{fiCKcm=CUx@=Iq2mi7D!ErHc3WfjG0F`)28!D5C>XX|Nn^n zJ9Sowwp$^RY&}D_O?1&EiZ@*}DBhKUf*PoXZo=)EO_R|rdIk))!&Wr`dw2~vtP5{6 zjj|8}yx7~d8~7cLQL!k;#&h4SkL^jXTrlb24?T5kuyX4|vl<#&uA2Ks#jV$Wcth36 z{s}=Qb1hsO{(kW39ht#_?^c~ljJbJF#JzLQ&l5Ht{O#y3iQ9IJ-PPq@|Aprq+?{>p z-BW>&zy9p`rg_Sf;AO{j?3$-0R%y@8yZzJAtN7}x?^`!}!ow@L)Pe5b9UC6)nf%(U zDL=ire4zS?UHJSP*EFvjctJY)zVE{3iN5|#!l)xd7tidkXxw-Ho(9K>Eos`tQswdu!(24*~X zdi(Kv90%$@I6+o^)rAL{q~F?;659T(pD;MMBT<{vA_{VUFlTfKPNw&an$Ypafhr+hS# iowR(*&STB}qa53&KGQ}lov_9DB@+!daodCU5BvoXiZIXs literal 0 HcmV?d00001 diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index 0def21961..dd2e86c8b 100644 --- a/public/javascripts/stream.js +++ b/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"), - commentBlockMore = $this.closest("li").find(".older_comments", ".content"), + showUl = $(this).closest('li'), + 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(); + } + } } }; diff --git a/public/javascripts/web-socket-receiver.js b/public/javascripts/web-socket-receiver.js index d0d74dd38..a71503908 100644 --- a/public/javascripts/web-socket-receiver.js +++ b/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("

" + str); + $("#debug").append("

" + str); } }; var WSR = WebSocketReceiver diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 9b30e1c7f..3152e38a1 100644 --- a/public/stylesheets/sass/application.sass +++ b/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