Always show mobile reaction counts

fixes #5829

app/assets/javascripts/mobile/mobile_comments.js

@@ -189,11 +189,11 @@
     increaseReactionCount: function(bottomBar) {
       var toggleReactionsLink = bottomBar.find(".show-comments").first();
       var count = toggleReactionsLink.text().match(/.*(\d+).*/);
-      var text = "";
+      count = parseInt(count, 10);
+      var text = Diaspora.I18n.t("stream.comments", {count: count + 1});
 
       // No previous comment
-      if(!count){
+      if (count === 0) {
-        text = Diaspora.I18n.t("stream.reactions", {count: 1});
         var parent = toggleReactionsLink.parent();
         var postGuid = bottomBar.parents(".stream-element").data("guid");
 
@@ -204,8 +204,6 @@
         bottomBar.removeClass("inactive").addClass("active");
       }
       else {
-        count = parseInt(count, 10) + 1;
-        text = Diaspora.I18n.t("stream.reactions", {count: count});
         toggleReactionsLink.html(text + "<i class='entypo-chevron-up'/>");
       }
     },

app/assets/stylesheets/mobile/comments.scss

@@ -38,29 +38,25 @@
   }
 
   .post-stats {
-    top: -5px;
     float: right;
     position: relative;
     display: flex;
-    margin-bottom: -15px;
 
     .count {
-      background-color: $background-grey;
+      line-height: 22px;
-      text-align: center;
+      margin-left: 5px;
       z-index: 2;
     }
 
     .icon-count-group {
       display: flex;
-      flex-flow: column;
-      justify-content: center;
       margin: 0 7px;
     }
 
     [class^="entypo"] {
       color: $text-grey;
       font-size: 24px;
-      height: 28px;
+      line-height: 24px;
       margin: 0;
       width: 100%;
     }
@@ -77,21 +73,23 @@
   }
 
   .post-action {
-    height: 28px;
-
     .disabled { color: $medium-gray; }
   }
 
   .add-comment-switcher { padding-top: 10px; }
 
-  &.inactive .post-stats .count,
+  &.inactive {
-  &.inactive .comment-container {
+    padding-bottom: 8px;
-    display: none;
+
+    .comment-container {
+      display: none;
+    }
   }
 }
 
 .stream-element .comments {
   margin: 0;
+  margin-top: 10px;
   padding: 0;
   width: 100%;
 

app/helpers/mobile_helper.rb

@@ -36,20 +36,20 @@ module MobileHelper
     link_to "", new_post_comment_path(post), class: "entypo-comment comment-action inactive"
   end
 
-  def reactions_link(post, klass="")
+  def show_comments_link(post, klass="")
-    reactions_count = post.comments_count + post.likes_count
     if klass == "active"
       entypo_class = "entypo-chevron-up"
     else
       entypo_class = "entypo-chevron-down"
     end
-    if reactions_count > 0
+
-      link_to "#{t('reactions', count: reactions_count)}<i class='#{entypo_class}'></i>".html_safe,
+    if post.comments_count > 0
+      link_to "#{t('admins.stats.comments', count: post.comments_count)}<i class='#{entypo_class}'></i>".html_safe,
               post_comments_path(post, format: "mobile"),
               class: "show-comments #{klass}"
     else
       html = "<span class='show-comments'>"
-      html << "#{t('reactions', count: reactions_count)}"
+      html << t("admins.stats.comments", count: post.comments_count)
       html << "</span>"
     end
   end

app/views/shared/_stream_element.mobile.haml

@@ -23,13 +23,13 @@
     = render partial: "comments/post_stats", locals: {post: post}
 
     - if defined?(expanded_info) && expanded_info
-      != reactions_link(post, "active")
+      != show_comments_link(post, "active")
       .comment-container
         %ul.comments
           = render partial: "comments/comment", collection: post.comments.for_a_stream, locals: {post: post}
 
     - else
-      != reactions_link(post)
+      != show_comments_link(post)
 
     .ajax-loader.hidden
       .loader

config/locales/diaspora/en.yml

@@ -246,11 +246,6 @@ en:
       comment: "Comment"
       commenting: "Commenting..."
 
-  reactions:
-    zero: "No reactions"
-    one: "1 reaction"
-    other: "%{count} reactions"
-
   contacts:
     index:
       start_a_conversation: "Start a conversation"

config/locales/javascript/javascript.en.yml

@@ -281,6 +281,11 @@ en:
         one: "<%= count %> Reshare"
         other: "<%= count %> Reshares"
 
+      comments:
+        zero: "<%= count %> comments"
+        one: "<%= count %> comment"
+        other: "<%= count %> comments"
+
       more_comments:
         zero: "Show <%= count %> more comments"
         one: "Show <%= count %> more comment"
@@ -299,11 +304,6 @@ en:
         follow_error: "Couldn’t follow #<%= tag %> :("
         stop_following_error: "Couldn’t stop following #<%= tag %> :("
 
-      reactions:
-        zero: "<%= count%> reactions"
-        one: "<%= count%> reaction"
-        other: "<%= count%> reactions"
-
     header:
       home: "Home"
       profile: "Profile"

features/mobile/reactions.feature

@@ -14,23 +14,21 @@ Feature: reactions mobile post
     And I sign in as "bob@bob.bob" on the mobile website
 
   Scenario: like on a mobile post
-    When I should see "No reactions" within ".show-comments"
+    When I click on selector "a.like-action.inactive"
-    And I click on selector "a.like-action.inactive"
     Then I should see a "a.like-action.active"
+    And I should see "1" within ".like-count"
     When I go to the stream page
-    And I should see "1 reaction" within ".show-comments"
+    Then I should see a "a.like-action.active"
-    And I click on selector "a.show-comments"
+    And I should see "1" within ".like-count"
-    Then I should see "1" within ".like-count"
 
   Scenario: liking from the profile view
     When I am on "alice@alice.alice"'s page
-    Then I should see "No reactions" within ".show-comments"
     And I click on selector "a.like-action.inactive"
     Then I should see a "a.like-action.active"
+    And I should see "1" within ".like-count"
     When I go to the stream page
-    And I should see "1 reaction" within ".show-comments"
+    Then I should see a "a.like-action.active"
-    And I click on selector "a.show-comments"
+    And I should see "1" within ".like-count"
-    Then I should see "1" within ".like-count"
 
   Scenario: comment and delete a mobile post
     When I click on selector "a.comment-action.inactive"
@@ -39,9 +37,9 @@ Feature: reactions mobile post
     And I press "Comment"
     Then I should see "is that a poodle?" within ".comment-container"
     When I go to the stream page
-    And I should see "1 reaction" within ".show-comments"
+    And I should see "1 comment" within ".show-comments"
-    And I click on selector "a.show-comments"
     And I should see "1" within ".comment-count"
-    When I click on selector "a.comment-action"
+    When I click on selector "a.show-comments"
+    And I click on selector "a.comment-action"
     And I confirm the alert after I click on selector "a.remove"
-    Then I should not see "1 reaction" within ".show-comments"
+    Then I should see "0 comments" within ".show-comments"

spec/javascripts/mobile/mobile_comments_spec.js

@@ -103,20 +103,20 @@ describe("Diaspora.Mobile.Comments", function(){
     });
 
     it("Increase reaction count from 1", function(){
-      expect(this.toggleReactionsLink.text().trim()).toBe("5 reactions");
+      expect(this.toggleReactionsLink.text().trim()).toBe("5 comments");
       Diaspora.Mobile.Comments.increaseReactionCount(this.bottomBar);
-      expect(this.toggleReactionsLink.text().trim()).toBe("6 reactions");
+      expect(this.toggleReactionsLink.text().trim()).toBe("6 comments");
     });
 
     it("Creates the reaction link when no reactions", function(){
       var parent = this.toggleReactionsLink.parent();
       var postGuid = this.bottomBar.parents(".stream-element").data("guid");
       this.toggleReactionsLink.remove();
-      parent.prepend($("<span/>", {"class": "show-comments"}).text("No reaction"));
+      parent.prepend($("<span/>", {"class": "show-comments"}).text("0 comments"));
 
       Diaspora.Mobile.Comments.increaseReactionCount(this.bottomBar);
       this.toggleReactionsLink = this.bottomBar.find(".show-comments").first();
-      expect(this.toggleReactionsLink.text().trim()).toBe("1 reaction");
+      expect(this.toggleReactionsLink.text().trim()).toBe("1 comment");
       expect(this.toggleReactionsLink.attr("href")).toBe("/posts/" + postGuid + "/comments.mobile");
     });
   });