mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-11-05 20:15:01 +00:00
Changing comment actions to flex row. Fixes #611
This commit is contained in:
Dessalines
parent
40d0933b57
commit
dbb04dab82
1 changed files with 372 additions and 426 deletions
306
ui/src/components/comment-node.tsx
vendored
306
ui/src/components/comment-node.tsx
vendored
|
|
@ -147,48 +147,51 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
this.props.node.comment.parent_id &&
|
||||
'ml-2'}`}
|
||||
>
|
||||
<ul class="list-inline mb-1 text-muted small">
|
||||
<li className="mt-1 list-inline-item">
|
||||
<div class="d-flex align-items-center mb-1 mt-1 text-muted small">
|
||||
<Link
|
||||
className="text-body font-weight-bold"
|
||||
className="mr-2 text-body font-weight-bold"
|
||||
to={`/u/${node.comment.creator_name}`}
|
||||
>
|
||||
{node.comment.creator_avatar && showAvatars() && (
|
||||
<img
|
||||
height="32"
|
||||
width="32"
|
||||
src={pictshareAvatarThumbnail(
|
||||
node.comment.creator_avatar
|
||||
)}
|
||||
src={pictshareAvatarThumbnail(node.comment.creator_avatar)}
|
||||
class="rounded-circle mr-1"
|
||||
/>
|
||||
)}
|
||||
<span>{node.comment.creator_name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
{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')}
|
||||
</li>
|
||||
</div>
|
||||
)}
|
||||
{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')}
|
||||
</li>
|
||||
</div>
|
||||
)}
|
||||
{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')}
|
||||
</li>
|
||||
</div>
|
||||
)}
|
||||
{(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')}
|
||||
</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
|
||||
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)}
|
||||
>
|
||||
{this.state.collapsed ? (
|
||||
|
|
@ -201,16 +204,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</svg>
|
||||
)}
|
||||
</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
|
||||
className={`unselectable pointer ${this.scoreColor}`}
|
||||
onClick={linkEvent(node, this.handleCommentUpvote)}
|
||||
|
|
@ -219,16 +212,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<svg class="icon icon-inline mr-1">
|
||||
<use xlinkHref="#icon-zap"></use>
|
||||
</svg>
|
||||
{this.state.score}
|
||||
<span class="mr-1">{this.state.score}</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="list-inline-item">•</li>
|
||||
<li className="list-inline-item">
|
||||
<span className="mr-1">•</span>
|
||||
<span>
|
||||
<MomentTime data={node.comment} />
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* end of user row */}
|
||||
{this.state.showEdit && (
|
||||
<CommentForm
|
||||
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.markable && (
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
class="btn btn-link btn-sm btn-animate text-muted"
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleMarkRead)}
|
||||
data-tippy-content={
|
||||
node.comment.read
|
||||
|
|
@ -273,13 +263,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
{UserService.Instance.user && !this.props.viewOnly && (
|
||||
<>
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className={`btn btn-link btn-sm btn-animate ${
|
||||
className={`btn btn-link btn-animate ${
|
||||
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
|
||||
}`}
|
||||
onClick={linkEvent(node, this.handleCommentUpvote)}
|
||||
|
|
@ -292,19 +280,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<span class="ml-1">{this.state.upvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
{WebSocketService.Instance.site.enable_downvotes && (
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className={`btn btn-link btn-sm btn-animate ${
|
||||
className={`btn btn-link btn-animate ${
|
||||
this.state.my_vote == -1
|
||||
? 'text-danger'
|
||||
: 'text-muted'
|
||||
}`}
|
||||
onClick={linkEvent(
|
||||
node,
|
||||
this.handleCommentDownvote
|
||||
)}
|
||||
onClick={linkEvent(node, this.handleCommentDownvote)}
|
||||
data-tippy-content={i18n.t('downvote')}
|
||||
>
|
||||
<svg class="icon icon-inline">
|
||||
|
|
@ -314,16 +297,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<span class="ml-1">{this.state.downvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
class="btn btn-link btn-sm btn-animate text-muted"
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleSaveCommentClick)}
|
||||
data-tippy-content={
|
||||
node.comment.saved
|
||||
? i18n.t('unsave')
|
||||
: i18n.t('save')
|
||||
node.comment.saved ? i18n.t('unsave') : i18n.t('save')
|
||||
}
|
||||
>
|
||||
{this.state.saveLoading ? (
|
||||
|
|
@ -337,10 +316,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
class="btn btn-link btn-sm btn-animate text-muted"
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleReplyClick)}
|
||||
data-tippy-content={i18n.t('reply')}
|
||||
>
|
||||
|
|
@ -348,11 +325,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<use xlinkHref="#icon-reply1"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
{!this.state.showAdvanced ? (
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className="btn btn-link btn-sm btn-animate text-muted"
|
||||
className="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||
data-tippy-content={i18n.t('more')}
|
||||
>
|
||||
|
|
@ -360,13 +335,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<use xlinkHref="#icon-more-vertical"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
) : (
|
||||
<>
|
||||
{!this.myComment && (
|
||||
<li className="list-inline-item">
|
||||
<button class="btn btn-link btn-animate">
|
||||
<Link
|
||||
class="btn btn-link btn-sm btn-animate text-muted"
|
||||
class="text-muted"
|
||||
to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
|
||||
title={i18n.t('message').toLowerCase()}
|
||||
>
|
||||
|
|
@ -374,12 +348,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<use xlinkHref="#icon-mail"></use>
|
||||
</svg>
|
||||
</Link>
|
||||
</li>
|
||||
</button>
|
||||
)}
|
||||
{!this.props.showContext && this.linkBtn}
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className="btn btn-link btn-sm btn-animate text-muted"
|
||||
className="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleViewSource)}
|
||||
data-tippy-content={i18n.t('view_source')}
|
||||
>
|
||||
|
|
@ -390,27 +363,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<use xlinkHref="#icon-file-text"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
{this.myComment && (
|
||||
<>
|
||||
<li className="list-inline-item">•</li>
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
class="btn btn-link btn-sm btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleEditClick
|
||||
)}
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleEditClick)}
|
||||
data-tippy-content={i18n.t('edit')}
|
||||
>
|
||||
<svg class="icon icon-inline">
|
||||
<use xlinkHref="#icon-edit"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
class="btn btn-link btn-sm btn-animate text-muted"
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleDeleteClick
|
||||
|
|
@ -428,70 +393,63 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<use xlinkHref="#icon-trash"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{/* Admins and mods can remove comments */}
|
||||
{(this.canMod || this.canAdmin) && (
|
||||
<>
|
||||
<li className="list-inline-item">
|
||||
{!node.comment.removed ? (
|
||||
<span
|
||||
class="pointer"
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleModRemoveShow
|
||||
)}
|
||||
>
|
||||
{i18n.t('remove')}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
class="pointer"
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleModRemoveSubmit
|
||||
)}
|
||||
>
|
||||
{i18n.t('restore')}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{/* Mods can ban from community, and appoint as mods to community */}
|
||||
{this.canMod && (
|
||||
<>
|
||||
{!this.isMod && (
|
||||
<li className="list-inline-item">
|
||||
{!node.comment.banned_from_community ? (
|
||||
<span
|
||||
class="pointer"
|
||||
{!this.isMod &&
|
||||
(!node.comment.banned_from_community ? (
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleModBanFromCommunityShow
|
||||
)}
|
||||
>
|
||||
{i18n.t('ban')}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
class="pointer"
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleModBanFromCommunitySubmit
|
||||
)}
|
||||
>
|
||||
{i18n.t('unban')}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
{!node.comment.banned_from_community && (
|
||||
<li className="list-inline-item">
|
||||
{!this.state.showConfirmAppointAsMod ? (
|
||||
<span
|
||||
class="pointer"
|
||||
</button>
|
||||
))}
|
||||
{!node.comment.banned_from_community &&
|
||||
(!this.state.showConfirmAppointAsMod ? (
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleShowConfirmAppointAsMod
|
||||
|
|
@ -500,66 +458,63 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{this.isMod
|
||||
? i18n.t('remove_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')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block mr-1"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleAddModToCommunity
|
||||
)}
|
||||
>
|
||||
{i18n.t('yes')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleCancelConfirmAppointAsMod
|
||||
)}
|
||||
>
|
||||
{i18n.t('no')}
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{/* Community creators and admins can transfer community to another mod */}
|
||||
{(this.amCommunityCreator || this.canAdmin) &&
|
||||
this.isMod && (
|
||||
<li className="list-inline-item">
|
||||
{!this.state.showConfirmTransferCommunity ? (
|
||||
<span
|
||||
class="pointer"
|
||||
this.isMod &&
|
||||
(!this.state.showConfirmTransferCommunity ? (
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleShowConfirmTransferCommunity
|
||||
)}
|
||||
>
|
||||
{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')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block mr-1"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleTransferCommunity
|
||||
)}
|
||||
>
|
||||
{i18n.t('yes')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this
|
||||
|
|
@ -567,44 +522,38 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
>
|
||||
{i18n.t('no')}
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
))}
|
||||
{/* Admins can ban from all, and appoint other admins */}
|
||||
{this.canAdmin && (
|
||||
<>
|
||||
{!this.isAdmin && (
|
||||
<li className="list-inline-item">
|
||||
{!node.comment.banned ? (
|
||||
<span
|
||||
class="pointer"
|
||||
{!this.isAdmin &&
|
||||
(!node.comment.banned ? (
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleModBanShow
|
||||
)}
|
||||
>
|
||||
{i18n.t('ban_from_site')}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
class="pointer"
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleModBanSubmit
|
||||
)}
|
||||
>
|
||||
{i18n.t('unban_from_site')}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
{!node.comment.banned && (
|
||||
<li className="list-inline-item">
|
||||
{!this.state.showConfirmAppointAsAdmin ? (
|
||||
<span
|
||||
class="pointer"
|
||||
</button>
|
||||
))}
|
||||
{!node.comment.banned &&
|
||||
(!this.state.showConfirmAppointAsAdmin ? (
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleShowConfirmAppointAsAdmin
|
||||
|
|
@ -613,81 +562,78 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{this.isAdmin
|
||||
? i18n.t('remove_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')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block mr-1"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleAddAdmin
|
||||
)}
|
||||
>
|
||||
{i18n.t('yes')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleCancelConfirmAppointAsAdmin
|
||||
)}
|
||||
>
|
||||
{i18n.t('no')}
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{/* Site Creator can transfer to another admin */}
|
||||
{this.amSiteCreator && this.isAdmin && (
|
||||
<li className="list-inline-item">
|
||||
{!this.state.showConfirmTransferSite ? (
|
||||
<span
|
||||
class="pointer"
|
||||
{this.amSiteCreator &&
|
||||
this.isAdmin &&
|
||||
(!this.state.showConfirmTransferSite ? (
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleShowConfirmTransferSite
|
||||
)}
|
||||
>
|
||||
{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')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block mr-1"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleTransferSite
|
||||
)}
|
||||
>
|
||||
{i18n.t('yes')}
|
||||
</span>
|
||||
<span
|
||||
class="pointer d-inline-block"
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleCancelShowConfirmTransferSite
|
||||
)}
|
||||
>
|
||||
{i18n.t('no')}
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
{/* end of button group */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -761,9 +707,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
get linkBtn() {
|
||||
let node = this.props.node;
|
||||
return (
|
||||
<li className="list-inline-item">
|
||||
<button className="btn btn-link btn-animate">
|
||||
<Link
|
||||
className="btn btn-link btn-sm btn-animate text-muted"
|
||||
class="text-muted"
|
||||
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
|
||||
title={
|
||||
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>
|
||||
</svg>
|
||||
</Link>
|
||||
</li>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue