Show full scores on hover for posts and comments. Fixes #592

This commit is contained in:
Dessalines 2020-03-11 19:10:10 -04:00
parent 4fbf55d79e
commit f36aa1f40d
4 changed files with 48 additions and 14 deletions

View file

@ -198,9 +198,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<span <span
className={`unselectable pointer ${this.scoreColor}`} className={`unselectable pointer ${this.scoreColor}`}
onClick={linkEvent(node, this.handleCommentUpvote)} onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={i18n.t('number_of_points', { data-tippy-content={this.pointsTippy}
count: this.state.score,
})}
> >
<svg class="icon icon-inline mr-1"> <svg class="icon icon-inline mr-1">
<use xlinkHref="#icon-zap"></use> <use xlinkHref="#icon-zap"></use>
@ -916,6 +914,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
WebSocketService.Instance.likeComment(form); WebSocketService.Instance.likeComment(form);
this.setState(this.state); this.setState(this.state);
setupTippy();
} }
handleCommentDownvote(i: CommentNodeI) { handleCommentDownvote(i: CommentNodeI) {
@ -943,6 +942,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
WebSocketService.Instance.likeComment(form); WebSocketService.Instance.likeComment(form);
this.setState(this.state); this.setState(this.state);
setupTippy();
} }
handleModRemoveShow(i: CommentNode) { handleModRemoveShow(i: CommentNode) {
@ -1166,4 +1166,20 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
return 'text-muted'; return 'text-muted';
} }
} }
get pointsTippy(): string {
let points = i18n.t('number_of_points', {
count: this.state.score,
});
let upvotes = i18n.t('number_of_upvotes', {
count: this.state.upvotes,
});
let downvotes = i18n.t('number_of_downvotes', {
count: this.state.downvotes,
});
return `${points}${upvotes}${downvotes}`;
}
} }

View file

@ -262,9 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button> </button>
<div <div
class={`unselectable pointer font-weight-bold text-muted px-1`} class={`unselectable pointer font-weight-bold text-muted px-1`}
data-tippy-content={i18n.t('number_of_points', { data-tippy-content={this.pointsTippy}
count: this.state.score,
})}
> >
{this.state.score} {this.state.score}
</div> </div>
@ -466,9 +464,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
<span <span
class="unselectable pointer mr-2" class="unselectable pointer mr-2"
data-tippy-content={i18n.t('number_of_points', { data-tippy-content={this.pointsTippy}
count: this.state.score,
})}
> >
<li className="list-inline-item"> <li className="list-inline-item">
<span className="text-muted"> <span className="text-muted">
@ -1022,6 +1018,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.likePost(form); WebSocketService.Instance.likePost(form);
i.setState(i.state); i.setState(i.state);
setupTippy();
} }
handlePostDisLike(i: PostListing) { handlePostDisLike(i: PostListing) {
@ -1048,6 +1045,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.likePost(form); WebSocketService.Instance.likePost(form);
i.setState(i.state); i.setState(i.state);
setupTippy();
} }
handleEditClick(i: PostListing) { handleEditClick(i: PostListing) {
@ -1291,4 +1289,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
i.setState(i.state); i.setState(i.state);
setupTippy(); setupTippy();
} }
get pointsTippy(): string {
let points = i18n.t('number_of_points', {
count: this.state.score,
});
let upvotes = i18n.t('number_of_upvotes', {
count: this.state.upvotes,
});
let downvotes = i18n.t('number_of_downvotes', {
count: this.state.downvotes,
});
return `${points}${upvotes}${downvotes}`;
}
} }

10
ui/src/utils.ts vendored
View file

@ -16,7 +16,7 @@ import 'moment/locale/ja';
import { import {
UserOperation, UserOperation,
Comment, Comment,
CommentNode, CommentNode as CommentNodeI,
Post, Post,
PrivateMessage, PrivateMessage,
User, User,
@ -668,15 +668,15 @@ export function editPostRes(data: PostResponse, post: Post) {
export function commentsToFlatNodes( export function commentsToFlatNodes(
comments: Array<Comment> comments: Array<Comment>
): Array<CommentNode> { ): Array<CommentNodeI> {
let nodes: Array<CommentNode> = []; let nodes: Array<CommentNodeI> = [];
for (let comment of comments) { for (let comment of comments) {
nodes.push({ comment: comment }); nodes.push({ comment: comment });
} }
return nodes; return nodes;
} }
export function commentSort(tree: Array<CommentNode>, sort: CommentSortType) { export function commentSort(tree: Array<CommentNodeI>, sort: CommentSortType) {
// First, put removed and deleted comments at the bottom, then do your other sorts // First, put removed and deleted comments at the bottom, then do your other sorts
if (sort == CommentSortType.Top) { if (sort == CommentSortType.Top) {
tree.sort( tree.sort(
@ -716,7 +716,7 @@ export function commentSort(tree: Array<CommentNode>, sort: CommentSortType) {
} }
} }
export function commentSortSortType(tree: Array<CommentNode>, sort: SortType) { export function commentSortSortType(tree: Array<CommentNodeI>, sort: SortType) {
commentSort(tree, convertCommentSortType(sort)); commentSort(tree, convertCommentSortType(sort));
} }

View file

@ -155,7 +155,11 @@
"downvotes_disabled": "Downvotes disabled", "downvotes_disabled": "Downvotes disabled",
"enable_downvotes": "Enable Downvotes", "enable_downvotes": "Enable Downvotes",
"upvote": "Upvote", "upvote": "Upvote",
"number_of_upvotes": "{{count}} Upvote",
"number_of_upvotes_plural": "{{count}} Upvotes",
"downvote": "Downvote", "downvote": "Downvote",
"number_of_downvotes": "{{count}} Downvote",
"number_of_downvotes_plural": "{{count}} Downvotes",
"open_registration": "Open Registration", "open_registration": "Open Registration",
"registration_closed": "Registration closed", "registration_closed": "Registration closed",
"enable_nsfw": "Enable NSFW", "enable_nsfw": "Enable NSFW",