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 15:49:14 -04:00
parent 51a80a8255
commit 8f1b0ad559
No known key found for this signature in database
GPG key ID: 52BC7C84E960FD1B
5 changed files with 81 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { import {
colorList, colorList,
getCommentParentId, getCommentParentId,
getRoleLabelPill,
myAuth, myAuth,
myAuthRequired, myAuthRequired,
showScores, showScores,
@ -318,7 +319,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
{this.isPostCreator && {this.isPostCreator &&
this.getRoleLabelPill({ getRoleLabelPill({
label: I18NextService.i18n.t("op").toUpperCase(), label: I18NextService.i18n.t("op").toUpperCase(),
tooltip: I18NextService.i18n.t("creator"), tooltip: I18NextService.i18n.t("creator"),
classes: "text-bg-info text-black", classes: "text-bg-info text-black",
@ -326,21 +327,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
})} })}
{isMod_ && {isMod_ &&
this.getRoleLabelPill({ getRoleLabelPill({
label: I18NextService.i18n.t("mod"), label: I18NextService.i18n.t("mod"),
tooltip: I18NextService.i18n.t("mod"), tooltip: I18NextService.i18n.t("mod"),
classes: "text-bg-primary text-black", classes: "text-bg-primary text-black",
})} })}
{isAdmin_ && {isAdmin_ &&
this.getRoleLabelPill({ getRoleLabelPill({
label: I18NextService.i18n.t("admin"), label: I18NextService.i18n.t("admin"),
tooltip: I18NextService.i18n.t("admin"), tooltip: I18NextService.i18n.t("admin"),
classes: "text-bg-danger text-black", classes: "text-bg-danger text-white",
})} })}
{cv.creator.bot_account && {cv.creator.bot_account &&
this.getRoleLabelPill({ getRoleLabelPill({
label: I18NextService.i18n.t("bot_account").toLowerCase(), label: I18NextService.i18n.t("bot_account").toLowerCase(),
tooltip: I18NextService.i18n.t("bot_account"), tooltip: I18NextService.i18n.t("bot_account"),
})} })}
@ -1199,28 +1200,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
} }
} }
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) { getLinkButton(small = false) {
const cv = this.commentView; const cv = this.commentView;

37
src/shared/components/person/profile.tsx
View file

@ -5,6 +5,7 @@ import {
enableDownvotes, enableDownvotes,
enableNsfw, enableNsfw,
getCommentParentId, getCommentParentId,
getRoleLabelPill,
myAuth, myAuth,
myAuthRequired, myAuthRequired,
setIsoData, setIsoData,
@ -484,23 +485,43 @@ export class Profile extends Component<
/> />
</li> </li>
{isBanned(pv.person) && ( {isBanned(pv.person) && (
<li className="list-inline-item badge text-bg-danger"> <li className="list-inline-item">
{I18NextService.i18n.t("banned")} {getRoleLabelPill({
label: I18NextService.i18n.t("banned"),
tooltip: I18NextService.i18n.t("banned"),
classes: "text-bg-danger text-white",
shrink: false,
})}
</li> </li>
)} )}
{pv.person.deleted && ( {pv.person.deleted && (
<li className="list-inline-item badge text-bg-danger"> <li className="list-inline-item">
{I18NextService.i18n.t("deleted")} {getRoleLabelPill({
label: I18NextService.i18n.t("deleted"),
tooltip: I18NextService.i18n.t("deleted"),
classes: "text-bg-danger text-white",
shrink: false,
})}
</li> </li>
)} )}
{pv.person.admin && ( {pv.person.admin && (
<li className="list-inline-item badge text-bg-light"> <li className="list-inline-item">
{I18NextService.i18n.t("admin")} {getRoleLabelPill({
label: I18NextService.i18n.t("admin"),
tooltip: I18NextService.i18n.t("admin"),
shrink: false,
})}
</li> </li>
)} )}
{pv.person.bot_account && ( {pv.person.bot_account && (
<li className="list-inline-item badge text-bg-light"> <li className="list-inline-item">
{I18NextService.i18n.t("bot_account").toLowerCase()} {getRoleLabelPill({
label: I18NextService.i18n
.t("bot_account")
.toLowerCase(),
tooltip: I18NextService.i18n.t("bot_account"),
shrink: false,
})}
</li> </li>
)} )}
</ul> </ul>

42
src/shared/components/post/post-listing.tsx
View file

@ -1,4 +1,4 @@
import { myAuthRequired } from "@utils/app"; import { getRoleLabelPill, myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser"; import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env"; import { getExternalHost, getHttpBase } from "@utils/env";
import { import {
@ -398,23 +398,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
createdLine() { createdLine() {
const post_view = this.postView; const post_view = this.postView;
return ( return (
<span className="small"> <div className="small">
<PersonListing person={post_view.creator} /> <span className="me-1">
{this.creatorIsMod_ && ( <PersonListing person={post_view.creator} />
<span className="mx-1 badge text-bg-light"> </span>
{I18NextService.i18n.t("mod")} {this.creatorIsMod_ &&
</span> getRoleLabelPill({
)} label: I18NextService.i18n.t("mod"),
{this.creatorIsAdmin_ && ( tooltip: I18NextService.i18n.t("mod"),
<span className="mx-1 badge text-bg-light"> classes: "text-bg-primary text-black",
{I18NextService.i18n.t("admin")} })}
</span> {this.creatorIsAdmin_ &&
)} getRoleLabelPill({
{post_view.creator.bot_account && ( label: I18NextService.i18n.t("admin"),
<span className="mx-1 badge text-bg-light"> tooltip: I18NextService.i18n.t("admin"),
{I18NextService.i18n.t("bot_account").toLowerCase()} classes: "text-bg-danger text-white",
</span> })}
)} {post_view.creator.bot_account &&
getRoleLabelPill({
label: I18NextService.i18n.t("bot_account").toLowerCase(),
tooltip: I18NextService.i18n.t("bot_account"),
})}
{this.props.showCommunity && ( {this.props.showCommunity && (
<> <>
{" "} {" "}
@ -436,7 +440,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
published={post_view.post.published} published={post_view.post.published}
updated={post_view.post.updated} updated={post_view.post.updated}
/> />
</span> </div>
); );
} }

21
src/shared/utils/app/get-role-label-pill.tsx Normal file
View file

@ -0,0 +1,21 @@
export default function 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>
);
}

2
src/shared/utils/app/index.ts
View file

@ -29,6 +29,7 @@ import getDataTypeString from "./get-data-type-string";
import getDepthFromComment from "./get-depth-from-comment"; import getDepthFromComment from "./get-depth-from-comment";
import getIdFromProps from "./get-id-from-props"; import getIdFromProps from "./get-id-from-props";
import getRecipientIdFromProps from "./get-recipient-id-from-props"; import getRecipientIdFromProps from "./get-recipient-id-from-props";
import getRoleLabelPill from "./get-role-label-pill";
import getUpdatedSearchId from "./get-updated-search-id"; import getUpdatedSearchId from "./get-updated-search-id";
import initializeSite from "./initialize-site"; import initializeSite from "./initialize-site";
import insertCommentIntoTree from "./insert-comment-into-tree"; import insertCommentIntoTree from "./insert-comment-into-tree";
@ -87,6 +88,7 @@ export {
getDepthFromComment, getDepthFromComment,
getIdFromProps, getIdFromProps,
getRecipientIdFromProps, getRecipientIdFromProps,
getRoleLabelPill,
getUpdatedSearchId, getUpdatedSearchId,
getUserInterfaceLangId, getUserInterfaceLangId,
initializeSite, initializeSite,