LemmyNet/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-12-24 11:51:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moving recent comments into main view as a chat select. Fixes #943

Browse source
This commit is contained in:
Dessalines 2020-07-12 00:58:42 -04:00
parent 74655de618
commit ff2f70b1de
3 changed files with 116 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
ui/src/components/post.tsx vendored
View file

@ -11,6 +11,7 @@ import {
CommentForm as CommentFormI, CommentForm as CommentFormI,
CommentResponse, CommentResponse,
CommentSortType, CommentSortType,
CommentViewType,
CommunityUser, CommunityUser,
CommunityResponse, CommunityResponse,
CommentNode as CommentNodeI, CommentNode as CommentNodeI,
@ -49,6 +50,7 @@ interface PostState {
post: PostI; post: PostI;
comments: Array<Comment>; comments: Array<Comment>;
commentSort: CommentSortType; commentSort: CommentSortType;
commentViewType: CommentViewType;
community: Community; community: Community;
moderators: Array<CommunityUser>; moderators: Array<CommunityUser>;
online: number; online: number;
@ -65,6 +67,7 @@ export class Post extends Component<any, PostState> {
post: null, post: null,
comments: [], comments: [],
commentSort: CommentSortType.Hot, commentSort: CommentSortType.Hot,
commentViewType: CommentViewType.Tree,
community: null, community: null,
moderators: [], moderators: [],
online: null, online: null,
@ -208,12 +211,12 @@ export class Post extends Component<any, PostState> {
disabled={this.state.post.locked} disabled={this.state.post.locked}
/> />
{this.state.comments.length > 0 && this.sortRadios()} {this.state.comments.length > 0 && this.sortRadios()}
{this.commentsTree()} {this.state.commentViewType == CommentViewType.Tree &&
</div> this.commentsTree()}
<div class="col-12 col-sm-12 col-md-4"> {this.state.commentViewType == CommentViewType.Chat &&
{this.state.comments.length > 0 && this.newComments()} this.commentsFlat()}
{this.sidebar()}
</div> </div>
<div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
</div> </div>
)} )}
</div> </div>
@ -222,79 +225,107 @@ export class Post extends Component<any, PostState> {
sortRadios() { sortRadios() {
return ( return (
<div class="btn-group btn-group-toggle mb-2"> <>
<label <div class="btn-group btn-group-toggle mb-2">
className={`btn btn-sm btn-secondary pointer ${ <label
this.state.commentSort === CommentSortType.Hot && 'active' className={`btn btn-sm btn-secondary pointer ${
}`} this.state.commentSort === CommentSortType.Hot && 'active'
> }`}
{i18n.t('hot')} >
<input {i18n.t('hot')}
type="radio" <input
value={CommentSortType.Hot} type="radio"
checked={this.state.commentSort === CommentSortType.Hot} value={CommentSortType.Hot}
onChange={linkEvent(this, this.handleCommentSortChange)} checked={this.state.commentSort === CommentSortType.Hot}
/> onChange={linkEvent(this, this.handleCommentSortChange)}
</label> />
<label </label>
className={`btn btn-sm btn-secondary pointer ${ <label
this.state.commentSort === CommentSortType.Top && 'active' className={`btn btn-sm btn-secondary pointer ${
}`} this.state.commentSort === CommentSortType.Top && 'active'
> }`}
{i18n.t('top')} >
<input {i18n.t('top')}
type="radio" <input
value={CommentSortType.Top} type="radio"
checked={this.state.commentSort === CommentSortType.Top} value={CommentSortType.Top}
onChange={linkEvent(this, this.handleCommentSortChange)} checked={this.state.commentSort === CommentSortType.Top}
/> onChange={linkEvent(this, this.handleCommentSortChange)}
</label> />
<label </label>
className={`btn btn-sm btn-secondary pointer ${ <label
this.state.commentSort === CommentSortType.New && 'active' className={`btn btn-sm btn-secondary pointer ${
}`} this.state.commentSort === CommentSortType.New && 'active'
> }`}
{i18n.t('new')} >
<input {i18n.t('new')}
type="radio" <input
value={CommentSortType.New} type="radio"
checked={this.state.commentSort === CommentSortType.New} value={CommentSortType.New}
onChange={linkEvent(this, this.handleCommentSortChange)} checked={this.state.commentSort === CommentSortType.New}
/> onChange={linkEvent(this, this.handleCommentSortChange)}
</label> />
<label </label>
className={`btn btn-sm btn-secondary pointer ${ <label
this.state.commentSort === CommentSortType.Old && 'active' className={`btn btn-sm btn-secondary pointer ${
}`} this.state.commentSort === CommentSortType.Old && 'active'
> }`}
{i18n.t('old')} >
<input {i18n.t('old')}
type="radio" <input
value={CommentSortType.Old} type="radio"
checked={this.state.commentSort === CommentSortType.Old} value={CommentSortType.Old}
onChange={linkEvent(this, this.handleCommentSortChange)} checked={this.state.commentSort === CommentSortType.Old}
/> onChange={linkEvent(this, this.handleCommentSortChange)}
</label> />
</div> </label>
</div>
<div class="btn-group btn-group-toggle ml-3 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 ( return (
<div class="d-none d-md-block new-comments mb-3 card border-secondary"> <div>
<div class="card-body small"> <CommentNodes
<h6>{i18n.t('recent_comments')}</h6> nodes={commentsToFlatNodes(this.state.comments)}
<CommentNodes noIndent
nodes={commentsToFlatNodes(this.state.comments)} locked={this.state.post.locked}
noIndent moderators={this.state.moderators}
locked={this.state.post.locked} admins={this.state.siteRes.admins}
moderators={this.state.moderators} postCreatorId={this.state.post.creator_id}
admins={this.state.siteRes.admins} showContext
postCreatorId={this.state.post.creator_id} enableDownvotes={this.state.siteRes.site.enable_downvotes}
showContext sort={this.state.commentSort}
enableDownvotes={this.state.siteRes.site.enable_downvotes} />
/>
</div>
</div> </div>
); );
} }
@ -318,6 +349,11 @@ export class Post extends Component<any, PostState> {
i.setState(i.state); i.setState(i.state);
} }
handleCommentViewTypeChange(i: Post, event: any) {
i.state.commentViewType = Number(event.target.value);
i.setState(i.state);
}
buildCommentsTree(): Array<CommentNodeI> { buildCommentsTree(): Array<CommentNodeI> {
let map = new Map<number, CommentNodeI>(); let map = new Map<number, CommentNodeI>();
for (let comment of this.state.comments) { for (let comment of this.state.comments) {

5
ui/src/interfaces.ts vendored
View file

@ -54,6 +54,11 @@ export enum CommentSortType {
Old, Old,
} }
export enum CommentViewType {
Tree,
Chat,
}
export enum ListingType { export enum ListingType {
All, All,
Subscribed, Subscribed,

1
ui/translations/en.json vendored
View file

@ -177,6 +177,7 @@
"community": "Community", "community": "Community",
"expand_here": "Expand here", "expand_here": "Expand here",
"subscribe_to_communities": "Subscribe to some <1>communities</1>.", "subscribe_to_communities": "Subscribe to some <1>communities</1>.",
"tree": "Tree",
"chat": "Chat", "chat": "Chat",
"recent_comments": "Recent Comments", "recent_comments": "Recent Comments",
"no_results": "No results.", "no_results": "No results.",