mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-09 18:05:09 +00:00
Merge branch 'main' into auth-error-message
This commit is contained in:
commit
74727cacd4
|
@ -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 {
|
||||
|
|
|
@ -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)}
|
||||
/>
|
||||
|
|
|
@ -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"
|
||||
}`}
|
||||
|
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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")}
|
||||
|
|
Loading…
Reference in a new issue