fix: Fix badge alignment and break out into component
This commit is contained in:
Jay Sitter
parent
083d5aa751
commit
9869b911cf
5 changed files with 132 additions and 95 deletions
|
|
@ -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 && (
|
||||
<>
|
||||
|
|
|
|||
91
src/shared/components/common/user-badges.tsx
Normal file
91
src/shared/components/common/user-badges.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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 && (
|
||||
<>
|
||||
{" "}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue