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";
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 {
/>
</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 &&
- this.getRoleLabelPill({
- label: I18NextService.i18n.t("op").toUpperCase(),
- tooltip: I18NextService.i18n.t("creator"),
- parentClasses: "text-info",
- shrinkToSingleLetter: false,
- })}
-
- {isMod_ &&
- this.getRoleLabelPill({
- label: I18NextService.i18n.t("mod"),
- tooltip: I18NextService.i18n.t("mod"),
- shrunkenLabelClasses: "text-primary",
- })}
-
- {isAdmin_ &&
- this.getRoleLabelPill({
- label: I18NextService.i18n.t("admin"),
- tooltip: I18NextService.i18n.t("admin"),
- shrunkenLabelClasses: "text-danger",
- })}
-
- {cv.creator.bot_account &&
- this.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 && (
<>
}
}
- getRoleLabelPill({
- label,
- tooltip,
- parentClasses,
- shrunkenLabelClasses,
- hideOnMobile = false,
- shrinkToSingleLetter = true,
- }: {
- label: string;
- tooltip: string;
- parentClasses?: string;
- shrunkenLabelClasses?: string;
- hideOnMobile?: boolean;
- shrinkToSingleLetter?: boolean;
- }) {
- const parentClassNames = classNames(
- `badge me-2 text-bg-light ${parentClasses}`,
- {
- "d-none d-md-inline": hideOnMobile,
- }
- );
-
- let fullLabelClassNames = "d-none d-md-inline";
- let shrunkenLabelClassNames = `d-inline d-md-none ${shrunkenLabelClasses}`;
-
- if (!shrinkToSingleLetter) {
- fullLabelClassNames = "";
- shrunkenLabelClassNames = "d-none";
- }
-
- return (
- <span
- className={parentClassNames}
- aria-label={tooltip}
- data-tippy-content={tooltip}
- >
- <span className={fullLabelClassNames}>{label}</span>
- <span className={shrunkenLabelClassNames}>
- {label[0].toUpperCase()}
- </span>
- </span>
- );
- }
-
getLinkButton(small = false) {
const cv = this.commentView;