From f36aa1f40dd92a2dfe4f3e92bfc26a67d08ae2be Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 11 Mar 2020 19:10:10 -0400 Subject: [PATCH] Show full scores on hover for posts and comments. Fixes #592 --- ui/src/components/comment-node.tsx | 22 +++++++++++++++++++--- ui/src/components/post-listing.tsx | 26 ++++++++++++++++++++------ ui/src/utils.ts | 10 +++++----- ui/translations/en.json | 4 ++++ 4 files changed, 48 insertions(+), 14 deletions(-) diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 524367bce..32e43fdc7 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -198,9 +198,7 @@ export class CommentNode extends Component { @@ -916,6 +914,7 @@ export class CommentNode extends Component { WebSocketService.Instance.likeComment(form); this.setState(this.state); + setupTippy(); } handleCommentDownvote(i: CommentNodeI) { @@ -943,6 +942,7 @@ export class CommentNode extends Component { WebSocketService.Instance.likeComment(form); this.setState(this.state); + setupTippy(); } handleModRemoveShow(i: CommentNode) { @@ -1166,4 +1166,20 @@ export class CommentNode extends Component { 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}`; + } } diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index bef74999f..fd34875d7 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -262,9 +262,7 @@ export class PostListing extends Component {
{this.state.score}
@@ -466,9 +464,7 @@ export class PostListing extends Component { <>
  • @@ -1022,6 +1018,7 @@ export class PostListing extends Component { WebSocketService.Instance.likePost(form); i.setState(i.state); + setupTippy(); } handlePostDisLike(i: PostListing) { @@ -1048,6 +1045,7 @@ export class PostListing extends Component { WebSocketService.Instance.likePost(form); i.setState(i.state); + setupTippy(); } handleEditClick(i: PostListing) { @@ -1291,4 +1289,20 @@ export class PostListing extends Component { i.setState(i.state); 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}`; + } } diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 27dbfb500..69666200d 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -16,7 +16,7 @@ import 'moment/locale/ja'; import { UserOperation, Comment, - CommentNode, + CommentNode as CommentNodeI, Post, PrivateMessage, User, @@ -668,15 +668,15 @@ export function editPostRes(data: PostResponse, post: Post) { export function commentsToFlatNodes( comments: Array -): Array { - let nodes: Array = []; +): Array { + let nodes: Array = []; for (let comment of comments) { nodes.push({ comment: comment }); } return nodes; } -export function commentSort(tree: Array, sort: CommentSortType) { +export function commentSort(tree: Array, sort: CommentSortType) { // First, put removed and deleted comments at the bottom, then do your other sorts if (sort == CommentSortType.Top) { tree.sort( @@ -716,7 +716,7 @@ export function commentSort(tree: Array, sort: CommentSortType) { } } -export function commentSortSortType(tree: Array, sort: SortType) { +export function commentSortSortType(tree: Array, sort: SortType) { commentSort(tree, convertCommentSortType(sort)); } diff --git a/ui/translations/en.json b/ui/translations/en.json index afee21bbe..e9df20ba3 100644 --- a/ui/translations/en.json +++ b/ui/translations/en.json @@ -155,7 +155,11 @@ "downvotes_disabled": "Downvotes disabled", "enable_downvotes": "Enable Downvotes", "upvote": "Upvote", + "number_of_upvotes": "{{count}} Upvote", + "number_of_upvotes_plural": "{{count}} Upvotes", "downvote": "Downvote", + "number_of_downvotes": "{{count}} Downvote", + "number_of_downvotes_plural": "{{count}} Downvotes", "open_registration": "Open Registration", "registration_closed": "Registration closed", "enable_nsfw": "Enable NSFW",