Commit 145438557bcbab5d7b1759be2ab27535d530be73
Committed by
Daniela Feitosa
Daniela Feitosa
1 parent
ffb48135
Exists in
master
and in
29 other branches
Cosmetic changes on nested comments
* Adds another "Post a comment" top button that redirects to the bottom * "Post a comment" button is left-aligned * Removal confirmation message changed to cover replies * Removes background and border from the remove icon * The remove icon appears only on mouse over * Works in all major browsers * Highlights the author reply as the same way as the author comment (ActionItem1771)
Showing
16 changed files
with
92 additions
and
12 deletions
Show diff stats
app/views/content_viewer/_comment.rhtml
| @@ -24,7 +24,7 @@ | @@ -24,7 +24,7 @@ | ||
| 24 | <% comment_balloon do %> | 24 | <% comment_balloon do %> |
| 25 | <% if logged_in? && (user == @page.profile || user == comment.author || user.has_permission?(:moderate_comments, @page.profile)) %> | 25 | <% if logged_in? && (user == @page.profile || user == comment.author || user.has_permission?(:moderate_comments, @page.profile)) %> |
| 26 | <% button_bar(:style => 'float: right; margin-top: 0px;') do %> | 26 | <% button_bar(:style => 'float: right; margin-top: 0px;') do %> |
| 27 | - <%= 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?')) %> | 27 | + <%= icon_button(:delete, _('Remove this comment and all its replies'), { :profile => params[:profile], :remove_comment => comment.id, :view => params[:view] }, :method => :post, :confirm => _('Are you sure you want to remove this comment and all its replies?')) %> |
| 28 | <% end %> | 28 | <% end %> |
| 29 | <% end %> | 29 | <% end %> |
| 30 | 30 |
app/views/content_viewer/view_page.rhtml
| @@ -125,10 +125,19 @@ | @@ -125,10 +125,19 @@ | ||
| 125 | <h3 <%= 'class="no-comments-yet"' if @comments.size == 0 %>> | 125 | <h3 <%= 'class="no-comments-yet"' if @comments.size == 0 %>> |
| 126 | <%= number_of_comments(@page) %> | 126 | <%= number_of_comments(@page) %> |
| 127 | </h3> | 127 | </h3> |
| 128 | + <% if @comments.size > 0 %> | ||
| 129 | + <p class="post-comment-button"><a href="#comment_form" onclick="jQuery('#page-comment-form h4').first().trigger('click')"><%= _('Post a comment') %></a></p> | ||
| 130 | + <% end %> | ||
| 128 | <ul class="article-comments-list"> | 131 | <ul class="article-comments-list"> |
| 129 | <%= render :partial => 'comment', :collection => @comments %> | 132 | <%= render :partial => 'comment', :collection => @comments %> |
| 130 | </ul> | 133 | </ul> |
| 131 | <div id="page-comment-form"><%= render :partial => 'comment_form' %></div> | 134 | <div id="page-comment-form"><%= render :partial => 'comment_form' %></div> |
| 135 | + <script type="text/javascript"> | ||
| 136 | + jQuery( function() { | ||
| 137 | + jQuery('.article-comment').live('mouseover', function() { jQuery(this).find('.icon-delete:first').show(); }); | ||
| 138 | + jQuery('.article-comment').live('mouseout', function() { jQuery(this).find('.icon-delete').hide(); }); | ||
| 139 | + }); | ||
| 140 | + </script> | ||
| 132 | <% end %> | 141 | <% end %> |
| 133 | </div><!-- end class="comments" --> | 142 | </div><!-- end class="comments" --> |
| 134 | 143 |
features/comment.feature
| @@ -67,4 +67,15 @@ Feature: comment | @@ -67,4 +67,15 @@ Feature: comment | ||
| 67 | And I fill in "Enter your comment" with "Hey ho, let's go!" | 67 | And I fill in "Enter your comment" with "Hey ho, let's go!" |
| 68 | When I press "Post comment" | 68 | When I press "Post comment" |
| 69 | Then the "value.Post comment" button should not be enabled | 69 | Then the "value.Post comment" button should not be enabled |
| 70 | - And I should see "Hey ho, let's go" | ||
| 71 | \ No newline at end of file | 70 | \ No newline at end of file |
| 71 | + And I should see "Hey ho, let's go" | ||
| 72 | + | ||
| 73 | + @selenium | ||
| 74 | + Scenario: render comment form and go to bottom | ||
| 75 | + Given the following comment | ||
| 76 | + | article | author | title | body | | ||
| 77 | + | article to comment | booking | hi | how are you? | | ||
| 78 | + Given I am on /booking/article-to-comment | ||
| 79 | + When I follow "Post a comment" within ".post-comment-button" | ||
| 80 | + Then I should see "Enter your comment" within "div#page-comment-form div.post_comment_box.opened" | ||
| 81 | + And I should be exactly on /booking/article-to-comment | ||
| 82 | + And I should be moved to anchor "comment_form" |
features/step_definitions/custom_webrat_steps.rb
| @@ -10,6 +10,10 @@ Then /^I should be exactly on (.+)$/ do |page_name| | @@ -10,6 +10,10 @@ Then /^I should be exactly on (.+)$/ do |page_name| | ||
| 10 | URI.parse(current_url).request_uri.should == path_to(page_name) | 10 | URI.parse(current_url).request_uri.should == path_to(page_name) |
| 11 | end | 11 | end |
| 12 | 12 | ||
| 13 | +Then /^I should be moved to anchor "([^\"]+)"$/ do |anchor| | ||
| 14 | + URI.parse(current_url).fragment.should == anchor | ||
| 15 | +end | ||
| 16 | + | ||
| 13 | When /^I select "([^\"]*)"$/ do |value| | 17 | When /^I select "([^\"]*)"$/ do |value| |
| 14 | select(value) | 18 | select(value) |
| 15 | end | 19 | end |
public/designs/themes/base/style.css
| @@ -1087,28 +1087,28 @@ hr.pre-posts, hr.sep-posts { | @@ -1087,28 +1087,28 @@ hr.pre-posts, hr.sep-posts { | ||
| 1087 | } | 1087 | } |
| 1088 | 1088 | ||
| 1089 | .comment-from-owner .comment-wrapper-1 { | 1089 | .comment-from-owner .comment-wrapper-1 { |
| 1090 | - background: #cecece url(imgs/comment-owner-bg-N.png) repeat-x; | 1090 | + background: #fbf7b5 url(/images/comment-owner-bg-N.png) repeat-x; |
| 1091 | } | 1091 | } |
| 1092 | .comment-from-owner .comment-wrapper-2 { | 1092 | .comment-from-owner .comment-wrapper-2 { |
| 1093 | - background: url(imgs/comment-owner-bg-S.png) 0% 100% repeat-x; | 1093 | + background: url(/images/comment-owner-bg-S.png) 0% 100% repeat-x; |
| 1094 | } | 1094 | } |
| 1095 | .comment-from-owner .comment-wrapper-3 { | 1095 | .comment-from-owner .comment-wrapper-3 { |
| 1096 | - background: url(imgs/comment-owner-bg-L.png) 100% 0% repeat-y; | 1096 | + background: url(/images/comment-owner-bg-L.png) 100% 0% repeat-y; |
| 1097 | } | 1097 | } |
| 1098 | .comment-from-owner .comment-wrapper-4 { | 1098 | .comment-from-owner .comment-wrapper-4 { |
| 1099 | - background: url(imgs/comment-owner-bg-O.png) 0% 0% repeat-y; | 1099 | + background: url(/images/comment-owner-bg-O.png) 0% 0% repeat-y; |
| 1100 | } | 1100 | } |
| 1101 | .comment-from-owner .comment-wrapper-5 { | 1101 | .comment-from-owner .comment-wrapper-5 { |
| 1102 | - background: url(imgs/comment-owner-bg-SL.png) 100% 100% no-repeat; | 1102 | + background: url(/images/comment-owner-bg-SL.png) 100% 100% no-repeat; |
| 1103 | } | 1103 | } |
| 1104 | .comment-from-owner .comment-wrapper-6 { | 1104 | .comment-from-owner .comment-wrapper-6 { |
| 1105 | - background: url(imgs/comment-owner-bg-SO.png) 0% 100% no-repeat; | 1105 | + background: url(/images/comment-owner-bg-SO.png) 0% 100% no-repeat; |
| 1106 | } | 1106 | } |
| 1107 | .comment-from-owner .comment-wrapper-7 { | 1107 | .comment-from-owner .comment-wrapper-7 { |
| 1108 | - background: url(imgs/comment-owner-bg-NL.png) 100% 0% no-repeat; | 1108 | + background: url(/images/comment-owner-bg-NL.png) 100% 0% no-repeat; |
| 1109 | } | 1109 | } |
| 1110 | .comment-from-owner .comment-wrapper-8 { | 1110 | .comment-from-owner .comment-wrapper-8 { |
| 1111 | - background: url(imgs/comment-owner-bg-NO.png) 0% 0% no-repeat; | 1111 | + background: url(/images/comment-owner-bg-NO.png) 0% 0% no-repeat; |
| 1112 | } | 1112 | } |
| 1113 | 1113 | ||
| 1114 | .comment-created-at { | 1114 | .comment-created-at { |
188 Bytes
167 Bytes
255 Bytes
518 Bytes
198 Bytes
475 Bytes
259 Bytes
271 Bytes
public/images/comment-reply-owner-bg.png
public/stylesheets/application.css
| @@ -1087,6 +1087,17 @@ a.comment-picture { | @@ -1087,6 +1087,17 @@ a.comment-picture { | ||
| 1087 | right: 8px; | 1087 | right: 8px; |
| 1088 | } | 1088 | } |
| 1089 | 1089 | ||
| 1090 | +#content .comment-balloon a.button.icon-delete { | ||
| 1091 | + border: 0; | ||
| 1092 | + padding-top: 0; | ||
| 1093 | + padding-bottom: 0; | ||
| 1094 | + background-color: transparent; | ||
| 1095 | +} | ||
| 1096 | + | ||
| 1097 | +#content .comments .comment-balloon a.button.icon-delete { | ||
| 1098 | + display: none; | ||
| 1099 | +} | ||
| 1100 | + | ||
| 1090 | .msie7 .article-comments-list .comment-balloon { | 1101 | .msie7 .article-comments-list .comment-balloon { |
| 1091 | margin-top: -15px; | 1102 | margin-top: -15px; |
| 1092 | } | 1103 | } |
| @@ -1139,7 +1150,7 @@ a.comment-picture { | @@ -1139,7 +1150,7 @@ a.comment-picture { | ||
| 1139 | 1150 | ||
| 1140 | .article-comment .comment-details { | 1151 | .article-comment .comment-details { |
| 1141 | margin: 0px; | 1152 | margin: 0px; |
| 1142 | - padding: 7px 1px 3px 26px; | 1153 | + padding: 7px 1px 3px 5px; |
| 1143 | } | 1154 | } |
| 1144 | 1155 | ||
| 1145 | #article .comment-reply-link { | 1156 | #article .comment-reply-link { |
| @@ -1166,6 +1177,22 @@ a.comment-picture { | @@ -1166,6 +1177,22 @@ a.comment-picture { | ||
| 1166 | background: transparent; | 1177 | background: transparent; |
| 1167 | } | 1178 | } |
| 1168 | 1179 | ||
| 1180 | +.block #article .post-comment-button a:hover, | ||
| 1181 | +.block #article .post-comment-button a:visited, | ||
| 1182 | +.block #article .post-comment-button a { | ||
| 1183 | + text-decoration: none; | ||
| 1184 | + font-size: 14px; | ||
| 1185 | + font-weight: bold; | ||
| 1186 | + color: #000; | ||
| 1187 | + -moz-border-radius: 4px; | ||
| 1188 | + -webkit-border-radius: 4px; | ||
| 1189 | + border-radius: 4px; | ||
| 1190 | +} | ||
| 1191 | + | ||
| 1192 | +.comment-balloon-content { | ||
| 1193 | + margin-left: 15px; | ||
| 1194 | +} | ||
| 1195 | + | ||
| 1169 | /* * * Comment Replies * * */ | 1196 | /* * * Comment Replies * * */ |
| 1170 | 1197 | ||
| 1171 | .comment-replies .comment-wrapper-1 { | 1198 | .comment-replies .comment-wrapper-1 { |
| @@ -1192,7 +1219,7 @@ a.comment-picture { | @@ -1192,7 +1219,7 @@ a.comment-picture { | ||
| 1192 | } | 1219 | } |
| 1193 | 1220 | ||
| 1194 | .comment-replies .comment-from-owner.comment-content { | 1221 | .comment-replies .comment-from-owner.comment-content { |
| 1195 | - background: transparent url(/images/comment-reply-owner-bg.png) left top repeat-x; | 1222 | + background: transparent url(/images/comment-reply-owner-bg.png) left bottom repeat-x; |
| 1196 | } | 1223 | } |
| 1197 | 1224 | ||
| 1198 | .comment-replies .comment-user-status { | 1225 | .comment-replies .comment-user-status { |
| @@ -1213,6 +1240,10 @@ a.comment-picture { | @@ -1213,6 +1240,10 @@ a.comment-picture { | ||
| 1213 | padding-right: 7px; | 1240 | padding-right: 7px; |
| 1214 | } | 1241 | } |
| 1215 | 1242 | ||
| 1243 | +.comment-replies .comment-text { | ||
| 1244 | + margin-top: 1px; | ||
| 1245 | +} | ||
| 1246 | + | ||
| 1216 | .comment-replies .comment-picture { | 1247 | .comment-replies .comment-picture { |
| 1217 | width: 40px; | 1248 | width: 40px; |
| 1218 | height: 57px; | 1249 | height: 57px; |
| @@ -1333,12 +1364,14 @@ a.comment-picture { | @@ -1333,12 +1364,14 @@ a.comment-picture { | ||
| 1333 | margin: 10px auto; | 1364 | margin: 10px auto; |
| 1334 | } | 1365 | } |
| 1335 | 1366 | ||
| 1367 | +.post-comment-button a, | ||
| 1336 | .post_comment_box h4 { | 1368 | .post_comment_box h4 { |
| 1337 | padding: 1px 20px; | 1369 | padding: 1px 20px; |
| 1338 | margin: 0px; | 1370 | margin: 0px; |
| 1339 | background: #eee; | 1371 | background: #eee; |
| 1340 | } | 1372 | } |
| 1341 | 1373 | ||
| 1374 | +.post-comment-button a, | ||
| 1342 | .post_comment_box.closed h4 { | 1375 | .post_comment_box.closed h4 { |
| 1343 | display: inline; | 1376 | display: inline; |
| 1344 | border: 1px solid #888; | 1377 | border: 1px solid #888; |
| @@ -1409,6 +1442,11 @@ a.comment-picture { | @@ -1409,6 +1442,11 @@ a.comment-picture { | ||
| 1409 | width: 100%; | 1442 | width: 100%; |
| 1410 | } | 1443 | } |
| 1411 | 1444 | ||
| 1445 | +#page-comment-form .post_comment_box { | ||
| 1446 | + text-align: left; | ||
| 1447 | + padding-left: 0; | ||
| 1448 | +} | ||
| 1449 | + | ||
| 1412 | /* * * addThis button * * */ | 1450 | /* * * addThis button * * */ |
| 1413 | 1451 | ||
| 1414 | .msie #addThis { | 1452 | .msie #addThis { |
test/functional/content_viewer_controller_test.rb
| @@ -1324,4 +1324,22 @@ class ContentViewerControllerTest < Test::Unit::TestCase | @@ -1324,4 +1324,22 @@ class ContentViewerControllerTest < Test::Unit::TestCase | ||
| 1324 | assert_tag :a, :attributes => { :href => "http://" + url}, :content => url.scan(/.{4}/).join('​') | 1324 | assert_tag :a, :attributes => { :href => "http://" + url}, :content => url.scan(/.{4}/).join('​') |
| 1325 | end | 1325 | end |
| 1326 | 1326 | ||
| 1327 | + should 'show a post comment button on top if there are comments' do | ||
| 1328 | + profile = create_user('testuser').person | ||
| 1329 | + article = profile.articles.build(:name => 'test') | ||
| 1330 | + article.save! | ||
| 1331 | + comment = article.comments.build(:author => profile, :title => 'hi', :body => 'hello') | ||
| 1332 | + comment.save! | ||
| 1333 | + get :view_page, :profile => 'testuser', :page => [ 'test' ] | ||
| 1334 | + assert_tag :tag => 'p', :attributes => { :class => 'post-comment-button' } | ||
| 1335 | + end | ||
| 1336 | + | ||
| 1337 | + should 'not show a post comment button on top if there are no comments' do | ||
| 1338 | + profile = create_user('testuser').person | ||
| 1339 | + article = profile.articles.build(:name => 'test') | ||
| 1340 | + article.save! | ||
| 1341 | + get :view_page, :profile => 'testuser', :page => [ 'test' ] | ||
| 1342 | + assert_no_tag :tag => 'p', :attributes => { :class => 'post-comment-button' } | ||
| 1343 | + end | ||
| 1344 | + | ||
| 1327 | end | 1345 | end |