From a2aac813cf7c43c2941b02b1a3464a5c0d03e569 Mon Sep 17 00:00:00 2001 From: Dessalines <dessalines@users.noreply.github.com> Date: Sat, 18 Sep 2021 12:35:49 -0400 Subject: [PATCH] Si simplifier (#418) * Updating translations. * Use a number simplifier for counts. Fixes #407 --- lemmy-translations | 2 +- src/shared/components/app/navbar.tsx | 5 ++-- .../components/comment/comment-node.tsx | 15 ++++++++--- .../components/community/communities.tsx | 13 ++++++--- src/shared/components/community/sidebar.tsx | 27 ++++++++++++++++--- src/shared/components/home/home.tsx | 21 +++++++++++++-- src/shared/components/person/profile.tsx | 7 ++++- src/shared/components/post/post-listing.tsx | 14 +++++++--- src/shared/components/search.tsx | 3 +++ src/shared/utils.ts | 2 +- 10 files changed, 88 insertions(+), 21 deletions(-) diff --git a/lemmy-translations b/lemmy-translations index eee933b..183033e 160000 --- a/lemmy-translations +++ b/lemmy-translations @@ -1 +1 @@ -Subproject commit eee933bd87780e0e2a8700e9b8fe0047f14f428a +Subproject commit 183033e0f796b450911e4e8f708ddd5969b12b77 diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index 06304a8..6f20469 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -25,6 +25,7 @@ import { isBrowser, notifyComment, notifyPrivateMessage, + numToSI, setTheme, showAvatars, supportLemmyUrl, @@ -189,7 +190,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> { "unread_messages" )}`} > - {this.state.unreadCount} + {numToSI(this.state.unreadCount)} </span> )} </button> @@ -309,7 +310,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> { "unread_messages" )}`} > - {this.state.unreadCount} + {numToSI(this.state.unreadCount)} </span> )} </Link> diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 1007866..cb7818a 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -30,6 +30,7 @@ import { getUnixTime, isMod, mdToHtml, + numToSI, setupTippy, showScores, wsClient, @@ -217,9 +218,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { class="mr-1 font-weight-bold" aria-label={i18n.t("number_of_points", { count: this.state.score, + formattedCount: this.state.score, })} > - {this.state.score} + {numToSI(this.state.score)} </span> </a> <span className="mr-1">â¢</span> @@ -293,7 +295,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <Icon icon="arrow-up1" classes="icon-inline" /> {showScores() && this.state.upvotes !== this.state.score && ( - <span class="ml-1">{this.state.upvotes}</span> + <span class="ml-1"> + {numToSI(this.state.upvotes)} + </span> )} </button> {this.props.enableDownvotes && ( @@ -310,7 +314,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <Icon icon="arrow-down1" classes="icon-inline" /> {showScores() && this.state.upvotes !== this.state.score && ( - <span class="ml-1">{this.state.downvotes}</span> + <span class="ml-1"> + {numToSI(this.state.downvotes)} + </span> )} </button> )} @@ -1289,14 +1295,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { get pointsTippy(): string { let points = i18n.t("number_of_points", { count: this.state.score, + formattedCount: this.state.score, }); let upvotes = i18n.t("number_of_upvotes", { count: this.state.upvotes, + formattedCount: this.state.upvotes, }); let downvotes = i18n.t("number_of_downvotes", { count: this.state.downvotes, + formattedCount: this.state.downvotes, }); return `${points} ⢠${upvotes} ⢠${downvotes}`; diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx index aa34be3..1cb74e2 100644 --- a/src/shared/components/community/communities.tsx +++ b/src/shared/components/community/communities.tsx @@ -19,6 +19,7 @@ import { getListingTypeFromPropsNoDefault, getPageFromProps, isBrowser, + numToSI, setIsoData, setOptionalAuth, showLocal, @@ -160,13 +161,17 @@ export class Communities extends Component<any, CommunitiesState> { <td> <CommunityLink community={cv.community} /> </td> - <td class="text-right">{cv.counts.subscribers}</td> - <td class="text-right">{cv.counts.users_active_month}</td> + <td class="text-right"> + {numToSI(cv.counts.subscribers)} + </td> + <td class="text-right"> + {numToSI(cv.counts.users_active_month)} + </td> <td class="text-right d-none d-lg-table-cell"> - {cv.counts.posts} + {numToSI(cv.counts.posts)} </td> <td class="text-right d-none d-lg-table-cell"> - {cv.counts.comments} + {numToSI(cv.counts.comments)} </td> <td class="text-right"> {cv.subscribed ? ( diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx index c0cb991..d4a5bc5 100644 --- a/src/shared/components/community/sidebar.tsx +++ b/src/shared/components/community/sidebar.tsx @@ -11,7 +11,13 @@ import { } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { UserService, WebSocketService } from "../../services"; -import { authField, getUnixTime, mdToHtml, wsClient } from "../../utils"; +import { + authField, + getUnixTime, + mdToHtml, + numToSI, + wsClient, +} from "../../utils"; import { BannerIconHeader } from "../common/banner-icon-header"; import { Icon } from "../common/icon"; import { CommunityForm } from "../community/community-form"; @@ -143,16 +149,21 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { return ( <ul class="my-1 list-inline"> <li className="list-inline-item badge badge-secondary"> - {i18n.t("number_online", { count: this.props.online })} + {i18n.t("number_online", { + count: this.props.online, + formattedCount: numToSI(this.props.online), + })} </li> <li className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: counts.users_active_day, })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`} > {i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")} </li> @@ -160,10 +171,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_week, + formattedCount: counts.users_active_week, })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`} > {i18n.t("number_of_users", { count: counts.users_active_week, + formattedCount: numToSI(counts.users_active_week), })}{" "} / {i18n.t("week")} </li> @@ -171,10 +184,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_month, + formattedCount: counts.users_active_month, })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`} > {i18n.t("number_of_users", { count: counts.users_active_month, + formattedCount: numToSI(counts.users_active_month), })}{" "} / {i18n.t("month")} </li> @@ -182,28 +197,34 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_half_year, + formattedCount: counts.users_active_half_year, })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", { count: 6, + formattedCount: 6, })}`} > {i18n.t("number_of_users", { count: counts.users_active_half_year, + formattedCount: numToSI(counts.users_active_half_year), })}{" "} - / {i18n.t("number_of_months", { count: 6 })} + / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_subscribers", { count: counts.subscribers, + formattedCount: numToSI(counts.subscribers), })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_posts", { count: counts.posts, + formattedCount: numToSI(counts.posts), })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_comments", { count: counts.comments, + formattedCount: numToSI(counts.comments), })} </li> <li className="list-inline-item"> diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index d06bf01..a22a959 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -40,6 +40,7 @@ import { getSortTypeFromProps, mdToHtml, notifyPost, + numToSI, restoreScrollPosition, saveCommentRes, saveScrollPosition, @@ -503,16 +504,21 @@ export class Home extends Component<any, HomeState> { return ( <ul class="my-2 list-inline"> <li className="list-inline-item badge badge-secondary"> - {i18n.t("number_online", { count: this.state.siteRes.online })} + {i18n.t("number_online", { + count: this.state.siteRes.online, + formattedCount: numToSI(this.state.siteRes.online), + })} </li> <li className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: counts.users_active_day, })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`} > {i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")} </li> @@ -520,10 +526,12 @@ export class Home extends Component<any, HomeState> { className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_week, + formattedCount: counts.users_active_week, })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`} > {i18n.t("number_of_users", { count: counts.users_active_week, + formattedCount: numToSI(counts.users_active_week), })}{" "} / {i18n.t("week")} </li> @@ -531,10 +539,12 @@ export class Home extends Component<any, HomeState> { className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_month, + formattedCount: counts.users_active_month, })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`} > {i18n.t("number_of_users", { count: counts.users_active_month, + formattedCount: numToSI(counts.users_active_month), })}{" "} / {i18n.t("month")} </li> @@ -542,33 +552,40 @@ export class Home extends Component<any, HomeState> { className="list-inline-item badge badge-secondary pointer" data-tippy-content={`${i18n.t("number_of_users", { count: counts.users_active_half_year, + formattedCount: counts.users_active_half_year, })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", { count: 6, + formattedCount: 6, })}`} > {i18n.t("number_of_users", { count: counts.users_active_half_year, + formattedCount: numToSI(counts.users_active_half_year), })}{" "} - / {i18n.t("number_of_months", { count: 6 })} + / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_users", { count: counts.users, + formattedCount: numToSI(counts.users), })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_communities", { count: counts.communities, + formattedCount: numToSI(counts.communities), })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_posts", { count: counts.posts, + formattedCount: numToSI(counts.posts), })} </li> <li className="list-inline-item badge badge-secondary"> {i18n.t("number_of_comments", { count: counts.comments, + formattedCount: numToSI(counts.comments), })} </li> <li className="list-inline-item"> diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index 5289b68..1dcd8e5 100644 --- a/src/shared/components/person/profile.tsx +++ b/src/shared/components/person/profile.tsx @@ -26,6 +26,7 @@ import { fetchLimit, getUsernameFromProps, mdToHtml, + numToSI, previewLines, restoreScrollPosition, routeSortTypeToEnum, @@ -403,11 +404,15 @@ export class Profile extends Component<any, ProfileState> { <div> <ul class="list-inline mb-2"> <li className="list-inline-item badge badge-light"> - {i18n.t("number_of_posts", { count: pv.counts.post_count })} + {i18n.t("number_of_posts", { + count: pv.counts.post_count, + formattedCount: numToSI(pv.counts.post_count), + })} </li> <li className="list-inline-item badge badge-light"> {i18n.t("number_of_comments", { count: pv.counts.comment_count, + formattedCount: numToSI(pv.counts.comment_count), })} </li> </ul> diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 9c6da37..49825b3 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -32,6 +32,7 @@ import { isVideo, md, mdToHtml, + numToSI, previewLines, setupTippy, showScores, @@ -356,7 +357,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { class={`unselectable pointer font-weight-bold text-muted px-1`} data-tippy-content={this.pointsTippy} > - {this.state.score} + {numToSI(this.state.score)} </div> ) : ( <div class="p-1"></div> @@ -475,12 +476,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> { className="text-muted small" title={i18n.t("number_of_comments", { count: post_view.counts.comments, + formattedCount: post_view.counts.comments, })} to={`/post/${post_view.post.id}?scrollToComments=true`} > <Icon icon="message-square" classes="icon-inline mr-1" /> {i18n.t("number_of_comments", { count: post_view.counts.comments, + formattedCount: numToSI(post_view.counts.comments), })} </Link> </button> @@ -494,7 +497,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { > <small> <Icon icon="arrow-down1" classes="icon-inline mr-1" /> - <span>{this.state.downvotes}</span> + <span>{numToSI(this.state.downvotes)}</span> </small> </button> )} @@ -532,7 +535,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { aria-label={i18n.t("upvote")} > <Icon icon="arrow-up1" classes="icon-inline small mr-2" /> - {this.state.upvotes} + {numToSI(this.state.upvotes)} </button> ) : ( <button @@ -557,7 +560,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { > <Icon icon="arrow-down1" classes="icon-inline small mr-2" /> {this.state.downvotes !== 0 && ( - <span>{this.state.downvotes}</span> + <span>{numToSI(this.state.downvotes)}</span> )} </button> ) : ( @@ -1571,14 +1574,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> { get pointsTippy(): string { let points = i18n.t("number_of_points", { count: this.state.score, + formattedCount: this.state.score, }); let upvotes = i18n.t("number_of_upvotes", { count: this.state.upvotes, + formattedCount: this.state.upvotes, }); let downvotes = i18n.t("number_of_downvotes", { count: this.state.downvotes, + formattedCount: this.state.downvotes, }); return `${points} ⢠${upvotes} ⢠${downvotes}`; diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 4a1c852..b70b12b 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -38,6 +38,7 @@ import { fetchLimit, fetchUsers, isBrowser, + numToSI, personSelectName, personToChoice, restoreScrollPosition, @@ -649,6 +650,7 @@ export class Search extends Component<any, SearchState> { <span>{` - ${i18n.t("number_of_subscribers", { count: community_view.counts.subscribers, + formattedCount: numToSI(community_view.counts.subscribers), })} `}</span> </> @@ -662,6 +664,7 @@ export class Search extends Component<any, SearchState> { </span>, <span>{` - ${i18n.t("number_of_comments", { count: person_view.counts.comment_count, + formattedCount: numToSI(person_view.counts.comment_count), })}`}</span>, ]; } diff --git a/src/shared/utils.ts b/src/shared/utils.ts index ab2e898..e0e3797 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1439,6 +1439,6 @@ const SHORTNUM_SI_FORMAT = new Intl.NumberFormat("en-US", { compactDisplay: "short", }); -export function numToSI(value: any) { +export function numToSI(value: number): string { return SHORTNUM_SI_FORMAT.format(value); } -- 2.44.1