Improve the way to toggle comment responses

Co-Authored-By: Javi Martín <javim@elretirao.net>
consuldemocracy · May 25, 2020 · 9951ec0 · 9951ec0
1 parent 6323240
commit 9951ec0
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/app/assets/javascripts/comments.js b/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;
       });
     }

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -2121,21 +2121,42 @@ table {
       padding-left: rem-calc(18);
     }
 
+    .divider {
+      color: $text-light;
+      display: inline-block;
+    }
+
+    form {
+      margin-top: $line-height / 2;
+    }
+  }
+
+  .responses-count {
     .far {
+      @extend .fa-minus-square;
       font-size: $small-font-size;
       left: 0;
       position: absolute;
       text-decoration: none;
       top: 2px;
     }
 
-    .divider {
-      color: $text-light;
-      display: inline-block;
+    .show-children {
+      display: none;
     }
 
-    form {
-      margin-top: $line-height / 2;
+    &.collapsed {
+      .far {
+        @extend .fa-plus-square;
+      }
+
+      .collapse-children {
+        display: none;
+      }
+
+      .show-children {
+        display: inline;
+      }
     }
   }
 

diff --git a/app/views/comments/_responses_count.html.erb b/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) %>

diff --git a/spec/system/comments/debates_spec.rb b/spec/system/comments/debates_spec.rb
@@ -91,8 +91,7 @@
   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 @@
 
       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