add collapse for threads

web/app/common/constants.js

@@ -6,12 +6,12 @@ const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
 const DEFAULT_LAST_COMMENTS_MAX = 15;
 const DEFAULT_MAX_COMMENT_SIZE = 1000;
+const DEFAULT_SORT = '-score';
 const PROVIDER_NAMES = {
   google: 'Google',
   facebook: 'Facebook',
   github: 'GitHub',
 };
-const DEFAULT_SORT = '-score';
 
 module.exports = {
   BASE_URL,

web/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss

@@ -0,0 +1,26 @@
+.comment__action_type_collapse {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  line-height: 10px;
+  text-align: center;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  color: #ccc;
+
+  &:hover {
+    border-color: #0aa;
+    color: #0aa;
+  }
+
+  &.comment__action_selected {
+    background: #ccc;
+    color: #fff;
+
+    &:hover {
+      background: #0aa;
+    }
+  }
+}

web/app/components/comment/__action/comment__action.scss

@@ -1,5 +1,6 @@
 .comment__action {
   font-size: 14px;
+  vertical-align: middle;
   cursor: pointer;
   user-select: none;
   color: #259C9A;
@@ -12,6 +13,10 @@
     outline: none;
   }
 
+  + .comment__action {
+    margin-left: 8px;
+  }
+
   + .comment__controls {
     &::before {
       content: '•';

web/app/components/comment/comment.jsx

@@ -21,6 +21,7 @@ export default class Comment extends Component {
     this.decreaseScore = this.decreaseScore.bind(this);
     this.increaseScore = this.increaseScore.bind(this);
     this.toggleInputVisibility = this.toggleInputVisibility.bind(this);
+    this.toggleCollapse = this.toggleCollapse.bind(this);
     this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
     this.scrollToParent = this.scrollToParent.bind(this);
     this.onReply = this.onReply.bind(this);
@@ -194,6 +195,12 @@ export default class Comment extends Component {
     }
   }
 
+  toggleCollapse() {
+    if (this.props.onCollapseToggle) {
+      this.props.onCollapseToggle();
+    }
+  }
+
   render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
     const { data, mods = {} } = props;
     const isAdmin = !guest && store.get('user').admin;
@@ -334,6 +341,15 @@ export default class Comment extends Component {
                   )
                 }
 
+                {
+                  !mods.disabled && mods.collapsible && (
+                    <span
+                      className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
+                      onClick={this.toggleCollapse}
+                    >{mods.collapsed ? '+' : '−'}</span>
+                  )
+                }
+
                 {
                   isAdmin && (
                     <span className="comment__controls">

web/app/components/comment/index.js

@@ -5,6 +5,7 @@ export { default } from './comment';
 require('./comment.scss');
 
 require('./__action/comment__action.scss');
+require('./__action/_type/_collapse/comment__action_type_collapse.scss');
 
 require('./__avatar/comment__avatar.scss');
 require('./__avatar/_default/comment__avatar_default.scss');

web/app/components/thread/thread.jsx

@@ -3,20 +3,36 @@ import { h, Component } from 'preact';
 import Comment from 'components/comment';
 
 export default class Thread extends Component {
-  render(props) {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      collapsed: false,
+    };
+
+    this.onCollapseToggle = this.onCollapseToggle.bind(this);
+  }
+
+
+  onCollapseToggle() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
+  render(props, { collapsed }) {
     const { data: { comment, replies = [] }, mix, mods = {}, onReplyClick } = props;
 
     return (
       <div className={b('thread', props)}>
         <Comment
           data={comment}
-          mods={{ level: mods.level }}
+          mods={{ level: mods.level, collapsed, collapsible: !!replies.length }}
           onReply={props.onReply}
           onReplyClick={onReplyClick}
+          onCollapseToggle={this.onCollapseToggle}
         />
 
         {
-          !!replies.length && replies.map(thread => (
+          !collapsed && !!replies.length && replies.map(thread => (
             <Thread
               data={thread}
               mods={{ level: mods.level < 5 ? mods.level + 1 : mods.level }}