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

Merge branch 'main' into feat/pureblack-theme

Browse source
This commit is contained in:
Alec Armbruster 2023-06-28 00:12:10 -04:00 committed by GitHub
commit 0ef2e8969c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 152 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
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,
@ -308,32 +309,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")} getRoleLabelPill({
</div> label: I18NextService.i18n.t("op").toUpperCase(),
)} tooltip: I18NextService.i18n.t("creator"),
{isMod_ && ( classes: "text-bg-info",
<div className="badge text-bg-light d-none d-sm-inline me-2"> shrink: false,
{I18NextService.i18n.t("mod")} })}
</div>
)} {isMod_ &&
{isAdmin_ && ( 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",
)} })}
{cv.creator.bot_account && (
<div className="badge text-bg-light d-none d-sm-inline me-2"> {isAdmin_ &&
{I18NextService.i18n.t("bot_account").toLowerCase()} getRoleLabelPill({
</div> label: I18NextService.i18n.t("admin"),
)} tooltip: I18NextService.i18n.t("admin"),
classes: "text-bg-danger",
})}
{cv.creator.bot_account &&
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 +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">
{ {
@ -410,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"
@ -1186,7 +1200,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
} }
} }
linkBtn(small = false) { 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", {

12
src/shared/components/common/markdown-textarea.tsx
View file

@ -159,13 +159,16 @@ export class MarkdownTextArea extends Component<
<div className="mb-3 row"> <div className="mb-3 row">
<div className="col-12"> <div className="col-12">
<div className="rounded bg-light border"> <div className="rounded bg-light border">
<div className="d-flex flex-wrap border-bottom"> <div
className={classNames("d-flex flex-wrap border-bottom", {
"no-click": this.isDisabled,
})}
>
{this.getFormatButton("bold", this.handleInsertBold)} {this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)} {this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)} {this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker <EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)} onEmojiClick={e => this.handleEmoji(this, e)}
disabled={this.isDisabled}
></EmojiPicker> ></EmojiPicker>
<form className="btn btn-sm text-muted fw-bold"> <form className="btn btn-sm text-muted fw-bold">
<label <label
@ -188,9 +191,7 @@ export class MarkdownTextArea extends Component<
name="file" name="file"
className="d-none" className="d-none"
multiple multiple
disabled={ disabled={!UserService.Instance.myUserInfo}
!UserService.Instance.myUserInfo || this.isDisabled
}
onChange={linkEvent(this, this.handleImageUpload)} onChange={linkEvent(this, this.handleImageUpload)}
/> />
</form> </form>
@ -352,7 +353,6 @@ export class MarkdownTextArea extends Component<
data-tippy-content={I18NextService.i18n.t(type)} data-tippy-content={I18NextService.i18n.t(type)}
aria-label={I18NextService.i18n.t(type)} aria-label={I18NextService.i18n.t(type)}
onClick={linkEvent(this, handleClick)} onClick={linkEvent(this, handleClick)}
disabled={this.isDisabled}
> >
<Icon icon={iconType} classes="icon-inline" /> <Icon icon={iconType} classes="icon-inline" />
</button> </button>

48
src/shared/components/community/sidebar.tsx
View file

@ -260,20 +260,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
subscribe() { subscribe() {
const community_view = this.props.community_view; const community_view = this.props.community_view;
return ( return (
<> community_view.subscribed === "NotSubscribed" && (
{community_view.subscribed == "NotSubscribed" && ( <button
<button className="btn btn-secondary d-block mb-2 w-100"
className="btn btn-secondary d-block mb-2 w-100" onClick={linkEvent(this, this.handleFollowCommunity)}
onClick={linkEvent(this, this.handleFollowCommunity)} >
> {this.state.followCommunityLoading ? (
{this.state.followCommunityLoading ? ( <Spinner />
<Spinner /> ) : (
) : ( I18NextService.i18n.t("subscribe")
I18NextService.i18n.t("subscribe") )}
)} </button>
</button> )
)}
</>
); );
} }
@ -281,18 +279,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const { subscribed, blocked } = this.props.community_view; const { subscribed, blocked } = this.props.community_view;
return ( return (
<> subscribed === "NotSubscribed" && (
{subscribed == "NotSubscribed" && ( <button
<button className="btn btn-danger d-block mb-2 w-100"
className="btn btn-danger d-block mb-2 w-100" onClick={linkEvent(this, this.handleBlockCommunity)}
onClick={linkEvent(this, this.handleBlockCommunity)} >
> {I18NextService.i18n.t(
{I18NextService.i18n.t( blocked ? "unblock_community" : "block_community"
blocked ? "unblock_community" : "block_community" )}
)} </button>
</button> )
)}
</>
); );
} }

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",
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",
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>

60
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 {
@ -331,16 +331,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) { if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
return ( return (
<a <button
href={this.imageSrc} type="button"
className="text-body d-inline-block position-relative mb-2" className="d-inline-block position-relative mb-2 p-0 border-0"
data-tippy-content={I18NextService.i18n.t("expand_here")} data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)} onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")} aria-label={I18NextService.i18n.t("expand_here")}
> >
{this.imgThumb(this.imageSrc)} {this.imgThumb(this.imageSrc)}
<Icon icon="image" classes="mini-overlay" /> <Icon
</a> icon="image"
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
/>
</button>
); );
} else if (!this.props.hideImage && url && thumbnail && this.imageSrc) { } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
return ( return (
@ -351,7 +354,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
title={url} title={url}
> >
{this.imgThumb(this.imageSrc)} {this.imgThumb(this.imageSrc)}
<Icon icon="external-link" classes="mini-overlay" /> <Icon
icon="external-link"
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
/>
</a> </a>
); );
} else if (url) { } else if (url) {
@ -398,23 +404,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",
{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",
</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 +446,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,