diff --git a/app/assets/javascripts/mobile/mobile_comments.js b/app/assets/javascripts/mobile/mobile_comments.js index fe60d9074..0b6e328eb 100644 --- a/app/assets/javascripts/mobile/mobile_comments.js +++ b/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) { - return parseInt(match, 10) + 1; - })); + var count = toggleReactionsLink.text().match(/.*(\d+).*/); + 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 = $("", {"class": "show-comments", "href": Routes.postComments(postGuid) + ".mobile"}) + .html(text + ""); + 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 + ""); + } }, 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(toggleReactionsLink); + this.showComments(bottomBar.find(".show-comments").first()); }, resetCommentBox: function(el){ diff --git a/app/assets/stylesheets/mobile/comments.scss b/app/assets/stylesheets/mobile/comments.scss index e79d2c3b6..3b10f6bd3 100644 --- a/app/assets/stylesheets/mobile/comments.scss +++ b/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, - &:active, - &:focus { - text-decoration: none; - } - - &.entypo-reshare.active { color: $blue; } - - &.entypo-heart.active { color: $red; } } + + [class^="entypo"]:hover, + [class^="entypo"]:active, + [class^="entypo"]:focus { + text-decoration: none; + } + + .entypo-reshare.active { color: $blue; } + + .entypo-heart.active { color: $red; } } .post-action { diff --git a/app/helpers/mobile_helper.rb b/app/helpers/mobile_helper.rb index f16e5e68b..eb3e26a98 100644 --- a/app/helpers/mobile_helper.rb +++ b/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)} ".html_safe, + link_to "#{t('reactions', count: reactions_count)}".html_safe, post_comments_path(post, format: "mobile"), class: "show-comments #{klass}" else diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index fd0325aba..10e6fb8c9 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -258,6 +258,11 @@ en: stop_following_confirm: "Stop following #<%= tag %>?" 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" diff --git a/spec/javascripts/mobile/mobile_comments_spec.js b/spec/javascripts/mobile/mobile_comments_spec.js index 91a5c9d7e..1721d8090 100644 --- a/spec/javascripts/mobile/mobile_comments_spec.js +++ b/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($("", {"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"); + }); + }); });