From 18256f3709c0376e359eba234396b00a8d097bea Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Wed, 9 Aug 2017 23:52:03 +0200 Subject: [PATCH 1/2] Include count in mobile post action link (reshare, comment and like) --- .../javascripts/mobile/mobile_post_actions.js | 4 ++-- app/assets/stylesheets/mobile/comments.scss | 12 +++++++----- app/helpers/mobile_helper.rb | 19 +++++++++++++------ app/views/comments/_post_stats.mobile.haml | 15 ++++++--------- 4 files changed, 28 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/mobile/mobile_post_actions.js b/app/assets/javascripts/mobile/mobile_post_actions.js index 7df54d6a9..ed6bb16b9 100644 --- a/app/assets/javascripts/mobile/mobile_post_actions.js +++ b/app/assets/javascripts/mobile/mobile_post_actions.js @@ -75,7 +75,7 @@ onLike: function(evt){ evt.preventDefault(); - var link = $(evt.target), + var link = $(evt.target).closest(".like-action"), likeCounter = $(evt.target).closest(".stream-element").find(".like-count"); if(!link.hasClass("loading") && link.hasClass("inactive")) { @@ -89,7 +89,7 @@ onReshare: function(evt) { evt.preventDefault(); - var link = $(this), + var link = $(this).closest(".reshare-action"), href = link.attr("href"), confirmText = link.attr("title"); diff --git a/app/assets/stylesheets/mobile/comments.scss b/app/assets/stylesheets/mobile/comments.scss index 7588a47fe..62db27354 100644 --- a/app/assets/stylesheets/mobile/comments.scss +++ b/app/assets/stylesheets/mobile/comments.scss @@ -43,16 +43,15 @@ display: flex; .count { + color: $text-color; + font-family: $font-family-base; + font-size: $font-size-base; line-height: 22px; margin-left: 5px; + vertical-align: top; z-index: 2; } - .icon-count-group { - display: flex; - margin: 0 7px; - } - [class^="entypo"] { color: $text-grey; font-size: 24px; @@ -73,6 +72,9 @@ } .post-action { + display: flex; + margin: 0 7px; + .disabled { color: $medium-gray; } } diff --git a/app/helpers/mobile_helper.rb b/app/helpers/mobile_helper.rb index ef3d184e5..6d8f008dc 100644 --- a/app/helpers/mobile_helper.rb +++ b/app/helpers/mobile_helper.rb @@ -7,25 +7,30 @@ module MobileHelper reshare = Reshare.where(author_id: current_user.person_id, root_guid: absolute_root.guid).first klass = reshare.present? ? "active" : "inactive" - link_to "", reshares_path(root_guid: absolute_root.guid), + link_to content_tag(:span, post.reshares.size, class: "count reshare-count"), + reshares_path(root_guid: absolute_root.guid), title: t("reshares.reshare.reshare_confirmation", author: absolute_root.author_name), class: "entypo-reshare reshare-action #{klass}" else - content_tag :div, nil, class: "entypo-reshare reshare-action disabled" + content_tag :div, + content_tag(:span, post.reshares.size, class: "count reshare-count"), + class: "entypo-reshare reshare-action disabled" end else - content_tag :div, nil, class: "entypo-reshare reshare-action disabled" + content_tag :div, + content_tag(:span, post.reshares.size, class: "count reshare-count"), + class: "entypo-reshare reshare-action disabled" end end def mobile_like_icon(post) if current_user && current_user.liked?(post) - link_to "", + link_to content_tag(:span, post.likes.size, class: "count like-count"), "#", data: {url: post_like_path(post.id, current_user.like_for(post).id)}, class: "entypo-heart like-action active" else - link_to "", + link_to content_tag(:span, post.likes.size, class: "count like-count"), "#", data: {url: post_likes_path(post.id)}, class: "entypo-heart like-action inactive" @@ -33,7 +38,9 @@ module MobileHelper end def mobile_comment_icon(post) - link_to "", new_post_comment_path(post), class: "entypo-comment comment-action inactive" + link_to content_tag(:span, post.comments.size, class: "count comment-count"), + new_post_comment_path(post), + class: "entypo-comment comment-action inactive" end def show_comments_link(post, klass="") diff --git a/app/views/comments/_post_stats.mobile.haml b/app/views/comments/_post_stats.mobile.haml index 106ef8ae8..980bf46ef 100644 --- a/app/views/comments/_post_stats.mobile.haml +++ b/app/views/comments/_post_stats.mobile.haml @@ -1,13 +1,10 @@ .post-stats - if post.public? - .icon-count-group - .post-action= mobile_reshare_icon(post) - %span.reshare-count.count= post.reshares.size + .post-action + = mobile_reshare_icon(post) - .icon-count-group - .post-action= mobile_comment_icon(post) - %span.comment-count.count= post.comments.size + .post-action + = mobile_comment_icon(post) - .icon-count-group - .post-action= mobile_like_icon(post) - %span.like-count.count= post.likes.size + .post-action + = mobile_like_icon(post) From bc0088eb47f76c36d18be495e56ce6c7c9f1fb97 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Wed, 9 Aug 2017 23:53:16 +0200 Subject: [PATCH 2/2] Increase mobile reshare counter after reshare --- .../javascripts/mobile/mobile_post_actions.js | 4 ++++ .../mobile/mobile_post_actions_spec.js | 15 +++++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/mobile/mobile_post_actions.js b/app/assets/javascripts/mobile/mobile_post_actions.js index ed6bb16b9..76f1126d5 100644 --- a/app/assets/javascripts/mobile/mobile_post_actions.js +++ b/app/assets/javascripts/mobile/mobile_post_actions.js @@ -103,6 +103,10 @@ }, success: function() { Diaspora.Mobile.PostActions.toggleActive(link); + var reshareCounter = $(evt.target).closest(".stream-element").find(".reshare-count"); + if (reshareCounter) { + reshareCounter.text(parseInt(reshareCounter.text(), 10) + 1); + } }, error: function(response) { Diaspora.Mobile.Alert.handleAjaxError(response); diff --git a/spec/javascripts/mobile/mobile_post_actions_spec.js b/spec/javascripts/mobile/mobile_post_actions_spec.js index a33a29994..bbb65b23d 100644 --- a/spec/javascripts/mobile/mobile_post_actions_spec.js +++ b/spec/javascripts/mobile/mobile_post_actions_spec.js @@ -88,7 +88,7 @@ describe("Diaspora.Mobile.PostActions", function(){ spec.loadFixture("aspects_index_mobile_public_post"); Diaspora.Mobile.PostActions.initialize(); this.link = $(".stream .like-action").first(); - this.likeCounter = this.link.closest(".stream-element").find(".like-count"); + this.likeCounter = this.link.find(".like-count"); }); it("always calls showLoader before sending request", function(){ @@ -143,7 +143,7 @@ describe("Diaspora.Mobile.PostActions", function(){ spec.loadFixture("aspects_index_mobile_public_post"); Diaspora.Mobile.PostActions.initialize(); this.link = $(".stream .like-action").first(); - this.likeCounter = this.link.closest(".stream-element").find(".like-count"); + this.likeCounter = this.link.find(".like-count"); Diaspora.Mobile.PostActions.like(this.likeCounter, this.link); jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"}); }); @@ -238,6 +238,17 @@ describe("Diaspora.Mobile.PostActions", function(){ expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalledWith(this.reshareLink); }); + it("increases the reshare count on success", function() { + spyOn(Diaspora.Mobile.PostActions, "toggleActive"); + var reshareCounter = this.reshareLink.find(".reshare-count"); + reshareCounter.text("8"); + + this.reshareLink.click(); + jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{}"}); + expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalledWith(this.reshareLink); + expect(reshareCounter.text()).toBe("9"); + }); + it("lets Diaspora.Mobile.Alert handle AJAX errors", function() { spyOn(Diaspora.Mobile.Alert, "handleAjaxError"); this.reshareLink.click();