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	24	<% comment_balloon do %>
25	25	<% if logged_in? && (user == @page.profile \|\| user == comment.author \|\| user.has_permission?(:moderate_comments, @page.profile)) %>
26	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	28	<% end %>
29	29	<% end %>
30	30
...	...
...	...	@@ -125,10 +125,19 @@
125	125	<h3 <%= 'class="no-comments-yet"' if @comments.size == 0 %>>
126	126	<%= number_of_comments(@page) %>
127	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	131	<ul class="article-comments-list">
129	132	<%= render :partial => 'comment', :collection => @comments %>
130	133	</ul>
131	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	141	<% end %>
133	142	</div><!-- end class="comments" -->
134	143
...	...
...	...	@@ -67,4 +67,15 @@ Feature: comment
67	67	And I fill in "Enter your comment" with "Hey ho, let's go!"
68	68	When I press "Post comment"
69	69	Then the "value.Post comment" button should not be enabled
70		- And I should see "Hey ho, let's go"
71	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"
...	...
...	...	@@ -10,6 +10,10 @@ Then /^I should be exactly on (.+)$/ do \|page_name\|
10	10	URI.parse(current_url).request_uri.should == path_to(page_name)
11	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	17	When /^I select "([^\"]*)"$/ do \|value\|
14	18	select(value)
15	19	end
...	...
...	...	@@ -1087,28 +1087,28 @@ hr.pre-posts, hr.sep-posts {
1087	1087	}
1088	1088
1089	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	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	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	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	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	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	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	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	1114	.comment-created-at {
...	...
...	...	@@ -1087,6 +1087,17 @@ a.comment-picture {
1087	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	1101	.msie7 .article-comments-list .comment-balloon {
1091	1102	margin-top: -15px;
1092	1103	}
...	...	@@ -1139,7 +1150,7 @@ a.comment-picture {
1139	1150
1140	1151	.article-comment .comment-details {
1141	1152	margin: 0px;
1142		- padding: 7px 1px 3px 26px;
	1153	+ padding: 7px 1px 3px 5px;
1143	1154	}
1144	1155
1145	1156	#article .comment-reply-link {
...	...	@@ -1166,6 +1177,22 @@ a.comment-picture {
1166	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	1196	/* * * Comment Replies * * */
1170	1197
1171	1198	.comment-replies .comment-wrapper-1 {
...	...	@@ -1192,7 +1219,7 @@ a.comment-picture {
1192	1219	}
1193	1220
1194	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	1225	.comment-replies .comment-user-status {
...	...	@@ -1213,6 +1240,10 @@ a.comment-picture {
1213	1240	padding-right: 7px;
1214	1241	}
1215	1242
	1243	+.comment-replies .comment-text {
	1244	+ margin-top: 1px;
	1245	+}
	1246	+
1216	1247	.comment-replies .comment-picture {
1217	1248	width: 40px;
1218	1249	height: 57px;
...	...	@@ -1333,12 +1364,14 @@ a.comment-picture {
1333	1364	margin: 10px auto;
1334	1365	}
1335	1366
	1367	+.post-comment-button a,
1336	1368	.post_comment_box h4 {
1337	1369	padding: 1px 20px;
1338	1370	margin: 0px;
1339	1371	background: #eee;
1340	1372	}
1341	1373
	1374	+.post-comment-button a,
1342	1375	.post_comment_box.closed h4 {
1343	1376	display: inline;
1344	1377	border: 1px solid #888;
...	...	@@ -1409,6 +1442,11 @@ a.comment-picture {
1409	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	1450	/* * * addThis button * * */
1413	1451
1414	1452	.msie #addThis {
...	...
...	...	@@ -1324,4 +1324,22 @@ class ContentViewerControllerTest < Test::Unit::TestCase
1324	1324	assert_tag :a, :attributes => { :href => "http://" + url}, :content => url.scan(/.{4}/).join('')
1325	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	1345	end
...	...