Fix no reaction case

app/assets/javascripts/mobile/mobile_comments.js

@@ -57,8 +57,9 @@
     toggleComments: function(toggleReactionsLink) {
       if(toggleReactionsLink.hasClass("loading")) { return; }
 
-      if (toggleReactionsLink.hasClass("active")) {
+      if(toggleReactionsLink.hasClass("active")) {
         this.hideComments(toggleReactionsLink);
+        toggleReactionsLink.parents(".bottom-bar").find(".add-comment-switcher").addClass("hidden");
       } else {
         this.showComments(toggleReactionsLink);
       }
@@ -171,7 +172,7 @@
       var bottomBar = form.closest(".bottom-bar").first();
       this.addNewComments(bottomBar, data);
       this.updateCommentCount(bottomBar);
-      this.updateReactionCount(bottomBar);
+      this.increaseReactionCount(bottomBar);
       this.handleCommentShowing(form, bottomBar);
       bottomBar.find("time.timeago").timeago();
     },
@@ -193,11 +194,28 @@
     },
 
     // Fix for no reactions
-    updateReactionCount: function(bottomBar) {
+    increaseReactionCount: function(bottomBar) {
       var toggleReactionsLink = bottomBar.find(".show-comments").first();
-      toggleReactionsLink.text(toggleReactionsLink.text().replace(/(\d+)/, function (match) {
+      var count = toggleReactionsLink.text().match(/.*(\d+).*/);
-        return parseInt(match, 10) + 1;
+      var text = "";
-      }));
+
+      // No previous comment
+      if(!count){
+        text = Diaspora.I18n.t("stream.reactions", {count: 1});
+        var parent = toggleReactionsLink.parent();
+        var postGuid = bottomBar.parents(".stream_element").data("guid");
+
+        toggleReactionsLink.remove();
+        toggleReactionsLink = $("<a/>", {"class": "show-comments", "href": Routes.postComments(postGuid) + ".mobile"})
+          .html(text + "<i class='entypo-chevron-up'/>");
+        parent.prepend(toggleReactionsLink);
+        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'/>");
+      }
     },
 
     handleCommentShowing: function(form, bottomBar) {
@@ -206,8 +224,7 @@
       this.resetCommentBox(formContainer);
       var commentActionLink = bottomBar.find("a.comment-action").first();
       commentActionLink.addClass("inactive");
-      var toggleReactionsLink = bottomBar.find(".show-comments").first();
+      this.showComments(bottomBar.find(".show-comments").first());
-      this.showComments(toggleReactionsLink);
     },
 
     resetCommentBox: function(el){

app/assets/stylesheets/mobile/comments.scss

@@ -22,6 +22,8 @@
     position: relative;
     top: 3px;
 
+    > [class^="entypo"] { margin-left: .5em; }
+
     &:hover,
     &:active,
     &:focus {
@@ -61,17 +63,17 @@
       height: 28px;
       margin: 0;
       width: 100%;
+    }
 
-      &:hover,
+    [class^="entypo"]:hover,
-      &:active,
+    [class^="entypo"]:active,
-      &:focus {
+    [class^="entypo"]:focus {
       text-decoration: none;
     }
 
-      &.entypo-reshare.active { color: $blue; }
+    .entypo-reshare.active { color: $blue; }
 
-      &.entypo-heart.active { color: $red; }
+    .entypo-heart.active { color: $red; }
-    }
   }
 
   .post-action {

app/helpers/mobile_helper.rb

@@ -38,7 +38,7 @@ module MobileHelper
       entypo_class = "entypo-chevron-down"
     end
     if reactions_count > 0
-      link_to "#{t('reactions', count: reactions_count)} <i class='#{entypo_class}'></i>".html_safe,
+      link_to "#{t('reactions', count: reactions_count)}<i class='#{entypo_class}'></i>".html_safe,
               post_comments_path(post, format: "mobile"),
               class: "show-comments #{klass}"
     else

config/locales/javascript/javascript.en.yml

@@ -259,6 +259,11 @@ 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"

spec/javascripts/mobile/mobile_comments_spec.js

@@ -100,4 +100,71 @@ describe("Diaspora.Mobile.Comments", function(){
       expect(jQuery.ajax).not.toHaveBeenCalled();
     });
   });
+
+  describe("increaseReactionCount", function(){
+    beforeEach(function() {
+      spec.loadFixture("aspects_index_mobile_post_with_comments");
+      this.bottomBar = $(".bottom-bar").first();
+      this.toggleReactionsLink = this.bottomBar.find(".show-comments").first();
+    });
+
+    it("Increase reaction count from 1", function(){
+      expect(this.toggleReactionsLink.text().trim()).toBe("5 reactions");
+      Diaspora.Mobile.Comments.increaseReactionCount(this.bottomBar);
+      expect(this.toggleReactionsLink.text().trim()).toBe("6 reactions");
+    });
+
+    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"));
+
+      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.attr("href")).toBe("/posts/" + postGuid + "/comments.mobile");
+    });
+  });
+
+  describe("bottomBarLazy", function(){
+    beforeEach(function() {
+      spec.loadFixture("aspects_index_mobile_post_with_comments");
+      this.bottomBar = $(".bottom-bar").first();
+      this.bottomBarLazy = Diaspora.Mobile.Comments.bottomBarLazy(this.bottomBar);
+    });
+
+    it("shows and hides the loader", function(){
+      expect(this.bottomBarLazy.loader()).toHaveClass("hidden");
+      this.bottomBarLazy.showLoader();
+      expect(this.bottomBarLazy.loader()).not.toHaveClass("hidden");
+      this.bottomBarLazy.hideLoader();
+      expect(this.bottomBarLazy.loader()).toHaveClass("hidden");
+    });
+
+    it("activates the bottom bar", function(){
+      expect(this.bottomBar).toHaveClass("inactive");
+      expect(this.bottomBar).not.toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink()).not.toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink().find("i")).toHaveClass("entypo-chevron-down");
+      this.bottomBarLazy.activate();
+      expect(this.bottomBar).not.toHaveClass("inactive");
+      expect(this.bottomBar).toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink()).toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink().find("i")).toHaveClass("entypo-chevron-up");
+    });
+
+    it("deactivates the bottom bar", function(){
+      this.bottomBarLazy.activate();
+      expect(this.bottomBar).not.toHaveClass("inactive");
+      expect(this.bottomBar).toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink()).toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink().find("i")).toHaveClass("entypo-chevron-up");
+      this.bottomBarLazy.deactivate();
+      expect(this.bottomBar).toHaveClass("inactive");
+      expect(this.bottomBar).not.toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink()).not.toHaveClass("active");
+      expect(this.bottomBarLazy.getShowCommentsLink().find("i")).toHaveClass("entypo-chevron-down");
+    });
+  });
 });