From: Jay Sitter <jay@jaysitter.com> Date: Sun, 2 Jul 2023 22:48:35 +0000 (-0400) Subject: fix: Fix badge alignment and break out into component X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/static/git-favicon.png?a=commitdiff_plain;h=9869b911cf480ee88c7b1e7d2f689cc2e1c65157;p=lemmy-ui.git fix: Fix badge alignment and break out into component --- diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 8f689aa..c6b37fd 100644 --- 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"; @@ -197,6 +197,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { return this.commentView.comment.id; } + get hasBadges(): boolean { + const cv = this.commentView; + + return ( + this.isPostCreator || + isMod(cv.creator.id, this.props.moderators) || + isAdmin(cv.creator.id, this.props.admins) || + cv.creator.bot_account + ); + } + componentWillReceiveProps( nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps> ): void { @@ -310,41 +321,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 && ( <> diff --git a/src/shared/components/common/user-badges.tsx b/src/shared/components/common/user-badges.tsx new file mode 100644 index 0000000..efd18f5 --- /dev/null +++ b/src/shared/components/common/user-badges.tsx @@ -0,0 +1,91 @@ +import { getRoleLabelPill } from "@utils/app"; +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 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> + ) + ); + } +} diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index ad7c5fe..cc334db 100644 --- 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)} diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 462087f..bc853b3 100644 --- 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 && ( <> {" "} diff --git a/src/shared/utils/app/get-role-label-pill.tsx b/src/shared/utils/app/get-role-label-pill.tsx index 0cb0a41..b46f249 100644 --- a/src/shared/utils/app/get-role-label-pill.tsx +++ b/src/shared/utils/app/get-role-label-pill.tsx @@ -11,7 +11,7 @@ export default function getRoleLabelPill({ }) { return ( <span - className={`badge me-1 ${classes ?? "text-bg-light"}`} + className={`badge ${classes ?? "text-bg-light"}`} aria-label={tooltip} data-tippy-content={tooltip} >