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

ui/src/components/comment-node.tsx

@@ -198,9 +198,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <span
                   className={`unselectable pointer ${this.scoreColor}`}
                   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">
                     <use xlinkHref="#icon-zap"></use>
@@ -916,6 +914,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     WebSocketService.Instance.likeComment(form);
     this.setState(this.state);
+    setupTippy();
   }
 
   handleCommentDownvote(i: CommentNodeI) {
@@ -943,6 +942,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     WebSocketService.Instance.likeComment(form);
     this.setState(this.state);
+    setupTippy();
   }
 
   handleModRemoveShow(i: CommentNode) {
@@ -1166,4 +1166,20 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       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}`;
+  }
 }

ui/src/components/post-listing.tsx

@@ -262,9 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </button>
           <div
             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}
           </div>
@@ -466,9 +464,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   <>
                     <span
                       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">
                         <span className="text-muted">
@@ -1022,6 +1018,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     WebSocketService.Instance.likePost(form);
     i.setState(i.state);
+    setupTippy();
   }
 
   handlePostDisLike(i: PostListing) {
@@ -1048,6 +1045,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     WebSocketService.Instance.likePost(form);
     i.setState(i.state);
+    setupTippy();
   }
 
   handleEditClick(i: PostListing) {
@@ -1291,4 +1289,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     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}`;
+  }
 }

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<Comment>
-): Array<CommentNode> {
+): Array<CommentNodeI> {
-  let nodes: Array<CommentNode> = [];
+  let nodes: Array<CommentNodeI> = [];
   for (let comment of comments) {
     nodes.push({ comment: comment });
   }
   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
   if (sort == CommentSortType.Top) {
     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));
 }
 

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",