Fix no reaction case

This commit is contained in:
Augier 2016-01-07 16:18:16 +01:00
parent 054971c7de
commit a5198e9a01
5 changed files with 110 additions and 19 deletions

View file

@ -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 = $("<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(toggleReactionsLink);
this.showComments(bottomBar.find(".show-comments").first());
},
resetCommentBox: function(el){

View file

@ -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 {

View file

@ -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

View file

@ -258,6 +258,11 @@ en:
stop_following_confirm: "Stop following #<%= tag %>?"
follow_error: "Couldnt follow #<%= tag %> :("
stop_following_error: "Couldnt stop following #<%= tag %> :("
reactions:
zero: "<%= count%> reactions"
one: "<%= count%> reaction"
other: "<%= count%> reactions"
header:
home: "Home"

View file

@ -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");
});
});
});