LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into fix/expand-button-when-no-link

This commit is contained in:
Alec Armbruster 2023-07-02 19:20:32 -04:00 committed by GitHub
parent 1e2f333bb0 ce1f979c36
commit c0193fa2de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1415 additions and 1082 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/main.css
View File

@ -254,10 +254,6 @@ hr {
-ms-filter: blur(10px);
}
.img-cover {
object-fit: cover;
}
.img-expanded {
max-height: 90vh;
}
@ -350,10 +346,12 @@ br.big {
}
.avatar-overlay {
width: 20%;
height: 20%;
width: 20vw;
height: 20vw;
max-width: 120px;
max-height: 120px;
min-width: 80px;
min-height: 80px;
}
.avatar-pushup {

3
src/shared/components/app/error-page.tsx
View File

@ -1,4 +1,5 @@
import { setIsoData } from "@utils/app";
import { removeAuthParam } from "@utils/helpers";
import { Component } from "inferno";
import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
@ -58,7 +59,7 @@ export class ErrorPage extends Component<any, any> {
<T
i18nKey="error_code_message"
parent="p"
interpolation={{ error: errorPageData.error }}
interpolation={{ error: removeAuthParam(errorPageData.error) }}
>
#<strong className="text-danger">#</strong>#
</T>

52
src/shared/components/common/image-upload-form.tsx
View File

@ -1,4 +1,5 @@
import { randomStr } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { HttpService, I18NextService, UserService } from "../../services";
import { toast } from "../../toast";
@ -33,38 +34,35 @@ export class ImageUploadForm extends Component<
render() {
return (
<form className="image-upload-form d-inline">
<label htmlFor={this.id} className="pointer text-muted small fw-bold">
{this.props.imageSrc ? (
<span className="d-inline-block position-relative">
{/* TODO: Create "Current Iamge" translation for alt text */}
<img
alt=""
src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""}
className={`img-fluid ${
this.props.rounded ? "rounded-circle" : ""
}`}
/>
<button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
type="button"
onClick={linkEvent(this, this.handleRemoveImage)}
aria-label={I18NextService.i18n.t("remove")}
>
<Icon icon="x" classes="mini-overlay" />
</button>
</span>
) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span>
)}
</label>
{this.props.imageSrc && (
<span className="d-inline-block position-relative mb-2">
{/* TODO: Create "Current Iamge" translation for alt text */}
<img
alt=""
src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""}
className={classNames({
"rounded-circle object-fit-cover": this.props.rounded,
"img-fluid": !this.props.rounded,
})}
/>
<button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
type="button"
onClick={linkEvent(this, this.handleRemoveImage)}
aria-label={I18NextService.i18n.t("remove")}
>
<Icon icon="x" classes="mini-overlay" />
</button>
</span>
)}
<input
id={this.id}
type="file"
accept="image/*,video/*"
className="small form-control"
name={this.id}
className="d-none"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)}
/>

11
src/shared/components/common/markdown-textarea.tsx
View File

@ -173,6 +173,9 @@ export class MarkdownTextArea extends Component<
<form className="btn btn-sm text-muted fw-bold">
<label
htmlFor={`file-upload-${this.id}`}
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer"
}`}
@ -702,18 +705,20 @@ export class MarkdownTextArea extends Component<
quoteInsert() {
const textarea: any = document.getElementById(this.id);
const selectedText = window.getSelection()?.toString();
const { content } = this.state;
let { content } = this.state;
if (selectedText) {
const quotedText =
selectedText
.split("\n")
.map(t => `> ${t}`)
.join("\n") + "\n\n";
if (!content) {
this.setState({ content: "" });
content = "";
} else {
this.setState({ content: `${content}\n` });
content = `${content}\n\n`;
}
this.setState({
content: `${content}${quotedText}`,
});

6
src/shared/components/common/pictrs-image.tsx
View File

@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
className={classNames("overflow-hidden pictrs-image", {
"img-fluid": !this.props.icon && !this.props.iconOverlay,
banner: this.props.banner,
"thumbnail rounded":
"thumbnail rounded object-fit-cover":
this.props.thumbnail && !this.props.icon && !this.props.banner,
"img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon,
"img-blur": this.props.thumbnail && this.props.nsfw,
"img-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle img-cover avatar-overlay":
"object-fit-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
this.props.iconOverlay,
"avatar-pushup": this.props.pushup,
})}

21
src/shared/components/common/vote-buttons.tsx
View File

@ -64,8 +64,6 @@ const handleUpvote = (i: VoteButtons) => {
auth: myAuthRequired(),
});
}
i.setState({ upvoteLoading: false });
};
const handleDownvote = (i: VoteButtons) => {
@ -86,7 +84,6 @@ const handleDownvote = (i: VoteButtons) => {
auth: myAuthRequired(),
});
}
i.setState({ downvoteLoading: false });
};
export class VoteButtonsCompact extends Component<
@ -102,6 +99,15 @@ export class VoteButtonsCompact extends Component<
super(props, context);
}
componentWillReceiveProps(nextProps: VoteButtonsProps) {
if (this.props !== nextProps) {
this.setState({
upvoteLoading: false,
downvoteLoading: false,
});
}
}
render() {
return (
<>
@ -172,6 +178,15 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
super(props, context);
}
componentWillReceiveProps(nextProps: VoteButtonsProps) {
if (this.props !== nextProps) {
this.setState({
upvoteLoading: false,
downvoteLoading: false,
});
}
}
render() {
return (
<div className="vote-bar small text-center">

2
src/shared/components/community/sidebar.tsx
View File

@ -258,7 +258,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<Spinner />
) : (
<>
<Icon icon="check" classes="icon-inline text-success me-1" />
<Icon icon="check" classes="icon-inline me-1" />
{I18NextService.i18n.t("joined")}
</>
)}

52
src/shared/components/home/emojis-form.tsx
View File

@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
</div>
)}
<div className="table-responsive">
<table id="emojis_table" className="table table-sm table-hover">
<table
id="emojis_table"
className="table table-sm table-hover align-middle"
>
<thead className="pointer">
<tr>
<th>{I18NextService.i18n.t("column_emoji")}</th>
@ -129,30 +132,31 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
/>
)}
{cv.image_url.length === 0 && (
<form>
<label
className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t(
"upload_image"
<label
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t(
"upload_image"
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
</label>
</form>
/>
</label>
)}
</td>
<td className="text-right">

38
src/shared/components/home/site-form.tsx
View File

@ -158,28 +158,32 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
</div>
</div>
<div className="input-group mb-3">
<label className="me-2 col-form-label">
<div className="row mb-3">
<label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("icon")}
</label>
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon}
onUpload={this.handleIconUpload}
onRemove={this.handleIconRemove}
rounded
/>
<div className="col-sm-10">
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon}
onUpload={this.handleIconUpload}
onRemove={this.handleIconRemove}
rounded
/>
</div>
</div>
<div className="input-group mb-3">
<label className="me-2 col-form-label">
<div className="row mb-3">
<label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("banner")}
</label>
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner}
onUpload={this.handleBannerUpload}
onRemove={this.handleBannerRemove}
/>
<div className="col-sm-10">
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner}
onUpload={this.handleBannerUpload}
onRemove={this.handleBannerRemove}
/>
</div>
</div>
<div className="mb-3 row">
<label className="col-12 col-form-label" htmlFor="site-desc">

111
src/shared/components/post/post-form.tsx
View File

@ -349,32 +349,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<input
type="url"
id="post-url"
className="form-control"
className="form-control mb-3"
value={url}
onInput={linkEvent(this, handlePostUrlChange)}
onPaste={linkEvent(this, handleImageUploadPaste)}
/>
{this.renderSuggestedTitleCopy()}
<form>
<label
htmlFor="file-upload"
className={`${
UserService.Instance.myUserInfo && "pointer"
} d-inline-block float-right text-muted fw-bold`}
data-tippy-content={I18NextService.i18n.t("upload_image")}
>
<Icon icon="image" classes="icon-inline" />
</label>
<input
id="file-upload"
type="file"
accept="image/*,video/*"
name="file"
className="d-none"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)}
/>
</form>
{url && validURL(url) && (
<div>
<a
@ -404,56 +384,73 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</a>
</div>
)}
</div>
</div>
<div className="mb-3 row">
<label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
{capitalizeFirstLetter(I18NextService.i18n.t("image"))}
<Icon icon="image" classes="icon-inline ms-1" />
</label>
<div className="col-sm-10">
<input
id="file-upload"
type="file"
accept="image/*,video/*"
name="file"
className="small col-sm-10 form-control"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)}
/>
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
<img src={url} className="img-fluid mt-2" alt="" />
)}
{this.state.imageDeleteUrl && (
<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)}
aria-label={I18NextService.i18n.t("delete")}
data-tippy-content={I18NextService.i18n.t("delete")}
>
<Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button>
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
showCommunity
posts={this.props.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
viewOnly
// All of these are unused, since its view only
onPostEdit={() => {}}
onPostVote={() => {}}
onPostReport={() => {}}
onBlockPerson={() => {}}
onLockPost={() => {}}
onDeletePost={() => {}}
onRemovePost={() => {}}
onSavePost={() => {}}
onFeaturePost={() => {}}
onPurgePerson={() => {}}
onPurgePost={() => {}}
onBanPersonFromCommunity={() => {}}
onBanPerson={() => {}}
onAddModToCommunity={() => {}}
onAddAdmin={() => {}}
onTransferCommunity={() => {}}
/>
</>
)}
</div>
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
showCommunity
posts={this.props.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
viewOnly
// All of these are unused, since its view only
onPostEdit={() => {}}
onPostVote={() => {}}
onPostReport={() => {}}
onBlockPerson={() => {}}
onLockPost={() => {}}
onDeletePost={() => {}}
onRemovePost={() => {}}
onSavePost={() => {}}
onFeaturePost={() => {}}
onPurgePerson={() => {}}
onPurgePost={() => {}}
onBanPersonFromCommunity={() => {}}
onBanPerson={() => {}}
onAddModToCommunity={() => {}}
onAddAdmin={() => {}}
onTransferCommunity={() => {}}
/>
</>
)}
</div>
<div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-title">
{I18NextService.i18n.t("title")}

1
src/shared/components/private_message/private-message.tsx
View File

@ -284,7 +284,6 @@ export class PrivateMessage extends Component<
<div className="row">
<div className="col-sm-6">
<PrivateMessageForm
privateMessageView={message_view}
replyType={true}
recipient={otherPerson}
onCreate={this.props.onCreate}

2
src/shared/utils/helpers/index.ts
View File

@ -17,6 +17,7 @@ import isCakeDay from "./is-cake-day";
import numToSI from "./num-to-si";
import poll from "./poll";
import randomStr from "./random-str";
import removeAuthParam from "./remove-auth-param";
import sleep from "./sleep";
import validEmail from "./valid-email";
import validInstanceTLD from "./valid-instance-tld";
@ -43,6 +44,7 @@ export {
numToSI,
poll,
randomStr,
removeAuthParam,
sleep,
validEmail,
validInstanceTLD,

6
src/shared/utils/helpers/remove-auth-param.ts Normal file
View File

@ -0,0 +1,6 @@
export default function (err: any) {
return err
.toString()
.replace(new RegExp("[?&]auth=[^&#]*(#.*)?$"), "$1")
.replace(new RegExp("([?&])auth=[^&]*&"), "$1");
}

2182
yarn.lock
View File

File diff suppressed because it is too large Load Diff