diff options
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/comment-form.tsx | 5 | ||||
-rw-r--r-- | ui/src/components/comment-node.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/post-form.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/post.tsx | 184 | ||||
-rw-r--r-- | ui/src/components/search.tsx | 22 | ||||
-rw-r--r-- | ui/src/interfaces.ts | 5 | ||||
-rw-r--r-- | ui/src/version.ts | 2 |
7 files changed, 137 insertions, 85 deletions
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 04720cbb..00b4fe1e 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -33,6 +33,7 @@ interface CommentFormProps { onReplyCancel?(): any; edit?: boolean; disabled?: boolean; + focus?: boolean; } interface CommentFormState { @@ -122,7 +123,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { setTimeout(() => autosize.update(textarea), 10); } - textarea.focus(); + if (this.props.focus) { + textarea.focus(); + } } } diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 8e976e7c..82af0bbe 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -229,6 +229,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { edit onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} + focus /> )} {!this.state.showEdit && !this.state.collapsed && ( @@ -697,6 +698,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { node={node} onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} + focus /> )} {node.children && !this.state.collapsed && ( diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 30527510..e5efeaac 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -166,7 +166,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { componentWillUnmount() { this.subscription.unsubscribe(); - this.choices.destroy(); + this.choices && this.choices.destroy(); window.onbeforeunload = null; } diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index 5d76808e..ce737a4e 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -11,6 +11,7 @@ import { CommentForm as CommentFormI, CommentResponse, CommentSortType, + CommentViewType, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, @@ -49,6 +50,7 @@ interface PostState { post: PostI; comments: Array<Comment>; commentSort: CommentSortType; + commentViewType: CommentViewType; community: Community; moderators: Array<CommunityUser>; online: number; @@ -65,6 +67,7 @@ export class Post extends Component<any, PostState> { post: null, comments: [], commentSort: CommentSortType.Hot, + commentViewType: CommentViewType.Tree, community: null, moderators: [], online: null, @@ -208,12 +211,12 @@ export class Post extends Component<any, PostState> { disabled={this.state.post.locked} /> {this.state.comments.length > 0 && this.sortRadios()} - {this.commentsTree()} - </div> - <div class="col-12 col-sm-12 col-md-4"> - {this.state.comments.length > 0 && this.newComments()} - {this.sidebar()} + {this.state.commentViewType == CommentViewType.Tree && + this.commentsTree()} + {this.state.commentViewType == CommentViewType.Chat && + this.commentsFlat()} </div> + <div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div> </div> )} </div> @@ -222,79 +225,107 @@ export class Post extends Component<any, PostState> { sortRadios() { return ( - <div class="btn-group btn-group-toggle mb-2"> - <label - className={`btn btn-sm btn-secondary pointer ${ - this.state.commentSort === CommentSortType.Hot && 'active' - }`} - > - {i18n.t('hot')} - <input - type="radio" - value={CommentSortType.Hot} - checked={this.state.commentSort === CommentSortType.Hot} - onChange={linkEvent(this, this.handleCommentSortChange)} - /> - </label> - <label - className={`btn btn-sm btn-secondary pointer ${ - this.state.commentSort === CommentSortType.Top && 'active' - }`} - > - {i18n.t('top')} - <input - type="radio" - value={CommentSortType.Top} - checked={this.state.commentSort === CommentSortType.Top} - onChange={linkEvent(this, this.handleCommentSortChange)} - /> - </label> - <label - className={`btn btn-sm btn-secondary pointer ${ - this.state.commentSort === CommentSortType.New && 'active' - }`} - > - {i18n.t('new')} - <input - type="radio" - value={CommentSortType.New} - checked={this.state.commentSort === CommentSortType.New} - onChange={linkEvent(this, this.handleCommentSortChange)} - /> - </label> - <label - className={`btn btn-sm btn-secondary pointer ${ - this.state.commentSort === CommentSortType.Old && 'active' - }`} - > - {i18n.t('old')} - <input - type="radio" - value={CommentSortType.Old} - checked={this.state.commentSort === CommentSortType.Old} - onChange={linkEvent(this, this.handleCommentSortChange)} - /> - </label> - </div> + <> + <div class="btn-group btn-group-toggle mr-3 mb-2"> + <label + className={`btn btn-sm btn-secondary pointer ${ + this.state.commentSort === CommentSortType.Hot && 'active' + }`} + > + {i18n.t('hot')} + <input + type="radio" + value={CommentSortType.Hot} + checked={this.state.commentSort === CommentSortType.Hot} + onChange={linkEvent(this, this.handleCommentSortChange)} + /> + </label> + <label + className={`btn btn-sm btn-secondary pointer ${ + this.state.commentSort === CommentSortType.Top && 'active' + }`} + > + {i18n.t('top')} + <input + type="radio" + value={CommentSortType.Top} + checked={this.state.commentSort === CommentSortType.Top} + onChange={linkEvent(this, this.handleCommentSortChange)} + /> + </label> + <label + className={`btn btn-sm btn-secondary pointer ${ + this.state.commentSort === CommentSortType.New && 'active' + }`} + > + {i18n.t('new')} + <input + type="radio" + value={CommentSortType.New} + checked={this.state.commentSort === CommentSortType.New} + onChange={linkEvent(this, this.handleCommentSortChange)} + /> + </label> + <label + className={`btn btn-sm btn-secondary pointer ${ + this.state.commentSort === CommentSortType.Old && 'active' + }`} + > + {i18n.t('old')} + <input + type="radio" + value={CommentSortType.Old} + checked={this.state.commentSort === CommentSortType.Old} + onChange={linkEvent(this, this.handleCommentSortChange)} + /> + </label> + </div> + <div class="btn-group btn-group-toggle mb-2"> + <label + className={`btn btn-sm btn-secondary pointer ${ + this.state.commentViewType === CommentViewType.Tree && 'active' + }`} + > + {i18n.t('tree')} + <input + type="radio" + value={CommentViewType.Tree} + checked={this.state.commentViewType === CommentViewType.Tree} + onChange={linkEvent(this, this.handleCommentViewTypeChange)} + /> + </label> + <label + className={`btn btn-sm btn-secondary pointer ${ + this.state.commentViewType === CommentViewType.Chat && 'active' + }`} + > + {i18n.t('chat')} + <input + type="radio" + value={CommentViewType.Chat} + checked={this.state.commentViewType === CommentViewType.Chat} + onChange={linkEvent(this, this.handleCommentViewTypeChange)} + /> + </label> + </div> + </> ); } - newComments() { + commentsFlat() { return ( - <div class="d-none d-md-block new-comments mb-3 card border-secondary"> - <div class="card-body small"> - <h6>{i18n.t('recent_comments')}</h6> - <CommentNodes - nodes={commentsToFlatNodes(this.state.comments)} - noIndent - locked={this.state.post.locked} - moderators={this.state.moderators} - admins={this.state.siteRes.admins} - postCreatorId={this.state.post.creator_id} - showContext - enableDownvotes={this.state.siteRes.site.enable_downvotes} - /> - </div> + <div> + <CommentNodes + nodes={commentsToFlatNodes(this.state.comments)} + noIndent + locked={this.state.post.locked} + moderators={this.state.moderators} + admins={this.state.siteRes.admins} + postCreatorId={this.state.post.creator_id} + showContext + enableDownvotes={this.state.siteRes.site.enable_downvotes} + sort={this.state.commentSort} + /> </div> ); } @@ -318,6 +349,11 @@ export class Post extends Component<any, PostState> { i.setState(i.state); } + handleCommentViewTypeChange(i: Post, event: any) { + i.state.commentViewType = Number(event.target.value); + i.setState(i.state); + } + buildCommentsTree(): Array<CommentNodeI> { let map = new Map<number, CommentNodeI>(); for (let comment of this.state.comments) { diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx index dd219ba9..b2e55497 100644 --- a/ui/src/components/search.tsx +++ b/ui/src/components/search.tsx @@ -275,6 +275,7 @@ export class Search extends Component<any, SearchState> { {i.type_ == 'users' && ( <div> <span> + @ <UserListing user={{ name: (i.data as UserView).name, @@ -282,9 +283,9 @@ export class Search extends Component<any, SearchState> { }} /> </span> - <span>{` - ${ - (i.data as UserView).comment_score - } comment karma`}</span> + <span>{` - ${i18n.t('number_of_comments', { + count: (i.data as UserView).number_of_comments, + })}`}</span> </div> )} </div> @@ -359,12 +360,17 @@ export class Search extends Component<any, SearchState> { <div class="row"> <div class="col-12"> <span> - <Link - className="text-info" - to={`/u/${user.name}`} - >{`/u/${user.name}`}</Link> + @ + <UserListing + user={{ + name: user.name, + avatar: user.avatar, + }} + /> </span> - <span>{` - ${user.comment_score} comment karma`}</span> + <span>{` - ${i18n.t('number_of_comments', { + count: user.number_of_comments, + })}`}</span> </div> </div> ))} diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts index 774836a2..0bb09e2c 100644 --- a/ui/src/interfaces.ts +++ b/ui/src/interfaces.ts @@ -54,6 +54,11 @@ export enum CommentSortType { Old, } +export enum CommentViewType { + Tree, + Chat, +} + export enum ListingType { All, Subscribed, diff --git a/ui/src/version.ts b/ui/src/version.ts index 098bfb6b..a62e5c1d 100644 --- a/ui/src/version.ts +++ b/ui/src/version.ts @@ -1 +1 @@ -export const version: string = 'v0.7.15'; +export const version: string = 'v0.7.16'; |