mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-12-23 19:31:26 +00:00
Merge branch 'main' of https://github.com/LemmyNet/lemmy-ui
This commit is contained in:
commit
414c930929
33 changed files with 402 additions and 267 deletions
19
.github/ISSUE_TEMPLATE/BUG_REPORT.yml
vendored
19
.github/ISSUE_TEMPLATE/BUG_REPORT.yml
vendored
|
@ -9,6 +9,19 @@ body:
|
||||||
Found a bug? Please fill out the sections below. 👍
|
Found a bug? Please fill out the sections below. 👍
|
||||||
Thanks for taking the time to fill out this bug report!
|
Thanks for taking the time to fill out this bug report!
|
||||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
||||||
|
- type: checkboxes
|
||||||
|
attributes:
|
||||||
|
label: Requirements
|
||||||
|
description: Before you create a bug report please do the following.
|
||||||
|
options:
|
||||||
|
- label: Is this a bug report? For questions or discussions use https://lemmy.ml/c/lemmy_support
|
||||||
|
required: true
|
||||||
|
- label: Did you check to see if this issue already exists?
|
||||||
|
required: true
|
||||||
|
- label: Is this only a single bug? Do not put multiple bugs in one issue.
|
||||||
|
required: true
|
||||||
|
- label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
|
||||||
|
required: false
|
||||||
- type: textarea
|
- type: textarea
|
||||||
id: summary
|
id: summary
|
||||||
attributes:
|
attributes:
|
||||||
|
@ -45,3 +58,9 @@ body:
|
||||||
placeholder: ex. 0.17.4-rc.4
|
placeholder: ex. 0.17.4-rc.4
|
||||||
validations:
|
validations:
|
||||||
required: true
|
required: true
|
||||||
|
- type: input
|
||||||
|
id: lemmy-instance
|
||||||
|
attributes:
|
||||||
|
label: Lemmy Instance URL
|
||||||
|
description: Which Lemmy instance do you use? The address
|
||||||
|
placeholder: lemmy.ml, lemmy.world, etc
|
||||||
|
|
13
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
vendored
13
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
vendored
|
@ -7,6 +7,19 @@ body:
|
||||||
value: |
|
value: |
|
||||||
Have a suggestion about Lemmy's UI?
|
Have a suggestion about Lemmy's UI?
|
||||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
||||||
|
- type: checkboxes
|
||||||
|
attributes:
|
||||||
|
label: Requirements
|
||||||
|
description: Before you create a bug report please do the following.
|
||||||
|
options:
|
||||||
|
- label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
|
||||||
|
required: true
|
||||||
|
- label: Did you check to see if this issue already exists?
|
||||||
|
required: true
|
||||||
|
- label: Is this only a feature request? Do not put multiple feature requests in one issue.
|
||||||
|
required: true
|
||||||
|
- label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
|
||||||
|
required: false
|
||||||
- type: textarea
|
- type: textarea
|
||||||
id: problem
|
id: problem
|
||||||
attributes:
|
attributes:
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
FROM node:alpine as builder
|
FROM node:20.2-alpine as builder
|
||||||
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
|
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
|
||||||
RUN curl -sf https://gobinaries.com/tj/node-prune | sh
|
RUN curl -sf https://gobinaries.com/tj/node-prune | sh
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
FROM node:alpine as builder
|
FROM node:20.2-alpine as builder
|
||||||
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
|
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
|
||||||
|
|
||||||
WORKDIR /usr/src/app
|
WORKDIR /usr/src/app
|
||||||
|
|
|
@ -75,28 +75,9 @@
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-div table {
|
.md-div pre {
|
||||||
border-collapse: collapse;
|
white-space: pre;
|
||||||
width: 100%;
|
overflow-x: auto;
|
||||||
margin-bottom: 1rem;
|
|
||||||
border: 1px solid var(--dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-div table th,
|
|
||||||
.md-div table td {
|
|
||||||
padding: 0.3rem;
|
|
||||||
vertical-align: top;
|
|
||||||
border-top: 1px solid var(--dark);
|
|
||||||
border: 1px solid var(--dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-div table thead th {
|
|
||||||
vertical-align: bottom;
|
|
||||||
border-bottom: 2px solid var(--dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-div table tbody + tbody {
|
|
||||||
border-top: 2px solid var(--dark);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vote-bar {
|
.vote-bar {
|
||||||
|
@ -213,6 +194,11 @@ blockquote {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comments {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
|
|
|
@ -156,7 +156,7 @@ server.get("/*", async (req, res) => {
|
||||||
site = try_site.data;
|
site = try_site.data;
|
||||||
initializeSite(site);
|
initializeSite(site);
|
||||||
|
|
||||||
if (path != "/setup" && !site.site_view.local_site.site_setup) {
|
if (path !== "/setup" && !site.site_view.local_site.site_setup) {
|
||||||
return res.redirect("/setup");
|
return res.redirect("/setup");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -421,7 +421,7 @@ async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
|
||||||
<!-- Required meta tags -->
|
<!-- Required meta tags -->
|
||||||
<meta name="Description" content="Lemmy">
|
<meta name="Description" content="Lemmy">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
|
||||||
<link
|
<link
|
||||||
id="favicon"
|
id="favicon"
|
||||||
rel="shortcut icon"
|
rel="shortcut icon"
|
||||||
|
|
|
@ -16,8 +16,10 @@ import {
|
||||||
isBrowser,
|
isBrowser,
|
||||||
myAuth,
|
myAuth,
|
||||||
numToSI,
|
numToSI,
|
||||||
|
poll,
|
||||||
showAvatars,
|
showAvatars,
|
||||||
toast,
|
toast,
|
||||||
|
updateUnreadCountsInterval,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { Icon } from "../common/icon";
|
import { Icon } from "../common/icon";
|
||||||
import { PictrsImage } from "../common/pictrs-image";
|
import { PictrsImage } from "../common/pictrs-image";
|
||||||
|
@ -64,7 +66,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
if (isBrowser()) {
|
if (isBrowser()) {
|
||||||
// On the first load, check the unreads
|
// On the first load, check the unreads
|
||||||
this.requestNotificationPermission();
|
this.requestNotificationPermission();
|
||||||
await this.fetchUnreads();
|
this.fetchUnreads();
|
||||||
this.requestNotificationPermission();
|
this.requestNotificationPermission();
|
||||||
|
|
||||||
document.addEventListener("mouseup", this.handleOutsideMenuClick);
|
document.addEventListener("mouseup", this.handleOutsideMenuClick);
|
||||||
|
@ -406,35 +408,36 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
return amAdmin() || moderatesS;
|
return amAdmin() || moderatesS;
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchUnreads() {
|
fetchUnreads() {
|
||||||
const auth = myAuth();
|
poll(async () => {
|
||||||
if (auth) {
|
if (window.document.visibilityState !== "hidden") {
|
||||||
this.setState({ unreadInboxCountRes: { state: "loading" } });
|
const auth = myAuth();
|
||||||
this.setState({
|
if (auth) {
|
||||||
unreadInboxCountRes: await HttpService.client.getUnreadCount({
|
this.setState({
|
||||||
auth,
|
unreadInboxCountRes: await HttpService.client.getUnreadCount({
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.moderatesSomething) {
|
|
||||||
this.setState({ unreadReportCountRes: { state: "loading" } });
|
|
||||||
this.setState({
|
|
||||||
unreadReportCountRes: await HttpService.client.getReportCount({
|
|
||||||
auth,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (amAdmin()) {
|
|
||||||
this.setState({ unreadApplicationCountRes: { state: "loading" } });
|
|
||||||
this.setState({
|
|
||||||
unreadApplicationCountRes:
|
|
||||||
await HttpService.client.getUnreadRegistrationApplicationCount({
|
|
||||||
auth,
|
auth,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (this.moderatesSomething) {
|
||||||
|
this.setState({
|
||||||
|
unreadReportCountRes: await HttpService.client.getReportCount({
|
||||||
|
auth,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (amAdmin()) {
|
||||||
|
this.setState({
|
||||||
|
unreadApplicationCountRes:
|
||||||
|
await HttpService.client.getUnreadRegistrationApplicationCount({
|
||||||
|
auth,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}, updateUnreadCountsInterval);
|
||||||
}
|
}
|
||||||
|
|
||||||
get unreadInboxCount(): number {
|
get unreadInboxCount(): number {
|
||||||
|
|
|
@ -270,9 +270,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
this.props.moderators
|
this.props.moderators
|
||||||
);
|
);
|
||||||
|
|
||||||
const borderColor = this.props.node.depth
|
|
||||||
? colorList[(this.props.node.depth - 1) % colorList.length]
|
|
||||||
: colorList[0];
|
|
||||||
const moreRepliesBorderColor = this.props.node.depth
|
const moreRepliesBorderColor = this.props.node.depth
|
||||||
? colorList[this.props.node.depth % colorList.length]
|
? colorList[this.props.node.depth % colorList.length]
|
||||||
: colorList[0];
|
: colorList[0];
|
||||||
|
@ -284,26 +281,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
node.comment_view.counts.child_count > 0;
|
node.comment_view.counts.child_count > 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<li className="comment" role="comment">
|
||||||
className={`comment ${
|
|
||||||
this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
id={`comment-${cv.comment.id}`}
|
id={`comment-${cv.comment.id}`}
|
||||||
className={classNames(`details comment-node py-2`, {
|
className={classNames(`details comment-node py-2`, {
|
||||||
"border-top border-light": !this.props.noBorder,
|
"border-top border-light": !this.props.noBorder,
|
||||||
mark: this.isCommentNew || this.commentView.comment.distinguished,
|
mark: this.isCommentNew || this.commentView.comment.distinguished,
|
||||||
})}
|
})}
|
||||||
style={
|
|
||||||
!this.props.noIndent && this.props.node.depth
|
|
||||||
? `border-left: 2px ${borderColor} solid !important`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={classNames({
|
className={classNames({
|
||||||
"ml-2": !this.props.noIndent && this.props.node.depth,
|
"ml-2": !this.props.noIndent,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<div className="d-flex flex-wrap align-items-center text-muted small">
|
<div className="d-flex flex-wrap align-items-center text-muted small">
|
||||||
|
@ -959,9 +947,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
</div>
|
</div>
|
||||||
{showMoreChildren && (
|
{showMoreChildren && (
|
||||||
<div
|
<div
|
||||||
className={`details ml-1 comment-node py-2 ${
|
className={classNames("details ml-1 comment-node py-2", {
|
||||||
!this.props.noBorder ? "border-top border-light" : ""
|
"border-top border-light": !this.props.noBorder,
|
||||||
}`}
|
})}
|
||||||
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
|
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
@ -1169,6 +1157,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
hideImages={this.props.hideImages}
|
hideImages={this.props.hideImages}
|
||||||
|
isChild={!this.props.noIndent}
|
||||||
|
depth={this.props.node.depth + 1}
|
||||||
finished={this.props.finished}
|
finished={this.props.finished}
|
||||||
onCommentReplyRead={this.props.onCommentReplyRead}
|
onCommentReplyRead={this.props.onCommentReplyRead}
|
||||||
onPersonMentionRead={this.props.onPersonMentionRead}
|
onPersonMentionRead={this.props.onPersonMentionRead}
|
||||||
|
@ -1192,8 +1182,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{/* A collapsed clearfix */}
|
{/* A collapsed clearfix */}
|
||||||
{this.state.collapsed && <div className="row col-12"></div>}
|
{this.state.collapsed && <div className="row col-12" />}
|
||||||
</div>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1211,6 +1201,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
|
|
||||||
linkBtn(small = false) {
|
linkBtn(small = false) {
|
||||||
const cv = this.commentView;
|
const cv = this.commentView;
|
||||||
|
|
||||||
const classnames = classNames("btn btn-link btn-animate text-muted", {
|
const classnames = classNames("btn btn-link btn-animate text-muted", {
|
||||||
"btn-sm": small,
|
"btn-sm": small,
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import classNames from "classnames";
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import {
|
import {
|
||||||
AddAdmin,
|
AddAdmin,
|
||||||
|
@ -25,6 +26,7 @@ import {
|
||||||
TransferCommunity,
|
TransferCommunity,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { CommentNodeI, CommentViewType } from "../../interfaces";
|
import { CommentNodeI, CommentViewType } from "../../interfaces";
|
||||||
|
import { colorList } from "../../utils";
|
||||||
import { CommentNode } from "./comment-node";
|
import { CommentNode } from "./comment-node";
|
||||||
|
|
||||||
interface CommentNodesProps {
|
interface CommentNodesProps {
|
||||||
|
@ -44,6 +46,8 @@ interface CommentNodesProps {
|
||||||
allLanguages: Language[];
|
allLanguages: Language[];
|
||||||
siteLanguages: number[];
|
siteLanguages: number[];
|
||||||
hideImages?: boolean;
|
hideImages?: boolean;
|
||||||
|
isChild?: boolean;
|
||||||
|
depth?: number;
|
||||||
finished: Map<CommentId, boolean | undefined>;
|
finished: Map<CommentId, boolean | undefined>;
|
||||||
onSaveComment(form: SaveComment): void;
|
onSaveComment(form: SaveComment): void;
|
||||||
onCommentReplyRead(form: MarkCommentReplyAsRead): void;
|
onCommentReplyRead(form: MarkCommentReplyAsRead): void;
|
||||||
|
@ -74,49 +78,61 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
|
||||||
render() {
|
render() {
|
||||||
const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
|
const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
|
||||||
|
|
||||||
|
const borderColor = this.props.depth
|
||||||
|
? colorList[this.props.depth % colorList.length]
|
||||||
|
: colorList[0];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="comments">
|
this.props.nodes.length > 0 && (
|
||||||
{this.props.nodes.slice(0, maxComments).map(node => (
|
<ul
|
||||||
<CommentNode
|
className={classNames("comments", {
|
||||||
key={node.comment_view.comment.id}
|
"ms-1": !!this.props.isChild,
|
||||||
node={node}
|
"border-top border-light": !this.props.noBorder,
|
||||||
noBorder={this.props.noBorder}
|
})}
|
||||||
noIndent={this.props.noIndent}
|
style={`border-left: 2px solid ${borderColor} !important;`}
|
||||||
viewOnly={this.props.viewOnly}
|
>
|
||||||
locked={this.props.locked}
|
{this.props.nodes.slice(0, maxComments).map(node => (
|
||||||
moderators={this.props.moderators}
|
<CommentNode
|
||||||
admins={this.props.admins}
|
key={node.comment_view.comment.id}
|
||||||
markable={this.props.markable}
|
node={node}
|
||||||
showContext={this.props.showContext}
|
noBorder={this.props.noBorder}
|
||||||
showCommunity={this.props.showCommunity}
|
noIndent={this.props.noIndent}
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
viewOnly={this.props.viewOnly}
|
||||||
viewType={this.props.viewType}
|
locked={this.props.locked}
|
||||||
allLanguages={this.props.allLanguages}
|
moderators={this.props.moderators}
|
||||||
siteLanguages={this.props.siteLanguages}
|
admins={this.props.admins}
|
||||||
hideImages={this.props.hideImages}
|
markable={this.props.markable}
|
||||||
onCommentReplyRead={this.props.onCommentReplyRead}
|
showContext={this.props.showContext}
|
||||||
onPersonMentionRead={this.props.onPersonMentionRead}
|
showCommunity={this.props.showCommunity}
|
||||||
finished={this.props.finished}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
onCreateComment={this.props.onCreateComment}
|
viewType={this.props.viewType}
|
||||||
onEditComment={this.props.onEditComment}
|
allLanguages={this.props.allLanguages}
|
||||||
onCommentVote={this.props.onCommentVote}
|
siteLanguages={this.props.siteLanguages}
|
||||||
onBlockPerson={this.props.onBlockPerson}
|
hideImages={this.props.hideImages}
|
||||||
onSaveComment={this.props.onSaveComment}
|
onCommentReplyRead={this.props.onCommentReplyRead}
|
||||||
onDeleteComment={this.props.onDeleteComment}
|
onPersonMentionRead={this.props.onPersonMentionRead}
|
||||||
onRemoveComment={this.props.onRemoveComment}
|
finished={this.props.finished}
|
||||||
onDistinguishComment={this.props.onDistinguishComment}
|
onCreateComment={this.props.onCreateComment}
|
||||||
onAddModToCommunity={this.props.onAddModToCommunity}
|
onEditComment={this.props.onEditComment}
|
||||||
onAddAdmin={this.props.onAddAdmin}
|
onCommentVote={this.props.onCommentVote}
|
||||||
onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
|
onBlockPerson={this.props.onBlockPerson}
|
||||||
onBanPerson={this.props.onBanPerson}
|
onSaveComment={this.props.onSaveComment}
|
||||||
onTransferCommunity={this.props.onTransferCommunity}
|
onDeleteComment={this.props.onDeleteComment}
|
||||||
onFetchChildren={this.props.onFetchChildren}
|
onRemoveComment={this.props.onRemoveComment}
|
||||||
onCommentReport={this.props.onCommentReport}
|
onDistinguishComment={this.props.onDistinguishComment}
|
||||||
onPurgePerson={this.props.onPurgePerson}
|
onAddModToCommunity={this.props.onAddModToCommunity}
|
||||||
onPurgeComment={this.props.onPurgeComment}
|
onAddAdmin={this.props.onAddAdmin}
|
||||||
/>
|
onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
|
||||||
))}
|
onBanPerson={this.props.onBanPerson}
|
||||||
</div>
|
onTransferCommunity={this.props.onTransferCommunity}
|
||||||
|
onFetchChildren={this.props.onFetchChildren}
|
||||||
|
onCommentReport={this.props.onCommentReport}
|
||||||
|
onPurgePerson={this.props.onPurgePerson}
|
||||||
|
onPurgeComment={this.props.onPurgeComment}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,8 @@ import { htmlToText } from "html-to-text";
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { Helmet } from "inferno-helmet";
|
import { Helmet } from "inferno-helmet";
|
||||||
import { httpExternalPath } from "../../env";
|
import { httpExternalPath } from "../../env";
|
||||||
import { getLanguages, md } from "../../utils";
|
import { i18n } from "../../i18next";
|
||||||
|
import { md } from "../../utils";
|
||||||
|
|
||||||
interface HtmlTagsProps {
|
interface HtmlTagsProps {
|
||||||
title: string;
|
title: string;
|
||||||
|
@ -17,11 +18,10 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
|
||||||
const url = httpExternalPath(this.props.path);
|
const url = httpExternalPath(this.props.path);
|
||||||
const desc = this.props.description;
|
const desc = this.props.description;
|
||||||
const image = this.props.image;
|
const image = this.props.image;
|
||||||
const lang = getLanguages()[0];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Helmet title={this.props.title}>
|
<Helmet title={this.props.title}>
|
||||||
<html lang={lang == "browser" ? "en" : lang} />
|
<html lang={i18n.resolvedLanguage} />
|
||||||
|
|
||||||
{["title", "og:title", "twitter:title"].map(t => (
|
{["title", "og:title", "twitter:title"].map(t => (
|
||||||
<meta key={t} property={t} content={this.props.title} />
|
<meta key={t} property={t} content={this.props.title} />
|
||||||
|
|
|
@ -184,53 +184,6 @@ export class MarkdownTextArea extends Component<
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-sm-12 d-flex flex-wrap">
|
<div className="col-sm-12 d-flex flex-wrap">
|
||||||
{this.props.buttonTitle && (
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-secondary mr-2"
|
|
||||||
disabled={this.isDisabled}
|
|
||||||
>
|
|
||||||
{this.state.loading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<span>{this.props.buttonTitle}</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{this.props.replyType && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-secondary mr-2"
|
|
||||||
onClick={linkEvent(this, this.handleReplyCancel)}
|
|
||||||
>
|
|
||||||
{i18n.t("cancel")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{this.state.content && (
|
|
||||||
<button
|
|
||||||
className={`btn btn-sm btn-secondary mr-2 ${
|
|
||||||
this.state.previewMode && "active"
|
|
||||||
}`}
|
|
||||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
|
||||||
>
|
|
||||||
{this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{/* A flex expander */}
|
|
||||||
<div className="flex-grow-1"></div>
|
|
||||||
|
|
||||||
{this.props.showLanguage && (
|
|
||||||
<LanguageSelect
|
|
||||||
iconVersion
|
|
||||||
allLanguages={this.props.allLanguages}
|
|
||||||
selectedLanguageIds={
|
|
||||||
languageId ? Array.of(languageId) : undefined
|
|
||||||
}
|
|
||||||
siteLanguages={this.props.siteLanguages}
|
|
||||||
onChange={this.handleLanguageChange}
|
|
||||||
disabled={this.isDisabled}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{this.getFormatButton("bold", this.handleInsertBold)}
|
{this.getFormatButton("bold", this.handleInsertBold)}
|
||||||
{this.getFormatButton("italic", this.handleInsertItalic)}
|
{this.getFormatButton("italic", this.handleInsertItalic)}
|
||||||
{this.getFormatButton("link", this.handleInsertLink)}
|
{this.getFormatButton("link", this.handleInsertLink)}
|
||||||
|
@ -283,6 +236,57 @@ export class MarkdownTextArea extends Component<
|
||||||
<Icon icon="help-circle" classes="icon-inline" />
|
<Icon icon="help-circle" classes="icon-inline" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="col-sm-12 d-flex align-items-center flex-wrap">
|
||||||
|
{this.props.showLanguage && (
|
||||||
|
<LanguageSelect
|
||||||
|
iconVersion
|
||||||
|
allLanguages={this.props.allLanguages}
|
||||||
|
selectedLanguageIds={
|
||||||
|
languageId ? Array.of(languageId) : undefined
|
||||||
|
}
|
||||||
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
onChange={this.handleLanguageChange}
|
||||||
|
disabled={this.isDisabled}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* A flex expander */}
|
||||||
|
<div className="flex-grow-1"></div>
|
||||||
|
|
||||||
|
{this.props.buttonTitle && (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-sm btn-secondary mr-2"
|
||||||
|
disabled={this.isDisabled}
|
||||||
|
>
|
||||||
|
{this.state.loading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<span>{this.props.buttonTitle}</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{this.props.replyType && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-secondary mr-2"
|
||||||
|
onClick={linkEvent(this, this.handleReplyCancel)}
|
||||||
|
>
|
||||||
|
{i18n.t("cancel")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{this.state.content && (
|
||||||
|
<button
|
||||||
|
className={`btn btn-sm btn-secondary mr-2 ${
|
||||||
|
this.state.previewMode && "active"
|
||||||
|
}`}
|
||||||
|
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||||
|
>
|
||||||
|
{this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { capitalizeFirstLetter, getLanguages } from "../../utils";
|
import { capitalizeFirstLetter } from "../../utils";
|
||||||
import { Icon } from "./icon";
|
import { Icon } from "./icon";
|
||||||
|
|
||||||
interface MomentTimeProps {
|
interface MomentTimeProps {
|
||||||
|
@ -15,9 +15,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
const lang = getLanguages();
|
moment.locale([...i18n.languages]);
|
||||||
|
|
||||||
moment.locale(lang);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createdAndModifiedTimes() {
|
createdAndModifiedTimes() {
|
||||||
|
|
|
@ -21,6 +21,7 @@ interface CommunityFormProps {
|
||||||
onCancel?(): any;
|
onCancel?(): any;
|
||||||
onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
|
onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
|
||||||
enableNsfw?: boolean;
|
enableNsfw?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CommunityFormState {
|
interface CommunityFormState {
|
||||||
|
@ -34,7 +35,6 @@ interface CommunityFormState {
|
||||||
posting_restricted_to_mods?: boolean;
|
posting_restricted_to_mods?: boolean;
|
||||||
discussion_languages?: number[];
|
discussion_languages?: number[];
|
||||||
};
|
};
|
||||||
loading: boolean;
|
|
||||||
submitted: boolean;
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,7 +46,6 @@ export class CommunityForm extends Component<
|
||||||
|
|
||||||
state: CommunityFormState = {
|
state: CommunityFormState = {
|
||||||
form: {},
|
form: {},
|
||||||
loading: false,
|
|
||||||
submitted: false,
|
submitted: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -80,7 +79,6 @@ export class CommunityForm extends Component<
|
||||||
posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
|
posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
|
||||||
discussion_languages: this.props.communityLanguages,
|
discussion_languages: this.props.communityLanguages,
|
||||||
},
|
},
|
||||||
loading: false,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -90,7 +88,7 @@ export class CommunityForm extends Component<
|
||||||
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
||||||
<NavigationPrompt
|
<NavigationPrompt
|
||||||
when={
|
when={
|
||||||
!this.state.loading &&
|
!this.props.loading &&
|
||||||
!!(
|
!!(
|
||||||
this.state.form.name ||
|
this.state.form.name ||
|
||||||
this.state.form.title ||
|
this.state.form.title ||
|
||||||
|
@ -243,9 +241,9 @@ export class CommunityForm extends Component<
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-secondary mr-2"
|
className="btn btn-secondary mr-2"
|
||||||
disabled={this.state.loading}
|
disabled={this.props.loading}
|
||||||
>
|
>
|
||||||
{this.state.loading ? (
|
{this.props.loading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : this.props.community_view ? (
|
) : this.props.community_view ? (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -270,7 +268,7 @@ export class CommunityForm extends Component<
|
||||||
|
|
||||||
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
|
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ loading: true, submitted: true });
|
i.setState({ submitted: true });
|
||||||
const cForm = i.state.form;
|
const cForm = i.state.form;
|
||||||
const auth = myAuthRequired();
|
const auth = myAuthRequired();
|
||||||
|
|
||||||
|
|
|
@ -11,12 +11,14 @@ import { CommunityForm } from "./community-form";
|
||||||
|
|
||||||
interface CreateCommunityState {
|
interface CreateCommunityState {
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
|
loading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CreateCommunity extends Component<any, CreateCommunityState> {
|
export class CreateCommunity extends Component<any, CreateCommunityState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
state: CreateCommunityState = {
|
state: CreateCommunityState = {
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
|
loading: false,
|
||||||
};
|
};
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
@ -45,6 +47,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={this.state.siteRes.all_languages}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={this.state.siteRes.discussion_languages}
|
||||||
communityLanguages={this.state.siteRes.discussion_languages}
|
communityLanguages={this.state.siteRes.discussion_languages}
|
||||||
|
loading={this.state.loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,10 +56,15 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleCommunityCreate(form: CreateCommunityI) {
|
async handleCommunityCreate(form: CreateCommunityI) {
|
||||||
|
this.setState({ loading: true });
|
||||||
|
|
||||||
const res = await HttpService.client.createCommunity(form);
|
const res = await HttpService.client.createCommunity(form);
|
||||||
|
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
const name = res.data.community_view.community.name;
|
const name = res.data.community_view.community.name;
|
||||||
this.props.history.replace(`/c/${name}`);
|
this.props.history.replace(`/c/${name}`);
|
||||||
|
} else {
|
||||||
|
this.setState({ loading: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
|
import { T } from "inferno-i18next-dess";
|
||||||
import { Link } from "inferno-router";
|
import { Link } from "inferno-router";
|
||||||
import {
|
import {
|
||||||
AddModToCommunity,
|
AddModToCommunity,
|
||||||
|
@ -144,10 +145,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
{myUSerInfo && this.blockCommunity()}
|
{myUSerInfo && this.blockCommunity()}
|
||||||
{!myUSerInfo && (
|
{!myUSerInfo && (
|
||||||
<div className="alert alert-info" role="alert">
|
<div className="alert alert-info" role="alert">
|
||||||
{i18n.t("community_not_logged_in_alert", {
|
<T
|
||||||
community: name,
|
i18nKey="community_not_logged_in_alert"
|
||||||
instance: hostname(actor_id),
|
interpolation={{
|
||||||
})}
|
community: name,
|
||||||
|
instance: hostname(actor_id),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
#<code className="user-select-all">#</code>#
|
||||||
|
</T>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -39,6 +39,8 @@ interface AdminSettingsState {
|
||||||
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
||||||
bannedRes: RequestState<BannedPersonsResponse>;
|
bannedRes: RequestState<BannedPersonsResponse>;
|
||||||
leaveAdminTeamRes: RequestState<GetSiteResponse>;
|
leaveAdminTeamRes: RequestState<GetSiteResponse>;
|
||||||
|
emojiLoading: boolean;
|
||||||
|
loading: boolean;
|
||||||
themeList: string[];
|
themeList: string[];
|
||||||
isIsomorphic: boolean;
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
@ -52,6 +54,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
bannedRes: { state: "empty" },
|
bannedRes: { state: "empty" },
|
||||||
instancesRes: { state: "empty" },
|
instancesRes: { state: "empty" },
|
||||||
leaveAdminTeamRes: { state: "empty" },
|
leaveAdminTeamRes: { state: "empty" },
|
||||||
|
emojiLoading: false,
|
||||||
|
loading: false,
|
||||||
themeList: [],
|
themeList: [],
|
||||||
isIsomorphic: false,
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
@ -81,6 +85,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
bannedRes: { state: "loading" },
|
bannedRes: { state: "loading" },
|
||||||
instancesRes: { state: "loading" },
|
instancesRes: { state: "loading" },
|
||||||
themeList: [],
|
themeList: [],
|
||||||
|
loading: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const auth = myAuthRequired();
|
const auth = myAuthRequired();
|
||||||
|
@ -95,6 +100,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
bannedRes,
|
bannedRes,
|
||||||
instancesRes,
|
instancesRes,
|
||||||
themeList,
|
themeList,
|
||||||
|
loading: false,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -156,6 +162,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
onSaveSite={this.handleEditSite}
|
onSaveSite={this.handleEditSite}
|
||||||
siteRes={this.state.siteRes}
|
siteRes={this.state.siteRes}
|
||||||
themeList={this.state.themeList}
|
themeList={this.state.themeList}
|
||||||
|
loading={this.state.loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
|
@ -174,6 +181,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
this.state.siteRes.site_view.local_site_rate_limit
|
this.state.siteRes.site_view.local_site_rate_limit
|
||||||
}
|
}
|
||||||
onSaveSite={this.handleEditSite}
|
onSaveSite={this.handleEditSite}
|
||||||
|
loading={this.state.loading}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -185,6 +193,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
<TaglineForm
|
<TaglineForm
|
||||||
taglines={this.state.siteRes.taglines}
|
taglines={this.state.siteRes.taglines}
|
||||||
onSaveSite={this.handleEditSite}
|
onSaveSite={this.handleEditSite}
|
||||||
|
loading={this.state.loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
|
@ -198,6 +207,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
onCreate={this.handleCreateEmoji}
|
onCreate={this.handleCreateEmoji}
|
||||||
onDelete={this.handleDeleteEmoji}
|
onDelete={this.handleDeleteEmoji}
|
||||||
onEdit={this.handleEditEmoji}
|
onEdit={this.handleEditEmoji}
|
||||||
|
loading={this.state.emojiLoading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
|
@ -266,6 +276,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleEditSite(form: EditSite) {
|
async handleEditSite(form: EditSite) {
|
||||||
|
this.setState({ loading: true });
|
||||||
|
|
||||||
const editRes = await HttpService.client.editSite(form);
|
const editRes = await HttpService.client.editSite(form);
|
||||||
|
|
||||||
if (editRes.state === "success") {
|
if (editRes.state === "success") {
|
||||||
|
@ -278,6 +290,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
toast(i18n.t("site_saved"));
|
toast(i18n.t("site_saved"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.setState({ loading: false });
|
||||||
|
|
||||||
return editRes;
|
return editRes;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -300,23 +314,35 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleEditEmoji(form: EditCustomEmoji) {
|
async handleEditEmoji(form: EditCustomEmoji) {
|
||||||
|
this.setState({ emojiLoading: true });
|
||||||
|
|
||||||
const res = await HttpService.client.editCustomEmoji(form);
|
const res = await HttpService.client.editCustomEmoji(form);
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
updateEmojiDataModel(res.data.custom_emoji);
|
updateEmojiDataModel(res.data.custom_emoji);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.setState({ emojiLoading: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleDeleteEmoji(form: DeleteCustomEmoji) {
|
async handleDeleteEmoji(form: DeleteCustomEmoji) {
|
||||||
|
this.setState({ emojiLoading: true });
|
||||||
|
|
||||||
const res = await HttpService.client.deleteCustomEmoji(form);
|
const res = await HttpService.client.deleteCustomEmoji(form);
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
removeFromEmojiDataModel(res.data.id);
|
removeFromEmojiDataModel(res.data.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.setState({ emojiLoading: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleCreateEmoji(form: CreateCustomEmoji) {
|
async handleCreateEmoji(form: CreateCustomEmoji) {
|
||||||
|
this.setState({ emojiLoading: true });
|
||||||
|
|
||||||
const res = await HttpService.client.createCustomEmoji(form);
|
const res = await HttpService.client.createCustomEmoji(form);
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
updateEmojiDataModel(res.data.custom_emoji);
|
updateEmojiDataModel(res.data.custom_emoji);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.setState({ emojiLoading: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,12 +23,12 @@ interface EmojiFormProps {
|
||||||
onEdit(form: EditCustomEmoji): void;
|
onEdit(form: EditCustomEmoji): void;
|
||||||
onCreate(form: CreateCustomEmoji): void;
|
onCreate(form: CreateCustomEmoji): void;
|
||||||
onDelete(form: DeleteCustomEmoji): void;
|
onDelete(form: DeleteCustomEmoji): void;
|
||||||
|
loading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface EmojiFormState {
|
interface EmojiFormState {
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
customEmojis: CustomEmojiViewForm[];
|
customEmojis: CustomEmojiViewForm[];
|
||||||
loading: boolean;
|
|
||||||
page: number;
|
page: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,7 +47,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private itemsPerPage = 15;
|
private itemsPerPage = 15;
|
||||||
private emptyState: EmojiFormState = {
|
private emptyState: EmojiFormState = {
|
||||||
loading: false,
|
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
|
customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
|
||||||
id: x.custom_emoji.id,
|
id: x.custom_emoji.id,
|
||||||
|
@ -223,7 +222,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
data-tippy-content={i18n.t("save")}
|
data-tippy-content={i18n.t("save")}
|
||||||
aria-label={i18n.t("save")}
|
aria-label={i18n.t("save")}
|
||||||
disabled={
|
disabled={
|
||||||
this.state.loading ||
|
this.props.loading ||
|
||||||
!this.canEdit(cv) ||
|
!this.canEdit(cv) ||
|
||||||
!cv.changed
|
!cv.changed
|
||||||
}
|
}
|
||||||
|
@ -243,7 +242,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("delete")}
|
data-tippy-content={i18n.t("delete")}
|
||||||
aria-label={i18n.t("delete")}
|
aria-label={i18n.t("delete")}
|
||||||
disabled={this.state.loading}
|
disabled={this.props.loading}
|
||||||
title={i18n.t("delete")}
|
title={i18n.t("delete")}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
|
|
|
@ -244,9 +244,10 @@ export class Home extends Component<any, HomeState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async componentDidMount() {
|
async componentDidMount() {
|
||||||
if (!this.state.isIsomorphic) {
|
if (!this.state.isIsomorphic || !this.isoData.routeData.length) {
|
||||||
await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
|
await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
|
||||||
}
|
}
|
||||||
|
|
||||||
setupTippy();
|
setupTippy();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -456,7 +457,7 @@ export class Home extends Component<any, HomeState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
trendingCommunities(isMobile = false) {
|
trendingCommunities(isMobile = false) {
|
||||||
switch (this.state.trendingCommunitiesRes.state) {
|
switch (this.state.trendingCommunitiesRes?.state) {
|
||||||
case "loading":
|
case "loading":
|
||||||
return (
|
return (
|
||||||
<h5>
|
<h5>
|
||||||
|
@ -573,7 +574,7 @@ export class Home extends Component<any, HomeState> {
|
||||||
const siteRes = this.state.siteRes;
|
const siteRes = this.state.siteRes;
|
||||||
|
|
||||||
if (dataType === DataType.Post) {
|
if (dataType === DataType.Post) {
|
||||||
switch (this.state.postsRes.state) {
|
switch (this.state.postsRes?.state) {
|
||||||
case "loading":
|
case "loading":
|
||||||
return (
|
return (
|
||||||
<h5>
|
<h5>
|
||||||
|
|
|
@ -186,7 +186,9 @@ export class Login extends Component<any, State> {
|
||||||
UserService.Instance.myUserInfo = site.data.my_user;
|
UserService.Instance.myUserInfo = site.data.my_user;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.props.history.replace("/");
|
i.props.history.action === "PUSH"
|
||||||
|
? i.props.history.back()
|
||||||
|
: i.props.history.replace("/");
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -195,7 +197,7 @@ export class Login extends Component<any, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLoginUsernameChange(i: Login, event: any) {
|
handleLoginUsernameChange(i: Login, event: any) {
|
||||||
i.state.form.username_or_email = event.target.value;
|
i.state.form.username_or_email = event.target.value.trim();
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,6 +24,7 @@ interface RateLimitsProps {
|
||||||
interface RateLimitFormProps {
|
interface RateLimitFormProps {
|
||||||
rateLimits: LocalSiteRateLimit;
|
rateLimits: LocalSiteRateLimit;
|
||||||
onSaveSite(form: EditSite): void;
|
onSaveSite(form: EditSite): void;
|
||||||
|
loading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RateLimitFormState {
|
interface RateLimitFormState {
|
||||||
|
@ -41,7 +42,6 @@ interface RateLimitFormState {
|
||||||
register?: number;
|
register?: number;
|
||||||
register_per_second?: number;
|
register_per_second?: number;
|
||||||
};
|
};
|
||||||
loading: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function RateLimits({
|
function RateLimits({
|
||||||
|
@ -117,7 +117,6 @@ function submitRateLimitForm(i: RateLimitsForm, event: any) {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
i.setState({ loading: true });
|
|
||||||
i.props.onSaveSite(form);
|
i.props.onSaveSite(form);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -126,7 +125,6 @@ export default class RateLimitsForm extends Component<
|
||||||
RateLimitFormState
|
RateLimitFormState
|
||||||
> {
|
> {
|
||||||
state: RateLimitFormState = {
|
state: RateLimitFormState = {
|
||||||
loading: false,
|
|
||||||
form: this.props.rateLimits,
|
form: this.props.rateLimits,
|
||||||
};
|
};
|
||||||
constructor(props: RateLimitFormProps, context: any) {
|
constructor(props: RateLimitFormProps, context: any) {
|
||||||
|
@ -164,9 +162,9 @@ export default class RateLimitsForm extends Component<
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-secondary mr-2"
|
className="btn btn-secondary mr-2"
|
||||||
disabled={this.state.loading}
|
disabled={this.props.loading}
|
||||||
>
|
>
|
||||||
{this.state.loading ? (
|
{this.props.loading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
|
|
@ -73,6 +73,7 @@ export class Setup extends Component<any, State> {
|
||||||
onSaveSite={this.handleCreateSite}
|
onSaveSite={this.handleCreateSite}
|
||||||
siteRes={this.state.siteRes}
|
siteRes={this.state.siteRes}
|
||||||
themeList={this.state.themeList}
|
themeList={this.state.themeList}
|
||||||
|
loading={false}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -221,7 +222,7 @@ export class Setup extends Component<any, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRegisterUsernameChange(i: Setup, event: any) {
|
handleRegisterUsernameChange(i: Setup, event: any) {
|
||||||
i.state.form.username = event.target.value;
|
i.state.form.username = event.target.value.trim();
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -496,7 +496,7 @@ export class Signup extends Component<any, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRegisterUsernameChange(i: Signup, event: any) {
|
handleRegisterUsernameChange(i: Signup, event: any) {
|
||||||
i.state.form.username = event.target.value;
|
i.state.form.username = event.target.value.trim();
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,11 @@ import {
|
||||||
ListingType,
|
ListingType,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
import {
|
||||||
|
capitalizeFirstLetter,
|
||||||
|
myAuthRequired,
|
||||||
|
validInstanceTLD,
|
||||||
|
} from "../../utils";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { ImageUploadForm } from "../common/image-upload-form";
|
import { ImageUploadForm } from "../common/image-upload-form";
|
||||||
import { LanguageSelect } from "../common/language-select";
|
import { LanguageSelect } from "../common/language-select";
|
||||||
|
@ -27,11 +31,11 @@ interface SiteFormProps {
|
||||||
themeList?: string[];
|
themeList?: string[];
|
||||||
onSaveSite(form: EditSite): void;
|
onSaveSite(form: EditSite): void;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
|
loading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SiteFormState {
|
interface SiteFormState {
|
||||||
siteForm: EditSite;
|
siteForm: EditSite;
|
||||||
loading: boolean;
|
|
||||||
instance_select: {
|
instance_select: {
|
||||||
allowed_instances: string;
|
allowed_instances: string;
|
||||||
blocked_instances: string;
|
blocked_instances: string;
|
||||||
|
@ -44,7 +48,6 @@ type InstanceKey = "allowed_instances" | "blocked_instances";
|
||||||
export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
state: SiteFormState = {
|
state: SiteFormState = {
|
||||||
siteForm: this.initSiteForm(),
|
siteForm: this.initSiteForm(),
|
||||||
loading: false,
|
|
||||||
instance_select: {
|
instance_select: {
|
||||||
allowed_instances: "",
|
allowed_instances: "",
|
||||||
blocked_instances: "",
|
blocked_instances: "",
|
||||||
|
@ -107,23 +110,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
|
|
||||||
this.handleDiscussionLanguageChange =
|
this.handleDiscussionLanguageChange =
|
||||||
this.handleDiscussionLanguageChange.bind(this);
|
this.handleDiscussionLanguageChange.bind(this);
|
||||||
|
|
||||||
this.handleAddInstance = this.handleAddInstance.bind(this);
|
this.handleAddInstance = this.handleAddInstance.bind(this);
|
||||||
|
this.handleRemoveInstance = this.handleRemoveInstance.bind(this);
|
||||||
|
|
||||||
this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
|
this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
|
||||||
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
|
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Necessary to stop the loading
|
|
||||||
componentWillReceiveProps() {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
|
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
|
||||||
return (
|
return (
|
||||||
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
|
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
|
||||||
<NavigationPrompt
|
<NavigationPrompt
|
||||||
when={
|
when={
|
||||||
!this.state.loading &&
|
!this.props.loading &&
|
||||||
!siteSetup &&
|
!siteSetup &&
|
||||||
!!(
|
!!(
|
||||||
this.state.siteForm.name ||
|
this.state.siteForm.name ||
|
||||||
|
@ -136,8 +137,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
/>
|
/>
|
||||||
<h5>{`${
|
<h5>{`${
|
||||||
siteSetup
|
siteSetup
|
||||||
? capitalizeFirstLetter(i18n.t("save"))
|
? capitalizeFirstLetter(i18n.t("edit"))
|
||||||
: capitalizeFirstLetter(i18n.t("name"))
|
: capitalizeFirstLetter(i18n.t("setup"))
|
||||||
} ${i18n.t("your_site")}`}</h5>
|
} ${i18n.t("your_site")}`}</h5>
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<label className="col-12 col-form-label" htmlFor="create-site-name">
|
<label className="col-12 col-form-label" htmlFor="create-site-name">
|
||||||
|
@ -157,7 +158,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>{i18n.t("icon")}</label>
|
<label className="mr-2">{i18n.t("icon")}</label>
|
||||||
<ImageUploadForm
|
<ImageUploadForm
|
||||||
uploadTitle={i18n.t("upload_icon")}
|
uploadTitle={i18n.t("upload_icon")}
|
||||||
imageSrc={this.state.siteForm.icon}
|
imageSrc={this.state.siteForm.icon}
|
||||||
|
@ -167,7 +168,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>{i18n.t("banner")}</label>
|
<label className="mr-2">{i18n.t("banner")}</label>
|
||||||
<ImageUploadForm
|
<ImageUploadForm
|
||||||
uploadTitle={i18n.t("upload_banner")}
|
uploadTitle={i18n.t("upload_banner")}
|
||||||
imageSrc={this.state.siteForm.banner}
|
imageSrc={this.state.siteForm.banner}
|
||||||
|
@ -609,9 +610,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-secondary mr-2"
|
className="btn btn-secondary mr-2"
|
||||||
disabled={this.state.loading}
|
disabled={this.props.loading}
|
||||||
>
|
>
|
||||||
{this.state.loading ? (
|
{this.props.loading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : siteSetup ? (
|
) : siteSetup ? (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -717,7 +718,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const auth = myAuthRequired();
|
const auth = myAuthRequired();
|
||||||
i.setState(s => ((s.siteForm.auth = auth), s));
|
i.setState(s => ((s.siteForm.auth = auth), s));
|
||||||
i.setState({ loading: true, submitted: true });
|
i.setState({ submitted: true });
|
||||||
|
|
||||||
const stateSiteForm = i.state.siteForm;
|
const stateSiteForm = i.state.siteForm;
|
||||||
|
|
||||||
|
@ -780,6 +781,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
|
|
||||||
handleAddInstance(key: InstanceKey) {
|
handleAddInstance(key: InstanceKey) {
|
||||||
const instance = this.state.instance_select[key].trim();
|
const instance = this.state.instance_select[key].trim();
|
||||||
|
|
||||||
|
if (!validInstanceTLD(instance)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!this.state.siteForm[key]?.includes(instance)) {
|
if (!this.state.siteForm[key]?.includes(instance)) {
|
||||||
this.setState(s => ({
|
this.setState(s => ({
|
||||||
...s,
|
...s,
|
||||||
|
|
|
@ -9,17 +9,16 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
interface TaglineFormProps {
|
interface TaglineFormProps {
|
||||||
taglines: Array<Tagline>;
|
taglines: Array<Tagline>;
|
||||||
onSaveSite(form: EditSite): void;
|
onSaveSite(form: EditSite): void;
|
||||||
|
loading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TaglineFormState {
|
interface TaglineFormState {
|
||||||
taglines: Array<string>;
|
taglines: Array<string>;
|
||||||
loading: boolean;
|
|
||||||
editingRow?: number;
|
editingRow?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
state: TaglineFormState = {
|
state: TaglineFormState = {
|
||||||
loading: false,
|
|
||||||
editingRow: undefined,
|
editingRow: undefined,
|
||||||
taglines: this.props.taglines.map(x => x.content),
|
taglines: this.props.taglines.map(x => x.content),
|
||||||
};
|
};
|
||||||
|
@ -30,10 +29,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
return i18n.t("taglines");
|
return i18n.t("taglines");
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps() {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
@ -110,9 +105,9 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<button
|
<button
|
||||||
onClick={linkEvent(this, this.handleSaveClick)}
|
onClick={linkEvent(this, this.handleSaveClick)}
|
||||||
className="btn btn-secondary mr-2"
|
className="btn btn-secondary mr-2"
|
||||||
disabled={this.state.loading}
|
disabled={this.props.loading}
|
||||||
>
|
>
|
||||||
{this.state.loading ? (
|
{this.props.loading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -153,7 +148,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleSaveClick(i: TaglineForm) {
|
async handleSaveClick(i: TaglineForm) {
|
||||||
i.setState({ loading: true });
|
|
||||||
i.props.onSaveSite({
|
i.props.onSaveSite({
|
||||||
taglines: i.state.taglines,
|
taglines: i.state.taglines,
|
||||||
auth: myAuthRequired(),
|
auth: myAuthRequired(),
|
||||||
|
|
|
@ -25,7 +25,6 @@ import {
|
||||||
fetchCommunities,
|
fetchCommunities,
|
||||||
fetchThemeList,
|
fetchThemeList,
|
||||||
fetchUsers,
|
fetchUsers,
|
||||||
getLanguages,
|
|
||||||
myAuth,
|
myAuth,
|
||||||
myAuthRequired,
|
myAuthRequired,
|
||||||
personToChoice,
|
personToChoice,
|
||||||
|
@ -1058,12 +1057,12 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInterfaceLangChange(i: Settings, event: any) {
|
handleInterfaceLangChange(i: Settings, event: any) {
|
||||||
|
const newLang = event.target.value ?? "browser";
|
||||||
|
i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang);
|
||||||
|
|
||||||
i.setState(
|
i.setState(
|
||||||
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
|
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
|
||||||
);
|
);
|
||||||
i18n.changeLanguage(
|
|
||||||
getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDiscussionLanguageChange(val: number[]) {
|
handleDiscussionLanguageChange(val: number[]) {
|
||||||
|
|
|
@ -224,6 +224,10 @@ export class CreatePost extends Component<
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
const postId = res.data.post_view.post.id;
|
const postId = res.data.post_view.post.id;
|
||||||
this.props.history.replace(`/post/${postId}`);
|
this.props.history.replace(`/post/${postId}`);
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,7 +25,6 @@ import {
|
||||||
isImage,
|
isImage,
|
||||||
myAuth,
|
myAuth,
|
||||||
myAuthRequired,
|
myAuthRequired,
|
||||||
pictrsDeleteToast,
|
|
||||||
relTags,
|
relTags,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
toast,
|
toast,
|
||||||
|
@ -73,6 +72,7 @@ interface PostFormState {
|
||||||
suggestedPostsRes: RequestState<SearchResponse>;
|
suggestedPostsRes: RequestState<SearchResponse>;
|
||||||
metadataRes: RequestState<GetSiteMetadataResponse>;
|
metadataRes: RequestState<GetSiteMetadataResponse>;
|
||||||
imageLoading: boolean;
|
imageLoading: boolean;
|
||||||
|
imageDeleteUrl: string;
|
||||||
communitySearchLoading: boolean;
|
communitySearchLoading: boolean;
|
||||||
communitySearchOptions: Choice[];
|
communitySearchOptions: Choice[];
|
||||||
previewMode: boolean;
|
previewMode: boolean;
|
||||||
|
@ -86,6 +86,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
form: {},
|
form: {},
|
||||||
loading: false,
|
loading: false,
|
||||||
imageLoading: false,
|
imageLoading: false,
|
||||||
|
imageDeleteUrl: "",
|
||||||
communitySearchLoading: false,
|
communitySearchLoading: false,
|
||||||
previewMode: false,
|
previewMode: false,
|
||||||
communitySearchOptions: [],
|
communitySearchOptions: [],
|
||||||
|
@ -269,6 +270,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
{url && isImage(url) && (
|
{url && isImage(url) && (
|
||||||
<img src={url} className="img-fluid" alt="" />
|
<img src={url} className="img-fluid" alt="" />
|
||||||
)}
|
)}
|
||||||
|
{this.state.imageDeleteUrl && (
|
||||||
|
<button
|
||||||
|
className="btn btn-danger btn-sm mt-2"
|
||||||
|
onClick={linkEvent(this, this.handleImageDelete)}
|
||||||
|
aria-label={i18n.t("delete")}
|
||||||
|
data-tippy-content={i18n.t("delete")}
|
||||||
|
>
|
||||||
|
<Icon icon="x" classes="icon-inline mr-1" />
|
||||||
|
{capitalizeFirstLetter(i18n.t("delete"))}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
|
{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 font-weight-bold">
|
||||||
|
@ -553,7 +565,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePostUrlChange(i: PostForm, event: any) {
|
handlePostUrlChange(i: PostForm, event: any) {
|
||||||
i.setState(s => ((s.form.url = event.target.value), s));
|
const url = event.target.value;
|
||||||
|
|
||||||
|
i.setState({
|
||||||
|
form: {
|
||||||
|
url,
|
||||||
|
},
|
||||||
|
imageDeleteUrl: "",
|
||||||
|
});
|
||||||
|
|
||||||
i.fetchPageTitle();
|
i.fetchPageTitle();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -644,18 +664,35 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
if (res.data.msg === "ok") {
|
if (res.data.msg === "ok") {
|
||||||
i.state.form.url = res.data.url;
|
i.state.form.url = res.data.url;
|
||||||
pictrsDeleteToast(file.name, res.data.delete_url as string);
|
i.setState({
|
||||||
i.setState({ imageLoading: false });
|
imageLoading: false,
|
||||||
|
imageDeleteUrl: res.data.delete_url as string,
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
toast(JSON.stringify(res), "danger");
|
toast(JSON.stringify(res), "danger");
|
||||||
}
|
}
|
||||||
} else if (res.state === "failed") {
|
} else if (res.state === "failed") {
|
||||||
console.error(res.msg);
|
console.error(res.msg);
|
||||||
toast(res.msg, "danger");
|
toast(res.msg, "danger");
|
||||||
|
i.setState({ imageLoading: false });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleImageDelete(i: PostForm) {
|
||||||
|
const { imageDeleteUrl } = i.state;
|
||||||
|
|
||||||
|
fetch(imageDeleteUrl);
|
||||||
|
|
||||||
|
i.setState({
|
||||||
|
imageDeleteUrl: "",
|
||||||
|
imageLoading: false,
|
||||||
|
form: {
|
||||||
|
url: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
handleCommunitySearch = debounce(async (text: string) => {
|
handleCommunitySearch = debounce(async (text: string) => {
|
||||||
const { selectedCommunityChoice } = this.props;
|
const { selectedCommunityChoice } = this.props;
|
||||||
this.setState({ communitySearchLoading: true });
|
this.setState({ communitySearchLoading: true });
|
||||||
|
|
|
@ -835,6 +835,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
search: "",
|
search: "",
|
||||||
}}
|
}}
|
||||||
title={i18n.t("cross_post")}
|
title={i18n.t("cross_post")}
|
||||||
|
data-tippy-content={i18n.t("cross_post")}
|
||||||
|
aria-label={i18n.t("cross_post")}
|
||||||
>
|
>
|
||||||
<Icon icon="copy" inline />
|
<Icon icon="copy" inline />
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -1380,9 +1382,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
showMobilePreview() {
|
showMobilePreview() {
|
||||||
const body = this.postView.post.body;
|
const { body, id } = this.postView.post;
|
||||||
|
|
||||||
return !this.showBody && body ? (
|
return !this.showBody && body ? (
|
||||||
<div className="md-div mb-1 preview-lines">{body}</div>
|
<Link className="text-body" to={`/post/${id}`}>
|
||||||
|
<div className="md-div mb-1 preview-lines">{body}</div>
|
||||||
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
);
|
);
|
||||||
|
|
|
@ -68,7 +68,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{this.posts.length > 0 ? (
|
{this.posts.length > 0 ? (
|
||||||
this.posts.map(post_view => (
|
this.posts.map((post_view, idx) => (
|
||||||
<>
|
<>
|
||||||
<PostListing
|
<PostListing
|
||||||
post_view={post_view}
|
post_view={post_view}
|
||||||
|
@ -96,7 +96,9 @@ export class PostListings extends Component<PostListingsProps, any> {
|
||||||
onAddAdmin={this.props.onAddAdmin}
|
onAddAdmin={this.props.onAddAdmin}
|
||||||
onTransferCommunity={this.props.onTransferCommunity}
|
onTransferCommunity={this.props.onTransferCommunity}
|
||||||
/>
|
/>
|
||||||
<hr className="my-3" />
|
{idx + 1 !== this.posts.length && (
|
||||||
|
<hr className="my-3 border border-primary" />
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import i18next, { i18nTyped, Resource } from "i18next";
|
import i18next, { i18nTyped, Resource } from "i18next";
|
||||||
|
import { UserService } from "./services";
|
||||||
import { ar } from "./translations/ar";
|
import { ar } from "./translations/ar";
|
||||||
import { bg } from "./translations/bg";
|
import { bg } from "./translations/bg";
|
||||||
import { ca } from "./translations/ca";
|
import { ca } from "./translations/ca";
|
||||||
|
@ -30,7 +31,7 @@ import { sv } from "./translations/sv";
|
||||||
import { vi } from "./translations/vi";
|
import { vi } from "./translations/vi";
|
||||||
import { zh } from "./translations/zh";
|
import { zh } from "./translations/zh";
|
||||||
import { zh_Hant } from "./translations/zh_Hant";
|
import { zh_Hant } from "./translations/zh_Hant";
|
||||||
import { getLanguages } from "./utils";
|
import { isBrowser } from "./utils";
|
||||||
|
|
||||||
export const languages = [
|
export const languages = [
|
||||||
{ resource: ar, code: "ar", name: "العربية" },
|
{ resource: ar, code: "ar", name: "العربية" },
|
||||||
|
@ -73,12 +74,31 @@ function format(value: any, format: any): any {
|
||||||
return format === "uppercase" ? value.toUpperCase() : value;
|
return format === "uppercase" ? value.toUpperCase() : value;
|
||||||
}
|
}
|
||||||
|
|
||||||
i18next.init({
|
class LanguageDetector {
|
||||||
|
static readonly type = "languageDetector";
|
||||||
|
|
||||||
|
detect() {
|
||||||
|
const langs: string[] = [];
|
||||||
|
|
||||||
|
const myLang =
|
||||||
|
UserService.Instance.myUserInfo?.local_user_view.local_user
|
||||||
|
.interface_language ?? "browser";
|
||||||
|
|
||||||
|
if (myLang !== "browser") langs.push(myLang);
|
||||||
|
|
||||||
|
if (isBrowser()) langs.push(...navigator.languages);
|
||||||
|
|
||||||
|
return langs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i18next.use(LanguageDetector).init({
|
||||||
debug: false,
|
debug: false,
|
||||||
compatibilityJSON: "v3",
|
compatibilityJSON: "v3",
|
||||||
|
supportedLngs: languages.map(l => l.code),
|
||||||
|
nonExplicitSupportedLngs: true,
|
||||||
// load: 'languageOnly',
|
// load: 'languageOnly',
|
||||||
// initImmediate: false,
|
// initImmediate: false,
|
||||||
lng: getLanguages()[0],
|
|
||||||
fallbackLng: "en",
|
fallbackLng: "en",
|
||||||
resources,
|
resources,
|
||||||
interpolation: { format },
|
interpolation: { format },
|
||||||
|
|
|
@ -42,7 +42,7 @@ import moment from "moment";
|
||||||
import tippy from "tippy.js";
|
import tippy from "tippy.js";
|
||||||
import Toastify from "toastify-js";
|
import Toastify from "toastify-js";
|
||||||
import { getHttpBase } from "./env";
|
import { getHttpBase } from "./env";
|
||||||
import { i18n, languages } from "./i18next";
|
import { i18n } from "./i18next";
|
||||||
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
||||||
import { HttpService, UserService } from "./services";
|
import { HttpService, UserService } from "./services";
|
||||||
|
|
||||||
|
@ -75,6 +75,7 @@ export const commentTreeMaxDepth = 8;
|
||||||
export const markdownFieldCharacterLimit = 50000;
|
export const markdownFieldCharacterLimit = 50000;
|
||||||
export const maxUploadImages = 20;
|
export const maxUploadImages = 20;
|
||||||
export const concurrentImageUpload = 4;
|
export const concurrentImageUpload = 4;
|
||||||
|
export const updateUnreadCountsInterval = 30000;
|
||||||
|
|
||||||
export const relTags = "noopener nofollow";
|
export const relTags = "noopener nofollow";
|
||||||
|
|
||||||
|
@ -315,6 +316,7 @@ export function amTopMod(
|
||||||
|
|
||||||
const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
|
const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
|
||||||
const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
|
const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
|
||||||
|
const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/;
|
||||||
|
|
||||||
export function isImage(url: string) {
|
export function isImage(url: string) {
|
||||||
return imageRegex.test(url);
|
return imageRegex.test(url);
|
||||||
|
@ -328,6 +330,10 @@ export function validURL(str: string) {
|
||||||
return !!new URL(str);
|
return !!new URL(str);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function validInstanceTLD(str: string) {
|
||||||
|
return tldRegex.test(str);
|
||||||
|
}
|
||||||
|
|
||||||
export function communityRSSUrl(actorId: string, sort: string): string {
|
export function communityRSSUrl(actorId: string, sort: string): string {
|
||||||
const url = new URL(actorId);
|
const url = new URL(actorId);
|
||||||
return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;
|
return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;
|
||||||
|
@ -398,31 +404,6 @@ export function debounce<T extends any[], R>(
|
||||||
} as (...e: T) => R;
|
} as (...e: T) => R;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getLanguages(
|
|
||||||
override?: string,
|
|
||||||
myUserInfo = UserService.Instance.myUserInfo
|
|
||||||
): string[] {
|
|
||||||
const myLang = myUserInfo?.local_user_view.local_user.interface_language;
|
|
||||||
const lang = override || myLang || "browser";
|
|
||||||
|
|
||||||
if (lang == "browser" && isBrowser()) {
|
|
||||||
return getBrowserLanguages();
|
|
||||||
} else {
|
|
||||||
return [lang];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBrowserLanguages(): string[] {
|
|
||||||
// Intersect lemmy's langs, with the browser langs
|
|
||||||
const langs = languages ? languages.map(l => l.code) : ["en"];
|
|
||||||
|
|
||||||
// NOTE, mobile browsers seem to be missing this list, so append en
|
|
||||||
const allowedLangs = navigator.languages
|
|
||||||
.concat("en")
|
|
||||||
.filter(v => langs.includes(v));
|
|
||||||
return allowedLangs;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchThemeList(): Promise<string[]> {
|
export async function fetchThemeList(): Promise<string[]> {
|
||||||
return fetch("/css/themelist").then(res => res.json());
|
return fetch("/css/themelist").then(res => res.json());
|
||||||
}
|
}
|
||||||
|
@ -738,7 +719,7 @@ function setupMarkdown() {
|
||||||
defs: emojiDefs,
|
defs: emojiDefs,
|
||||||
})
|
})
|
||||||
.disable("image");
|
.disable("image");
|
||||||
var defaultRenderer = md.renderer.rules.image;
|
const defaultRenderer = md.renderer.rules.image;
|
||||||
md.renderer.rules.image = function (
|
md.renderer.rules.image = function (
|
||||||
tokens: Token[],
|
tokens: Token[],
|
||||||
idx: number,
|
idx: number,
|
||||||
|
@ -757,6 +738,9 @@ function setupMarkdown() {
|
||||||
const alt_text = item.content;
|
const alt_text = item.content;
|
||||||
return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`;
|
return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`;
|
||||||
};
|
};
|
||||||
|
md.renderer.rules.table_open = function () {
|
||||||
|
return '<table class="table">';
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getEmojiMart(
|
export function getEmojiMart(
|
||||||
|
@ -1127,7 +1111,7 @@ export const colorList: string[] = [
|
||||||
];
|
];
|
||||||
|
|
||||||
function hsl(num: number) {
|
function hsl(num: number) {
|
||||||
return `hsla(${num}, 35%, 50%, 1)`;
|
return `hsla(${num}, 35%, 50%, 0.5)`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function hostname(url: string): string {
|
export function hostname(url: string): string {
|
||||||
|
@ -1272,7 +1256,7 @@ export function personSelectName({
|
||||||
|
|
||||||
export function initializeSite(site?: GetSiteResponse) {
|
export function initializeSite(site?: GetSiteResponse) {
|
||||||
UserService.Instance.myUserInfo = site?.my_user;
|
UserService.Instance.myUserInfo = site?.my_user;
|
||||||
i18n.changeLanguage(getLanguages()[0]);
|
i18n.changeLanguage();
|
||||||
if (site) {
|
if (site) {
|
||||||
setupEmojiDataModel(site.custom_emojis ?? []);
|
setupEmojiDataModel(site.custom_emojis ?? []);
|
||||||
}
|
}
|
||||||
|
@ -1490,3 +1474,18 @@ export function newVote(voteType: VoteType, myVote?: number): number {
|
||||||
return myVote == -1 ? 0 : -1;
|
return myVote == -1 ? 0 : -1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function sleep(millis: number): Promise<void> {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, millis));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Polls / repeatedly runs a promise, every X milliseconds
|
||||||
|
*/
|
||||||
|
export async function poll(promiseFn: any, millis: number) {
|
||||||
|
if (window.document.visibilityState !== "hidden") {
|
||||||
|
await promiseFn();
|
||||||
|
}
|
||||||
|
await sleep(millis);
|
||||||
|
return poll(promiseFn, millis);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue