nutomic/lemmy
Archived
2
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

Adding collapse comments

Browse source 
- Fixes #179
This commit is contained in:
Dessalines 2019-07-15 22:56:46 -07:00
parent 9d9283e010
commit d300ae9de0
2 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/src/components/comment-form.tsx
View file

@ -84,6 +84,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
if (i.props.node) { if (i.props.node) {
i.props.onReplyCancel(); i.props.onReplyCancel();
} }
autosize.update(document.querySelector('textarea'));
} }
handleCommentContentChange(i: CommentForm, event: any) { handleCommentContentChange(i: CommentForm, event: any) {

18
ui/src/components/comment-node.tsx
View file

@ -19,6 +19,7 @@ interface CommentNodeState {
banReason: string; banReason: string;
banExpires: string; banExpires: string;
banType: BanType; banType: BanType;
collapsed: boolean;
} }
interface CommentNodeProps { interface CommentNodeProps {
@ -41,7 +42,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
showBanDialog: false, showBanDialog: false,
banReason: null, banReason: null,
banExpires: null, banExpires: null,
banType: BanType.Community banType: BanType.Community,
collapsed: false,
} }
constructor(props: any, context: any) { constructor(props: any, context: any) {
@ -88,9 +90,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<li className="list-inline-item"> <li className="list-inline-item">
<span><MomentTime data={node.comment} /></span> <span><MomentTime data={node.comment} /></span>
</li> </li>
<li className="list-inline-item">
<div className="pointer text-monospace" onClick={linkEvent(this, this.handleCommentCollapse)}>{this.state.collapsed ? '[+]' : '[-]'}</div>
</li>
</ul> </ul>
{this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />} {this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />}
{!this.state.showEdit && {!this.state.showEdit && !this.state.collapsed &&
<div> <div>
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.removed ? '*removed*' : node.comment.deleted ? '*deleted*' : node.comment.content)} /> <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.removed ? '*removed*' : node.comment.deleted ? '*deleted*' : node.comment.content)} />
<ul class="list-inline mb-1 text-muted small font-weight-bold"> <ul class="list-inline mb-1 text-muted small font-weight-bold">
@ -202,7 +207,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
disabled={this.props.locked} disabled={this.props.locked}
/> />
} }
{this.props.node.children && {this.props.node.children && !this.state.collapsed &&
<CommentNodes <CommentNodes
nodes={this.props.node.children} nodes={this.props.node.children}
locked={this.props.locked} locked={this.props.locked}
@ -210,6 +215,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
admins={this.props.admins} admins={this.props.admins}
/> />
} }
{/* A collapsed clearfix */}
{this.state.collapsed && <div class="row col-12"></div>}
</div> </div>
) )
} }
@ -430,4 +437,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
let then = moment.utc(this.props.node.comment.published); let then = moment.utc(this.props.node.comment.published);
return now.isBefore(then); return now.isBefore(then);
} }
handleCommentCollapse(i: CommentNode) {
i.state.collapsed = !i.state.collapsed;
i.setState(i.state);
}
} }