Changing comment action button size. Adding comment dividers. Fixes #604
This commit is contained in:
parent
72a50aae07
commit
0ae8021410
3 changed files with 103 additions and 109 deletions
4
ui/assets/css/main.css
vendored
4
ui/assets/css/main.css
vendored
|
@ -152,7 +152,7 @@ svg.thumbnail {
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-top: 1px solid var(--secondary);
|
border-top: 1px solid var(--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji {
|
.emoji {
|
||||||
|
@ -186,7 +186,7 @@ hr {
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vote-animate:active {
|
.btn-animate:active {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
-webkit-transform: scale(1.2);
|
-webkit-transform: scale(1.2);
|
||||||
-ms-transform: scale(1.2);
|
-ms-transform: scale(1.2);
|
||||||
|
|
134
ui/src/components/comment-node.tsx
vendored
134
ui/src/components/comment-node.tsx
vendored
|
@ -121,18 +121,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`comment ${
|
className={`comment ${
|
||||||
node.comment.parent_id && !this.props.noIndent ? 'ml-2' : ''
|
node.comment.parent_id && !this.props.noIndent ? 'ml-1' : ''
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{!node.comment.parent_id && !this.props.noIndent && (
|
|
||||||
<>
|
|
||||||
<hr class="d-sm-none my-2" />
|
|
||||||
<div class="d-none d-sm-block d-sm-none my-3" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<div
|
<div
|
||||||
id={`comment-${node.comment.id}`}
|
id={`comment-${node.comment.id}`}
|
||||||
className={`details comment-node mb-1 ${
|
className={`details comment-node border-top border-light ${
|
||||||
this.isCommentNew ? 'mark' : ''
|
this.isCommentNew ? 'mark' : ''
|
||||||
}`}
|
}`}
|
||||||
style={
|
style={
|
||||||
|
@ -147,7 +141,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
'ml-2'}`}
|
'ml-2'}`}
|
||||||
>
|
>
|
||||||
<ul class="list-inline mb-1 text-muted small">
|
<ul class="list-inline mb-1 text-muted small">
|
||||||
<li className="list-inline-item">
|
<li className="mt-1 list-inline-item">
|
||||||
<Link
|
<Link
|
||||||
className="text-body font-weight-bold"
|
className="text-body font-weight-bold"
|
||||||
to={`/u/${node.comment.creator_name}`}
|
to={`/u/${node.comment.creator_name}`}
|
||||||
|
@ -185,6 +179,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
{i18n.t('banned')}
|
{i18n.t('banned')}
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
<li className="list-inline-item">
|
||||||
|
<div
|
||||||
|
className="unselectable pointer text-monospace"
|
||||||
|
onClick={linkEvent(this, this.handleCommentCollapse)}
|
||||||
|
>
|
||||||
|
{this.state.collapsed ? (
|
||||||
|
<svg class="icon icon-inline">
|
||||||
|
<use xlinkHref="#icon-plus-square"></use>
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg class="icon icon-inline">
|
||||||
|
<use xlinkHref="#icon-minus-square"></use>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
{this.props.showCommunity && (
|
{this.props.showCommunity && (
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<span> {i18n.t('to')} </span>
|
<span> {i18n.t('to')} </span>
|
||||||
|
@ -212,22 +222,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
<MomentTime data={node.comment} />
|
<MomentTime data={node.comment} />
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
|
||||||
<div
|
|
||||||
className="unselectable pointer text-monospace"
|
|
||||||
onClick={linkEvent(this, this.handleCommentCollapse)}
|
|
||||||
>
|
|
||||||
{this.state.collapsed ? (
|
|
||||||
<svg class="icon icon-inline">
|
|
||||||
<use xlinkHref="#icon-plus-square"></use>
|
|
||||||
</svg>
|
|
||||||
) : (
|
|
||||||
<svg class="icon icon-inline">
|
|
||||||
<use xlinkHref="#icon-minus-square"></use>
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
{this.state.showEdit && (
|
{this.state.showEdit && (
|
||||||
<CommentForm
|
<CommentForm
|
||||||
|
@ -249,11 +243,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<ul class="list-inline mb-0 text-muted font-weight-bold h5">
|
<ul class="list-inline mb-0 text-muted font-weight-bold small">
|
||||||
{this.props.markable && (
|
{this.props.markable && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-sm 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
|
||||||
|
@ -267,14 +261,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-check"></use>
|
<use xlinkHref="#icon-check"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
{UserService.Instance.user && !this.props.viewOnly && (
|
{UserService.Instance.user && !this.props.viewOnly && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
className={`vote-animate btn btn-link p-0 mb-1 ${
|
className={`btn btn-link btn-sm 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)}
|
||||||
|
@ -289,9 +283,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
{WebSocketService.Instance.site.enable_downvotes && (
|
{WebSocketService.Instance.site.enable_downvotes && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
className={`vote-animate btn btn-link p-0 mb-1 ${
|
className={`btn btn-link btn-sm btn-animate ${
|
||||||
this.state.my_vote == -1
|
this.state.my_vote == -1
|
||||||
? 'text-danger'
|
? 'text-danger'
|
||||||
: 'text-muted'
|
: 'text-muted'
|
||||||
|
@ -311,20 +305,20 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-sm 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')}
|
||||||
>
|
>
|
||||||
<svg class="icon icon-inline">
|
<svg class="icon icon-inline">
|
||||||
<use xlinkHref="#icon-reply1"></use>
|
<use xlinkHref="#icon-reply1"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<Link
|
<Link
|
||||||
className="text-muted"
|
className="btn btn-link btn-sm btn-animate text-muted"
|
||||||
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
|
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
|
||||||
title={i18n.t('link')}
|
title={i18n.t('link')}
|
||||||
>
|
>
|
||||||
|
@ -334,23 +328,23 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
{!this.state.showAdvanced ? (
|
{!this.state.showAdvanced ? (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
className="unselectable pointer"
|
className="btn btn-link btn-sm 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')}
|
||||||
>
|
>
|
||||||
<svg class="icon icon-inline">
|
<svg class="icon icon-inline">
|
||||||
<use xlinkHref="#icon-more-vertical"></use>
|
<use xlinkHref="#icon-more-vertical"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{!this.myComment && (
|
{!this.myComment && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<Link
|
<Link
|
||||||
class="text-muted"
|
class="btn btn-link btn-sm btn-animate 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()}
|
||||||
>
|
>
|
||||||
|
@ -360,9 +354,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-sm btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
this,
|
this,
|
||||||
this.handleSaveCommentClick
|
this.handleSaveCommentClick
|
||||||
|
@ -379,11 +373,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-star"></use>
|
<use xlinkHref="#icon-star"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
className="pointer"
|
className="btn btn-link btn-sm 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')}
|
||||||
>
|
>
|
||||||
|
@ -393,14 +387,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-file-text"></use>
|
<use xlinkHref="#icon-file-text"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
{this.myComment && (
|
{this.myComment && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item-action">•</li>
|
<li className="list-inline-item">•</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-sm btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
this,
|
this,
|
||||||
this.handleEditClick
|
this.handleEditClick
|
||||||
|
@ -410,11 +404,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
<svg class="icon icon-inline">
|
<svg class="icon icon-inline">
|
||||||
<use xlinkHref="#icon-edit"></use>
|
<use xlinkHref="#icon-edit"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-sm btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
this,
|
this,
|
||||||
this.handleDeleteClick
|
this.handleDeleteClick
|
||||||
|
@ -431,14 +425,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-trash"></use>
|
<use xlinkHref="#icon-trash"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</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-action">
|
<li className="list-inline-item">
|
||||||
{!node.comment.removed ? (
|
{!node.comment.removed ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
@ -467,7 +461,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
{this.canMod && (
|
{this.canMod && (
|
||||||
<>
|
<>
|
||||||
{!this.isMod && (
|
{!this.isMod && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
{!node.comment.banned_from_community ? (
|
{!node.comment.banned_from_community ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
@ -492,7 +486,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
{!node.comment.banned_from_community && (
|
{!node.comment.banned_from_community && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
{!this.state.showConfirmAppointAsMod ? (
|
{!this.state.showConfirmAppointAsMod ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
@ -537,7 +531,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
{/* 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-action">
|
<li className="list-inline-item">
|
||||||
{!this.state.showConfirmTransferCommunity ? (
|
{!this.state.showConfirmTransferCommunity ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
@ -580,7 +574,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
{this.canAdmin && (
|
{this.canAdmin && (
|
||||||
<>
|
<>
|
||||||
{!this.isAdmin && (
|
{!this.isAdmin && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
{!node.comment.banned ? (
|
{!node.comment.banned ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
@ -605,7 +599,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
{!node.comment.banned && (
|
{!node.comment.banned && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
{!this.state.showConfirmAppointAsAdmin ? (
|
{!this.state.showConfirmAppointAsAdmin ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
@ -649,7 +643,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
)}
|
)}
|
||||||
{/* Site Creator can transfer to another admin */}
|
{/* Site Creator can transfer to another admin */}
|
||||||
{this.amSiteCreator && this.isAdmin && (
|
{this.amSiteCreator && this.isAdmin && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
{!this.state.showConfirmTransferSite ? (
|
{!this.state.showConfirmTransferSite ? (
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
|
70
ui/src/components/post-listing.tsx
vendored
70
ui/src/components/post-listing.tsx
vendored
|
@ -250,7 +250,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div className={`vote-bar col-1 pr-0 small text-center`}>
|
<div className={`vote-bar col-1 pr-0 small text-center`}>
|
||||||
<button
|
<button
|
||||||
className={`vote-animate btn btn-link p-0 ${
|
className={`btn-animate btn btn-link p-0 ${
|
||||||
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
|
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(this, this.handlePostLike)}
|
onClick={linkEvent(this, this.handlePostLike)}
|
||||||
|
@ -268,7 +268,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
</div>
|
</div>
|
||||||
{WebSocketService.Instance.site.enable_downvotes && (
|
{WebSocketService.Instance.site.enable_downvotes && (
|
||||||
<button
|
<button
|
||||||
className={`vote-animate btn btn-link p-0 ${
|
className={`btn-animate btn btn-link p-0 ${
|
||||||
this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
|
this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(this, this.handlePostDisLike)}
|
onClick={linkEvent(this, this.handlePostDisLike)}
|
||||||
|
@ -501,8 +501,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="list-inline mb-1 small text-muted">
|
|
||||||
{this.props.post.duplicates && (
|
{this.props.post.duplicates && (
|
||||||
|
<ul class="list-inline mb-1 small text-muted">
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item mr-2">
|
<li className="list-inline-item mr-2">
|
||||||
{i18n.t('cross_posted_to')}
|
{i18n.t('cross_posted_to')}
|
||||||
|
@ -515,16 +515,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
)}
|
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="list-inline mb-1 text-muted h5 font-weight-bold">
|
)}
|
||||||
|
<ul class="list-inline mb-1 text-muted font-weight-bold">
|
||||||
{UserService.Instance.user && (
|
{UserService.Instance.user && (
|
||||||
<>
|
<>
|
||||||
{this.props.showBody && (
|
{this.props.showBody && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
onClick={linkEvent(this, this.handleSavePostClick)}
|
onClick={linkEvent(this, this.handleSavePostClick)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
post.saved ? i18n.t('unsave') : i18n.t('save')
|
post.saved ? i18n.t('unsave') : i18n.t('save')
|
||||||
|
@ -536,11 +536,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-star"></use>
|
<use xlinkHref="#icon-star"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<Link
|
<Link
|
||||||
className="text-muted"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
to={`/create_post${this.crossPostParams}`}
|
to={`/create_post${this.crossPostParams}`}
|
||||||
title={i18n.t('cross_post')}
|
title={i18n.t('cross_post')}
|
||||||
>
|
>
|
||||||
|
@ -553,20 +553,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
)}
|
)}
|
||||||
{this.myPost && this.props.showBody && (
|
{this.myPost && this.props.showBody && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
onClick={linkEvent(this, this.handleEditClick)}
|
onClick={linkEvent(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>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
onClick={linkEvent(this, this.handleDeleteClick)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
!post.deleted
|
!post.deleted
|
||||||
|
@ -580,29 +580,29 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-trash"></use>
|
<use xlinkHref="#icon-trash"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!this.state.showAdvanced && this.props.showBody ? (
|
{!this.state.showAdvanced && this.props.showBody ? (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
className="pointer"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||||
data-tippy-content={i18n.t('more')}
|
data-tippy-content={i18n.t('more')}
|
||||||
>
|
>
|
||||||
<svg class="icon icon-inline">
|
<svg class="icon icon-inline">
|
||||||
<use xlinkHref="#icon-more-vertical"></use>
|
<use xlinkHref="#icon-more-vertical"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{this.props.showBody && post.body && (
|
{this.props.showBody && post.body && (
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
className="pointer"
|
class="btn btn-link btn-animate btn-sm 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')}
|
||||||
>
|
>
|
||||||
|
@ -612,14 +612,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-file-text"></use>
|
<use xlinkHref="#icon-file-text"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
{this.canModOnSelf && (
|
{this.canModOnSelf && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
onClick={linkEvent(this, this.handleModLock)}
|
onClick={linkEvent(this, this.handleModLock)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
post.locked
|
post.locked
|
||||||
|
@ -633,11 +633,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-lock"></use>
|
<use xlinkHref="#icon-lock"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item">
|
||||||
<span
|
<button
|
||||||
class="pointer"
|
class="btn btn-link btn-animate btn-sm text-muted"
|
||||||
onClick={linkEvent(this, this.handleModSticky)}
|
onClick={linkEvent(this, this.handleModSticky)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
post.stickied
|
post.stickied
|
||||||
|
@ -651,7 +651,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
>
|
>
|
||||||
<use xlinkHref="#icon-pin"></use>
|
<use xlinkHref="#icon-pin"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Reference in a new issue