Improve the way to toggle comment responses

Co-Authored-By: Javi Martín <javim@elretirao.net>
consuldemocracy · May 15, 2020 · 8bf8726 · 8bf8726
1 parent 343a1c5
commit 8bf8726
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/app/assets/javascripts/comments.js b/app/assets/javascripts/comments.js
@@ -5,7 +5,7 @@
       $(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");
+        App.Comments.toggle_responses(parent_selector);
       }
       this.update_comments_count();
     },
@@ -37,16 +37,18 @@
     toggle_form: function(id) {
       $("#js-comment-form-" + id).toggle();
     },
+    toggle_responses: function(comment_id) {
+      $(comment_id).find(".responses-count").toggleClass("collapsed");
+      $(comment_id).find(".comment-list:first").toggle("slow");
+    },
     initialize: function() {
       $("body").on("click", ".js-add-comment-link", function() {
         App.Comments.toggle_form($(this).data().id);
         return false;
       });
 
       $("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();
+        App.Comments.toggle_responses($(this).closest(".comment"));
         return false;
       });
     }

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -2137,6 +2137,30 @@ table {
     form {
       margin-top: $line-height / 2;
     }
+
+    .responses-count {
+      .far {
+        @extend .fa-minus-square;
+      }
+
+      .show-children {
+        display: none;
+      }
+
+      &.collapsed {
+        .far {
+          @extend .fa-plus-square;
+        }
+
+        .collapse-children {
+          display: none;
+        }
+
+        .show-children {
+          display: inline;
+        }
+      }
+    }
   }
 
   .comment-user {

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