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

Changing comment actions to flex row. Fixes #611

Browse source
This commit is contained in:
Dessalines 2020-03-21 00:15:45 -04:00
parent 1f0439badd
commit 32c85599b6
1 changed files with 372 additions and 426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

306
ui/src/components/comment-node.tsx vendored
View file

@ -147,48 +147,51 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
this.props.node.comment.parent_id && this.props.node.comment.parent_id &&
'ml-2'}`} 'ml-2'}`}
> >
<ul class="list-inline mb-1 text-muted small"> <div class="d-flex align-items-center mb-1 mt-1 text-muted small">
<li className="mt-1 list-inline-item">
<Link <Link
className="text-body font-weight-bold" className="mr-2 text-body font-weight-bold"
to={`/u/${node.comment.creator_name}`} to={`/u/${node.comment.creator_name}`}
> >
{node.comment.creator_avatar && showAvatars() && ( {node.comment.creator_avatar && showAvatars() && (
<img <img
height="32" height="32"
width="32" width="32"
src={pictshareAvatarThumbnail( src={pictshareAvatarThumbnail(node.comment.creator_avatar)}
node.comment.creator_avatar
)}
class="rounded-circle mr-1" class="rounded-circle mr-1"
/> />
)} )}
<span>{node.comment.creator_name}</span> <span>{node.comment.creator_name}</span>
</Link> </Link>
</li>
{this.isMod && ( {this.isMod && (
<li className="list-inline-item badge badge-light d-none d-sm-inline"> <div className="badge badge-light d-none d-sm-inline mr-2">
{i18n.t('mod')} {i18n.t('mod')}
</li> </div>
)} )}
{this.isAdmin && ( {this.isAdmin && (
<li className="list-inline-item badge badge-light d-none d-sm-inline"> <div className="badge badge-light d-none d-sm-inline mr-2">
{i18n.t('admin')} {i18n.t('admin')}
</li> </div>
)} )}
{this.isPostCreator && ( {this.isPostCreator && (
<li className="list-inline-item badge badge-light d-none d-sm-inline"> <div className="badge badge-light d-none d-sm-inline mr-2">
{i18n.t('creator')} {i18n.t('creator')}
</li> </div>
)} )}
{(node.comment.banned_from_community || node.comment.banned) && ( {(node.comment.banned_from_community || node.comment.banned) && (
<li className="list-inline-item badge badge-danger"> <div className="badge badge-danger mr-2">
{i18n.t('banned')} {i18n.t('banned')}
</li> </div>
)}
{this.props.showCommunity && (
<>
<span class="mx-1">{i18n.t('to')}</span>
<Link class="mr-2" to={`/c/${node.comment.community_name}`}>
{node.comment.community_name}
</Link>
</>
)} )}
<li className="list-inline-item">
<div <div
className="unselectable pointer text-monospace" className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mr-2"
onClick={linkEvent(this, this.handleCommentCollapse)} onClick={linkEvent(this, this.handleCommentCollapse)}
> >
{this.state.collapsed ? ( {this.state.collapsed ? (
@ -201,16 +204,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</svg> </svg>
)} )}
</div> </div>
</li>
{this.props.showCommunity && (
<li className="list-inline-item">
<span> {i18n.t('to')} </span>
<Link to={`/c/${node.comment.community_name}`}>
{node.comment.community_name}
</Link>
</li>
)}
<li className="ml-3 list-inline-item">
<span <span
className={`unselectable pointer ${this.scoreColor}`} className={`unselectable pointer ${this.scoreColor}`}
onClick={linkEvent(node, this.handleCommentUpvote)} onClick={linkEvent(node, this.handleCommentUpvote)}
@ -219,16 +212,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<svg class="icon icon-inline mr-1"> <svg class="icon icon-inline mr-1">
<use xlinkHref="#icon-zap"></use> <use xlinkHref="#icon-zap"></use>
</svg> </svg>
{this.state.score} <span class="mr-1">{this.state.score}</span>
</span> </span>
</li> <span className="mr-1">•</span>
<li className="list-inline-item">•</li>
<li className="list-inline-item">
<span> <span>
<MomentTime data={node.comment} /> <MomentTime data={node.comment} />
</span> </span>
</li> </div>
</ul> {/* end of user row */}
{this.state.showEdit && ( {this.state.showEdit && (
<CommentForm <CommentForm
node={node} node={node}
@ -249,12 +240,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
/> />
)} )}
<ul class="list-inline mb-0 text-muted font-weight-bold small"> <div class="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
{this.props.showContext && this.linkBtn} {this.props.showContext && this.linkBtn}
{this.props.markable && ( {this.props.markable && (
<li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)} onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={ data-tippy-content={
node.comment.read node.comment.read
@ -273,13 +263,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</svg> </svg>
)} )}
</button> </button>
</li>
)} )}
{UserService.Instance.user && !this.props.viewOnly && ( {UserService.Instance.user && !this.props.viewOnly && (
<> <>
<li className="list-inline-item">
<button <button
className={`btn btn-link btn-sm btn-animate ${ className={`btn btn-link btn-animate ${
this.state.my_vote == 1 ? 'text-info' : 'text-muted' this.state.my_vote == 1 ? 'text-info' : 'text-muted'
}`} }`}
onClick={linkEvent(node, this.handleCommentUpvote)} onClick={linkEvent(node, this.handleCommentUpvote)}
@ -292,19 +280,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<span class="ml-1">{this.state.upvotes}</span> <span class="ml-1">{this.state.upvotes}</span>
)} )}
</button> </button>
</li>
{WebSocketService.Instance.site.enable_downvotes && ( {WebSocketService.Instance.site.enable_downvotes && (
<li className="list-inline-item">
<button <button
className={`btn btn-link btn-sm btn-animate ${ className={`btn btn-link btn-animate ${
this.state.my_vote == -1 this.state.my_vote == -1
? 'text-danger' ? 'text-danger'
: 'text-muted' : 'text-muted'
}`} }`}
onClick={linkEvent( onClick={linkEvent(node, this.handleCommentDownvote)}
node,
this.handleCommentDownvote
)}
data-tippy-content={i18n.t('downvote')} data-tippy-content={i18n.t('downvote')}
> >
<svg class="icon icon-inline"> <svg class="icon icon-inline">
@ -314,16 +297,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<span class="ml-1">{this.state.downvotes}</span> <span class="ml-1">{this.state.downvotes}</span>
)} )}
</button> </button>
</li>
)} )}
<li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleSaveCommentClick)} onClick={linkEvent(this, this.handleSaveCommentClick)}
data-tippy-content={ data-tippy-content={
node.comment.saved node.comment.saved ? i18n.t('unsave') : i18n.t('save')
? i18n.t('unsave')
: i18n.t('save')
} }
> >
{this.state.saveLoading ? ( {this.state.saveLoading ? (
@ -337,10 +316,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</svg> </svg>
)} )}
</button> </button>
</li>
<li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)} onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={i18n.t('reply')} data-tippy-content={i18n.t('reply')}
> >
@ -348,11 +325,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<use xlinkHref="#icon-reply1"></use> <use xlinkHref="#icon-reply1"></use>
</svg> </svg>
</button> </button>
</li>
{!this.state.showAdvanced ? ( {!this.state.showAdvanced ? (
<li className="list-inline-item">
<button <button
className="btn btn-link btn-sm btn-animate text-muted" className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleShowAdvanced)} onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t('more')} data-tippy-content={i18n.t('more')}
> >
@ -360,13 +335,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<use xlinkHref="#icon-more-vertical"></use> <use xlinkHref="#icon-more-vertical"></use>
</svg> </svg>
</button> </button>
</li>
) : ( ) : (
<> <>
{!this.myComment && ( {!this.myComment && (
<li className="list-inline-item"> <button class="btn btn-link btn-animate">
<Link <Link
class="btn btn-link btn-sm btn-animate text-muted" class="text-muted"
to={`/create_private_message?recipient_id=${node.comment.creator_id}`} to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
title={i18n.t('message').toLowerCase()} title={i18n.t('message').toLowerCase()}
> >
@ -374,12 +348,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<use xlinkHref="#icon-mail"></use> <use xlinkHref="#icon-mail"></use>
</svg> </svg>
</Link> </Link>
</li> </button>
)} )}
{!this.props.showContext && this.linkBtn} {!this.props.showContext && this.linkBtn}
<li className="list-inline-item">
<button <button
className="btn btn-link btn-sm btn-animate text-muted" className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)} onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')} data-tippy-content={i18n.t('view_source')}
> >
@ -390,27 +363,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<use xlinkHref="#icon-file-text"></use> <use xlinkHref="#icon-file-text"></use>
</svg> </svg>
</button> </button>
</li>
{this.myComment && ( {this.myComment && (
<> <>
<li className="list-inline-item">•</li>
<li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(this, this.handleEditClick)}
this,
this.handleEditClick
)}
data-tippy-content={i18n.t('edit')} data-tippy-content={i18n.t('edit')}
> >
<svg class="icon icon-inline"> <svg class="icon icon-inline">
<use xlinkHref="#icon-edit"></use> <use xlinkHref="#icon-edit"></use>
</svg> </svg>
</button> </button>
</li>
<li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleDeleteClick this.handleDeleteClick
@ -428,70 +393,63 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<use xlinkHref="#icon-trash"></use> <use xlinkHref="#icon-trash"></use>
</svg> </svg>
</button> </button>
</li>
</> </>
)} )}
{/* Admins and mods can remove comments */} {/* Admins and mods can remove comments */}
{(this.canMod || this.canAdmin) && ( {(this.canMod || this.canAdmin) && (
<> <>
<li className="list-inline-item">
{!node.comment.removed ? ( {!node.comment.removed ? (
<span <button
class="pointer" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleModRemoveShow this.handleModRemoveShow
)} )}
> >
{i18n.t('remove')} {i18n.t('remove')}
</span> </button>
) : ( ) : (
<span <button
class="pointer" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleModRemoveSubmit this.handleModRemoveSubmit
)} )}
> >
{i18n.t('restore')} {i18n.t('restore')}
</span> </button>
)} )}
</li>
</> </>
)} )}
{/* Mods can ban from community, and appoint as mods to community */} {/* Mods can ban from community, and appoint as mods to community */}
{this.canMod && ( {this.canMod && (
<> <>
{!this.isMod && ( {!this.isMod &&
<li className="list-inline-item"> (!node.comment.banned_from_community ? (
{!node.comment.banned_from_community ? ( <button
<span class="btn btn-link btn-animate text-muted"
class="pointer"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleModBanFromCommunityShow this.handleModBanFromCommunityShow
)} )}
> >
{i18n.t('ban')} {i18n.t('ban')}
</span> </button>
) : ( ) : (
<span <button
class="pointer" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleModBanFromCommunitySubmit this.handleModBanFromCommunitySubmit
)} )}
> >
{i18n.t('unban')} {i18n.t('unban')}
</span> </button>
)} ))}
</li> {!node.comment.banned_from_community &&
)} (!this.state.showConfirmAppointAsMod ? (
{!node.comment.banned_from_community && ( <button
<li className="list-inline-item"> class="btn btn-link btn-animate text-muted"
{!this.state.showConfirmAppointAsMod ? (
<span
class="pointer"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleShowConfirmAppointAsMod this.handleShowConfirmAppointAsMod
@ -500,66 +458,63 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.isMod {this.isMod
? i18n.t('remove_as_mod') ? i18n.t('remove_as_mod')
: i18n.t('appoint_as_mod')} : i18n.t('appoint_as_mod')}
</span> </button>
) : ( ) : (
<> <>
<span class="d-inline-block mr-1"> <button class="btn btn-link btn-animate text-muted">
{i18n.t('are_you_sure')} {i18n.t('are_you_sure')}
</span> </button>
<span <button
class="pointer d-inline-block mr-1" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleAddModToCommunity this.handleAddModToCommunity
)} )}
> >
{i18n.t('yes')} {i18n.t('yes')}
</span> </button>
<span <button
class="pointer d-inline-block" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleCancelConfirmAppointAsMod this.handleCancelConfirmAppointAsMod
)} )}
> >
{i18n.t('no')} {i18n.t('no')}
</span> </button>
</> </>
)} ))}
</li>
)}
</> </>
)} )}
{/* Community creators and admins can transfer community to another mod */} {/* Community creators and admins can transfer community to another mod */}
{(this.amCommunityCreator || this.canAdmin) && {(this.amCommunityCreator || this.canAdmin) &&
this.isMod && ( this.isMod &&
<li className="list-inline-item"> (!this.state.showConfirmTransferCommunity ? (
{!this.state.showConfirmTransferCommunity ? ( <button
<span class="btn btn-link btn-animate text-muted"
class="pointer"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleShowConfirmTransferCommunity this.handleShowConfirmTransferCommunity
)} )}
> >
{i18n.t('transfer_community')} {i18n.t('transfer_community')}
</span> </button>
) : ( ) : (
<> <>
<span class="d-inline-block mr-1"> <button class="btn btn-link btn-animate text-muted">
{i18n.t('are_you_sure')} {i18n.t('are_you_sure')}
</span> </button>
<span <button
class="pointer d-inline-block mr-1" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleTransferCommunity this.handleTransferCommunity
)} )}
> >
{i18n.t('yes')} {i18n.t('yes')}
</span> </button>
<span <button
class="pointer d-inline-block" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this this
@ -567,44 +522,38 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
> >
{i18n.t('no')} {i18n.t('no')}
</span> </button>
</> </>
)} ))}
</li>
)}
{/* Admins can ban from all, and appoint other admins */} {/* Admins can ban from all, and appoint other admins */}
{this.canAdmin && ( {this.canAdmin && (
<> <>
{!this.isAdmin && ( {!this.isAdmin &&
<li className="list-inline-item"> (!node.comment.banned ? (
{!node.comment.banned ? ( <button
<span class="btn btn-link btn-animate text-muted"
class="pointer"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleModBanShow this.handleModBanShow
)} )}
> >
{i18n.t('ban_from_site')} {i18n.t('ban_from_site')}
</span> </button>
) : ( ) : (
<span <button
class="pointer" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleModBanSubmit this.handleModBanSubmit
)} )}
> >
{i18n.t('unban_from_site')} {i18n.t('unban_from_site')}
</span> </button>
)} ))}
</li> {!node.comment.banned &&
)} (!this.state.showConfirmAppointAsAdmin ? (
{!node.comment.banned && ( <button
<li className="list-inline-item"> class="btn btn-link btn-animate text-muted"
{!this.state.showConfirmAppointAsAdmin ? (
<span
class="pointer"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleShowConfirmAppointAsAdmin this.handleShowConfirmAppointAsAdmin
@ -613,81 +562,78 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.isAdmin {this.isAdmin
? i18n.t('remove_as_admin') ? i18n.t('remove_as_admin')
: i18n.t('appoint_as_admin')} : i18n.t('appoint_as_admin')}
</span> </button>
) : ( ) : (
<> <>
<span class="d-inline-block mr-1"> <button class="btn btn-link btn-animate text-muted">
{i18n.t('are_you_sure')} {i18n.t('are_you_sure')}
</span> </button>
<span <button
class="pointer d-inline-block mr-1" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleAddAdmin this.handleAddAdmin
)} )}
> >
{i18n.t('yes')} {i18n.t('yes')}
</span> </button>
<span <button
class="pointer d-inline-block" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleCancelConfirmAppointAsAdmin this.handleCancelConfirmAppointAsAdmin
)} )}
> >
{i18n.t('no')} {i18n.t('no')}
</span> </button>
</> </>
)} ))}
</li>
)}
</> </>
)} )}
{/* Site Creator can transfer to another admin */} {/* Site Creator can transfer to another admin */}
{this.amSiteCreator && this.isAdmin && ( {this.amSiteCreator &&
<li className="list-inline-item"> this.isAdmin &&
{!this.state.showConfirmTransferSite ? ( (!this.state.showConfirmTransferSite ? (
<span <button
class="pointer" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleShowConfirmTransferSite this.handleShowConfirmTransferSite
)} )}
> >
{i18n.t('transfer_site')} {i18n.t('transfer_site')}
</span> </button>
) : ( ) : (
<> <>
<span class="d-inline-block mr-1"> <button class="btn btn-link btn-animate text-muted">
{i18n.t('are_you_sure')} {i18n.t('are_you_sure')}
</span> </button>
<span <button
class="pointer d-inline-block mr-1" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleTransferSite this.handleTransferSite
)} )}
> >
{i18n.t('yes')} {i18n.t('yes')}
</span> </button>
<span <button
class="pointer d-inline-block" class="btn btn-link btn-animate text-muted"
onClick={linkEvent( onClick={linkEvent(
this, this,
this.handleCancelShowConfirmTransferSite this.handleCancelShowConfirmTransferSite
)} )}
> >
{i18n.t('no')} {i18n.t('no')}
</span> </button>
</> </>
)} ))}
</li>
)}
</> </>
)} )}
</> </>
)} )}
</ul> </div>
{/* end of button group */}
</div> </div>
)} )}
</div> </div>
@ -761,9 +707,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
get linkBtn() { get linkBtn() {
let node = this.props.node; let node = this.props.node;
return ( return (
<li className="list-inline-item"> <button className="btn btn-link btn-animate">
<Link <Link
className="btn btn-link btn-sm btn-animate text-muted" class="text-muted"
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`} to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
title={ title={
this.props.showContext ? i18n.t('show_context') : i18n.t('link') this.props.showContext ? i18n.t('show_context') : i18n.t('link')
@ -773,7 +719,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<use xlinkHref="#icon-link"></use> <use xlinkHref="#icon-link"></use>
</svg> </svg>
</Link> </Link>
</li> </button>
); );
} }