Improve the way to toggle comment responses

Co-Authored-By: Javi Martín <javim@elretirao.net>

app/assets/javascripts/comments.js

@@ -2,11 +2,8 @@
   "use strict";
   App.Comments = {
     add_comment: function(parent_selector, response_html) {
-      $(parent_selector + " .comment-list:first").prepend($(response_html));
-      var hidden_responses = $(parent_selector + " .comment-list:first").is(":hidden");
-      if (parent_selector && hidden_responses) {
-        $(parent_selector).find(".comment-list:first").toggle("slow");
-      }
+      $(parent_selector + " .comment-list:first").prepend($(response_html)).show("slow");
+      $(parent_selector + " .responses-count:first").removeClass("collapsed");
       this.update_comments_count();
     },
     update_comments_count: function() {
@@ -45,8 +42,7 @@
 
       $("body").on("click", ".js-toggle-children", function() {
         $(this).closest(".comment").find(".comment-list:first").toggle("slow");
-        $(this).children(".far").toggleClass("fa-minus-square fa-plus-square");
-        $(this).children(".js-child-toggle").toggle();
+        $(this).closest(".responses-count").toggleClass("collapsed");
         return false;
       });
     }

app/assets/stylesheets/layout.scss

@@ -2121,14 +2121,6 @@ table {
       padding-left: rem-calc(18);
     }
 
-    .far {
-      font-size: $small-font-size;
-      left: 0;
-      position: absolute;
-      text-decoration: none;
-      top: 2px;
-    }
-
     .divider {
       color: $text-light;
       display: inline-block;
@@ -2139,6 +2131,35 @@ table {
     }
   }
 
+  .responses-count {
+    .far {
+      @extend .fa-minus-square;
+      font-size: $small-font-size;
+      left: 0;
+      position: absolute;
+      text-decoration: none;
+      top: 2px;
+    }
+
+    .show-children {
+      display: none;
+    }
+
+    &.collapsed {
+      .far {
+        @extend .fa-plus-square;
+      }
+
+      .collapse-children {
+        display: none;
+      }
+
+      .show-children {
+        display: inline;
+      }
+    }
+  }
+
   .comment-user {
     margin-top: $line-height / 4;
     padding: $line-height / 4 0;

app/views/comments/_responses_count.html.erb

@@ -1,8 +1,8 @@
 <% if count > 0 %>
   <%= link_to "", class: "js-toggle-children relative" do %>
-    <span class="far fa-minus-square"></span>
-    <span class="js-child-toggle" style="display: none;"><%= t("comments.comment.responses_show", count: count) %></span>
-    <span class="js-child-toggle"><%= t("comments.comment.responses_collapse", count: count) %></span>
+    <span class="far"></span>
+    <span class="show-children"><%= t("comments.comment.responses_show", count: count) %></span>
+    <span class="collapse-children"><%= t("comments.comment.responses_collapse", count: count) %></span>
   <% end %>
 <% else %>
   <%= t("comments.comment.responses", count: 0) %>

spec/system/comments/debates_spec.rb

@@ -91,8 +91,7 @@ describe "Commenting debates" do
   end
 
   scenario "can collapse comments after adding a reply", :js do
-    parent_comment = create(:comment, body: "Main comment", commentable: debate)
-    create(:comment, body: "First subcomment", commentable: debate, parent: parent_comment)
+    create(:comment, body: "Main comment", commentable: debate)
 
     login_as(user)
     visit debate_path(debate)
@@ -104,7 +103,7 @@ describe "Commenting debates" do
 
       expect(page).to have_content("It will be done next week.")
 
-      find(".fa-minus-square").click
+      click_link text: "1 response (collapse)"
 
       expect(page).not_to have_content("It will be done next week.")
     end