mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 10:09:56 +00:00
Merge pull request #1623 from LemmyNet/bugfix/make-post-creator-badge-stand-out-more
Distinguish "Creator" badge on comments
This commit is contained in:
commit
51a80a8255
1 changed files with 58 additions and 23 deletions
|
@ -308,32 +308,43 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
classes="icon-inline"
|
classes="icon-inline"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<span className="me-2">
|
<span className="me-2">
|
||||||
<PersonListing person={cv.creator} />
|
<PersonListing person={cv.creator} />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{cv.comment.distinguished && (
|
{cv.comment.distinguished && (
|
||||||
<Icon icon="shield" inline classes="text-danger me-2" />
|
<Icon icon="shield" inline classes="text-danger me-2" />
|
||||||
)}
|
)}
|
||||||
{this.isPostCreator && (
|
|
||||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
{this.isPostCreator &&
|
||||||
{I18NextService.i18n.t("creator")}
|
this.getRoleLabelPill({
|
||||||
</div>
|
label: I18NextService.i18n.t("op").toUpperCase(),
|
||||||
)}
|
tooltip: I18NextService.i18n.t("creator"),
|
||||||
{isMod_ && (
|
classes: "text-bg-info text-black",
|
||||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
shrink: false,
|
||||||
{I18NextService.i18n.t("mod")}
|
})}
|
||||||
</div>
|
|
||||||
)}
|
{isMod_ &&
|
||||||
{isAdmin_ && (
|
this.getRoleLabelPill({
|
||||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
label: I18NextService.i18n.t("mod"),
|
||||||
{I18NextService.i18n.t("admin")}
|
tooltip: I18NextService.i18n.t("mod"),
|
||||||
</div>
|
classes: "text-bg-primary text-black",
|
||||||
)}
|
})}
|
||||||
{cv.creator.bot_account && (
|
|
||||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
{isAdmin_ &&
|
||||||
{I18NextService.i18n.t("bot_account").toLowerCase()}
|
this.getRoleLabelPill({
|
||||||
</div>
|
label: I18NextService.i18n.t("admin"),
|
||||||
)}
|
tooltip: I18NextService.i18n.t("admin"),
|
||||||
|
classes: "text-bg-danger text-black",
|
||||||
|
})}
|
||||||
|
|
||||||
|
{cv.creator.bot_account &&
|
||||||
|
this.getRoleLabelPill({
|
||||||
|
label: I18NextService.i18n.t("bot_account").toLowerCase(),
|
||||||
|
tooltip: I18NextService.i18n.t("bot_account"),
|
||||||
|
})}
|
||||||
|
|
||||||
{this.props.showCommunity && (
|
{this.props.showCommunity && (
|
||||||
<>
|
<>
|
||||||
<span className="mx-1">{I18NextService.i18n.t("to")}</span>
|
<span className="mx-1">{I18NextService.i18n.t("to")}</span>
|
||||||
|
@ -344,7 +355,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</Link>
|
</Link>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{this.linkBtn(true)}
|
|
||||||
|
{this.getLinkButton(true)}
|
||||||
|
|
||||||
{cv.comment.language_id !== 0 && (
|
{cv.comment.language_id !== 0 && (
|
||||||
<span className="badge text-bg-light d-none d-sm-inline me-2">
|
<span className="badge text-bg-light d-none d-sm-inline me-2">
|
||||||
{
|
{
|
||||||
|
@ -410,7 +423,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
|
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
|
||||||
{this.props.showContext && this.linkBtn()}
|
{this.props.showContext && this.getLinkButton()}
|
||||||
{this.props.markable && (
|
{this.props.markable && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
|
@ -1186,7 +1199,29 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
linkBtn(small = false) {
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getLinkButton(small = false) {
|
||||||
const cv = this.commentView;
|
const cv = this.commentView;
|
||||||
|
|
||||||
const classnames = classNames("btn btn-link btn-animate text-muted", {
|
const classnames = classNames("btn btn-link btn-animate text-muted", {
|
||||||
|
|
Loading…
Reference in a new issue