LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-01 01:59:56 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1623 from LemmyNet/bugfix/make-post-creator-badge-stand-out-more

Browse source 
Distinguish "Creator" badge on comments
This commit is contained in:
SleeplessOne1917 2023-06-27 15:10:43 -04:00 committed by GitHub
commit 51a80a8255
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/shared/components/comment/comment-node.tsx
View file

@ -308,32 +308,43 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
classes="icon-inline"
/>
</button>
<span className="me-2">
<PersonListing person={cv.creator} />
</span>
{cv.comment.distinguished && (
<Icon icon="shield" inline classes="text-danger me-2" />
)}
{this.isPostCreator && (
<div className="badge text-bg-light d-none d-sm-inline me-2">
{I18NextService.i18n.t("creator")}
</div>
)}
{isMod_ && (
<div className="badge text-bg-light d-none d-sm-inline me-2">
{I18NextService.i18n.t("mod")}
</div>
)}
{isAdmin_ && (
<div className="badge text-bg-light d-none d-sm-inline me-2">
{I18NextService.i18n.t("admin")}
</div>
)}
{cv.creator.bot_account && (
<div className="badge text-bg-light d-none d-sm-inline me-2">
{I18NextService.i18n.t("bot_account").toLowerCase()}
</div>
)}
{this.isPostCreator &&
this.getRoleLabelPill({
label: I18NextService.i18n.t("op").toUpperCase(),
tooltip: I18NextService.i18n.t("creator"),
classes: "text-bg-info text-black",
shrink: false,
})}
{isMod_ &&
this.getRoleLabelPill({
label: I18NextService.i18n.t("mod"),
tooltip: I18NextService.i18n.t("mod"),
classes: "text-bg-primary text-black",
})}
{isAdmin_ &&
this.getRoleLabelPill({
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 && (
<>
<span className="mx-1">{I18NextService.i18n.t("to")}</span>
@ -344,7 +355,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</Link>
</>
)}
{this.linkBtn(true)}
{this.getLinkButton(true)}
{cv.comment.language_id !== 0 && (
<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">
{this.props.showContext && this.linkBtn()}
{this.props.showContext && this.getLinkButton()}
{this.props.markable && (
<button
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 classnames = classNames("btn btn-link btn-animate text-muted", {