Unify code for generating speech bubbles (ActionItem1696)

Caio SBA · Antonio Terceiro
1 parent fcbf4304
Showing 7 changed files with 75 additions and 44 deletions Show diff stats
app/helpers/application_helper.rb
app/views/content_viewer/_comment.rhtml
app/views/profile/_organization.rhtml
app/views/profile/_person.rhtml
app/views/profile/_profile_scrap.rhtml
public/designs/icons/tango/style.css
public/stylesheets/application.css
@@ -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
 <%= 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>
@@ -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>
@@ -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>
@@ -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'>
@@ -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) }
@@ -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;
+}
	@@ -1194,4 +1194,11 @@ module ApplicationHelper		@@ -1194,4 +1194,11 @@ module ApplicationHelper
1194	end	1194	end
1195	end	1195	end
1196		1196
		1197	+ def comment_balloon(options = {}, &block)
		1198	+ wrapper = content_tag(:div, capture(&block), :class => 'comment-balloon-content')
		1199	+ (1..8).to_a.reverse.each { \|i\| wrapper = content_tag(:div, wrapper, :class => "comment-wrapper-#{i}") }
		1200	+ classes = options.delete(:class) \|\| options.delete("class") \|\| ''
		1201	+ concat(content_tag('div', wrapper + tag('br', :style => 'clear: both;'), { :class => 'comment-balloon ' + classes.to_s }.merge(options)), block.binding)
		1202	+ end
		1203	+
1197	end	1204	end
	@@ -4,7 +4,7 @@		@@ -4,7 +4,7 @@
4	<div class='ui-tabs'>	4	<div class='ui-tabs'>
5		5
6	<ul>	6	<ul>
7	- <li class='tab'><a href='#profile-network'><%= _('Network') %></a></li>	7	+ <li class='tab'><a href='#profile-network'><%= _('What\'s new') %></a></li>
8	<li class='tab'><a href='#community-profile'><%= _('Profile') %></a></li>	8	<li class='tab'><a href='#community-profile'><%= _('Profile') %></a></li>
9	</ul>	9	</ul>
10		10
	@@ -22,6 +22,15 @@		@@ -22,6 +22,15 @@
22	<%= render :partial => 'profile_activity' %>	22	<%= render :partial => 'profile_activity' %>
23	<% end %>	23	<% end %>
24		24
		25	+ <script type="text/javascript">
		26	+ jQuery( function() {
		27	+ var parent_selector = '.profile-wall-description, .profile-activity-description, .profile-network-description';
		28	+ var child_selector = '.icon-delete, .icon-reply, .icon-scrap';
		29	+ jQuery(parent_selector).live('mouseover', function () { jQuery(this).find(child_selector).css('visibility', 'visible'); });
		30	+ jQuery(parent_selector).live('mouseout', function () { jQuery(this).find(child_selector).css('visibility', 'hidden'); });
		31	+ });
		32	+ </script>
		33	+
25	<div id='person-profile'>	34	<div id='person-profile'>
26	<table>	35	<table>
27	<tr>	36	<tr>
	@@ -72,4 +72,4 @@		@@ -72,4 +72,4 @@
72	.icon-lock { background-image: url(Tango/16x16/actions/lock.png) }	72	.icon-lock { background-image: url(Tango/16x16/actions/lock.png) }
73	.icon-chat { background-image: url(Tango/16x16/apps/internet-group-chat.png) }	73	.icon-chat { background-image: url(Tango/16x16/apps/internet-group-chat.png) }
74	.icon-scrap { background-image: url(Tango/16x16/actions/format-justify-left.png) }	74	.icon-scrap { background-image: url(Tango/16x16/actions/format-justify-left.png) }
75	-.icon-reply { background-image: url(Tango/16x16/actions/edit-redo.png) }	75	+.icon-reply { background-image: url(Tango/16x16/actions/mail-reply-sender.png) }