Add buttons to collapse child comments and expand all comments

tildes/scss/modules/_btn.scss

@@ -65,6 +65,22 @@
   }
 }
 
+.btn-comment-collapse-all {
+  margin-left: 0.4rem;
+  border-left-width: 1px;
+  @media (min-width: $size-md) {
+    margin-top: 0.35rem;
+  }
+}
+
+.btn-comment-expand-all {
+  margin-left: 0.2rem;
+  border-left-width: 1px;
+  @media (min-width: $size-md) {
+    margin-top: 0.35rem;
+  }
+}
+
 .btn-comment-tag {
   display: inline-flex;
   align-items: center;

tildes/static/js/behaviors/comment-collapse-all-button.js

@@ -0,0 +1,11 @@
+$.onmount('[data-js-comment-collapse-all-button]', function() {
+    $(this).click(function(event) {
+        $('.comment[data-comment-depth="1"]:not(.is-comment-collapsed)').each(
+            function(idx, child) {
+                $(child).find(
+                    '[data-js-comment-collapse-button]:first').trigger('click');
+            });
+
+        $(this).blur();
+    });
+});

tildes/static/js/behaviors/comment-expand-all-button.js

@@ -0,0 +1,12 @@
+$.onmount('[data-js-comment-expand-all-button]', function() {
+    $(this).click(function(event) {
+        $('.comment.is-comment-collapsed').each(
+            function(idx, child) {
+                $(child).find(
+                    '[data-js-comment-collapse-button]:first').trigger('click');
+            });
+
+
+        $(this).blur();
+    });
+});

tildes/tildes/templates/topic.jinja2

@@ -153,6 +153,9 @@
       {% endtrans %}
       </h2>
 
+      <button class="btn btn-comment-collapse btn-comment-collapse-all" data-js-comment-collapse-all-button title="Collapse child comments">&minus;</button>
+      <button class="btn btn-comment-collapse btn-comment-expand-all" data-js-comment-expand-all-button title="Expand all comments">+</button>
+
       <form class="form-listing-options" method="get">
         <div class="form-group">
           <label for="comment_order">Comments sorted by</label>