grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Changing comment action button size. Adding comment dividers. Fixes #604

Browse source
This commit is contained in:
Dessalines 2020-03-19 00:52:08 -04:00
parent d2cf36bf02
commit d690e9a73b
3 changed files with 103 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/assets/css/main.css vendored
View file

@ -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
View file

@ -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
View file

@ -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>
</> </>
)} )}