LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 11:21:26 +00:00
Code Issues Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
Alec Armbruster 2023-06-27 14:10:05 -04:00
parent e9f3701d8d
commit 6d65abc3ee
No known key found for this signature in database
GPG key ID: 52BC7C84E960FD1B
1 changed files with 63 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -308,36 +308,44 @@ 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 && (
<span {this.isPostCreator &&
className="badge text-info text-bg-light d-sm-inline me-2" this.getRoleLabelPill({
aria-label={I18NextService.i18n.t("creator")} label: I18NextService.i18n.t("op").toUpperCase(),
data-tippy-content={I18NextService.i18n.t("creator")} tooltip: I18NextService.i18n.t("creator"),
> textClasses: "text-info",
{I18NextService.i18n.t("op")} hideOnMobile: false,
</span> })}
)}
{isMod_ && ( {isMod_ &&
<span className="badge text-bg-light d-none d-sm-inline me-2"> this.getRoleLabelPill({
{I18NextService.i18n.t("mod")} label: I18NextService.i18n.t("mod"),
</span> tooltip: I18NextService.i18n.t("mod"),
)} hideOnMobile: true,
{isAdmin_ && ( })}
<span className="badge text-bg-light d-none d-sm-inline me-2">
{I18NextService.i18n.t("admin")} {isAdmin_ &&
</span> this.getRoleLabelPill({
)} label: I18NextService.i18n.t("admin"),
{cv.creator.bot_account && ( tooltip: I18NextService.i18n.t("admin"),
<span className="badge text-bg-light d-none d-sm-inline me-2"> hideOnMobile: true,
{I18NextService.i18n.t("bot_account").toLowerCase()} })}
</span>
)} {cv.creator.bot_account &&
this.getRoleLabelPill({
label: I18NextService.i18n.t("bot_account").toLowerCase(),
tooltip: I18NextService.i18n.t("bot_account"),
hideOnMobile: true,
})}
{this.props.showCommunity && ( {this.props.showCommunity && (
<> <>
<span className="mx-1">{I18NextService.i18n.t("to")}</span> <span className="mx-1">{I18NextService.i18n.t("to")}</span>
@ -348,7 +356,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">
{ {
@ -414,7 +424,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"
@ -1190,7 +1200,33 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
} }
} }
linkBtn(small = false) { getRoleLabelPill({
label,
tooltip,
textClasses,
hideOnMobile,
}: {
label: string;
tooltip: string;
textClasses?: string;
hideOnMobile?: boolean;
}) {
const classnames = classNames(`badge me-2 text-bg-light ${textClasses}`, {
"d-none d-md-inline": hideOnMobile,
});
return (
<span
className={classnames}
aria-label={tooltip}
data-tippy-content={tooltip}
>
{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", {