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

fix: Fix badge alignment and break out into component
This commit is contained in:
SleeplessOne1917 2023-07-03 12:35:35 +00:00 committed by GitHub
commit a19358333a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 141 additions and 117 deletions

View file

@ -1,7 +1,6 @@
import { import {
colorList, colorList,
getCommentParentId, getCommentParentId,
getRoleLabelPill,
myAuth, myAuth,
myAuthRequired, myAuthRequired,
showScores, showScores,
@ -63,6 +62,7 @@ import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy"; import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time"; import { MomentTime } from "../common/moment-time";
import { UserBadges } from "../common/user-badges";
import { VoteButtonsCompact } from "../common/vote-buttons"; import { VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link"; import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing"; import { PersonListing } from "../person/person-listing";
@ -310,41 +310,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
/> />
</button> </button>
<span className="me-2"> <PersonListing person={cv.creator} />
<PersonListing person={cv.creator} />
</span>
{cv.comment.distinguished && ( {cv.comment.distinguished && (
<Icon icon="shield" inline classes="text-danger me-2" /> <Icon icon="shield" inline classes="text-danger ms-1" />
)} )}
{this.isPostCreator && <UserBadges
getRoleLabelPill({ classNames="ms-1"
label: I18NextService.i18n.t("op").toUpperCase(), isPostCreator={this.isPostCreator}
tooltip: I18NextService.i18n.t("creator"), isMod={isMod_}
classes: "text-bg-info", isAdmin={isAdmin_}
shrink: false, isBot={cv.creator.bot_account}
})} />
{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"),
})}
{this.props.showCommunity && ( {this.props.showCommunity && (
<> <>

View file

@ -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>
)
);
}
}

View file

@ -5,7 +5,6 @@ import {
enableDownvotes, enableDownvotes,
enableNsfw, enableNsfw,
getCommentParentId, getCommentParentId,
getRoleLabelPill,
myAuth, myAuth,
myAuthRequired, myAuthRequired,
setIsoData, setIsoData,
@ -85,6 +84,7 @@ import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon"; import { Icon, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time"; import { MomentTime } from "../common/moment-time";
import { SortSelect } from "../common/sort-select"; import { SortSelect } from "../common/sort-select";
import { UserBadges } from "../common/user-badges";
import { CommunityLink } from "../community/community-link"; import { CommunityLink } from "../community/community-link";
import { PersonDetails } from "./person-details"; import { PersonDetails } from "./person-details";
import { PersonListing } from "./person-listing"; import { PersonListing } from "./person-listing";
@ -484,46 +484,15 @@ export class Profile extends Component<
hideAvatar hideAvatar
/> />
</li> </li>
{isBanned(pv.person) && ( <li className="list-inline-item">
<li className="list-inline-item"> <UserBadges
{getRoleLabelPill({ classNames="ms-1"
label: I18NextService.i18n.t("banned"), isBanned={isBanned(pv.person)}
tooltip: I18NextService.i18n.t("banned"), isDeleted={pv.person.deleted}
classes: "text-bg-danger", isAdmin={pv.person.admin}
shrink: false, isBot={pv.person.bot_account}
})} />
</li> </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>
)}
</ul> </ul>
</div> </div>
{this.banDialog(pv)} {this.banDialog(pv)}

View file

@ -1,4 +1,4 @@
import { getRoleLabelPill, myAuthRequired } from "@utils/app"; import { myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser"; import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env"; import { getExternalHost, getHttpBase } from "@utils/env";
import { import {
@ -55,6 +55,7 @@ import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time"; import { MomentTime } from "../common/moment-time";
import { PictrsImage } from "../common/pictrs-image"; import { PictrsImage } from "../common/pictrs-image";
import { UserBadges } from "../common/user-badges";
import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons"; import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link"; import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing"; import { PersonListing } from "../person/person-listing";
@ -406,26 +407,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return ( return (
<div className="small mb-1 mb-md-0"> <div className="small mb-1 mb-md-0">
<span className="me-1"> <PersonListing person={post_view.creator} />
<PersonListing person={post_view.creator} /> <UserBadges
</span> classNames="ms-1"
{this.creatorIsMod_ && isMod={this.creatorIsMod_}
getRoleLabelPill({ isAdmin={this.creatorIsAdmin_}
label: I18NextService.i18n.t("mod"), isBot={post_view.creator.bot_account}
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"),
})}
{this.props.showCommunity && ( {this.props.showCommunity && (
<> <>
{" "} {" "}

View file

@ -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>
);
}

View file

@ -29,7 +29,6 @@ import getDataTypeString from "./get-data-type-string";
import getDepthFromComment from "./get-depth-from-comment"; import getDepthFromComment from "./get-depth-from-comment";
import getIdFromProps from "./get-id-from-props"; import getIdFromProps from "./get-id-from-props";
import getRecipientIdFromProps from "./get-recipient-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 getUpdatedSearchId from "./get-updated-search-id";
import initializeSite from "./initialize-site"; import initializeSite from "./initialize-site";
import insertCommentIntoTree from "./insert-comment-into-tree"; import insertCommentIntoTree from "./insert-comment-into-tree";
@ -87,7 +86,6 @@ export {
getDepthFromComment, getDepthFromComment,
getIdFromProps, getIdFromProps,
getRecipientIdFromProps, getRecipientIdFromProps,
getRoleLabelPill,
getUpdatedSearchId, getUpdatedSearchId,
initializeSite, initializeSite,
insertCommentIntoTree, insertCommentIntoTree,