Browse Source

Add buttons for bulk collapse/expand of comments

Adds two buttons: one for collapsing all child comments (non-top-level
ones) and one for uncollapsing all comments.
merge-requests/32/head
Jeff Kayser 6 years ago
committed by Deimos
parent
commit
595af8f9ae
  1. 16
      tildes/scss/modules/_btn.scss
  2. 11
      tildes/static/js/behaviors/comment-collapse-all-button.js
  3. 11
      tildes/static/js/behaviors/comment-expand-all-button.js
  4. 3
      tildes/tildes/templates/topic.jinja2

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

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

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

@ -0,0 +1,11 @@
$.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();
});
});

3
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>

Loading…
Cancel
Save