From 67a7dc468942e21f3de6dd4545cf00121399ed43 Mon Sep 17 00:00:00 2001
From: Caio SBA <caiosba@safernet.org.br>
Date: Tue, 21 Sep 2010 01:36:41 -0300
Subject: [PATCH] Unify code for generating speech bubbles (ActionItem1696)

---
 app/helpers/application_helper.rb       |  7 +++++++
 app/views/content_viewer/_comment.rhtml | 26 +++++++++-----------------
 app/views/profile/_organization.rhtml   |  2 +-
 app/views/profile/_person.rhtml         |  9 +++++++++
 app/views/profile/_profile_scrap.rhtml  | 14 +++++++-------
 public/designs/icons/tango/style.css    |  2 +-
 public/stylesheets/application.css      | 59 +++++++++++++++++++++++++++++++++++++++++------------------
 7 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 5585336..fbc6021 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1194,4 +1194,11 @@ module ApplicationHelper
     end
   end
 
+  def comment_balloon(options = {}, &block)
+    wrapper = content_tag(:div, capture(&block), :class => 'comment-balloon-content')
+    (1..8).to_a.reverse.each { |i| wrapper = content_tag(:div, wrapper, :class => "comment-wrapper-#{i}") }
+    classes = options.delete(:class) || options.delete("class") || ''
+    concat(content_tag('div', wrapper + tag('br', :style => 'clear: both;'), { :class => 'comment-balloon ' + classes.to_s }.merge(options)), block.binding)
+  end
+
 end
diff --git a/app/views/content_viewer/_comment.rhtml b/app/views/content_viewer/_comment.rhtml
index f20bf0a..d2cfe1a 100644
--- a/app/views/content_viewer/_comment.rhtml
+++ b/app/views/content_viewer/_comment.rhtml
@@ -1,12 +1,6 @@
 <%= content_tag('a', '', :name => comment.anchor) %>
 <div class="article-comment<%= ' comment-from-owner' if ( comment.author && (@page.profile.name == comment.author.name) ) %> comment-logged-<%= comment.author ? 'in' : 'out' %>">
 
-  <% if logged_in? && (user == @page.profile || user == comment.author || user.has_permission?(:moderate_comments, @page.profile)) %>
-    <% button_bar(:style => 'float: right; margin-top: 0px;') do %>
-      <%= icon_button(:delete, _('Remove this comment'), { :profile => params[:profile], :remove_comment => comment.id, :view => params[:view] }, :method => :post, :confirm => _('Are you sure you want to remove this comment?')) %>
-    <% end %>
-  <% end %>
-
   <% if comment.author %>
     <%= link_to content_tag( 'span', comment.author_name, :class => 'comment-info' ), comment.author.url,
         :class => 'comment-picture',
@@ -21,14 +15,13 @@
     %>
   <% end %>
 
-  <div class='comment-wrapper-1'>
-  <div class='comment-wrapper-2'>
-  <div class='comment-wrapper-3'>
-  <div class='comment-wrapper-4'>
-  <div class='comment-wrapper-5'>
-  <div class='comment-wrapper-6'>
-  <div class='comment-wrapper-7'>
-  <div class='comment-wrapper-8'>
+  <% comment_balloon do %>
+    <% if logged_in? && (user == @page.profile || user == comment.author || user.has_permission?(:moderate_comments, @page.profile)) %>
+      <% button_bar(:style => 'float: right; margin-top: 0px;') do %>
+        <%= icon_button(:delete, _('Remove this comment'), { :profile => params[:profile], :remove_comment => comment.id, :view => params[:view] }, :method => :post, :confirm => _('Are you sure you want to remove this comment?')) %>
+      <% end %>
+    <% end %>
+
     <div class="comment-details">
       <div class="comment-created-at">
         <%= show_time(comment.created_at) %>
@@ -39,7 +32,6 @@
         <%= txt2html comment.body %>
       </div>
     </div>
-  </div></div></div></div>
-  </div></div></div></div>
-  <br style='clear: both'/>
+  <% end %>
+
 </div>
diff --git a/app/views/profile/_organization.rhtml b/app/views/profile/_organization.rhtml
index e7773b7..0780922 100644
--- a/app/views/profile/_organization.rhtml
+++ b/app/views/profile/_organization.rhtml
@@ -4,7 +4,7 @@
     <div class='ui-tabs'>
       
       <ul>
-        <li class='tab'><a href='#profile-network'><%= _('Network') %></a></li>
+        <li class='tab'><a href='#profile-network'><%= _('What\'s new') %></a></li>
         <li class='tab'><a href='#community-profile'><%= _('Profile') %></a></li>
       </ul>
 
diff --git a/app/views/profile/_person.rhtml b/app/views/profile/_person.rhtml
index ddc8084..c012d97 100644
--- a/app/views/profile/_person.rhtml
+++ b/app/views/profile/_person.rhtml
@@ -22,6 +22,15 @@
         <%= render :partial => 'profile_activity' %>
       <% end %>
 
+      <script type="text/javascript">
+        jQuery( function() {
+          var parent_selector = '.profile-wall-description, .profile-activity-description, .profile-network-description';
+          var child_selector = '.icon-delete, .icon-reply, .icon-scrap';
+          jQuery(parent_selector).live('mouseover', function () { jQuery(this).find(child_selector).css('visibility', 'visible'); });
+          jQuery(parent_selector).live('mouseout', function () { jQuery(this).find(child_selector).css('visibility', 'hidden'); });
+        });
+      </script>
+
       <div id='person-profile'>
         <table>
         <tr>
diff --git a/app/views/profile/_profile_scrap.rhtml b/app/views/profile/_profile_scrap.rhtml
index 8635228..9c9769b 100644
--- a/app/views/profile/_profile_scrap.rhtml
+++ b/app/views/profile/_profile_scrap.rhtml
@@ -5,7 +5,7 @@
       <p class='profile-wall-send-message'><%= link_to_function _('Scrap'), "hide_and_show(['#profile-wall-message-response-#{scrap.id}'],['#profile-wall-message-#{scrap.id}', '#profile-wall-form-#{scrap.id}']);$('content_#{scrap.id}').value='';return false", :class => "profile-send-message icon-scrap" %></p>
     <% end %>
   </div>
-  <div class='profile-wall-description'>
+  <% comment_balloon :class => 'profile-wall-description' do %>
     <p class='profile-wall-sender'><%= link_to scrap.sender.name, scrap.sender.url %></p>
     <p class='profile-wall-time'><%= time_ago_as_sentence(scrap.created_at) + ' ' + _('ago') %></p>
     <p class='profile-wall-text'><%= auto_link_urls scrap.content %></p>
@@ -13,12 +13,12 @@
     <% if logged_in? && current_person.follows?(scrap.sender) && scrap.root.nil? %>
       <p class='profile-wall-send-reply'><%= link_to_function _('Reply'), "hide_and_show(['#profile-wall-reply-response-#{scrap.id}'],['#profile-wall-reply-#{scrap.id}', '#profile-wall-reply-form-#{scrap.id}']);$('reply_content_#{scrap.id}').value='';$('scrap_id_#{scrap.id}').value='#{scrap.id}';return false", :class => "profile-send-reply icon-reply" %></p>
     <% end %>
-    <ul>
-      <% scrap.replies.map do |reply| %>
-        <%= render :partial => 'profile_scrap', :locals => {:scrap => reply} %>
-      <% end %>
-    </ul>
-  </div>
+  <% end %>
+  <ul class="profile-wall-scrap-replies">
+    <% scrap.replies.map do |reply| %>
+      <%= render :partial => 'profile_scrap', :locals => {:scrap => reply} %>
+    <% end %>
+  </ul>
   <div id='profile-wall-message-<%= scrap.id%>' style='display:none;'>
     <div id='profile-wall-form-<%= scrap.id%>' style='display:none;'>
       <p class='profile-wall-message'>
diff --git a/public/designs/icons/tango/style.css b/public/designs/icons/tango/style.css
index 470b71d..91a9e25 100644
--- a/public/designs/icons/tango/style.css
+++ b/public/designs/icons/tango/style.css
@@ -72,4 +72,4 @@
 .icon-lock	       { background-image: url(Tango/16x16/actions/lock.png) }
 .icon-chat             { background-image: url(Tango/16x16/apps/internet-group-chat.png) }
 .icon-scrap	       { background-image: url(Tango/16x16/actions/format-justify-left.png) }
-.icon-reply            { background-image: url(Tango/16x16/actions/edit-redo.png) }
+.icon-reply            { background-image: url(Tango/16x16/actions/mail-reply-sender.png) }
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 2443f8b..4442864 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -3445,8 +3445,8 @@ h1#agenda-title {
 
 .controller-profile .public-profile-description {
   font-style: italic;
-  border: 1px solid #ccc;
-  background: #eeeeec;
+  border: 0;
+  background: transparent;
   color: black;
   padding: 10px;
 }
@@ -4657,6 +4657,10 @@ h1#agenda-title {
   position: relative;
 }
 
+#profile-wall .profile-wall-description {
+  border: 0;
+}
+
 #profile-activity .profile-activity-description .icon-delete span,
 #profile-network .profile-network-description .icon-delete span,
 #profile-wall .profile-wall-description .icon-delete span {
@@ -4670,6 +4674,10 @@ h1#agenda-title {
   top: 4px;
   right: 4px;
   background-position: center center;
+  visibility: hidden;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
 }
 
 #profile-activity .profile-activity-text, #profile-network .profile-network-text, #profile-wall .profile-wall-text {
@@ -4710,12 +4718,8 @@ h1#agenda-title {
   margin: 4px 3px 0 0;
 }
 
-.profile-wall-image,
-.leave_scrap_to_self .profile-network-image,
-.leave_scrap .profile-network-image,
-.leave_scrap_to_self .profile-activity-image,
-.leave_scrap .profile-activity-image {
-  background: transparent url(/images/scrap-bg.png) 104% 10px no-repeat;
+.profile-wall-image {
+  background: transparent;
   position: relative;
   left: 1px;
   z-index: 2;
@@ -4858,18 +4862,13 @@ h1#agenda-title {
   text-decoration: none;
 }
 
-#profile-wall .profile-wall-description .profile-wall-image {
-  background-image: url(/images/scrap-bg-gray.png);
-}
-
-#profile-wall .profile-wall-description .profile-wall-description {
-  width: 242px;
-  background-color: #eee;
+#profile-wall .profile-wall-scrap-replies .profile-wall-description {
+  width: 240px;
+  background: transparent;
 }
 
-#profile-network .profile-wall-description textarea,
-#profile-wall .profile-wall-description textarea {
-  width: 338px;
+#profile-wall .profile-wall-scrap-replies textarea {
+  width: 334px;
   margin-left: 2px;
 }
 
@@ -4881,3 +4880,27 @@ h1#agenda-title {
 .limited-text-area div.fieldWithErrors {
   background: transparent;
 }
+
+#profile-wall .profile-wall-description .icon-scrap, #profile-wall .profile-wall-description .icon-reply {
+  visibility: hidden;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+}
+
+#profile-wall .comment-wrapper-1 {
+  margin-left: 0;
+}
+
+#profile-wall .comment-balloon-content {
+  padding: 3px 0 3px 15px;
+}
+
+.profile-wall-reply {
+  margin: 0;
+}
+
+.profile-wall-scrap-replies {
+  float: right;
+  margin-right: 2px;
+}
--
libgit2 0.21.2