Merge branch 'main' into auth-error-message

This commit is contained in:
SleeplessOne1917 2023-07-02 22:35:17 +00:00 committed by GitHub
commit 74727cacd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 138 additions and 134 deletions

View file

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

View file

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

View file

@ -173,6 +173,9 @@ export class MarkdownTextArea extends Component<
<form className="btn btn-sm text-muted fw-bold"> <form className="btn btn-sm text-muted fw-bold">
<label <label
htmlFor={`file-upload-${this.id}`} htmlFor={`file-upload-${this.id}`}
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className={`mb-0 ${ className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer" UserService.Instance.myUserInfo && "pointer"
}`} }`}

View file

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

View file

@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
</div> </div>
)} )}
<div className="table-responsive"> <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"> <thead className="pointer">
<tr> <tr>
<th>{I18NextService.i18n.t("column_emoji")}</th> <th>{I18NextService.i18n.t("column_emoji")}</th>
@ -129,8 +132,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
/> />
)} )}
{cv.image_url.length === 0 && ( {cv.image_url.length === 0 && (
<form>
<label <label
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="btn btn-sm btn-secondary pointer" className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`} htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t( data-tippy-content={I18NextService.i18n.t(
@ -152,7 +157,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)} )}
/> />
</label> </label>
</form>
)} )}
</td> </td>
<td className="text-right"> <td className="text-right">

View file

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

View file

@ -349,32 +349,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<input <input
type="url" type="url"
id="post-url" id="post-url"
className="form-control" className="form-control mb-3"
value={url} value={url}
onInput={linkEvent(this, handlePostUrlChange)} onInput={linkEvent(this, handlePostUrlChange)}
onPaste={linkEvent(this, handleImageUploadPaste)} onPaste={linkEvent(this, handleImageUploadPaste)}
/> />
{this.renderSuggestedTitleCopy()} {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) && ( {url && validURL(url) && (
<div> <div>
<a <a
@ -404,21 +384,38 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</a> </a>
</div> </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 />} {this.state.imageLoading && <Spinner />}
{url && isImage(url) && ( {url && isImage(url) && (
<img src={url} className="img-fluid" alt="" /> <img src={url} className="img-fluid mt-2" alt="" />
)} )}
{this.state.imageDeleteUrl && ( {this.state.imageDeleteUrl && (
<button <button
className="btn btn-danger btn-sm mt-2" className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)} 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" /> <Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))} {capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button> </button>
)} )}
</div>
{this.props.crossPosts && this.props.crossPosts.length > 0 && ( {this.props.crossPosts && this.props.crossPosts.length > 0 && (
<> <>
<div className="my-1 text-muted small fw-bold"> <div className="my-1 text-muted small fw-bold">
@ -453,7 +450,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</> </>
)} )}
</div> </div>
</div>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-title"> <label className="col-sm-2 col-form-label" htmlFor="post-title">
{I18NextService.i18n.t("title")} {I18NextService.i18n.t("title")}