diff options
author | Ernest <ernestwisniewski2@gmail.com> | 2020-07-13 08:45:57 +0200 |
---|---|---|
committer | Ernest <ernestwisniewski2@gmail.com> | 2020-07-13 08:45:57 +0200 |
commit | 9ad0a8825ae8cda6b6fcb3d5bb163c234c26b823 (patch) | |
tree | 3b6ea795980aac90088cda490a2832bc392d9f06 /ui/src | |
parent | e06d9a620c53eb58aed98db7196555fc6adb5916 (diff) | |
parent | f0357bc988e60d98cc566bd8faf680879abec536 (diff) |
Merge remote-tracking branch 'upstream/master' into add_post_title_to_comments_view
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/post.tsx | 184 | ||||
-rw-r--r-- | ui/src/interfaces.ts | 5 | ||||
-rw-r--r-- | ui/src/version.ts | 2 |
3 files changed, 116 insertions, 75 deletions
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/interfaces.ts b/ui/src/interfaces.ts index 2b4b5e70..1f281302 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 a62e5c1d..068e4237 100644 --- a/ui/src/version.ts +++ b/ui/src/version.ts @@ -1 +1 @@ -export const version: string = 'v0.7.16'; +export const version: string = 'v0.7.17'; |