From d300ae9de020bac66e9aa0e568117ad5b5ac4bef Mon Sep 17 00:00:00 2001 From: Dessalines Date: Mon, 15 Jul 2019 22:56:46 -0700 Subject: [PATCH] Adding collapse comments - Fixes #179 --- ui/src/components/comment-form.tsx | 2 ++ ui/src/components/comment-node.tsx | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index a69ae06fc..5181e45e1 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -84,6 +84,8 @@ export class CommentForm extends Component { if (i.props.node) { i.props.onReplyCancel(); } + + autosize.update(document.querySelector('textarea')); } handleCommentContentChange(i: CommentForm, event: any) { diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 126966a7b..aa7dfbe3b 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -19,6 +19,7 @@ interface CommentNodeState { banReason: string; banExpires: string; banType: BanType; + collapsed: boolean; } interface CommentNodeProps { @@ -41,7 +42,8 @@ export class CommentNode extends Component { showBanDialog: false, banReason: null, banExpires: null, - banType: BanType.Community + banType: BanType.Community, + collapsed: false, } constructor(props: any, context: any) { @@ -88,9 +90,12 @@ export class CommentNode extends Component {
  • +
  • +
    {this.state.collapsed ? '[+]' : '[-]'}
    +
  • {this.state.showEdit && } - {!this.state.showEdit && + {!this.state.showEdit && !this.state.collapsed &&
      @@ -202,7 +207,7 @@ export class CommentNode extends Component { disabled={this.props.locked} /> } - {this.props.node.children && + {this.props.node.children && !this.state.collapsed && { admins={this.props.admins} /> } + {/* A collapsed clearfix */} + {this.state.collapsed &&
      }
    ) } @@ -430,4 +437,9 @@ export class CommentNode extends Component { let then = moment.utc(this.props.node.comment.published); return now.isBefore(then); } + + handleCommentCollapse(i: CommentNode) { + i.state.collapsed = !i.state.collapsed; + i.setState(i.state); + } }