asonix/lemmy
1
0
Fork 0
forked from nutomic/lemmy
Code Issues Pull requests Releases Wiki Activity

Moving comment voting to action bar. Adding plurals.

Browse source
This commit is contained in:
Dessalines 2020-03-04 13:52:11 -05:00
parent 0dae5e910a
commit 7015332d97
6 changed files with 116 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,10 +74,6 @@
border-top: 2px solid var(--dark);
}
.comment-node {
margin-bottom: 10px;
}
.vote-bar {
margin-top: -6.5px;
}

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

@ -131,47 +131,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''
}`}
>
{!this.state.collapsed && (
<div
className={`vote-bar mr-2 float-left small text-center ${this.props
.viewOnly && 'no-click'}`}
>
<button
className={`vote-animate btn btn-link p-0 ${
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
}`}
onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={i18n.t('upvote')}
>
<svg class="icon upvote">
<use xlinkHref="#icon-arrow-up"></use>
</svg>
</button>
<div class={`unselectable font-weight-bold text-muted`}>
{this.state.score}
</div>
{WebSocketService.Instance.site.enable_downvotes && (
<button
className={`vote-animate btn btn-link p-0 ${
this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
}`}
onClick={linkEvent(node, this.handleCommentDownvote)}
data-tippy-content={i18n.t('downvote')}
>
<svg class="icon downvote">
<use xlinkHref="#icon-arrow-down"></use>
</svg>
</button>
)}
</div>
)}
<div
id={`comment-${node.comment.id}`}
className={`details comment-node ml-4 ${
className={`details comment-node mb-1 ${
this.isCommentNew ? 'mark' : ''
}`}
>
<ul class="list-inline mb-0 text-muted small">
<ul class="list-inline mb-1 text-muted small">
<li className="list-inline-item">
<Link
className="text-info"
@ -208,6 +174,20 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{i18n.t('banned')}
</li>
)}
<span
class="unselectable pointer mr-2"
data-tippy-content={i18n.t('number_of_points', {
count: this.state.score,
})}
>
<li className="list-inline-item">
<span className="text-danger">
<svg class="small icon icon-inline mr-1">
<use xlinkHref="#icon-heart"></use>
</svg>
{this.state.score}
</span>
</li>
<li className="list-inline-item">
<span className="text-info">
<svg class="small icon icon-inline mr-1">
@ -224,6 +204,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.state.downvotes}
</span>
</li>
</span>
{this.props.showCommunity && (
<li className="list-inline-item">
<span> {i18n.t('to')} </span>
@ -272,7 +253,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)}
/>
)}
<ul class="list-inline mb-1 text-muted font-weight-bold h5">
<ul class="list-inline mb-0 text-muted font-weight-bold h5">
{this.props.markable && (
<li className="list-inline-item-action">
<span
@ -295,6 +276,36 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
{UserService.Instance.user && !this.props.viewOnly && (
<>
<li className="list-inline-item-action">
<button
className={`vote-animate btn btn-link p-0 mb-1 ${
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
}`}
onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={i18n.t('upvote')}
>
<svg class="icon">
<use xlinkHref="#icon-arrow-up"></use>
</svg>
</button>
</li>
{WebSocketService.Instance.site.enable_downvotes && (
<li className="list-inline-item-action">
<button
className={`vote-animate btn btn-link p-0 mb-1 ${
this.state.my_vote == -1
? 'text-danger'
: 'text-muted'
}`}
onClick={linkEvent(node, this.handleCommentDownvote)}
data-tippy-content={i18n.t('downvote')}
>
<svg class="icon">
<use xlinkHref="#icon-arrow-down"></use>
</svg>
</button>
</li>
)}
<li className="list-inline-item-action">
<span
class="pointer"
@ -306,22 +317,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</svg>
</span>
</li>
<li className="list-inline-item-action">
<span
class="pointer"
onClick={linkEvent(this, this.handleSaveCommentClick)}
data-tippy-content={
node.comment.saved ? i18n.t('unsave') : i18n.t('save')
}
>
<svg
class={`icon icon-inline ${node.comment.saved &&
'text-warning'}`}
>
<use xlinkHref="#icon-star"></use>
</svg>
</span>
</li>
{!this.myComment && (
<li className="list-inline-item-action">
<Link
@ -342,7 +337,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
title={i18n.t('link')}
>
<svg class="icon icon-inline">
<use xlinkHref="#icon-external-link"></use>
<use xlinkHref="#icon-link"></use>
</svg>
</Link>
</li>
@ -360,6 +355,27 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</li>
) : (
<>
<li className="list-inline-item-action">
<span
class="pointer"
onClick={linkEvent(
this,
this.handleSaveCommentClick
)}
data-tippy-content={
node.comment.saved
? i18n.t('unsave')
: i18n.t('save')
}
>
<svg
class={`icon icon-inline ${node.comment.saved &&
'text-warning'}`}
>
<use xlinkHref="#icon-star"></use>
</svg>
</span>
</li>
<li className="list-inline-item-action">
<span
className="pointer"

7
ui/src/components/post-listing.tsx vendored
View file

@ -266,7 +266,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<use xlinkHref="#icon-arrow-up"></use>
</svg>
</button>
<div class={`unselectable font-weight-bold text-muted px-1`}>
<div
class={`unselectable pointer font-weight-bold text-muted px-1`}
data-tippy-content={i18n.t('number_of_points', {
count: this.state.score,
})}
>
{this.state.score}
</div>
{WebSocketService.Instance.site.enable_downvotes && (

8
ui/src/components/symbols.tsx vendored
View file

@ -15,6 +15,12 @@ export class Symbols extends Component<any, any> {
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<symbol id="icon-heart" viewBox="0 0 24 24">
<path d="M20.133 5.317c0.88 0.881 1.319 2.031 1.319 3.184s-0.44 2.303-1.319 3.182l-8.133 8.133-8.133-8.133c-0.879-0.879-1.318-2.029-1.318-3.183s0.439-2.304 1.318-3.183 2.029-1.318 3.183-1.318 2.304 0.439 3.183 1.318l1.060 1.060c0.391 0.391 1.024 0.391 1.414 0l1.062-1.062c0.879-0.879 2.029-1.318 3.182-1.317s2.303 0.44 3.182 1.319zM21.547 3.903c-1.269-1.269-2.934-1.904-4.596-1.905s-3.327 0.634-4.597 1.903l-0.354 0.355-0.353-0.353c-1.269-1.269-2.935-1.904-4.597-1.904s-3.328 0.635-4.597 1.904-1.904 2.935-1.904 4.597 0.635 3.328 1.904 4.597l8.84 8.84c0.391 0.391 1.024 0.391 1.414 0l8.84-8.84c1.269-1.269 1.904-2.934 1.905-4.596s-0.634-3.327-1.905-4.598z"></path>
</symbol>
<symbol id="icon-link" viewBox="0 0 24 24">
<path d="M9.199 13.599c0.992 1.327 2.43 2.126 3.948 2.345s3.123-0.142 4.45-1.134c0.239-0.179 0.465-0.375 0.655-0.568l2.995-2.995c1.163-1.204 1.722-2.751 1.696-4.285s-0.639-3.061-1.831-4.211c-1.172-1.132-2.688-1.692-4.199-1.683-1.492 0.008-2.984 0.571-4.137 1.683l-1.731 1.721c-0.392 0.389-0.394 1.023-0.004 1.414s1.023 0.394 1.414 0.004l1.709-1.699c0.77-0.742 1.763-1.117 2.76-1.123 1.009-0.006 2.016 0.367 2.798 1.122 0.795 0.768 1.203 1.783 1.221 2.808s-0.355 2.054-1.11 2.836l-3.005 3.005c-0.114 0.116-0.263 0.247-0.428 0.37-0.885 0.662-1.952 0.902-2.967 0.756s-1.971-0.678-2.632-1.563c-0.331-0.442-0.957-0.533-1.4-0.202s-0.533 0.957-0.202 1.4zM14.801 10.401c-0.992-1.327-2.43-2.126-3.948-2.345s-3.124 0.142-4.451 1.134c-0.239 0.179-0.464 0.375-0.655 0.568l-2.995 2.995c-1.163 1.204-1.722 2.751-1.696 4.285s0.639 3.061 1.831 4.211c1.172 1.132 2.688 1.692 4.199 1.683 1.492-0.008 2.984-0.571 4.137-1.683l1.723-1.723c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.696 1.698c-0.77 0.742-1.763 1.117-2.76 1.123-1.009 0.006-2.016-0.367-2.798-1.122-0.795-0.768-1.203-1.783-1.221-2.808s0.355-2.054 1.11-2.836l3.005-3.005c0.114-0.116 0.263-0.247 0.428-0.37 0.885-0.662 1.952-0.902 2.967-0.756s1.971 0.678 2.632 1.563c0.331 0.442 0.957 0.533 1.4 0.202s0.533-0.957 0.202-1.4z"></path>
</symbol>
<symbol id="icon-minus-square" viewBox="0 0 24 24">
<path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
</symbol>
@ -58,7 +64,7 @@ export class Symbols extends Component<any, any> {
<path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1z"></path>
</symbol>
<symbol id="icon-reply1" viewBox="0 0 20 20">
<path d="M15 17v-2.99c0-0.003 0-0.006 0-0.010 0-2.209-1.791-4-4-4 0 0-0 0-0 0h-3v5l-6-6 6-6v5h3c3.314 0 6 2.686 6 6v0 3h-2z"></path>
<path d="M19 16.685c0 0-2.225-9.732-11-9.732v-3.984l-7 6.573 7 6.69v-4.357c4.763-0.001 8.516 0.421 11 4.81z"></path>
</symbol>
<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12.897 1.557c-0.092-0.189-0.248-0.352-0.454-0.454-0.495-0.244-1.095-0.041-1.339 0.454l-2.858 5.789-6.391 0.935c-0.208 0.029-0.411 0.127-0.571 0.291-0.386 0.396-0.377 1.029 0.018 1.414l4.623 4.503-1.091 6.362c-0.036 0.207-0.006 0.431 0.101 0.634 0.257 0.489 0.862 0.677 1.351 0.42l5.714-3.005 5.715 3.005c0.186 0.099 0.408 0.139 0.634 0.101 0.544-0.093 0.91-0.61 0.817-1.155l-1.091-6.362 4.623-4.503c0.151-0.146 0.259-0.344 0.292-0.572 0.080-0.546-0.298-1.054-0.845-1.134l-6.39-0.934zM12 4.259l2.193 4.444c0.151 0.305 0.436 0.499 0.752 0.547l4.906 0.717-3.549 3.457c-0.244 0.238-0.341 0.569-0.288 0.885l0.837 4.883-4.386-2.307c-0.301-0.158-0.647-0.148-0.931 0l-4.386 2.307 0.837-4.883c0.058-0.336-0.059-0.661-0.288-0.885l-3.549-3.457 4.907-0.718c0.336-0.049 0.609-0.26 0.752-0.546z"></path>

6
ui/src/utils.ts vendored
View file

@ -446,7 +446,7 @@ export function setupTribute(): Tribute {
allowSpaces: false,
autocompleteMode: true,
menuItemLimit: mentionDropdownFetchLimit,
menuShowMinLength: 3,
menuShowMinLength: 2,
},
// Users
{
@ -460,7 +460,7 @@ export function setupTribute(): Tribute {
allowSpaces: false,
autocompleteMode: true,
menuItemLimit: mentionDropdownFetchLimit,
menuShowMinLength: 3,
menuShowMinLength: 2,
},
// Communities
@ -475,7 +475,7 @@ export function setupTribute(): Tribute {
allowSpaces: false,
autocompleteMode: true,
menuItemLimit: mentionDropdownFetchLimit,
menuShowMinLength: 3,
menuShowMinLength: 2,
},
],
});

21
ui/translations/en.json vendored
View file

@ -4,14 +4,16 @@
"no_posts": "No Posts.",
"create_a_post": "Create a post",
"create_post": "Create Post",
"number_of_posts": "{{count}} Posts",
"number_of_posts": "{{count}} Post",
"number_of_posts_plural": "{{count}} Posts",
"posts": "Posts",
"related_posts": "These posts might be related",
"cross_posts": "This link has also been posted to:",
"cross_post": "cross-post",
"cross_posted_to": "cross-posted to: ",
"comments": "Comments",
"number_of_comments": "{{count}} Comments",
"number_of_comments": "{{count}} Comment",
"number_of_comments_plural": "{{count}} Comments",
"remove_comment": "Remove Comment",
"communities": "Communities",
"users": "Users",
@ -21,7 +23,8 @@
"subscribed_to_communities": "Subscribed to <1>communities</1>",
"trending_communities": "Trending <1>communities</1>",
"list_of_communities": "List of communities",
"number_of_communities": "{{count}} Communities",
"number_of_communities": "{{count}} Community",
"number_of_communities_plural": "{{count}} Communities",
"community_reqs": "lowercase, underscores, and no spaces.",
"create_private_message": "Create Private Message",
"send_secure_message": "Send Secure Message",
@ -79,10 +82,14 @@
"creator": "creator",
"username": "Username",
"email_or_username": "Email or Username",
"number_of_users": "{{count}} Users",
"number_of_subscribers": "{{count}} Subscribers",
"number_of_points": "{{count}} Points",
"number_online": "{{count}} Users Online",
"number_of_users": "{{count}} User",
"number_of_users_plural": "{{count}} Users",
"number_of_subscribers": "{{count}} Subscriber",
"number_of_subscribers_plural": "{{count}} Subscribers",
"number_of_points": "{{count}} Point",
"number_of_points_plural": "{{count}} Points",
"number_online": "{{count}} User Online",
"number_online_plural": "{{count}} Users Online",
"name": "Name",
"title": "Title",
"category": "Category",