LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-23 04:41:14 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into lemmy-282/add-open-in-new-tab-setting

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-25 05:08:48 +00:00 committed by GitHub
commit 298577bf0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 156 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/assets/css/main.css
View file

@ -276,10 +276,7 @@ hr {
}
.mini-overlay {
position: absolute;
top: 0;
right: 0;
padding: 2px;
display: block;
height: 1.5em;
width: 1.5em;
background: rgba(0, 0, 0, 0.4);

4
src/shared/components/app/navbar.tsx
View file

@ -347,7 +347,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
)}
{person && (
<div id="dropdownUser" className="dropdown">
<li id="dropdownUser" className="dropdown">
<button
type="button"
className="btn dropdown-toggle"
@ -398,7 +398,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</button>
</li>
</ul>
</div>
</li>
)}
</>
) : (

4
src/shared/components/comment/comment-node.tsx
View file

@ -367,7 +367,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Spinner />
) : (
<span
className="me-1 font-weight-bold"
className="me-1 fw-bold"
aria-label={I18NextService.i18n.t("number_of_points", {
count: Number(this.commentView.counts.score),
formattedCount: numToSI(
@ -420,7 +420,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
/>
)}
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-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.markable && (
<button

1
src/shared/components/common/emoji-picker.tsx
View file

@ -50,6 +50,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
pickerOptions={{}}
></EmojiMart>
</div>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
<div
onClick={linkEvent(this, this.togglePicker)}
className="click-away-container"

13
src/shared/components/common/image-upload-form.tsx
View file

@ -33,13 +33,12 @@ export class ImageUploadForm extends Component<
render() {
return (
<form className="image-upload-form d-inline">
<label
htmlFor={this.id}
className="pointer text-muted small font-weight-bold"
>
<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 : ""}
@ -47,12 +46,14 @@ export class ImageUploadForm extends Component<
this.props.rounded ? "rounded-circle" : ""
}`}
/>
<a
<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" />
</a>
</button>
</span>
) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span>

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

@ -167,7 +167,7 @@ export class MarkdownTextArea extends Component<
onEmojiClick={e => this.handleEmoji(this, e)}
disabled={this.isDisabled}
></EmojiPicker>
<form className="btn btn-sm text-muted font-weight-bold">
<form className="btn btn-sm text-muted fw-bold">
<label
htmlFor={`file-upload-${this.id}`}
className={`mb-0 ${
@ -210,7 +210,7 @@ export class MarkdownTextArea extends Component<
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
className="btn btn-sm text-muted font-weight-bold"
className="btn btn-sm text-muted fw-bold"
title={I18NextService.i18n.t("formatting_help")}
rel={relTags}
>

2
src/shared/components/common/moment-time.tsx
View file

@ -39,7 +39,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
return (
<span
data-tippy-content={this.createdAndModifiedTimes()}
className="moment-time font-italics pointer unselectable"
className="moment-time fst-italic pointer unselectable"
>
<Icon icon="edit-2" classes="icon-inline me-1" />
{formatPastDate(this.props.updated)}

11
src/shared/components/common/searchable-select.tsx
View file

@ -106,8 +106,12 @@ export class SearchableSelect extends Component<
<button
id={id}
type="button"
role="combobox"
className="form-select d-inline-block text-start"
aria-haspopup="listbox"
aria-controls="searchable-select-input"
aria-activedescendant={options[selectedIndex].label}
aria-expanded={false}
data-bs-toggle="dropdown"
onClick={linkEvent(this, focusSearch)}
ref={this.toggleButtonRef}
@ -116,17 +120,14 @@ export class SearchableSelect extends Component<
? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
: options[selectedIndex].label}
</button>
<div
role="combobox"
aria-activedescendant={options[selectedIndex].label}
className="modlog-choices-font-size dropdown-menu w-100 p-2"
>
<div className="modlog-choices-font-size dropdown-menu w-100 p-2">
<div className="input-group">
<span className="input-group-text">
{loading ? <Spinner /> : <Icon icon="search" />}
</span>
<input
type="text"
id="searchable-select-input"
className="form-control"
ref={this.searchInputRef}
onInput={linkEvent(this, handleSearch)}

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

@ -204,17 +204,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</button>
)}
{community.removed && (
<small className="me-2 text-muted font-italic">
<small className="me-2 text-muted fst-italic">
{I18NextService.i18n.t("removed")}
</small>
)}
{community.deleted && (
<small className="me-2 text-muted font-italic">
<small className="me-2 text-muted fst-italic">
{I18NextService.i18n.t("deleted")}
</small>
)}
{community.nsfw && (
<small className="me-2 text-muted font-italic">
<small className="me-2 text-muted fst-italic">
{I18NextService.i18n.t("nsfw")}
</small>
)}
@ -309,7 +309,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const community_view = this.props.community_view;
return (
<>
<ul className="list-inline mb-1 text-muted font-weight-bold">
<ul className="list-inline mb-1 text-muted fw-bold">
{amMod(this.props.moderators) && (
<>
<li className="list-inline-item-action">

15
src/shared/components/home/admin-settings.tsx
View file

@ -44,7 +44,6 @@ interface AdminSettingsState {
instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>;
emojiLoading: boolean;
loading: boolean;
themeList: string[];
isIsomorphic: boolean;
@ -59,7 +58,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "empty" },
instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" },
emojiLoading: false,
loading: false,
themeList: [],
isIsomorphic: false,
@ -215,7 +213,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji}
loading={this.state.emojiLoading}
/>
</div>
</div>
@ -345,35 +342,23 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
}
async handleEditEmoji(form: EditCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
this.setState({ emojiLoading: false });
}
async handleDeleteEmoji(form: DeleteCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") {
removeFromEmojiDataModel(res.data.id);
}
this.setState({ emojiLoading: false });
}
async handleCreateEmoji(form: CreateCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
this.setState({ emojiLoading: false });
}
}

192
src/shared/components/home/emojis-form.tsx
View file

@ -1,4 +1,5 @@
import { myAuthRequired, setIsoData } from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, linkEvent } from "inferno";
import {
CreateCustomEmoji,
@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
import { pictrsDeleteToast, toast } from "../../toast";
import { EmojiMart } from "../common/emoji-mart";
import { HtmlTags } from "../common/html-tags";
import { Icon } from "../common/icon";
import { Icon, Spinner } from "../common/icon";
import { Paginator } from "../common/paginator";
interface EmojiFormProps {
onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void;
loading: boolean;
}
interface EmojiFormState {
@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
keywords: string;
changed: boolean;
page: number;
loading: boolean;
}
export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
@ -52,6 +53,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
keywords: x.keywords.map(x => x.keyword).join(" "),
changed: false,
page: 1 + Math.floor(index / this.itemsPerPage),
loading: false,
})),
page: 1,
};
@ -119,33 +121,39 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.map((cv, index) => (
<tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
<td style="text-align:center;">
<label
htmlFor={index.toString()}
className="pointer text-muted small font-weight-bold"
>
{cv.image_url.length > 0 && (
<img
className="icon-emoji-admin"
src={cv.image_url}
/>
)}
{cv.image_url.length == 0 && (
<span className="btn btn-sm btn-secondary">
Upload
</span>
)}
</label>
<input
name={index.toString()}
id={index.toString()}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
{cv.image_url.length > 0 && (
<img
className="icon-emoji-admin"
src={cv.image_url}
alt={cv.alt_text}
/>
)}
{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"
)}
>
{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>
)}
</td>
<td className="text-right">
<input
@ -213,8 +221,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
<span title={this.getEditTooltip(cv)}>
<button
className={
(cv.changed ? "text-success " : "text-muted ") +
"btn btn-link btn-animate"
(this.canEdit(cv)
? "text-success "
: "text-muted ") + "btn btn-link btn-animate"
}
onClick={linkEvent(
{ i: this, cv: cv },
@ -222,17 +231,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)}
data-tippy-content={I18NextService.i18n.t("save")}
aria-label={I18NextService.i18n.t("save")}
disabled={
this.props.loading ||
!this.canEdit(cv) ||
!cv.changed
}
disabled={!this.canEdit(cv)}
>
{/* <Icon
icon="edit"
classes={`icon-inline`}
/> */}
Save
{cv.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(
I18NextService.i18n.t("save")
)
)}
</button>
</span>
<button
@ -243,7 +250,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)}
data-tippy-content={I18NextService.i18n.t("delete")}
aria-label={I18NextService.i18n.t("delete")}
disabled={this.props.loading}
disabled={cv.loading}
title={I18NextService.i18n.t("delete")}
>
<Icon
@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
this.state.customEmojis.filter(
x => x.shortcode == cv.shortcode && x.id != cv.id
).length == 0;
return noEmptyFields && noDuplicateShortCodes;
return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
}
getEditTooltip(cv: CustomEmojiViewForm) {
@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
}
handleEmojiImageUrlChange(
props: { form: EmojiForm; index: number; overrideValue: string | null },
{
form,
index,
overrideValue,
}: { form: EmojiForm; index: number; overrideValue: string | null },
event: any
) {
const custom_emojis = [...props.form.state.customEmojis];
const pagedIndex =
(props.form.state.page - 1) * props.form.itemsPerPage + props.index;
const item = {
...props.form.state.customEmojis[pagedIndex],
image_url: props.overrideValue ?? event.target.value,
changed: true,
};
custom_emojis[Number(pagedIndex)] = item;
props.form.setState({ customEmojis: custom_emojis });
form.setState(prevState => {
const custom_emojis = [...form.state.customEmojis];
const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
const item = {
...form.state.customEmojis[pagedIndex],
image_url: overrideValue ?? event.target.value,
changed: true,
};
custom_emojis[Number(pagedIndex)] = item;
return {
...prevState,
customEmojis: prevState.customEmojis.map((ce, i) =>
i === pagedIndex
? {
...ce,
image_url: overrideValue ?? event.target.value,
changed: true,
loading: false,
}
: ce
),
};
});
}
handleEmojiAltTextChange(
@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.split(" ")
.filter(x => x.length > 0) as string[];
const uniqueKeywords = Array.from(new Set(keywords));
if (d.cv.id != 0) {
if (d.cv.id !== 0) {
d.i.props.onEdit({
id: d.cv.id,
category: d.cv.category,
@ -432,24 +456,33 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
handleAddEmojiClick(form: EmojiForm, event: any) {
event.preventDefault();
const custom_emojis = [...form.state.customEmojis];
const page =
1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = {
id: 0,
shortcode: "",
alt_text: "",
category: "",
image_url: "",
keywords: "",
changed: true,
page: page,
};
custom_emojis.push(item);
form.setState({ customEmojis: custom_emojis, page: page });
form.setState(prevState => {
const page =
1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = {
id: 0,
shortcode: "",
alt_text: "",
category: "",
image_url: "",
keywords: "",
changed: false,
page: page,
loading: false,
};
return {
...prevState,
customEmojis: [...prevState.customEmojis, item],
page,
};
});
}
handleImageUpload(props: { form: EmojiForm; index: number }, event: any) {
handleImageUpload(
{ form, index }: { form: EmojiForm; index: number },
event: any
) {
let file: any;
if (event.target) {
event.preventDefault();
@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
file = event;
}
form.setState(prevState => ({
...prevState,
customEmojis: prevState.customEmojis.map((cv, i) =>
i === index ? { ...cv, loading: true } : cv
),
}));
HttpService.client.uploadImage({ image: file }).then(res => {
console.log("pictrs upload:");
console.log(res);
if (res.state === "success") {
if (res.data.msg === "ok") {
pictrsDeleteToast(file.name, res.data.delete_url as string);
} else {
toast(JSON.stringify(res), "danger");
const hash = res.data.files?.at(0)?.file;
const url = `${res.data.url}/${hash}`;
props.form.handleEmojiImageUrlChange(
{ form: props.form, index: props.index, overrideValue: url },
form.handleEmojiImageUrlChange(
{ form: form, index: index, overrideValue: res.data.url as string },
event
);
} else {
toast(JSON.stringify(res), "danger");
}
} else if (res.state === "failed") {
console.error(res.msg);

2
src/shared/components/home/login.tsx
View file

@ -108,7 +108,7 @@ export class Login extends Component<any, State> {
<button
type="button"
onClick={linkEvent(this, this.handlePasswordReset)}
className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
disabled={
!!this.state.form.username_or_email &&
!validEmail(this.state.form.username_or_email)

2
src/shared/components/post/metadata-card.tsx
View file

@ -43,7 +43,7 @@ export class MetadataCard extends Component<
</h5>
<span className="d-inline-block ms-2 mb-2 small text-muted">
<a
className="text-muted font-italic"
className="text-muted fst-italic"
href={post.url}
rel={relTags}
>

14
src/shared/components/post/post-form.tsx
View file

@ -358,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
htmlFor="file-upload"
className={`${
UserService.Instance.myUserInfo && "pointer"
} d-inline-block float-right text-muted font-weight-bold`}
} d-inline-block float-right text-muted fw-bold`}
data-tippy-content={I18NextService.i18n.t("upload_image")}
>
<Icon icon="image" classes="icon-inline" />
@ -377,7 +377,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div>
<a
href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
className="me-2 d-inline-block float-right text-muted small fw-bold"
rel={relTags}
>
archive.org {I18NextService.i18n.t("archive_link")}
@ -386,7 +386,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
url
)}`}
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
className="me-2 d-inline-block float-right text-muted small fw-bold"
rel={relTags}
>
ghostarchive.org {I18NextService.i18n.t("archive_link")}
@ -395,7 +395,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
url
)}`}
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
className="me-2 d-inline-block float-right text-muted small fw-bold"
rel={relTags}
>
archive.today {I18NextService.i18n.t("archive_link")}
@ -419,7 +419,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
@ -586,7 +586,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
return (
suggestedTitle && (
<div
className="mt-1 text-muted small font-weight-bold pointer"
className="mt-1 text-muted small fw-bold pointer"
role="button"
onClick={linkEvent(
{ i: this, suggestedTitle },
@ -613,7 +613,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
suggestedPosts &&
suggestedPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("related_posts")}
</div>
<PostListings

10
src/shared/components/post/post-listing.tsx
View file

@ -547,7 +547,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{post.deleted && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t("deleted")}
>
<Icon icon="trash" classes="icon-inline text-danger" />
@ -555,7 +555,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{post.locked && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t("locked")}
>
<Icon icon="lock" classes="icon-inline text-danger" />
@ -563,7 +563,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{post.featured_community && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t(
"featured_in_community"
)}
@ -574,7 +574,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{post.featured_local && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t("featured_in_local")}
aria-label={I18NextService.i18n.t("featured_in_local")}
>
@ -600,7 +600,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<p className="d-flex text-muted align-items-center gap-1 small m-0">
{url && !(hostname(url) === getExternalHost()) && (
<a
className="text-muted font-italic"
className="text-muted fst-italic"
href={url}
title={url}
rel={relTags}

2
src/shared/components/private_message/private-message.tsx
View file

@ -140,7 +140,7 @@ export class PrivateMessage extends Component<
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
/>
)}
<ul className="list-inline mb-0 text-muted font-weight-bold">
<ul className="list-inline mb-0 text-muted fw-bold">
{!this.mine && (
<>
<li className="list-inline-item">