Download as
Browse Code »

Commit 67a7dc468942e21f3de6dd4545cf00121399ed43

Authored by Caio SBA
Committed by Antonio Terceiro
1 parent fcbf4304
Exists in staging and in 42 other branches all_pending_tasks_api, api-articles-period, api_roles, caching-rails4, captcha_serpro_plugin, comments_permissions, content-manager-hostspot, elasticsearch, elasticsearch_api, elasticsearch_categories, elasticsearch_filter, elasticsearch_sort, elasticsearch_to_merge, elasticsearch_view, environment-exposes-api, export-comment-api, export-comment-paragraph, export_data, external_followers, federation-webfinger, federation_followers, federation_followers_backend, federation_oauth_provider, federation_webfinger, fix_event_date_issue, fix_notification_email, fix_string_downcase_and_upcase, follower_permition, json_cookie_serializer, login-captcha, master, master_profile_followers, oauth_external_login, oauth_login, private-scraps, private-scraps-rebase, production, production-vendorized, profile_api_improvements, tasks_keep_filter_params, user_mention, webfinger_server

Unify code for generating speech bubbles (ActionItem1696)

Showing 7 changed files with 75 additions and 44 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @67a7dc4
... ... @@ -1194,4 +1194,11 @@ module ApplicationHelper
1194 1194 end
1195 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 1204 end
... ...
app/views/content_viewer/_comment.rhtml
  Diff comments   View file @67a7dc4
1 1 <%= content_tag('a', '', :name => comment.anchor) %>
2 2 <div class="article-comment<%= ' comment-from-owner' if ( comment.author && (@page.profile.name == comment.author.name) ) %> comment-logged-<%= comment.author ? 'in' : 'out' %>">
3 3  
4   - <% if logged_in? && (user == @page.profile || user == comment.author || user.has_permission?(:moderate_comments, @page.profile)) %>
5   - <% button_bar(:style => 'float: right; margin-top: 0px;') do %>
6   - <%= 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?')) %>
7   - <% end %>
8   - <% end %>
9   -
10 4 <% if comment.author %>
11 5 <%= link_to content_tag( 'span', comment.author_name, :class => 'comment-info' ), comment.author.url,
12 6 :class => 'comment-picture',
... ... @@ -21,14 +15,13 @@
21 15 %>
22 16 <% end %>
23 17  
24   - <div class='comment-wrapper-1'>
25   - <div class='comment-wrapper-2'>
26   - <div class='comment-wrapper-3'>
27   - <div class='comment-wrapper-4'>
28   - <div class='comment-wrapper-5'>
29   - <div class='comment-wrapper-6'>
30   - <div class='comment-wrapper-7'>
31   - <div class='comment-wrapper-8'>
  18 + <% comment_balloon do %>
  19 + <% if logged_in? && (user == @page.profile || user == comment.author || user.has_permission?(:moderate_comments, @page.profile)) %>
  20 + <% button_bar(:style => 'float: right; margin-top: 0px;') do %>
  21 + <%= 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?')) %>
  22 + <% end %>
  23 + <% end %>
  24 +
32 25 <div class="comment-details">
33 26 <div class="comment-created-at">
34 27 <%= show_time(comment.created_at) %>
... ... @@ -39,7 +32,6 @@
39 32 <%= txt2html comment.body %>
40 33 </div>
41 34 </div>
42   - </div></div></div></div>
43   - </div></div></div></div>
44   - <br style='clear: both'/>
  35 + <% end %>
  36 +
45 37 </div>
... ...
app/views/profile/_organization.rhtml
  Diff comments   View file @67a7dc4
... ... @@ -4,7 +4,7 @@
4 4 <div class='ui-tabs'>
5 5  
6 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 8 <li class='tab'><a href='#community-profile'><%= _('Profile') %></a></li>
9 9 </ul>
10 10  
... ...
app/views/profile/_person.rhtml
  Diff comments   View file @67a7dc4
... ... @@ -22,6 +22,15 @@
22 22 <%= render :partial => 'profile_activity' %>
23 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 34 <div id='person-profile'>
26 35 <table>
27 36 <tr>
... ...
app/views/profile/_profile_scrap.rhtml
  Diff comments   View file @67a7dc4
... ... @@ -5,7 +5,7 @@
5 5 <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>
6 6 <% end %>
7 7 </div>
8   - <div class='profile-wall-description'>
  8 + <% comment_balloon :class => 'profile-wall-description' do %>
9 9 <p class='profile-wall-sender'><%= link_to scrap.sender.name, scrap.sender.url %></p>
10 10 <p class='profile-wall-time'><%= time_ago_as_sentence(scrap.created_at) + ' ' + _('ago') %></p>
11 11 <p class='profile-wall-text'><%= auto_link_urls scrap.content %></p>
... ... @@ -13,12 +13,12 @@
13 13 <% if logged_in? && current_person.follows?(scrap.sender) && scrap.root.nil? %>
14 14 <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>
15 15 <% end %>
16   - <ul>
17   - <% scrap.replies.map do |reply| %>
18   - <%= render :partial => 'profile_scrap', :locals => {:scrap => reply} %>
19   - <% end %>
20   - </ul>
21   - </div>
  16 + <% end %>
  17 + <ul class="profile-wall-scrap-replies">
  18 + <% scrap.replies.map do |reply| %>
  19 + <%= render :partial => 'profile_scrap', :locals => {:scrap => reply} %>
  20 + <% end %>
  21 + </ul>
22 22 <div id='profile-wall-message-<%= scrap.id%>' style='display:none;'>
23 23 <div id='profile-wall-form-<%= scrap.id%>' style='display:none;'>
24 24 <p class='profile-wall-message'>
... ...
public/designs/icons/tango/style.css
  Diff comments   View file @67a7dc4
... ... @@ -72,4 +72,4 @@
72 72 .icon-lock { background-image: url(Tango/16x16/actions/lock.png) }
73 73 .icon-chat { background-image: url(Tango/16x16/apps/internet-group-chat.png) }
74 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) }
... ...
public/stylesheets/application.css
  Diff comments   View file @67a7dc4
... ... @@ -3445,8 +3445,8 @@ h1#agenda-title {
3445 3445  
3446 3446 .controller-profile .public-profile-description {
3447 3447 font-style: italic;
3448   - border: 1px solid #ccc;
3449   - background: #eeeeec;
  3448 + border: 0;
  3449 + background: transparent;
3450 3450 color: black;
3451 3451 padding: 10px;
3452 3452 }
... ... @@ -4657,6 +4657,10 @@ h1#agenda-title {
4657 4657 position: relative;
4658 4658 }
4659 4659  
  4660 +#profile-wall .profile-wall-description {
  4661 + border: 0;
  4662 +}
  4663 +
4660 4664 #profile-activity .profile-activity-description .icon-delete span,
4661 4665 #profile-network .profile-network-description .icon-delete span,
4662 4666 #profile-wall .profile-wall-description .icon-delete span {
... ... @@ -4670,6 +4674,10 @@ h1#agenda-title {
4670 4674 top: 4px;
4671 4675 right: 4px;
4672 4676 background-position: center center;
  4677 + visibility: hidden;
  4678 + border-radius: 3px;
  4679 + -webkit-border-radius: 3px;
  4680 + -moz-border-radius: 3px;
4673 4681 }
4674 4682  
4675 4683 #profile-activity .profile-activity-text, #profile-network .profile-network-text, #profile-wall .profile-wall-text {
... ... @@ -4710,12 +4718,8 @@ h1#agenda-title {
4710 4718 margin: 4px 3px 0 0;
4711 4719 }
4712 4720  
4713   -.profile-wall-image,
4714   -.leave_scrap_to_self .profile-network-image,
4715   -.leave_scrap .profile-network-image,
4716   -.leave_scrap_to_self .profile-activity-image,
4717   -.leave_scrap .profile-activity-image {
4718   - background: transparent url(/images/scrap-bg.png) 104% 10px no-repeat;
  4721 +.profile-wall-image {
  4722 + background: transparent;
4719 4723 position: relative;
4720 4724 left: 1px;
4721 4725 z-index: 2;
... ... @@ -4858,18 +4862,13 @@ h1#agenda-title {
4858 4862 text-decoration: none;
4859 4863 }
4860 4864  
4861   -#profile-wall .profile-wall-description .profile-wall-image {
4862   - background-image: url(/images/scrap-bg-gray.png);
4863   -}
4864   -
4865   -#profile-wall .profile-wall-description .profile-wall-description {
4866   - width: 242px;
4867   - background-color: #eee;
  4865 +#profile-wall .profile-wall-scrap-replies .profile-wall-description {
  4866 + width: 240px;
  4867 + background: transparent;
4868 4868 }
4869 4869  
4870   -#profile-network .profile-wall-description textarea,
4871   -#profile-wall .profile-wall-description textarea {
4872   - width: 338px;
  4870 +#profile-wall .profile-wall-scrap-replies textarea {
  4871 + width: 334px;
4873 4872 margin-left: 2px;
4874 4873 }
4875 4874  
... ... @@ -4881,3 +4880,27 @@ h1#agenda-title {
4881 4880 .limited-text-area div.fieldWithErrors {
4882 4881 background: transparent;
4883 4882 }
  4883 +
  4884 +#profile-wall .profile-wall-description .icon-scrap, #profile-wall .profile-wall-description .icon-reply {
  4885 + visibility: hidden;
  4886 + border-radius: 3px;
  4887 + -webkit-border-radius: 3px;
  4888 + -moz-border-radius: 3px;
  4889 +}
  4890 +
  4891 +#profile-wall .comment-wrapper-1 {
  4892 + margin-left: 0;
  4893 +}
  4894 +
  4895 +#profile-wall .comment-balloon-content {
  4896 + padding: 3px 0 3px 15px;
  4897 +}
  4898 +
  4899 +.profile-wall-reply {
  4900 + margin: 0;
  4901 +}
  4902 +
  4903 +.profile-wall-scrap-replies {
  4904 + float: right;
  4905 + margin-right: 2px;
  4906 +}
... ...