mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-09-07 23:22:18 +00:00
Adding alt_text and custom_thumbnail to post form. (#2404)
* Adding alt_text and custom_thumbnail to post form. * Adding htmlFor, and only show alt_text if its an image post. * Only show custom thumbnail url field when its not an image post.
This commit is contained in:
parent
3769a76618
commit
9aa1e06ae3
|
@ -9,7 +9,7 @@ steps:
|
|||
- git submodule init
|
||||
- git submodule update --recursive --remote
|
||||
when:
|
||||
- event: pull_request
|
||||
- event: [pull_request, tag]
|
||||
|
||||
install:
|
||||
image: node:20-alpine
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit b3131d6881adb639dc0e298cc7c213c5245091f6
|
||||
Subproject commit 9a8a86ea2edbd0ebed98f649805e69431b692dab
|
|
@ -60,7 +60,7 @@
|
|||
"inferno-router": "^8.2.3",
|
||||
"inferno-server": "^8.2.3",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lemmy-js-client": "0.19.4-alpha.14",
|
||||
"lemmy-js-client": "0.19.4-alpha.16",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-bidi": "^0.1.0",
|
||||
|
|
8101
pnpm-lock.yaml
8101
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
@ -72,6 +72,8 @@ interface PostFormState {
|
|||
language_id?: number;
|
||||
community_id?: number;
|
||||
honeypot?: string;
|
||||
custom_thumbnail?: string;
|
||||
alt_text?: string;
|
||||
};
|
||||
loading: boolean;
|
||||
suggestedPostsRes: RequestState<SearchResponse>;
|
||||
|
@ -97,12 +99,14 @@ function handlePostSubmit(i: PostForm, event: any) {
|
|||
|
||||
if (pv) {
|
||||
i.props.onEdit?.({
|
||||
post_id: pv.post.id,
|
||||
name: pForm.name,
|
||||
url: pForm.url,
|
||||
body: pForm.body,
|
||||
nsfw: pForm.nsfw,
|
||||
post_id: pv.post.id,
|
||||
language_id: pForm.language_id,
|
||||
custom_thumbnail: pForm.custom_thumbnail,
|
||||
alt_text: pForm.alt_text,
|
||||
});
|
||||
} else if (pForm.name && pForm.community_id) {
|
||||
i.props.onCreate?.({
|
||||
|
@ -113,6 +117,8 @@ function handlePostSubmit(i: PostForm, event: any) {
|
|||
nsfw: pForm.nsfw,
|
||||
language_id: pForm.language_id,
|
||||
honeypot: pForm.honeypot,
|
||||
custom_thumbnail: pForm.custom_thumbnail,
|
||||
alt_text: pForm.alt_text,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -154,6 +160,14 @@ function handleHoneyPotChange(i: PostForm, event: any) {
|
|||
i.setState(s => ((s.form.honeypot = event.target.value), s));
|
||||
}
|
||||
|
||||
function handleAltTextChange(i: PostForm, event: any) {
|
||||
i.setState(s => ((s.form.alt_text = event.target.value), s));
|
||||
}
|
||||
|
||||
function handleCustomThumbnailChange(i: PostForm, event: any) {
|
||||
i.setState(s => ((s.form.custom_thumbnail = event.target.value), s));
|
||||
}
|
||||
|
||||
function handleCancel(i: PostForm) {
|
||||
i.props.onCancel?.();
|
||||
}
|
||||
|
@ -255,6 +269,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
url: post_view.post.url,
|
||||
nsfw: post_view.post.nsfw,
|
||||
language_id: post_view.post.language_id,
|
||||
custom_thumbnail: post_view.post.thumbnail_url,
|
||||
alt_text: post_view.post.alt_text,
|
||||
},
|
||||
};
|
||||
} else if (selectedCommunityChoice) {
|
||||
|
@ -364,6 +380,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
<div className="col-sm-10">
|
||||
<input
|
||||
type="url"
|
||||
placeholder={I18NextService.i18n.t("optional")}
|
||||
id="post-url"
|
||||
className="form-control mb-3"
|
||||
value={url}
|
||||
|
@ -428,6 +445,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
|
||||
<>
|
||||
<div className="my-1 text-muted small fw-bold">
|
||||
|
@ -464,6 +482,27 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{!isImage(url || "") && (
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="post-custom-thumbnail"
|
||||
>
|
||||
{I18NextService.i18n.t("custom_thumbnail_url")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
type="url"
|
||||
id="post-custom-thumbnail"
|
||||
placeholder={I18NextService.i18n.t("optional")}
|
||||
className="form-control mb-3"
|
||||
value={this.state.form.custom_thumbnail}
|
||||
onInput={linkEvent(this, handleCustomThumbnailChange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{I18NextService.i18n.t("body")}
|
||||
|
@ -471,6 +510,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
<div className="col-sm-10">
|
||||
<MarkdownTextArea
|
||||
initialContent={this.state.form.body}
|
||||
placeholder={I18NextService.i18n.t("optional")}
|
||||
onContentChange={this.handlePostBodyChange}
|
||||
allLanguages={this.props.allLanguages}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
|
@ -486,6 +526,25 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
multiple={false}
|
||||
onChange={this.handleLanguageChange}
|
||||
/>
|
||||
{url && isImage(url) && (
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-alt-text">
|
||||
{I18NextService.i18n.t("column_alttext")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
autoComplete="false"
|
||||
name="alt_text"
|
||||
placeholder={I18NextService.i18n.t("optional")}
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="post-alt-text"
|
||||
value={this.state.form.alt_text}
|
||||
onInput={linkEvent(this, handleAltTextChange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!this.props.post_view && (
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-community">
|
||||
|
|
|
@ -189,12 +189,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
}
|
||||
|
||||
get img() {
|
||||
const { post } = this.postView;
|
||||
const { url } = post;
|
||||
|
||||
if (this.imageSrc) {
|
||||
return (
|
||||
<>
|
||||
<div className="offset-sm-3 my-2 d-none d-sm-block">
|
||||
<a href={this.imageSrc} className="d-inline-block">
|
||||
<PictrsImage src={this.imageSrc} />
|
||||
<PictrsImage src={this.imageSrc} alt={post.alt_text} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="my-2 d-block d-sm-none">
|
||||
|
@ -203,16 +206,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
className="p-0 border-0 bg-transparent d-inline-block"
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
>
|
||||
<PictrsImage src={this.imageSrc} />
|
||||
<PictrsImage src={this.imageSrc} alt={post.alt_text} />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const { post } = this.postView;
|
||||
const { url } = post;
|
||||
|
||||
// if direct video link
|
||||
if (url && isVideo(url)) {
|
||||
return (
|
||||
|
@ -253,7 +253,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<PictrsImage
|
||||
src={src}
|
||||
thumbnail
|
||||
alt=""
|
||||
alt={pv.post.alt_text}
|
||||
nsfw={pv.post.nsfw || pv.community.nsfw}
|
||||
/>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue