mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-12-23 03:11:25 +00:00
refactor
This commit is contained in:
Alec Armbruster
parent
51a80a8255
commit
8f1b0ad559
5 changed files with 81 additions and 54 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
colorList,
|
||||
getCommentParentId,
|
||||
getRoleLabelPill,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
showScores,
|
||||
|
|
@ -318,7 +319,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
|
||||
{this.isPostCreator &&
|
||||
this.getRoleLabelPill({
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("op").toUpperCase(),
|
||||
tooltip: I18NextService.i18n.t("creator"),
|
||||
classes: "text-bg-info text-black",
|
||||
|
|
@ -326,21 +327,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
})}
|
||||
|
||||
{isMod_ &&
|
||||
this.getRoleLabelPill({
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("mod"),
|
||||
tooltip: I18NextService.i18n.t("mod"),
|
||||
classes: "text-bg-primary text-black",
|
||||
})}
|
||||
|
||||
{isAdmin_ &&
|
||||
this.getRoleLabelPill({
|
||||
getRoleLabelPill({
|
||||
label: 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 &&
|
||||
this.getRoleLabelPill({
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("bot_account").toLowerCase(),
|
||||
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) {
|
||||
const cv = this.commentView;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
enableDownvotes,
|
||||
enableNsfw,
|
||||
getCommentParentId,
|
||||
getRoleLabelPill,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
setIsoData,
|
||||
|
|
@ -484,23 +485,43 @@ export class Profile extends Component<
|
|||
/>
|
||||
</li>
|
||||
{isBanned(pv.person) && (
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{I18NextService.i18n.t("banned")}
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("banned"),
|
||||
tooltip: I18NextService.i18n.t("banned"),
|
||||
classes: "text-bg-danger text-white",
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.deleted && (
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{I18NextService.i18n.t("deleted")}
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("deleted"),
|
||||
tooltip: I18NextService.i18n.t("deleted"),
|
||||
classes: "text-bg-danger text-white",
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.admin && (
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("admin")}
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("admin"),
|
||||
tooltip: I18NextService.i18n.t("admin"),
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.bot_account && (
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("bot_account").toLowerCase()}
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n
|
||||
.t("bot_account")
|
||||
.toLowerCase(),
|
||||
tooltip: I18NextService.i18n.t("bot_account"),
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { myAuthRequired } from "@utils/app";
|
||||
import { getRoleLabelPill, myAuthRequired } from "@utils/app";
|
||||
import { canShare, share } from "@utils/browser";
|
||||
import { getExternalHost, getHttpBase } from "@utils/env";
|
||||
import {
|
||||
|
|
@ -398,23 +398,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
createdLine() {
|
||||
const post_view = this.postView;
|
||||
return (
|
||||
<span className="small">
|
||||
<PersonListing person={post_view.creator} />
|
||||
{this.creatorIsMod_ && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{I18NextService.i18n.t("mod")}
|
||||
</span>
|
||||
)}
|
||||
{this.creatorIsAdmin_ && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{I18NextService.i18n.t("admin")}
|
||||
</span>
|
||||
)}
|
||||
{post_view.creator.bot_account && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{I18NextService.i18n.t("bot_account").toLowerCase()}
|
||||
</span>
|
||||
)}
|
||||
<div className="small">
|
||||
<span className="me-1">
|
||||
<PersonListing person={post_view.creator} />
|
||||
</span>
|
||||
{this.creatorIsMod_ &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("mod"),
|
||||
tooltip: I18NextService.i18n.t("mod"),
|
||||
classes: "text-bg-primary text-black",
|
||||
})}
|
||||
{this.creatorIsAdmin_ &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("admin"),
|
||||
tooltip: I18NextService.i18n.t("admin"),
|
||||
classes: "text-bg-danger text-white",
|
||||
})}
|
||||
{post_view.creator.bot_account &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("bot_account").toLowerCase(),
|
||||
tooltip: I18NextService.i18n.t("bot_account"),
|
||||
})}
|
||||
{this.props.showCommunity && (
|
||||
<>
|
||||
{" "}
|
||||
|
|
@ -436,7 +440,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
published={post_view.post.published}
|
||||
updated={post_view.post.updated}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
21
src/shared/utils/app/get-role-label-pill.tsx
Normal file
21
src/shared/utils/app/get-role-label-pill.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@ import getDataTypeString from "./get-data-type-string";
|
|||
import getDepthFromComment from "./get-depth-from-comment";
|
||||
import getIdFromProps from "./get-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 initializeSite from "./initialize-site";
|
||||
import insertCommentIntoTree from "./insert-comment-into-tree";
|
||||
|
|
@ -87,6 +88,7 @@ export {
|
|||
getDepthFromComment,
|
||||
getIdFromProps,
|
||||
getRecipientIdFromProps,
|
||||
getRoleLabelPill,
|
||||
getUpdatedSearchId,
|
||||
getUserInterfaceLangId,
|
||||
initializeSite,
|
||||
|
|
|
|||
Loading…
Reference in a new issue