Merge pull request #1770 from jsit/fix/fix-badges-spacing-componentize

fix: Fix badge alignment and break out into component
2024-12-27 21:31:26 +00:00 · 2023-07-03 12:35:35 +00:00 · 2023-07-03 12:35:35 +00:00 · a19358333a
commit a19358333a
parent 93d2d56cce 34f04e6758
6 changed files with 141 additions and 117 deletions
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@ -1,7 +1,6 @@
 import {
  colorList,
  getCommentParentId,
-  getRoleLabelPill,
  myAuth,
  myAuthRequired,
  showScores,
@ -63,6 +62,7 @@ import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
+import { UserBadges } from "../common/user-badges";
 import { VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@ -310,41 +310,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                />
              </button>

-              <span className="me-2">
-                <PersonListing person={cv.creator} />
-              </span>
+              <PersonListing person={cv.creator} />

              {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes="text-danger me-2" />
+                <Icon icon="shield" inline classes="text-danger ms-1" />
              )}

-              {this.isPostCreator &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("op").toUpperCase(),
-                  tooltip: I18NextService.i18n.t("creator"),
-                  classes: "text-bg-info",
-                  shrink: false,
-                })}
-
-              {isMod_ &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("mod"),
-                  tooltip: I18NextService.i18n.t("mod"),
-                  classes: "text-bg-primary",
-                })}
-
-              {isAdmin_ &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("admin"),
-                  tooltip: I18NextService.i18n.t("admin"),
-                  classes: "text-bg-danger",
-                })}
-
-              {cv.creator.bot_account &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("bot_account").toLowerCase(),
-                  tooltip: I18NextService.i18n.t("bot_account"),
-                })}
+              <UserBadges
+                classNames="ms-1"
+                isPostCreator={this.isPostCreator}
+                isMod={isMod_}
+                isAdmin={isAdmin_}
+                isBot={cv.creator.bot_account}
+              />

              {this.props.showCommunity && (
                <>
--- a/src/shared/components/common/user-badges.tsx
+++ b/src/shared/components/common/user-badges.tsx
@ -0,0 +1,112 @@
+import classNames from "classnames";
+import { Component } from "inferno";
+import { I18NextService } from "../../services";
+
+interface UserBadgesProps {
+  isBanned?: boolean;
+  isDeleted?: boolean;
+  isPostCreator?: boolean;
+  isMod?: boolean;
+  isAdmin?: boolean;
+  isBot?: boolean;
+  classNames?: string;
+}
+
+export function getRoleLabelPill({
+  label,
+  tooltip,
+  classes,
+  shrink = true,
+}: {
+  label: string;
+  tooltip: string;
+  classes?: string;
+  shrink?: boolean;
+}) {
+  return (
+    <span
+      className={`badge ${classes ?? "text-bg-light"}`}
+      aria-label={tooltip}
+      data-tippy-content={tooltip}
+    >
+      {shrink ? label[0].toUpperCase() : label}
+    </span>
+  );
+}
+
+export class UserBadges extends Component<UserBadgesProps> {
+  render() {
+    return (
+      (this.props.isBanned ||
+        this.props.isPostCreator ||
+        this.props.isMod ||
+        this.props.isAdmin ||
+        this.props.isBot) && (
+        <span
+          className={classNames(
+            "row d-inline-flex gx-1",
+            this.props.classNames
+          )}
+        >
+          {this.props.isBanned && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("banned"),
+                tooltip: I18NextService.i18n.t("banned"),
+                classes: "text-bg-danger",
+                shrink: false,
+              })}
+            </span>
+          )}
+          {this.props.isDeleted && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("deleted"),
+                tooltip: I18NextService.i18n.t("deleted"),
+                classes: "text-bg-danger",
+                shrink: false,
+              })}
+            </span>
+          )}
+
+          {this.props.isPostCreator && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("op").toUpperCase(),
+                tooltip: I18NextService.i18n.t("creator"),
+                classes: "text-bg-info",
+                shrink: false,
+              })}
+            </span>
+          )}
+          {this.props.isMod && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("mod"),
+                tooltip: I18NextService.i18n.t("mod"),
+                classes: "text-bg-primary",
+              })}
+            </span>
+          )}
+          {this.props.isAdmin && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("admin"),
+                tooltip: I18NextService.i18n.t("admin"),
+                classes: "text-bg-danger",
+              })}
+            </span>
+          )}
+          {this.props.isBot && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("bot_account").toLowerCase(),
+                tooltip: I18NextService.i18n.t("bot_account"),
+              })}
+            </span>
+          )}
+        </span>
+      )
+    );
+  }
+}
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@ -5,7 +5,6 @@ import {
  enableDownvotes,
  enableNsfw,
  getCommentParentId,
-  getRoleLabelPill,
  myAuth,
  myAuthRequired,
  setIsoData,
@ -85,6 +84,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { SortSelect } from "../common/sort-select";
+import { UserBadges } from "../common/user-badges";
 import { CommunityLink } from "../community/community-link";
 import { PersonDetails } from "./person-details";
 import { PersonListing } from "./person-listing";
@ -484,46 +484,15 @@ export class Profile extends Component<
                        hideAvatar
                      />
                    </li>
-                    {isBanned(pv.person) && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("banned"),
-                          tooltip: I18NextService.i18n.t("banned"),
-                          classes: "text-bg-danger",
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.deleted && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("deleted"),
-                          tooltip: I18NextService.i18n.t("deleted"),
-                          classes: "text-bg-danger",
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.admin && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("admin"),
-                          tooltip: I18NextService.i18n.t("admin"),
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.bot_account && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n
-                            .t("bot_account")
-                            .toLowerCase(),
-                          tooltip: I18NextService.i18n.t("bot_account"),
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
+                    <li className="list-inline-item">
+                      <UserBadges
+                        classNames="ms-1"
+                        isBanned={isBanned(pv.person)}
+                        isDeleted={pv.person.deleted}
+                        isAdmin={pv.person.admin}
+                        isBot={pv.person.bot_account}
+                      />
+                    </li>
                  </ul>
                </div>
                {this.banDialog(pv)}
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -1,4 +1,4 @@
-import { getRoleLabelPill, myAuthRequired } from "@utils/app";
+import { myAuthRequired } from "@utils/app";
 import { canShare, share } from "@utils/browser";
 import { getExternalHost, getHttpBase } from "@utils/env";
 import {
@ -55,6 +55,7 @@ import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PictrsImage } from "../common/pictrs-image";
+import { UserBadges } from "../common/user-badges";
 import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@ -406,26 +407,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {

    return (
      <div className="small mb-1 mb-md-0">
-        <span className="me-1">
-          <PersonListing person={post_view.creator} />
-        </span>
-        {this.creatorIsMod_ &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("mod"),
-            tooltip: I18NextService.i18n.t("mod"),
-            classes: "text-bg-primary",
-          })}
-        {this.creatorIsAdmin_ &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("admin"),
-            tooltip: I18NextService.i18n.t("admin"),
-            classes: "text-bg-danger",
-          })}
-        {post_view.creator.bot_account &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("bot_account").toLowerCase(),
-            tooltip: I18NextService.i18n.t("bot_account"),
-          })}
+        <PersonListing person={post_view.creator} />
+        <UserBadges
+          classNames="ms-1"
+          isMod={this.creatorIsMod_}
+          isAdmin={this.creatorIsAdmin_}
+          isBot={post_view.creator.bot_account}
+        />
        {this.props.showCommunity && (
          <>
            {" "}
--- a/src/shared/utils/app/get-role-label-pill.tsx
+++ b/src/shared/utils/app/get-role-label-pill.tsx
@ -1,21 +0,0 @@
-export default function getRoleLabelPill({
-  label,
-  tooltip,
-  classes,
-  shrink = true,
-}: {
-  label: string;
-  tooltip: string;
-  classes?: string;
-  shrink?: boolean;
-}) {
-  return (
-    <span
-      className={`badge me-1 ${classes ?? "text-bg-light"}`}
-      aria-label={tooltip}
-      data-tippy-content={tooltip}
-    >
-      {shrink ? label[0].toUpperCase() : label}
-    </span>
-  );
-}
--- a/src/shared/utils/app/index.ts
+++ b/src/shared/utils/app/index.ts
@ -29,7 +29,6 @@ import getDataTypeString from "./get-data-type-string";
 import getDepthFromComment from "./get-depth-from-comment";
 import getIdFromProps from "./get-id-from-props";
 import getRecipientIdFromProps from "./get-recipient-id-from-props";
-import getRoleLabelPill from "./get-role-label-pill";
 import getUpdatedSearchId from "./get-updated-search-id";
 import initializeSite from "./initialize-site";
 import insertCommentIntoTree from "./insert-comment-into-tree";
@ -87,7 +86,6 @@ export {
  getDepthFromComment,
  getIdFromProps,
  getRecipientIdFromProps,
-  getRoleLabelPill,
  getUpdatedSearchId,
  initializeSite,
  insertCommentIntoTree,