From 37bcc11916e2fadcd708a7d86a6aec682a43c493 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 18 Sep 2021 11:08:21 -0400 Subject: [PATCH 1/2] Updating translations. --- lemmy-translations | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lemmy-translations b/lemmy-translations index eee933bd87..183033e0f7 160000 --- a/lemmy-translations +++ b/lemmy-translations @@ -1 +1 @@ -Subproject commit eee933bd87780e0e2a8700e9b8fe0047f14f428a +Subproject commit 183033e0f796b450911e4e8f708ddd5969b12b77 From 9b181d79b1a69d82825d60a886b885f3e0908249 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 18 Sep 2021 12:18:53 -0400 Subject: [PATCH 2/2] Use a number simplifier for counts. Fixes #407 --- 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 +- 9 files changed, 87 insertions(+), 20 deletions(-) diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index 06304a8c53..6f20469159 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 { "unread_messages" )}`} > - {this.state.unreadCount} + {numToSI(this.state.unreadCount)} )} @@ -309,7 +310,7 @@ export class Navbar extends Component { "unread_messages" )}`} > - {this.state.unreadCount} + {numToSI(this.state.unreadCount)} )} diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 1007866708..cb7818a98d 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 { 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)} • @@ -293,7 +295,9 @@ export class CommentNode extends Component { {showScores() && this.state.upvotes !== this.state.score && ( - {this.state.upvotes} + + {numToSI(this.state.upvotes)} + )} {this.props.enableDownvotes && ( @@ -310,7 +314,9 @@ export class CommentNode extends Component { {showScores() && this.state.upvotes !== this.state.score && ( - {this.state.downvotes} + + {numToSI(this.state.downvotes)} + )} )} @@ -1289,14 +1295,17 @@ export class CommentNode extends Component { 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 aa34be35a9..1cb74e26c6 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 { - {cv.counts.subscribers} - {cv.counts.users_active_month} + + {numToSI(cv.counts.subscribers)} + + + {numToSI(cv.counts.users_active_month)} + - {cv.counts.posts} + {numToSI(cv.counts.posts)} - {cv.counts.comments} + {numToSI(cv.counts.comments)} {cv.subscribed ? ( diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx index c0cb991901..d4a5bc51cd 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 { return (
  • - {i18n.t("number_online", { count: this.props.online })} + {i18n.t("number_online", { + count: this.props.online, + formattedCount: numToSI(this.props.online), + })}
  • {i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")}
    • @@ -160,10 +171,12 @@ export class Sidebar extends Component { 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")} @@ -171,10 +184,12 @@ export class Sidebar extends Component { 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")} @@ -182,28 +197,34 @@ export class Sidebar extends Component { 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 })}
  • {i18n.t("number_of_subscribers", { count: counts.subscribers, + formattedCount: numToSI(counts.subscribers), })}
  • {i18n.t("number_of_posts", { count: counts.posts, + formattedCount: numToSI(counts.posts), })}
  • {i18n.t("number_of_comments", { count: counts.comments, + formattedCount: numToSI(counts.comments), })}
  • diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index d06bf011cf..a22a95930d 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 { return (
    • - {i18n.t("number_online", { count: this.state.siteRes.online })} + {i18n.t("number_online", { + count: this.state.siteRes.online, + formattedCount: numToSI(this.state.siteRes.online), + })}
    • {i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")}
      • @@ -520,10 +526,12 @@ export class Home extends Component { 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")} @@ -531,10 +539,12 @@ export class Home extends Component { 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")} @@ -542,33 +552,40 @@ export class Home extends Component { 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 })}
    • {i18n.t("number_of_users", { count: counts.users, + formattedCount: numToSI(counts.users), })}
    • {i18n.t("number_of_communities", { count: counts.communities, + formattedCount: numToSI(counts.communities), })}
    • {i18n.t("number_of_posts", { count: counts.posts, + formattedCount: numToSI(counts.posts), })}
    • {i18n.t("number_of_comments", { count: counts.comments, + formattedCount: numToSI(counts.comments), })}
    • diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index 5289b68809..1dcd8e5d3b 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 {
      • - {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), + })}
      • {i18n.t("number_of_comments", { count: pv.counts.comment_count, + formattedCount: numToSI(pv.counts.comment_count), })}
      diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 9c6da3765a..49825b397b 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 { class={`unselectable pointer font-weight-bold text-muted px-1`} data-tippy-content={this.pointsTippy} > - {this.state.score} + {numToSI(this.state.score)}
      ) : (
      @@ -475,12 +476,14 @@ export class PostListing extends Component { 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`} > {i18n.t("number_of_comments", { count: post_view.counts.comments, + formattedCount: numToSI(post_view.counts.comments), })} @@ -494,7 +497,7 @@ export class PostListing extends Component { > - {this.state.downvotes} + {numToSI(this.state.downvotes)} )} @@ -532,7 +535,7 @@ export class PostListing extends Component { aria-label={i18n.t("upvote")} > - {this.state.upvotes} + {numToSI(this.state.upvotes)} ) : ( ) : ( @@ -1571,14 +1574,17 @@ export class PostListing extends Component { 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 4a1c852155..b70b12b045 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 { {` - ${i18n.t("number_of_subscribers", { count: community_view.counts.subscribers, + formattedCount: numToSI(community_view.counts.subscribers), })} `} @@ -662,6 +664,7 @@ export class Search extends Component { , {` - ${i18n.t("number_of_comments", { count: person_view.counts.comment_count, + formattedCount: numToSI(person_view.counts.comment_count), })}`}, ]; } diff --git a/src/shared/utils.ts b/src/shared/utils.ts index ab2e89855f..e0e3797937 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); }