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)

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)
Caio Almeida · Daniela Feitosa
1 parent ffb48135
Showing 16 changed files with 92 additions and 12 deletions Show diff stats
app/views/content_viewer/_comment.rhtml
app/views/content_viewer/view_page.rhtml
features/comment.feature
features/step_definitions/custom_webrat_steps.rb
public/designs/themes/base/style.css
public/images/comment-owner-bg-L.png
public/images/comment-owner-bg-N.png
public/images/comment-owner-bg-NL.png
public/images/comment-owner-bg-NO.png
public/images/comment-owner-bg-O.png
public/images/comment-owner-bg-S.png
public/images/comment-owner-bg-SL.png
public/images/comment-owner-bg-SO.png
public/images/comment-reply-owner-bg.png
public/stylesheets/application.css
test/functional/content_viewer_controller_test.rb
@@ -24,7 +24,7 @@
   <% 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?')) %>
+        <%= 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?')) %>
       <% end %>
     <% end %>
@@ -125,10 +125,19 @@
   <h3 <%= 'class="no-comments-yet"' if @comments.size == 0 %>>
     <%= number_of_comments(@page) %>
   </h3>
+  <% if @comments.size > 0 %>
+  <p class="post-comment-button"><a href="#comment_form" onclick="jQuery('#page-comment-form h4').first().trigger('click')"><%= _('Post a comment') %></a></p>
+  <% end %>
   <ul class="article-comments-list">
     <%= render :partial => 'comment', :collection => @comments %>
   </ul>
   <div id="page-comment-form"><%= render :partial => 'comment_form' %></div>
+  <script type="text/javascript">
+  jQuery( function() {
+    jQuery('.article-comment').live('mouseover', function() { jQuery(this).find('.icon-delete:first').show(); });
+    jQuery('.article-comment').live('mouseout', function() { jQuery(this).find('.icon-delete').hide(); });
+  });
+  </script>
   <% end %>
 </div><!-- end class="comments" -->
@@ -67,4 +67,15 @@ Feature: comment
     And I fill in "Enter your comment" with "Hey ho, let's go!"
     When I press "Post comment"
     Then the "value.Post comment" button should not be enabled
-    And I should see "Hey ho, let's go"
 \ No newline at end of file
+    And I should see "Hey ho, let's go"
+
+  @selenium
+  Scenario: render comment form and go to bottom
+    Given the following comment
+      | article            | author  | title | body         |
+      | article to comment | booking | hi    | how are you? |
+    Given I am on /booking/article-to-comment
+    When I follow "Post a comment" within ".post-comment-button"
+    Then I should see "Enter your comment" within "div#page-comment-form div.post_comment_box.opened"
+    And I should be exactly on /booking/article-to-comment
+    And I should be moved to anchor "comment_form"
@@ -10,6 +10,10 @@ Then /^I should be exactly on (.+)$/ do |page_name|
   URI.parse(current_url).request_uri.should == path_to(page_name)
 end
+Then /^I should be moved to anchor "([^\"]+)"$/ do |anchor|
+  URI.parse(current_url).fragment.should == anchor
+end
+
 When /^I select "([^\"]*)"$/ do |value|
   select(value)
 end
@@ -1087,28 +1087,28 @@ hr.pre-posts, hr.sep-posts {
 }
 .comment-from-owner .comment-wrapper-1 {
-  background: #cecece url(imgs/comment-owner-bg-N.png) repeat-x;
+  background: #fbf7b5 url(/images/comment-owner-bg-N.png) repeat-x;
 }
 .comment-from-owner .comment-wrapper-2 {
-  background: url(imgs/comment-owner-bg-S.png)    0% 100% repeat-x;
+  background: url(/images/comment-owner-bg-S.png)    0% 100% repeat-x;
 }
 .comment-from-owner .comment-wrapper-3 {
-  background: url(imgs/comment-owner-bg-L.png)  100%   0% repeat-y;
+  background: url(/images/comment-owner-bg-L.png)  100%   0% repeat-y;
 }
 .comment-from-owner .comment-wrapper-4 {
-  background: url(imgs/comment-owner-bg-O.png)    0%   0% repeat-y;
+  background: url(/images/comment-owner-bg-O.png)    0%   0% repeat-y;
 }
 .comment-from-owner .comment-wrapper-5 {
-  background: url(imgs/comment-owner-bg-SL.png) 100% 100% no-repeat;
+  background: url(/images/comment-owner-bg-SL.png) 100% 100% no-repeat;
 }
 .comment-from-owner .comment-wrapper-6 {
-  background: url(imgs/comment-owner-bg-SO.png)   0% 100% no-repeat;
+  background: url(/images/comment-owner-bg-SO.png)   0% 100% no-repeat;
 }
 .comment-from-owner .comment-wrapper-7 {
-  background: url(imgs/comment-owner-bg-NL.png) 100%   0% no-repeat;
+  background: url(/images/comment-owner-bg-NL.png) 100%   0% no-repeat;
 }
 .comment-from-owner .comment-wrapper-8 {
-  background: url(imgs/comment-owner-bg-NO.png)   0%   0% no-repeat;
+  background: url(/images/comment-owner-bg-NO.png)   0%   0% no-repeat;
 }
 .comment-created-at {
@@ -1087,6 +1087,17 @@ a.comment-picture {
   right: 8px;
 }
+#content .comment-balloon a.button.icon-delete {
+  border: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: transparent;
+}
+
+#content .comments .comment-balloon a.button.icon-delete {
+  display: none;
+}
+
 .msie7 .article-comments-list .comment-balloon {
   margin-top: -15px;
 }
@@ -1139,7 +1150,7 @@ a.comment-picture {
 .article-comment .comment-details {
   margin: 0px;
-  padding: 7px 1px 3px 26px;
+  padding: 7px 1px 3px 5px;
 }
 #article .comment-reply-link {
@@ -1166,6 +1177,22 @@ a.comment-picture {
   background: transparent;
 }
+.block #article .post-comment-button a:hover,
+.block #article .post-comment-button a:visited,
+.block #article .post-comment-button a {
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: bold;
+  color: #000;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.comment-balloon-content {
+  margin-left: 15px;
+}
+
 /* * * Comment Replies * * */
 .comment-replies .comment-wrapper-1 {
@@ -1192,7 +1219,7 @@ a.comment-picture {
 }
 .comment-replies .comment-from-owner.comment-content {
-  background: transparent url(/images/comment-reply-owner-bg.png) left top repeat-x;
+  background: transparent url(/images/comment-reply-owner-bg.png) left bottom repeat-x;
 }
 .comment-replies .comment-user-status {
@@ -1213,6 +1240,10 @@ a.comment-picture {
   padding-right: 7px;
 }
+.comment-replies .comment-text {
+  margin-top: 1px;
+}
+
 .comment-replies .comment-picture {
   width: 40px;
   height: 57px;
@@ -1333,12 +1364,14 @@ a.comment-picture {
   margin: 10px auto;
 }
+.post-comment-button a,
 .post_comment_box h4 {
   padding: 1px 20px;
   margin: 0px;
   background: #eee;
 }
+.post-comment-button a,
 .post_comment_box.closed h4 {
   display: inline;
   border: 1px solid #888;
@@ -1409,6 +1442,11 @@ a.comment-picture {
   width: 100%;
 }
+#page-comment-form .post_comment_box {
+  text-align: left;
+  padding-left: 0;
+}
+
 /* * * addThis button * * */
 .msie #addThis {
@@ -1324,4 +1324,22 @@ class ContentViewerControllerTest &lt; Test::Unit::TestCase
     assert_tag :a, :attributes => { :href => "http://" + url}, :content => url.scan(/.{4}/).join('&#x200B;')
   end
+  should 'show a post comment button on top if there are comments' do
+    profile = create_user('testuser').person
+    article = profile.articles.build(:name => 'test')
+    article.save!
+    comment = article.comments.build(:author => profile, :title => 'hi', :body => 'hello')
+    comment.save!
+    get :view_page, :profile => 'testuser', :page => [ 'test' ]
+    assert_tag :tag => 'p', :attributes => { :class => 'post-comment-button' }
+  end
+
+  should 'not show a post comment button on top if there are no comments' do
+    profile = create_user('testuser').person
+    article = profile.articles.build(:name => 'test')
+    article.save!
+    get :view_page, :profile => 'testuser', :page => [ 'test' ]
+    assert_no_tag :tag => 'p', :attributes => { :class => 'post-comment-button' }
+  end
+
 end
	@@ -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
	@@ -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"
	@@ -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 {
	@@ -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