Commit 67a7dc468942e21f3de6dd4545cf00121399ed43
Committed by
Antonio Terceiro
1 parent
fcbf4304
Exists in
master
and in
28 other branches
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
| ... | ... | @@ -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
| 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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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 | +} | ... | ... |