Improve reaction button style to better highlight existing reactions (#42630):

* Hide count when zero
* Make non-zero count bold
* Remove underline on hover and active

Patch by Mizuki ISHIKAWA (user:ishikawa999).


git-svn-id: https://svn.redmine.org/redmine/trunk@23778 e93f8b46-1217-0410-a6f0-8f06a7374b81

4 files changed, 29 insertions, 5 deletions

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 40e82b8da..2ce5ea286 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2116,9 +2116,13 @@ img.filecontent.image {background-image: url(/transparent.png);}
 .reaction-button.reacted:hover .icon-svg {
   fill: #c61a1a;
 }
+.reaction-button:hover, .reaction-button:active {
+  text-decoration: none;
+}
 .reaction-button .icon-label {
   margin-left: 3px;
   margin-bottom: -1px;
+  font-weight: bold;
 }
 .reaction-button.readonly {
   cursor: default;
diff --git a/app/helpers/reactions_helper.rb b/app/helpers/reactions_helper.rb
index 5c0b807ee..88d7f5c35 100644
--- a/app/helpers/reactions_helper.rb
+++ b/app/helpers/reactions_helper.rb
@@ -52,7 +52,7 @@ module ReactionsHelper
   def reaction_button_reacted(object, reaction, count, tooltip)
     reaction_button_wrapper object do
       link_to(
-        sprite_icon('thumb-up-filled', count),
+        sprite_icon('thumb-up-filled', count.nonzero?),
         reaction_path(reaction, object_type: object.class.name, object_id: object),
         remote: true, method: :delete,
         class: ['icon', 'reaction-button', 'reacted'],
@@ -64,7 +64,7 @@ module ReactionsHelper
   def reaction_button_not_reacted(object, count, tooltip)
     reaction_button_wrapper object do
       link_to(
-        sprite_icon('thumb-up', count),
+        sprite_icon('thumb-up', count.nonzero?),
         reactions_path(object_type: object.class.name, object_id: object),
         remote: true, method: :post,
         class: 'icon reaction-button',
@@ -76,7 +76,7 @@ module ReactionsHelper
   def reaction_button_readonly(object, count, tooltip)
     reaction_button_wrapper object do
       tag.span(class: 'icon reaction-button readonly', title: tooltip) do
-        sprite_icon('thumb-up', count)
+        sprite_icon('thumb-up', count.nonzero?)
       end
     end
   end
diff --git a/test/helpers/reactions_helper_test.rb b/test/helpers/reactions_helper_test.rb
index ab722e3ca..f2eb04b6d 100644
--- a/test/helpers/reactions_helper_test.rb
+++ b/test/helpers/reactions_helper_test.rb
@@ -106,6 +106,26 @@ class ReactionsHelperTest < ActionView::TestCase
     assert_select_in result, 'a.reaction-button[title=?]', expected_tooltip
   end
 
+  test 'reaction_button should be label less when no reactions' do
+    issue = issues(:issues_002)
+
+    result = with_locale('en') do
+      reaction_button(issue)
+    end
+    assert_select_in result, 'a.reaction-button' do
+      assert_select 'span.icon-label', false
+    end
+
+    # readonly
+    User.current = nil
+    result = with_locale('en') do
+      reaction_button(issue)
+    end
+    assert_select_in result, 'span.reaction-button.readonly' do
+      assert_select 'span.icon-label', false
+    end
+  end
+
   test 'reaction_button should not count and display non-visible users' do
     issue2 = issues(:issues_002)
 
@@ -130,7 +150,7 @@ class ReactionsHelperTest < ActionView::TestCase
 
     assert_select_in result, 'a.reaction-button[title]', false
     assert_select_in result, 'a.reaction-button' do
-      assert_select 'span.icon-label', '0'
+      assert_select 'span.icon-label', false
     end
   end
 
diff --git a/test/system/reactions_test.rb b/test/system/reactions_test.rb
index 01ba76832..8cf849320 100644
--- a/test/system/reactions_test.rb
+++ b/test/system/reactions_test.rb
@@ -126,7 +126,7 @@ class ReactionsSystemTest < ApplicationSystemTestCase
     # Remove the reaction
     within(reaction_button) { find('a.reacted').click }
     within(reaction_button) { assert_selector('a.reaction-button:not(.reacted)') }
-    assert_equal "0", reaction_button.text
+    assert_equal "", reaction_button.text
     assert_equal 0, expected_subject.reactions.count
   end
 end