diff options
author | Dessalines <tyhou13@gmx.com> | 2020-03-11 19:10:10 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-03-11 19:10:10 -0400 |
commit | f36aa1f40dd92a2dfe4f3e92bfc26a67d08ae2be (patch) | |
tree | 2c2d0b645d9a1b9c3312b69f6beaed41ff2e0d56 /ui/src | |
parent | 4fbf55d79e355608c75aa8218cd7f487c58fa04d (diff) |
Show full scores on hover for posts and comments. Fixes #592
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/comment-node.tsx | 22 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 26 | ||||
-rw-r--r-- | ui/src/utils.ts | 10 |
3 files changed, 44 insertions, 14 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 524367bc..32e43fdc 100644 --- a/ui/src/components/comment-node.tsx +++ b/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', { - count: this.state.score, - })} + data-tippy-content={this.pointsTippy} > <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}`; + } } diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index bef74999..fd34875d 100644 --- a/ui/src/components/post-listing.tsx +++ b/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', { - count: this.state.score, - })} + data-tippy-content={this.pointsTippy} > {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', { - count: this.state.score, - })} + data-tippy-content={this.pointsTippy} > <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}`; + } } diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 27dbfb50..69666200 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<Comment> -): Array<CommentNode> { - let nodes: Array<CommentNode> = []; +): Array<CommentNodeI> { + 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)); } |