Merge pull request #7520 from svbergerem/increase-mobile-post-action-size

Include count in mobile post action link and increase reshare counter after reshare

Changelog.md

@@ -24,6 +24,7 @@ If so, please delete it since it will prevent the federation from working proper
 * Send public profiles publicly [#7501](https://github.com/diaspora/diaspora/pull/7501)
 * Change sender for mails [#7495](https://github.com/diaspora/diaspora/pull/7495)
 * Move back to top to the right to avoid misclicks [#7516](https://github.com/diaspora/diaspora/pull/7516)
+* Include count in mobile post action link [#7520](https://github.com/diaspora/diaspora/pull/7520)
 
 ## Bug fixes
 
@@ -31,6 +32,7 @@ If so, please delete it since it will prevent the federation from working proper
 * Improve stream when ignoring a person who posts a lot of tagged posts [#7503](https://github.com/diaspora/diaspora/pull/7503)
 * Fix order of comments across pods [#7436](https://github.com/diaspora/diaspora/pull/7436)
 * Prevent publisher from closing in preview mode [#7518](https://github.com/diaspora/diaspora/pull/7518)
+* Increase reshare counter after reshare on mobile [#7520](https://github.com/diaspora/diaspora/pull/7520)
 
 ## Features
 * Add support for mentions in comments to the backend [#6818](https://github.com/diaspora/diaspora/pull/6818)

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

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; }
   }
 

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="")

app/views/comments/_post_stats.mobile.haml

 .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)

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();