mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-30 00:01:15 +00:00
Merge branch 'main' into csp_media_src_data_urls
This commit is contained in:
commit
1ce6eb3284
25 changed files with 593 additions and 541 deletions
|
@ -21,16 +21,6 @@
|
||||||
"@typescript-eslint/explicit-module-boundary-types": 0,
|
"@typescript-eslint/explicit-module-boundary-types": 0,
|
||||||
"@typescript-eslint/no-empty-function": 0,
|
"@typescript-eslint/no-empty-function": 0,
|
||||||
"arrow-body-style": 0,
|
"arrow-body-style": 0,
|
||||||
"jsx-a11y/alt-text": 1,
|
|
||||||
"jsx-a11y/anchor-is-valid": 1,
|
|
||||||
"jsx-a11y/aria-activedescendant-has-tabindex": 1,
|
|
||||||
"jsx-a11y/aria-role": 1,
|
|
||||||
"jsx-a11y/click-events-have-key-events": 1,
|
|
||||||
"jsx-a11y/iframe-has-title": 1,
|
|
||||||
"jsx-a11y/interactive-supports-focus": 1,
|
|
||||||
"jsx-a11y/no-redundant-roles": 1,
|
|
||||||
"jsx-a11y/no-static-element-interactions": 1,
|
|
||||||
"jsx-a11y/role-has-required-aria-props": 1,
|
|
||||||
"curly": 0,
|
"curly": 0,
|
||||||
"eol-last": 0,
|
"eol-last": 0,
|
||||||
"eqeqeq": 0,
|
"eqeqeq": 0,
|
||||||
|
|
|
@ -124,7 +124,8 @@
|
||||||
|
|
||||||
.emoji-picker-container {
|
.emoji-picker-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
@ -275,10 +276,7 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini-overlay {
|
.mini-overlay {
|
||||||
position: absolute;
|
display: block;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 2px;
|
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
|
|
@ -11,22 +11,21 @@ export default async (req: Request, res: Response) => {
|
||||||
const theme = req.params.name;
|
const theme = req.params.name;
|
||||||
|
|
||||||
if (!theme.endsWith(".css")) {
|
if (!theme.endsWith(".css")) {
|
||||||
res.statusCode = 400;
|
return res.status(400).send("Theme must be a css file");
|
||||||
res.send("Theme must be a css file");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const customTheme = path.resolve(extraThemesFolder, theme);
|
const customTheme = path.resolve(extraThemesFolder, theme);
|
||||||
|
|
||||||
if (existsSync(customTheme)) {
|
if (existsSync(customTheme)) {
|
||||||
res.sendFile(customTheme);
|
return res.sendFile(customTheme);
|
||||||
} else {
|
} else {
|
||||||
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
|
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
|
||||||
|
|
||||||
// If the theme doesn't exist, just send litely
|
// If the theme doesn't exist, just send litely
|
||||||
if (existsSync(internalTheme)) {
|
if (existsSync(internalTheme)) {
|
||||||
res.sendFile(internalTheme);
|
return res.sendFile(internalTheme);
|
||||||
} else {
|
} else {
|
||||||
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
|
return res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -33,12 +33,13 @@ export class App extends Component<any, any> {
|
||||||
<>
|
<>
|
||||||
<Provider i18next={I18NextService.i18n}>
|
<Provider i18next={I18NextService.i18n}>
|
||||||
<div id="app" className="lemmy-site">
|
<div id="app" className="lemmy-site">
|
||||||
<a
|
<button
|
||||||
className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
|
type="button"
|
||||||
|
className="btn skip-link bg-light position-absolute start-0 z-3"
|
||||||
onClick={linkEvent(this, this.handleJumpToContent)}
|
onClick={linkEvent(this, this.handleJumpToContent)}
|
||||||
>
|
>
|
||||||
${I18NextService.i18n.t("jump_to_content", "Jump to content")}
|
{I18NextService.i18n.t("jump_to_content", "Jump to content")}
|
||||||
</a>
|
</button>
|
||||||
{siteView && (
|
{siteView && (
|
||||||
<Theme defaultTheme={siteView.local_site.default_theme} />
|
<Theme defaultTheme={siteView.local_site.default_theme} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -347,10 +347,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
{person && (
|
{person && (
|
||||||
<div id="dropdownUser" className="dropdown">
|
<li id="dropdownUser" className="dropdown">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn dropdown-toggle"
|
className="btn dropdown-toggle"
|
||||||
role="button"
|
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
>
|
>
|
||||||
|
@ -398,7 +398,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</li>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -3,7 +3,6 @@ import {
|
||||||
getCommentParentId,
|
getCommentParentId,
|
||||||
myAuth,
|
myAuth,
|
||||||
myAuthRequired,
|
myAuthRequired,
|
||||||
newVote,
|
|
||||||
showScores,
|
showScores,
|
||||||
} from "@utils/app";
|
} from "@utils/app";
|
||||||
import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
|
import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
|
||||||
|
@ -56,13 +55,14 @@ import {
|
||||||
CommentNodeI,
|
CommentNodeI,
|
||||||
CommentViewType,
|
CommentViewType,
|
||||||
PurgeType,
|
PurgeType,
|
||||||
VoteType,
|
VoteContentType,
|
||||||
} from "../../interfaces";
|
} from "../../interfaces";
|
||||||
import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
|
import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
|
||||||
import { I18NextService, UserService } from "../../services";
|
import { I18NextService, UserService } from "../../services";
|
||||||
import { setupTippy } from "../../tippy";
|
import { setupTippy } from "../../tippy";
|
||||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||||
import { MomentTime } from "../common/moment-time";
|
import { MomentTime } from "../common/moment-time";
|
||||||
|
import { VoteButtonsCompact } from "../common/vote-buttons";
|
||||||
import { CommunityLink } from "../community/community-link";
|
import { CommunityLink } from "../community/community-link";
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
import { CommentForm } from "./comment-form";
|
import { CommentForm } from "./comment-form";
|
||||||
|
@ -283,7 +283,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
node.comment_view.counts.child_count > 0;
|
node.comment_view.counts.child_count > 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="comment" role="comment">
|
<li className="comment">
|
||||||
<article
|
<article
|
||||||
id={`comment-${cv.comment.id}`}
|
id={`comment-${cv.comment.id}`}
|
||||||
className={classNames(`details comment-node py-2`, {
|
className={classNames(`details comment-node py-2`, {
|
||||||
|
@ -356,29 +356,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
)}
|
)}
|
||||||
{/* This is an expanding spacer for mobile */}
|
{/* This is an expanding spacer for mobile */}
|
||||||
<div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
<div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
||||||
|
|
||||||
{showScores() && (
|
{showScores() && (
|
||||||
<>
|
<>
|
||||||
<a
|
|
||||||
className={`unselectable pointer ${this.scoreColor}`}
|
|
||||||
onClick={linkEvent(this, this.handleUpvote)}
|
|
||||||
data-tippy-content={this.pointsTippy}
|
|
||||||
>
|
|
||||||
{this.state.upvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<span
|
<span
|
||||||
className="me-1 font-weight-bold"
|
className="me-1 fw-bold"
|
||||||
aria-label={I18NextService.i18n.t("number_of_points", {
|
aria-label={I18NextService.i18n.t("number_of_points", {
|
||||||
count: Number(this.commentView.counts.score),
|
count: Number(this.commentView.counts.score),
|
||||||
formattedCount: numToSI(
|
formattedCount: numToSI(this.commentView.counts.score),
|
||||||
this.commentView.counts.score
|
|
||||||
),
|
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{numToSI(this.commentView.counts.score)}
|
{numToSI(this.commentView.counts.score)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
<span className="me-1">•</span>
|
<span className="me-1">•</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -420,7 +409,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.showContext && this.linkBtn()}
|
||||||
{this.props.markable && (
|
{this.props.markable && (
|
||||||
<button
|
<button
|
||||||
|
@ -451,60 +440,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
)}
|
)}
|
||||||
{UserService.Instance.myUserInfo && !this.props.viewOnly && (
|
{UserService.Instance.myUserInfo && !this.props.viewOnly && (
|
||||||
<>
|
<>
|
||||||
<button
|
<VoteButtonsCompact
|
||||||
className={`btn btn-link btn-animate ${
|
voteContentType={VoteContentType.Comment}
|
||||||
this.commentView.my_vote === 1
|
id={this.commentView.comment.id}
|
||||||
? "text-info"
|
onVote={this.props.onCommentVote}
|
||||||
: "text-muted"
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
}`}
|
counts={this.commentView.counts}
|
||||||
onClick={linkEvent(this, this.handleUpvote)}
|
my_vote={this.commentView.my_vote}
|
||||||
data-tippy-content={I18NextService.i18n.t("upvote")}
|
/>
|
||||||
aria-label={I18NextService.i18n.t("upvote")}
|
|
||||||
aria-pressed={this.commentView.my_vote === 1}
|
|
||||||
>
|
|
||||||
{this.state.upvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Icon icon="arrow-up1" classes="icon-inline" />
|
|
||||||
{showScores() &&
|
|
||||||
this.commentView.counts.upvotes !==
|
|
||||||
this.commentView.counts.score && (
|
|
||||||
<span className="ms-1">
|
|
||||||
{numToSI(this.commentView.counts.upvotes)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{this.props.enableDownvotes && (
|
|
||||||
<button
|
|
||||||
className={`btn btn-link btn-animate ${
|
|
||||||
this.commentView.my_vote === -1
|
|
||||||
? "text-danger"
|
|
||||||
: "text-muted"
|
|
||||||
}`}
|
|
||||||
onClick={linkEvent(this, this.handleDownvote)}
|
|
||||||
data-tippy-content={I18NextService.i18n.t("downvote")}
|
|
||||||
aria-label={I18NextService.i18n.t("downvote")}
|
|
||||||
aria-pressed={this.commentView.my_vote === -1}
|
|
||||||
>
|
|
||||||
{this.state.downvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Icon icon="arrow-down1" classes="icon-inline" />
|
|
||||||
{showScores() &&
|
|
||||||
this.commentView.counts.upvotes !==
|
|
||||||
this.commentView.counts.score && (
|
|
||||||
<span className="ms-1">
|
|
||||||
{numToSI(this.commentView.counts.downvotes)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(this, this.handleReplyClick)}
|
onClick={linkEvent(this, this.handleReplyClick)}
|
||||||
|
@ -1483,24 +1426,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUpvote(i: CommentNode) {
|
|
||||||
i.setState({ upvoteLoading: true });
|
|
||||||
i.props.onCommentVote({
|
|
||||||
comment_id: i.commentId,
|
|
||||||
score: newVote(VoteType.Upvote, i.commentView.my_vote),
|
|
||||||
auth: myAuthRequired(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDownvote(i: CommentNode) {
|
|
||||||
i.setState({ downvoteLoading: true });
|
|
||||||
i.props.onCommentVote({
|
|
||||||
comment_id: i.commentId,
|
|
||||||
score: newVote(VoteType.Downvote, i.commentView.my_vote),
|
|
||||||
auth: myAuthRequired(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleBlockPerson(i: CommentNode) {
|
handleBlockPerson(i: CommentNode) {
|
||||||
i.setState({ blockPersonLoading: true });
|
i.setState({ blockPersonLoading: true });
|
||||||
i.props.onBlockPerson({
|
i.props.onBlockPerson({
|
||||||
|
|
|
@ -12,6 +12,10 @@ interface EmojiPickerState {
|
||||||
showPicker: boolean;
|
showPicker: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function closeEmojiMartOnEsc(i, event): void {
|
||||||
|
event.key === "Escape" && i.setState({ showPicker: false });
|
||||||
|
}
|
||||||
|
|
||||||
export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
||||||
private emptyState: EmojiPickerState = {
|
private emptyState: EmojiPickerState = {
|
||||||
showPicker: false,
|
showPicker: false,
|
||||||
|
@ -23,6 +27,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
||||||
this.state = this.emptyState;
|
this.state = this.emptyState;
|
||||||
this.handleEmojiClick = this.handleEmojiClick.bind(this);
|
this.handleEmojiClick = this.handleEmojiClick.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<span className="emoji-picker">
|
<span className="emoji-picker">
|
||||||
|
@ -38,13 +43,14 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
||||||
|
|
||||||
{this.state.showPicker && (
|
{this.state.showPicker && (
|
||||||
<>
|
<>
|
||||||
<div className="position-relative">
|
<div className="position-relative" role="dialog">
|
||||||
<div className="emoji-picker-container position-absolute w-100">
|
<div className="emoji-picker-container">
|
||||||
<EmojiMart
|
<EmojiMart
|
||||||
onEmojiClick={this.handleEmojiClick}
|
onEmojiClick={this.handleEmojiClick}
|
||||||
pickerOptions={{}}
|
pickerOptions={{}}
|
||||||
></EmojiMart>
|
></EmojiMart>
|
||||||
</div>
|
</div>
|
||||||
|
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||||
<div
|
<div
|
||||||
onClick={linkEvent(this, this.togglePicker)}
|
onClick={linkEvent(this, this.togglePicker)}
|
||||||
className="click-away-container"
|
className="click-away-container"
|
||||||
|
@ -56,9 +62,17 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
|
||||||
|
}
|
||||||
|
|
||||||
togglePicker(i: EmojiPicker, e: any) {
|
togglePicker(i: EmojiPicker, e: any) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
i.setState({ showPicker: !i.state.showPicker });
|
i.setState({ showPicker: !i.state.showPicker });
|
||||||
|
|
||||||
|
i.state.showPicker
|
||||||
|
? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
|
||||||
|
: document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEmojiClick(e: any) {
|
handleEmojiClick(e: any) {
|
||||||
|
|
|
@ -35,6 +35,7 @@ export class Icon extends Component<IconProps, any> {
|
||||||
|
|
||||||
interface SpinnerProps {
|
interface SpinnerProps {
|
||||||
large?: boolean;
|
large?: boolean;
|
||||||
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Spinner extends Component<SpinnerProps, any> {
|
export class Spinner extends Component<SpinnerProps, any> {
|
||||||
|
@ -46,7 +47,9 @@ export class Spinner extends Component<SpinnerProps, any> {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
icon="spinner"
|
icon="spinner"
|
||||||
classes={`spin ${this.props.large && "spinner-large"}`}
|
classes={classNames("spin", this.props.className, {
|
||||||
|
"spinner-large": this.props.large,
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,13 +33,12 @@ export class ImageUploadForm extends Component<
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<form className="image-upload-form d-inline">
|
<form className="image-upload-form d-inline">
|
||||||
<label
|
<label htmlFor={this.id} className="pointer text-muted small fw-bold">
|
||||||
htmlFor={this.id}
|
|
||||||
className="pointer text-muted small font-weight-bold"
|
|
||||||
>
|
|
||||||
{this.props.imageSrc ? (
|
{this.props.imageSrc ? (
|
||||||
<span className="d-inline-block position-relative">
|
<span className="d-inline-block position-relative">
|
||||||
|
{/* TODO: Create "Current Iamge" translation for alt text */}
|
||||||
<img
|
<img
|
||||||
|
alt=""
|
||||||
src={this.props.imageSrc}
|
src={this.props.imageSrc}
|
||||||
height={this.props.rounded ? 60 : ""}
|
height={this.props.rounded ? 60 : ""}
|
||||||
width={this.props.rounded ? 60 : ""}
|
width={this.props.rounded ? 60 : ""}
|
||||||
|
@ -47,12 +46,14 @@ export class ImageUploadForm extends Component<
|
||||||
this.props.rounded ? "rounded-circle" : ""
|
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)}
|
onClick={linkEvent(this, this.handleRemoveImage)}
|
||||||
aria-label={I18NextService.i18n.t("remove")}
|
aria-label={I18NextService.i18n.t("remove")}
|
||||||
>
|
>
|
||||||
<Icon icon="x" classes="mini-overlay" />
|
<Icon icon="x" classes="mini-overlay" />
|
||||||
</a>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span className="btn btn-secondary">{this.props.uploadTitle}</span>
|
<span className="btn btn-secondary">{this.props.uploadTitle}</span>
|
||||||
|
|
|
@ -23,15 +23,28 @@ import NavigationPrompt from "./navigation-prompt";
|
||||||
import ProgressBar from "./progress-bar";
|
import ProgressBar from "./progress-bar";
|
||||||
|
|
||||||
interface MarkdownTextAreaProps {
|
interface MarkdownTextAreaProps {
|
||||||
|
/**
|
||||||
|
* Initial content inside the textarea
|
||||||
|
*/
|
||||||
initialContent?: string;
|
initialContent?: string;
|
||||||
|
/**
|
||||||
|
* Numerical ID of the language to select in dropdown
|
||||||
|
*/
|
||||||
initialLanguageId?: number;
|
initialLanguageId?: number;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
buttonTitle?: string;
|
buttonTitle?: string;
|
||||||
maxLength?: number;
|
maxLength?: number;
|
||||||
|
/**
|
||||||
|
* Whether this form is for a reply to a Private Message.
|
||||||
|
* If true, a "Cancel" button is shown that will close the reply.
|
||||||
|
*/
|
||||||
replyType?: boolean;
|
replyType?: boolean;
|
||||||
focus?: boolean;
|
focus?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
finished?: boolean;
|
finished?: boolean;
|
||||||
|
/**
|
||||||
|
* Whether to show the language selector
|
||||||
|
*/
|
||||||
showLanguage?: boolean;
|
showLanguage?: boolean;
|
||||||
hideNavigationWarnings?: boolean;
|
hideNavigationWarnings?: boolean;
|
||||||
onContentChange?(val: string): void;
|
onContentChange?(val: string): void;
|
||||||
|
@ -154,7 +167,7 @@ export class MarkdownTextArea extends Component<
|
||||||
onEmojiClick={e => this.handleEmoji(this, e)}
|
onEmojiClick={e => this.handleEmoji(this, e)}
|
||||||
disabled={this.isDisabled}
|
disabled={this.isDisabled}
|
||||||
></EmojiPicker>
|
></EmojiPicker>
|
||||||
<form className="btn btn-sm text-muted font-weight-bold">
|
<form className="btn btn-sm text-muted fw-bold">
|
||||||
<label
|
<label
|
||||||
htmlFor={`file-upload-${this.id}`}
|
htmlFor={`file-upload-${this.id}`}
|
||||||
className={`mb-0 ${
|
className={`mb-0 ${
|
||||||
|
@ -197,7 +210,7 @@ export class MarkdownTextArea extends Component<
|
||||||
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
|
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
|
||||||
<a
|
<a
|
||||||
href={markdownHelpUrl}
|
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")}
|
title={I18NextService.i18n.t("formatting_help")}
|
||||||
rel={relTags}
|
rel={relTags}
|
||||||
>
|
>
|
||||||
|
@ -276,19 +289,6 @@ export class MarkdownTextArea extends Component<
|
||||||
{/* A flex expander */}
|
{/* A flex expander */}
|
||||||
<div className="flex-grow-1"></div>
|
<div className="flex-grow-1"></div>
|
||||||
|
|
||||||
{this.props.buttonTitle && (
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-secondary ms-2"
|
|
||||||
disabled={this.isDisabled}
|
|
||||||
>
|
|
||||||
{this.state.loading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<span>{this.props.buttonTitle}</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{this.props.replyType && (
|
{this.props.replyType && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -298,17 +298,27 @@ export class MarkdownTextArea extends Component<
|
||||||
{I18NextService.i18n.t("cancel")}
|
{I18NextService.i18n.t("cancel")}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{this.state.content && (
|
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm btn-secondary ms-2 ${
|
type="button"
|
||||||
this.state.previewMode && "active"
|
disabled={!this.state.content}
|
||||||
}`}
|
className={classNames("btn btn-sm btn-secondary ms-2", {
|
||||||
|
active: this.state.previewMode,
|
||||||
|
})}
|
||||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||||
>
|
>
|
||||||
{this.state.previewMode
|
{this.state.previewMode
|
||||||
? I18NextService.i18n.t("edit")
|
? I18NextService.i18n.t("edit")
|
||||||
: I18NextService.i18n.t("preview")}
|
: I18NextService.i18n.t("preview")}
|
||||||
</button>
|
</button>
|
||||||
|
{this.props.buttonTitle && (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-sm btn-secondary ms-2"
|
||||||
|
disabled={this.isDisabled || !this.state.content}
|
||||||
|
>
|
||||||
|
{this.state.loading && <Spinner className="me-1" />}
|
||||||
|
{this.props.buttonTitle}
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -39,7 +39,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-tippy-content={this.createdAndModifiedTimes()}
|
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" />
|
<Icon icon="edit-2" classes="icon-inline me-1" />
|
||||||
{formatPastDate(this.props.updated)}
|
{formatPastDate(this.props.updated)}
|
||||||
|
|
|
@ -106,8 +106,12 @@ export class SearchableSelect extends Component<
|
||||||
<button
|
<button
|
||||||
id={id}
|
id={id}
|
||||||
type="button"
|
type="button"
|
||||||
|
role="combobox"
|
||||||
className="form-select d-inline-block text-start"
|
className="form-select d-inline-block text-start"
|
||||||
aria-haspopup="listbox"
|
aria-haspopup="listbox"
|
||||||
|
aria-controls="searchable-select-input"
|
||||||
|
aria-activedescendant={options[selectedIndex].label}
|
||||||
|
aria-expanded={false}
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
onClick={linkEvent(this, focusSearch)}
|
onClick={linkEvent(this, focusSearch)}
|
||||||
ref={this.toggleButtonRef}
|
ref={this.toggleButtonRef}
|
||||||
|
@ -116,17 +120,14 @@ export class SearchableSelect extends Component<
|
||||||
? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
|
? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
|
||||||
: options[selectedIndex].label}
|
: options[selectedIndex].label}
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div className="modlog-choices-font-size dropdown-menu w-100 p-2">
|
||||||
role="combobox"
|
|
||||||
aria-activedescendant={options[selectedIndex].label}
|
|
||||||
className="modlog-choices-font-size dropdown-menu w-100 p-2"
|
|
||||||
>
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<span className="input-group-text">
|
<span className="input-group-text">
|
||||||
{loading ? <Spinner /> : <Icon icon="search" />}
|
{loading ? <Spinner /> : <Icon icon="search" />}
|
||||||
</span>
|
</span>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
id="searchable-select-input"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
ref={this.searchInputRef}
|
ref={this.searchInputRef}
|
||||||
onInput={linkEvent(this, handleSearch)}
|
onInput={linkEvent(this, handleSearch)}
|
||||||
|
|
225
src/shared/components/common/vote-buttons.tsx
Normal file
225
src/shared/components/common/vote-buttons.tsx
Normal file
|
@ -0,0 +1,225 @@
|
||||||
|
import { myAuthRequired, newVote, showScores } from "@utils/app";
|
||||||
|
import { numToSI } from "@utils/helpers";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import { Component, linkEvent } from "inferno";
|
||||||
|
import {
|
||||||
|
CommentAggregates,
|
||||||
|
CreateCommentLike,
|
||||||
|
CreatePostLike,
|
||||||
|
PostAggregates,
|
||||||
|
} from "lemmy-js-client";
|
||||||
|
import { VoteContentType, VoteType } from "../../interfaces";
|
||||||
|
import { I18NextService } from "../../services";
|
||||||
|
import { Icon, Spinner } from "../common/icon";
|
||||||
|
|
||||||
|
interface VoteButtonsProps {
|
||||||
|
voteContentType: VoteContentType;
|
||||||
|
id: number;
|
||||||
|
onVote: (i: CreateCommentLike | CreatePostLike) => void;
|
||||||
|
enableDownvotes?: boolean;
|
||||||
|
counts: CommentAggregates | PostAggregates;
|
||||||
|
my_vote?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VoteButtonsState {
|
||||||
|
upvoteLoading: boolean;
|
||||||
|
downvoteLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tippy = (counts: CommentAggregates | PostAggregates): string => {
|
||||||
|
const points = I18NextService.i18n.t("number_of_points", {
|
||||||
|
count: Number(counts.score),
|
||||||
|
formattedCount: Number(counts.score),
|
||||||
|
});
|
||||||
|
|
||||||
|
const upvotes = I18NextService.i18n.t("number_of_upvotes", {
|
||||||
|
count: Number(counts.upvotes),
|
||||||
|
formattedCount: Number(counts.upvotes),
|
||||||
|
});
|
||||||
|
|
||||||
|
const downvotes = I18NextService.i18n.t("number_of_downvotes", {
|
||||||
|
count: Number(counts.downvotes),
|
||||||
|
formattedCount: Number(counts.downvotes),
|
||||||
|
});
|
||||||
|
|
||||||
|
return `${points} • ${upvotes} • ${downvotes}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpvote = (i: VoteButtons) => {
|
||||||
|
i.setState({ upvoteLoading: true });
|
||||||
|
|
||||||
|
switch (i.props.voteContentType) {
|
||||||
|
case VoteContentType.Comment:
|
||||||
|
i.props.onVote({
|
||||||
|
comment_id: i.props.id,
|
||||||
|
score: newVote(VoteType.Upvote, i.props.my_vote),
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case VoteContentType.Post:
|
||||||
|
default:
|
||||||
|
i.props.onVote({
|
||||||
|
post_id: i.props.id,
|
||||||
|
score: newVote(VoteType.Upvote, i.props.my_vote),
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
i.setState({ upvoteLoading: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownvote = (i: VoteButtons) => {
|
||||||
|
i.setState({ downvoteLoading: true });
|
||||||
|
switch (i.props.voteContentType) {
|
||||||
|
case VoteContentType.Comment:
|
||||||
|
i.props.onVote({
|
||||||
|
comment_id: i.props.id,
|
||||||
|
score: newVote(VoteType.Downvote, i.props.my_vote),
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case VoteContentType.Post:
|
||||||
|
default:
|
||||||
|
i.props.onVote({
|
||||||
|
post_id: i.props.id,
|
||||||
|
score: newVote(VoteType.Downvote, i.props.my_vote),
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
i.setState({ downvoteLoading: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
export class VoteButtonsCompact extends Component<
|
||||||
|
VoteButtonsProps,
|
||||||
|
VoteButtonsState
|
||||||
|
> {
|
||||||
|
state: VoteButtonsState = {
|
||||||
|
upvoteLoading: false,
|
||||||
|
downvoteLoading: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn-animate btn py-0 px-1 ${
|
||||||
|
this.props.my_vote === 1 ? "text-info" : "text-muted"
|
||||||
|
}`}
|
||||||
|
data-tippy-content={tippy(this.props.counts)}
|
||||||
|
onClick={linkEvent(this, handleUpvote)}
|
||||||
|
aria-label={I18NextService.i18n.t("upvote")}
|
||||||
|
aria-pressed={this.props.my_vote === 1}
|
||||||
|
>
|
||||||
|
{this.state.upvoteLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Icon icon="arrow-up1" classes="icon-inline small" />
|
||||||
|
{showScores() && (
|
||||||
|
<span className="ms-2">
|
||||||
|
{numToSI(this.props.counts.upvotes)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
{this.props.enableDownvotes && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ms-2 btn-animate btn py-0 px-1 ${
|
||||||
|
this.props.my_vote === -1 ? "text-danger" : "text-muted"
|
||||||
|
}`}
|
||||||
|
onClick={linkEvent(this, handleDownvote)}
|
||||||
|
data-tippy-content={tippy(this.props.counts)}
|
||||||
|
aria-label={I18NextService.i18n.t("downvote")}
|
||||||
|
aria-pressed={this.props.my_vote === -1}
|
||||||
|
>
|
||||||
|
{this.state.downvoteLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Icon icon="arrow-down1" classes="icon-inline small" />
|
||||||
|
{showScores() && (
|
||||||
|
<span
|
||||||
|
className={classNames("ms-2", {
|
||||||
|
invisible: this.props.counts.downvotes === 0,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{numToSI(this.props.counts.downvotes)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
||||||
|
state: VoteButtonsState = {
|
||||||
|
upvoteLoading: false,
|
||||||
|
downvoteLoading: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className={`vote-bar col-1 pe-0 small text-center`}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn-animate btn btn-link p-0 ${
|
||||||
|
this.props.my_vote == 1 ? "text-info" : "text-muted"
|
||||||
|
}`}
|
||||||
|
onClick={linkEvent(this, handleUpvote)}
|
||||||
|
data-tippy-content={I18NextService.i18n.t("upvote")}
|
||||||
|
aria-label={I18NextService.i18n.t("upvote")}
|
||||||
|
aria-pressed={this.props.my_vote === 1}
|
||||||
|
>
|
||||||
|
{this.state.upvoteLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<Icon icon="arrow-up1" classes="upvote" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
{showScores() ? (
|
||||||
|
<div
|
||||||
|
className={`unselectable pointer text-muted px-1 post-score`}
|
||||||
|
data-tippy-content={tippy(this.props.counts)}
|
||||||
|
>
|
||||||
|
{numToSI(this.props.counts.score)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="p-1"></div>
|
||||||
|
)}
|
||||||
|
{this.props.enableDownvotes && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn-animate btn btn-link p-0 ${
|
||||||
|
this.props.my_vote == -1 ? "text-danger" : "text-muted"
|
||||||
|
}`}
|
||||||
|
onClick={linkEvent(this, handleDownvote)}
|
||||||
|
data-tippy-content={I18NextService.i18n.t("downvote")}
|
||||||
|
aria-label={I18NextService.i18n.t("downvote")}
|
||||||
|
aria-pressed={this.props.my_vote === -1}
|
||||||
|
>
|
||||||
|
{this.state.downvoteLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<Icon icon="arrow-down1" classes="downvote" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -204,17 +204,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{community.removed && (
|
{community.removed && (
|
||||||
<small className="me-2 text-muted font-italic">
|
<small className="me-2 text-muted fst-italic">
|
||||||
{I18NextService.i18n.t("removed")}
|
{I18NextService.i18n.t("removed")}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
{community.deleted && (
|
{community.deleted && (
|
||||||
<small className="me-2 text-muted font-italic">
|
<small className="me-2 text-muted fst-italic">
|
||||||
{I18NextService.i18n.t("deleted")}
|
{I18NextService.i18n.t("deleted")}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
{community.nsfw && (
|
{community.nsfw && (
|
||||||
<small className="me-2 text-muted font-italic">
|
<small className="me-2 text-muted fst-italic">
|
||||||
{I18NextService.i18n.t("nsfw")}
|
{I18NextService.i18n.t("nsfw")}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
|
@ -309,7 +309,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
const community_view = this.props.community_view;
|
const community_view = this.props.community_view;
|
||||||
return (
|
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) && (
|
{amMod(this.props.moderators) && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item-action">
|
||||||
|
|
|
@ -44,7 +44,6 @@ interface AdminSettingsState {
|
||||||
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
||||||
bannedRes: RequestState<BannedPersonsResponse>;
|
bannedRes: RequestState<BannedPersonsResponse>;
|
||||||
leaveAdminTeamRes: RequestState<GetSiteResponse>;
|
leaveAdminTeamRes: RequestState<GetSiteResponse>;
|
||||||
emojiLoading: boolean;
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
themeList: string[];
|
themeList: string[];
|
||||||
isIsomorphic: boolean;
|
isIsomorphic: boolean;
|
||||||
|
@ -59,7 +58,6 @@ 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,
|
loading: false,
|
||||||
themeList: [],
|
themeList: [],
|
||||||
isIsomorphic: false,
|
isIsomorphic: false,
|
||||||
|
@ -215,7 +213,6 @@ 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>
|
||||||
</div>
|
</div>
|
||||||
|
@ -345,35 +342,23 @@ 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 });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { myAuthRequired, setIsoData } from "@utils/app";
|
import { myAuthRequired, setIsoData } from "@utils/app";
|
||||||
|
import { capitalizeFirstLetter } from "@utils/helpers";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
CreateCustomEmoji,
|
CreateCustomEmoji,
|
||||||
|
@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
|
||||||
import { pictrsDeleteToast, toast } from "../../toast";
|
import { pictrsDeleteToast, toast } from "../../toast";
|
||||||
import { EmojiMart } from "../common/emoji-mart";
|
import { EmojiMart } from "../common/emoji-mart";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { Paginator } from "../common/paginator";
|
import { Paginator } from "../common/paginator";
|
||||||
|
|
||||||
interface EmojiFormProps {
|
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 {
|
||||||
|
@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
|
||||||
keywords: string;
|
keywords: string;
|
||||||
changed: boolean;
|
changed: boolean;
|
||||||
page: number;
|
page: number;
|
||||||
|
loading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
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(" "),
|
keywords: x.keywords.map(x => x.keyword).join(" "),
|
||||||
changed: false,
|
changed: false,
|
||||||
page: 1 + Math.floor(index / this.itemsPerPage),
|
page: 1 + Math.floor(index / this.itemsPerPage),
|
||||||
|
loading: false,
|
||||||
})),
|
})),
|
||||||
page: 1,
|
page: 1,
|
||||||
};
|
};
|
||||||
|
@ -119,25 +121,28 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
.map((cv, index) => (
|
.map((cv, index) => (
|
||||||
<tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
|
<tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
|
||||||
<td style="text-align:center;">
|
<td style="text-align:center;">
|
||||||
<label
|
|
||||||
htmlFor={index.toString()}
|
|
||||||
className="pointer text-muted small font-weight-bold"
|
|
||||||
>
|
|
||||||
{cv.image_url.length > 0 && (
|
{cv.image_url.length > 0 && (
|
||||||
<img
|
<img
|
||||||
className="icon-emoji-admin"
|
className="icon-emoji-admin"
|
||||||
src={cv.image_url}
|
src={cv.image_url}
|
||||||
|
alt={cv.alt_text}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{cv.image_url.length == 0 && (
|
{cv.image_url.length === 0 && (
|
||||||
<span className="btn btn-sm btn-secondary">
|
<form>
|
||||||
Upload
|
<label
|
||||||
</span>
|
className="btn btn-sm btn-secondary pointer"
|
||||||
|
htmlFor={`file-uploader-${index}`}
|
||||||
|
data-tippy-content={I18NextService.i18n.t(
|
||||||
|
"upload_image"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{capitalizeFirstLetter(
|
||||||
|
I18NextService.i18n.t("upload")
|
||||||
)}
|
)}
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
name={index.toString()}
|
name={`file-uploader-${index}`}
|
||||||
id={index.toString()}
|
id={`file-uploader-${index}`}
|
||||||
type="file"
|
type="file"
|
||||||
accept="image/*"
|
accept="image/*"
|
||||||
className="d-none"
|
className="d-none"
|
||||||
|
@ -146,6 +151,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
this.handleImageUpload
|
this.handleImageUpload
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-right">
|
<td className="text-right">
|
||||||
<input
|
<input
|
||||||
|
@ -213,8 +221,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
<span title={this.getEditTooltip(cv)}>
|
<span title={this.getEditTooltip(cv)}>
|
||||||
<button
|
<button
|
||||||
className={
|
className={
|
||||||
(cv.changed ? "text-success " : "text-muted ") +
|
(this.canEdit(cv)
|
||||||
"btn btn-link btn-animate"
|
? "text-success "
|
||||||
|
: "text-muted ") + "btn btn-link btn-animate"
|
||||||
}
|
}
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ i: this, cv: cv },
|
{ i: this, cv: cv },
|
||||||
|
@ -222,17 +231,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
)}
|
)}
|
||||||
data-tippy-content={I18NextService.i18n.t("save")}
|
data-tippy-content={I18NextService.i18n.t("save")}
|
||||||
aria-label={I18NextService.i18n.t("save")}
|
aria-label={I18NextService.i18n.t("save")}
|
||||||
disabled={
|
disabled={!this.canEdit(cv)}
|
||||||
this.props.loading ||
|
|
||||||
!this.canEdit(cv) ||
|
|
||||||
!cv.changed
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{/* <Icon
|
{cv.loading ? (
|
||||||
icon="edit"
|
<Spinner />
|
||||||
classes={`icon-inline`}
|
) : (
|
||||||
/> */}
|
capitalizeFirstLetter(
|
||||||
Save
|
I18NextService.i18n.t("save")
|
||||||
|
)
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
|
@ -243,7 +250,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
)}
|
)}
|
||||||
data-tippy-content={I18NextService.i18n.t("delete")}
|
data-tippy-content={I18NextService.i18n.t("delete")}
|
||||||
aria-label={I18NextService.i18n.t("delete")}
|
aria-label={I18NextService.i18n.t("delete")}
|
||||||
disabled={this.props.loading}
|
disabled={cv.loading}
|
||||||
title={I18NextService.i18n.t("delete")}
|
title={I18NextService.i18n.t("delete")}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
|
@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
this.state.customEmojis.filter(
|
this.state.customEmojis.filter(
|
||||||
x => x.shortcode == cv.shortcode && x.id != cv.id
|
x => x.shortcode == cv.shortcode && x.id != cv.id
|
||||||
).length == 0;
|
).length == 0;
|
||||||
return noEmptyFields && noDuplicateShortCodes;
|
return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
|
||||||
}
|
}
|
||||||
|
|
||||||
getEditTooltip(cv: CustomEmojiViewForm) {
|
getEditTooltip(cv: CustomEmojiViewForm) {
|
||||||
|
@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEmojiImageUrlChange(
|
handleEmojiImageUrlChange(
|
||||||
props: { form: EmojiForm; index: number; overrideValue: string | null },
|
{
|
||||||
|
form,
|
||||||
|
index,
|
||||||
|
overrideValue,
|
||||||
|
}: { form: EmojiForm; index: number; overrideValue: string | null },
|
||||||
event: any
|
event: any
|
||||||
) {
|
) {
|
||||||
const custom_emojis = [...props.form.state.customEmojis];
|
form.setState(prevState => {
|
||||||
const pagedIndex =
|
const custom_emojis = [...form.state.customEmojis];
|
||||||
(props.form.state.page - 1) * props.form.itemsPerPage + props.index;
|
const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
|
||||||
const item = {
|
const item = {
|
||||||
...props.form.state.customEmojis[pagedIndex],
|
...form.state.customEmojis[pagedIndex],
|
||||||
image_url: props.overrideValue ?? event.target.value,
|
image_url: overrideValue ?? event.target.value,
|
||||||
changed: true,
|
changed: true,
|
||||||
};
|
};
|
||||||
custom_emojis[Number(pagedIndex)] = item;
|
custom_emojis[Number(pagedIndex)] = item;
|
||||||
props.form.setState({ customEmojis: custom_emojis });
|
return {
|
||||||
|
...prevState,
|
||||||
|
customEmojis: prevState.customEmojis.map((ce, i) =>
|
||||||
|
i === pagedIndex
|
||||||
|
? {
|
||||||
|
...ce,
|
||||||
|
image_url: overrideValue ?? event.target.value,
|
||||||
|
changed: true,
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
: ce
|
||||||
|
),
|
||||||
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEmojiAltTextChange(
|
handleEmojiAltTextChange(
|
||||||
|
@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.filter(x => x.length > 0) as string[];
|
.filter(x => x.length > 0) as string[];
|
||||||
const uniqueKeywords = Array.from(new Set(keywords));
|
const uniqueKeywords = Array.from(new Set(keywords));
|
||||||
if (d.cv.id != 0) {
|
if (d.cv.id !== 0) {
|
||||||
d.i.props.onEdit({
|
d.i.props.onEdit({
|
||||||
id: d.cv.id,
|
id: d.cv.id,
|
||||||
category: d.cv.category,
|
category: d.cv.category,
|
||||||
|
@ -432,9 +456,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
|
|
||||||
handleAddEmojiClick(form: EmojiForm, event: any) {
|
handleAddEmojiClick(form: EmojiForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const custom_emojis = [...form.state.customEmojis];
|
form.setState(prevState => {
|
||||||
const page =
|
const page =
|
||||||
1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
|
1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
|
||||||
const item: CustomEmojiViewForm = {
|
const item: CustomEmojiViewForm = {
|
||||||
id: 0,
|
id: 0,
|
||||||
shortcode: "",
|
shortcode: "",
|
||||||
|
@ -442,14 +466,23 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
category: "",
|
category: "",
|
||||||
image_url: "",
|
image_url: "",
|
||||||
keywords: "",
|
keywords: "",
|
||||||
changed: true,
|
changed: false,
|
||||||
page: page,
|
page: page,
|
||||||
|
loading: false,
|
||||||
};
|
};
|
||||||
custom_emojis.push(item);
|
|
||||||
form.setState({ customEmojis: custom_emojis, page: page });
|
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;
|
let file: any;
|
||||||
if (event.target) {
|
if (event.target) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
file = event;
|
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 => {
|
HttpService.client.uploadImage({ image: file }).then(res => {
|
||||||
console.log("pictrs upload:");
|
console.log("pictrs upload:");
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.state === "success") {
|
if (res.state === "success") {
|
||||||
if (res.data.msg === "ok") {
|
if (res.data.msg === "ok") {
|
||||||
pictrsDeleteToast(file.name, res.data.delete_url as string);
|
pictrsDeleteToast(file.name, res.data.delete_url as string);
|
||||||
} else {
|
form.handleEmojiImageUrlChange(
|
||||||
toast(JSON.stringify(res), "danger");
|
{ form: form, index: index, overrideValue: res.data.url as string },
|
||||||
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 },
|
|
||||||
event
|
event
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
toast(JSON.stringify(res), "danger");
|
||||||
}
|
}
|
||||||
} else if (res.state === "failed") {
|
} else if (res.state === "failed") {
|
||||||
console.error(res.msg);
|
console.error(res.msg);
|
||||||
|
|
|
@ -108,7 +108,7 @@ export class Login extends Component<any, State> {
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={linkEvent(this, this.handlePasswordReset)}
|
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={
|
disabled={
|
||||||
!!this.state.form.username_or_email &&
|
!!this.state.form.username_or_email &&
|
||||||
!validEmail(this.state.form.username_or_email)
|
!validEmail(this.state.form.username_or_email)
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { Post } from "lemmy-js-client";
|
import { Post } from "lemmy-js-client";
|
||||||
import * as sanitizeHtml from "sanitize-html";
|
import * as sanitizeHtml from "sanitize-html";
|
||||||
import { relTags } from "../../config";
|
import { relTags } from "../../config";
|
||||||
import { I18NextService } from "../../services";
|
|
||||||
import { Icon } from "../common/icon";
|
import { Icon } from "../common/icon";
|
||||||
|
|
||||||
interface MetadataCardProps {
|
interface MetadataCardProps {
|
||||||
|
@ -17,10 +16,6 @@ export class MetadataCard extends Component<
|
||||||
MetadataCardProps,
|
MetadataCardProps,
|
||||||
MetadataCardState
|
MetadataCardState
|
||||||
> {
|
> {
|
||||||
state: MetadataCardState = {
|
|
||||||
expanded: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
@ -29,7 +24,7 @@ export class MetadataCard extends Component<
|
||||||
const post = this.props.post;
|
const post = this.props.post;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!this.state.expanded && post.embed_title && post.url && (
|
{post.embed_title && post.url && (
|
||||||
<div className="post-metadata-card card border-secondary mt-3 mb-2">
|
<div className="post-metadata-card card border-secondary mt-3 mb-2">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
@ -43,7 +38,7 @@ export class MetadataCard extends Component<
|
||||||
</h5>
|
</h5>
|
||||||
<span className="d-inline-block ms-2 mb-2 small text-muted">
|
<span className="d-inline-block ms-2 mb-2 small text-muted">
|
||||||
<a
|
<a
|
||||||
className="text-muted font-italic"
|
className="text-muted fst-italic"
|
||||||
href={post.url}
|
href={post.url}
|
||||||
rel={relTags}
|
rel={relTags}
|
||||||
>
|
>
|
||||||
|
@ -61,34 +56,12 @@ export class MetadataCard extends Component<
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{post.embed_video_url && (
|
|
||||||
<button
|
|
||||||
className="mt-2 btn btn-secondary text-monospace"
|
|
||||||
onClick={linkEvent(this, this.handleIframeExpand)}
|
|
||||||
>
|
|
||||||
{I18NextService.i18n.t("expand_here")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{this.state.expanded && post.embed_video_url && (
|
|
||||||
<div className="ratio ratio-16x9">
|
|
||||||
<iframe
|
|
||||||
allowFullScreen
|
|
||||||
className="post-metadata-iframe"
|
|
||||||
src={post.embed_video_url}
|
|
||||||
title={post.embed_title}
|
|
||||||
></iframe>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleIframeExpand(i: MetadataCard) {
|
|
||||||
i.setState({ expanded: !i.state.expanded });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -358,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
htmlFor="file-upload"
|
htmlFor="file-upload"
|
||||||
className={`${
|
className={`${
|
||||||
UserService.Instance.myUserInfo && "pointer"
|
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")}
|
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||||
>
|
>
|
||||||
<Icon icon="image" classes="icon-inline" />
|
<Icon icon="image" classes="icon-inline" />
|
||||||
|
@ -377,7 +377,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
<div>
|
<div>
|
||||||
<a
|
<a
|
||||||
href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
|
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}
|
rel={relTags}
|
||||||
>
|
>
|
||||||
archive.org {I18NextService.i18n.t("archive_link")}
|
archive.org {I18NextService.i18n.t("archive_link")}
|
||||||
|
@ -386,7 +386,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
|
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
|
||||||
url
|
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}
|
rel={relTags}
|
||||||
>
|
>
|
||||||
ghostarchive.org {I18NextService.i18n.t("archive_link")}
|
ghostarchive.org {I18NextService.i18n.t("archive_link")}
|
||||||
|
@ -395,7 +395,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
|
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
|
||||||
url
|
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}
|
rel={relTags}
|
||||||
>
|
>
|
||||||
archive.today {I18NextService.i18n.t("archive_link")}
|
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 && (
|
{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")}
|
{I18NextService.i18n.t("cross_posts")}
|
||||||
</div>
|
</div>
|
||||||
<PostListings
|
<PostListings
|
||||||
|
@ -585,9 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
suggestedTitle && (
|
suggestedTitle && (
|
||||||
<div
|
<button
|
||||||
className="mt-1 text-muted small font-weight-bold pointer"
|
type="button"
|
||||||
role="button"
|
className="mt-1 small border-0 bg-transparent p-0 d-block text-muted fw-bold pointer"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ i: this, suggestedTitle },
|
{ i: this, suggestedTitle },
|
||||||
copySuggestedTitle
|
copySuggestedTitle
|
||||||
|
@ -595,7 +595,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
>
|
>
|
||||||
{I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
|
{I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
|
||||||
{suggestedTitle}
|
{suggestedTitle}
|
||||||
</div>
|
</button>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -613,7 +613,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
suggestedPosts &&
|
suggestedPosts &&
|
||||||
suggestedPosts.length > 0 && (
|
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")}
|
{I18NextService.i18n.t("related_posts")}
|
||||||
</div>
|
</div>
|
||||||
<PostListings
|
<PostListings
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { myAuthRequired, newVote, showScores } from "@utils/app";
|
import { myAuthRequired } from "@utils/app";
|
||||||
import { canShare, share } from "@utils/browser";
|
import { canShare, share } from "@utils/browser";
|
||||||
import { getExternalHost, getHttpBase } from "@utils/env";
|
import { getExternalHost, getHttpBase } from "@utils/env";
|
||||||
import {
|
import {
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
futureDaysToUnixTime,
|
futureDaysToUnixTime,
|
||||||
hostname,
|
hostname,
|
||||||
numToSI,
|
|
||||||
} from "@utils/helpers";
|
} from "@utils/helpers";
|
||||||
import { isImage, isVideo } from "@utils/media";
|
import { isImage, isVideo } from "@utils/media";
|
||||||
import {
|
import {
|
||||||
|
@ -44,13 +43,19 @@ import {
|
||||||
TransferCommunity,
|
TransferCommunity,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { relTags } from "../../config";
|
import { relTags } from "../../config";
|
||||||
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
|
import {
|
||||||
|
BanType,
|
||||||
|
PostFormParams,
|
||||||
|
PurgeType,
|
||||||
|
VoteContentType,
|
||||||
|
} from "../../interfaces";
|
||||||
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
|
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
|
||||||
import { I18NextService, UserService } from "../../services";
|
import { I18NextService, UserService } from "../../services";
|
||||||
import { setupTippy } from "../../tippy";
|
import { setupTippy } from "../../tippy";
|
||||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||||
import { MomentTime } from "../common/moment-time";
|
import { MomentTime } from "../common/moment-time";
|
||||||
import { PictrsImage } from "../common/pictrs-image";
|
import { PictrsImage } from "../common/pictrs-image";
|
||||||
|
import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
|
||||||
import { CommunityLink } from "../community/community-link";
|
import { CommunityLink } from "../community/community-link";
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
import { MetadataCard } from "./metadata-card";
|
import { MetadataCard } from "./metadata-card";
|
||||||
|
@ -78,8 +83,6 @@ interface PostListingState {
|
||||||
showBody: boolean;
|
showBody: boolean;
|
||||||
showReportDialog: boolean;
|
showReportDialog: boolean;
|
||||||
reportReason?: string;
|
reportReason?: string;
|
||||||
upvoteLoading: boolean;
|
|
||||||
downvoteLoading: boolean;
|
|
||||||
reportLoading: boolean;
|
reportLoading: boolean;
|
||||||
blockLoading: boolean;
|
blockLoading: boolean;
|
||||||
lockLoading: boolean;
|
lockLoading: boolean;
|
||||||
|
@ -142,8 +145,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
showMoreMobile: false,
|
showMoreMobile: false,
|
||||||
showBody: false,
|
showBody: false,
|
||||||
showReportDialog: false,
|
showReportDialog: false,
|
||||||
upvoteLoading: false,
|
|
||||||
downvoteLoading: false,
|
|
||||||
purgeLoading: false,
|
purgeLoading: false,
|
||||||
reportLoading: false,
|
reportLoading: false,
|
||||||
blockLoading: false,
|
blockLoading: false,
|
||||||
|
@ -169,8 +170,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
componentWillReceiveProps(nextProps: PostListingProps) {
|
componentWillReceiveProps(nextProps: PostListingProps) {
|
||||||
if (this.props !== nextProps) {
|
if (this.props !== nextProps) {
|
||||||
this.setState({
|
this.setState({
|
||||||
upvoteLoading: false,
|
|
||||||
downvoteLoading: false,
|
|
||||||
purgeLoading: false,
|
purgeLoading: false,
|
||||||
reportLoading: false,
|
reportLoading: false,
|
||||||
blockLoading: false,
|
blockLoading: false,
|
||||||
|
@ -248,12 +247,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="my-2 d-block d-sm-none">
|
<div className="my-2 d-block d-sm-none">
|
||||||
<a
|
<button
|
||||||
className="d-inline-block"
|
type="button"
|
||||||
|
className="p-0 border-0 bg-transparent d-inline-block"
|
||||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||||
>
|
>
|
||||||
<PictrsImage src={this.imageSrc} />
|
<PictrsImage src={this.imageSrc} />
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -262,6 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
const { post } = this.postView;
|
const { post } = this.postView;
|
||||||
const { url } = post;
|
const { url } = post;
|
||||||
|
|
||||||
|
// if direct video link
|
||||||
if (url && isVideo(url)) {
|
if (url && isVideo(url)) {
|
||||||
return (
|
return (
|
||||||
<div className="embed-responsive mt-3">
|
<div className="embed-responsive mt-3">
|
||||||
|
@ -272,6 +273,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if embedded video link
|
||||||
|
if (url && post.embed_video_url) {
|
||||||
|
return (
|
||||||
|
<div className="ratio ratio-16x9">
|
||||||
|
<iframe
|
||||||
|
allowFullScreen
|
||||||
|
className="post-metadata-iframe"
|
||||||
|
src={post.embed_video_url}
|
||||||
|
title={post.embed_title}
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -338,7 +353,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
} else if (url) {
|
} else if (url) {
|
||||||
if (!this.props.hideImage && isVideo(url)) {
|
if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
className="text-body"
|
className="text-body"
|
||||||
|
@ -423,55 +438,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
voteBar() {
|
|
||||||
return (
|
|
||||||
<div className={`vote-bar col-1 pe-0 small text-center`}>
|
|
||||||
<button
|
|
||||||
className={`btn-animate btn btn-link p-0 ${
|
|
||||||
this.postView.my_vote == 1 ? "text-info" : "text-muted"
|
|
||||||
}`}
|
|
||||||
onClick={linkEvent(this, this.handleUpvote)}
|
|
||||||
data-tippy-content={I18NextService.i18n.t("upvote")}
|
|
||||||
aria-label={I18NextService.i18n.t("upvote")}
|
|
||||||
aria-pressed={this.postView.my_vote === 1}
|
|
||||||
>
|
|
||||||
{this.state.upvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<Icon icon="arrow-up1" classes="upvote" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{showScores() ? (
|
|
||||||
<div
|
|
||||||
className={`unselectable pointer text-muted px-1 post-score`}
|
|
||||||
data-tippy-content={this.pointsTippy}
|
|
||||||
>
|
|
||||||
{numToSI(this.postView.counts.score)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="p-1"></div>
|
|
||||||
)}
|
|
||||||
{this.props.enableDownvotes && (
|
|
||||||
<button
|
|
||||||
className={`btn-animate btn btn-link p-0 ${
|
|
||||||
this.postView.my_vote == -1 ? "text-danger" : "text-muted"
|
|
||||||
}`}
|
|
||||||
onClick={linkEvent(this, this.handleDownvote)}
|
|
||||||
data-tippy-content={I18NextService.i18n.t("downvote")}
|
|
||||||
aria-label={I18NextService.i18n.t("downvote")}
|
|
||||||
aria-pressed={this.postView.my_vote === -1}
|
|
||||||
>
|
|
||||||
{this.state.downvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<Icon icon="arrow-down1" classes="downvote" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
get postLink() {
|
get postLink() {
|
||||||
const post = this.postView.post;
|
const post = this.postView.post;
|
||||||
return (
|
return (
|
||||||
|
@ -538,7 +504,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
)}
|
)}
|
||||||
{post.deleted && (
|
{post.deleted && (
|
||||||
<small
|
<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")}
|
data-tippy-content={I18NextService.i18n.t("deleted")}
|
||||||
>
|
>
|
||||||
<Icon icon="trash" classes="icon-inline text-danger" />
|
<Icon icon="trash" classes="icon-inline text-danger" />
|
||||||
|
@ -546,7 +512,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
)}
|
)}
|
||||||
{post.locked && (
|
{post.locked && (
|
||||||
<small
|
<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")}
|
data-tippy-content={I18NextService.i18n.t("locked")}
|
||||||
>
|
>
|
||||||
<Icon icon="lock" classes="icon-inline text-danger" />
|
<Icon icon="lock" classes="icon-inline text-danger" />
|
||||||
|
@ -554,7 +520,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
)}
|
)}
|
||||||
{post.featured_community && (
|
{post.featured_community && (
|
||||||
<small
|
<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(
|
data-tippy-content={I18NextService.i18n.t(
|
||||||
"featured_in_community"
|
"featured_in_community"
|
||||||
)}
|
)}
|
||||||
|
@ -565,7 +531,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
)}
|
)}
|
||||||
{post.featured_local && (
|
{post.featured_local && (
|
||||||
<small
|
<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")}
|
data-tippy-content={I18NextService.i18n.t("featured_in_local")}
|
||||||
aria-label={I18NextService.i18n.t("featured_in_local")}
|
aria-label={I18NextService.i18n.t("featured_in_local")}
|
||||||
>
|
>
|
||||||
|
@ -591,7 +557,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
<p className="d-flex text-muted align-items-center gap-1 small m-0">
|
<p className="d-flex text-muted align-items-center gap-1 small m-0">
|
||||||
{url && !(hostname(url) === getExternalHost()) && (
|
{url && !(hostname(url) === getExternalHost()) && (
|
||||||
<a
|
<a
|
||||||
className="text-muted font-italic"
|
className="text-muted fst-italic"
|
||||||
href={url}
|
href={url}
|
||||||
title={url}
|
title={url}
|
||||||
rel={relTags}
|
rel={relTags}
|
||||||
|
@ -651,7 +617,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
<Icon icon="fedilink" inline />
|
<Icon icon="fedilink" inline />
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
{mobile && !this.props.viewOnly && this.mobileVotes}
|
{mobile && !this.props.viewOnly && (
|
||||||
|
<VoteButtonsCompact
|
||||||
|
voteContentType={VoteContentType.Post}
|
||||||
|
id={this.postView.post.id}
|
||||||
|
onVote={this.props.onPostVote}
|
||||||
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
|
counts={this.postView.counts}
|
||||||
|
my_vote={this.postView.my_vote}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{UserService.Instance.myUserInfo &&
|
{UserService.Instance.myUserInfo &&
|
||||||
!this.props.viewOnly &&
|
!this.props.viewOnly &&
|
||||||
this.postActions()}
|
this.postActions()}
|
||||||
|
@ -707,13 +682,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
data-tippy-content={I18NextService.i18n.t("more")}
|
data-tippy-content={I18NextService.i18n.t("more")}
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-controls="advancedButtonsDropdown"
|
aria-controls={`advancedButtonsDropdown${post.id}`}
|
||||||
aria-label={I18NextService.i18n.t("more")}
|
aria-label={I18NextService.i18n.t("more")}
|
||||||
>
|
>
|
||||||
<Icon icon="more-vertical" inline />
|
<Icon icon="more-vertical" inline />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul className="dropdown-menu" id="advancedButtonsDropdown">
|
<ul
|
||||||
|
className="dropdown-menu"
|
||||||
|
id={`advancedButtonsDropdown${post.id}`}
|
||||||
|
>
|
||||||
{!this.myPost ? (
|
{!this.myPost ? (
|
||||||
<>
|
<>
|
||||||
<li>{this.reportButton}</li>
|
<li>{this.reportButton}</li>
|
||||||
|
@ -763,9 +741,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
<Icon icon="message-square" classes="me-1" inline />
|
<Icon icon="message-square" classes="me-1" inline />
|
||||||
{post_view.counts.comments}
|
{post_view.counts.comments}
|
||||||
{this.unreadCount && (
|
{this.unreadCount && (
|
||||||
<span className="text-muted fst-italic">
|
<>
|
||||||
|
{" "}
|
||||||
|
<span className="fst-italic">
|
||||||
({this.unreadCount} {I18NextService.i18n.t("new")})
|
({this.unreadCount} {I18NextService.i18n.t("new")})
|
||||||
</span>
|
</span>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
@ -778,69 +759,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
: pv.unread_comments;
|
: pv.unread_comments;
|
||||||
}
|
}
|
||||||
|
|
||||||
get mobileVotes() {
|
|
||||||
// TODO: make nicer
|
|
||||||
const tippy = showScores()
|
|
||||||
? { "data-tippy-content": this.pointsTippy }
|
|
||||||
: {};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
className={`btn-animate btn py-0 px-1 ${
|
|
||||||
this.postView.my_vote === 1 ? "text-info" : "text-muted"
|
|
||||||
}`}
|
|
||||||
{...tippy}
|
|
||||||
onClick={linkEvent(this, this.handleUpvote)}
|
|
||||||
aria-label={I18NextService.i18n.t("upvote")}
|
|
||||||
aria-pressed={this.postView.my_vote === 1}
|
|
||||||
>
|
|
||||||
{this.state.upvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Icon icon="arrow-up1" classes="icon-inline small" />
|
|
||||||
{showScores() && (
|
|
||||||
<span className="ms-2">
|
|
||||||
{numToSI(this.postView.counts.upvotes)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{this.props.enableDownvotes && (
|
|
||||||
<button
|
|
||||||
className={`ms-2 btn-animate btn py-0 px-1 ${
|
|
||||||
this.postView.my_vote === -1 ? "text-danger" : "text-muted"
|
|
||||||
}`}
|
|
||||||
onClick={linkEvent(this, this.handleDownvote)}
|
|
||||||
{...tippy}
|
|
||||||
aria-label={I18NextService.i18n.t("downvote")}
|
|
||||||
aria-pressed={this.postView.my_vote === -1}
|
|
||||||
>
|
|
||||||
{this.state.downvoteLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Icon icon="arrow-down1" classes="icon-inline small" />
|
|
||||||
{showScores() && (
|
|
||||||
<span
|
|
||||||
className={classNames("ms-2", {
|
|
||||||
invisible: this.postView.counts.downvotes === 0,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{numToSI(this.postView.counts.downvotes)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
get saveButton() {
|
get saveButton() {
|
||||||
const saved = this.postView.saved;
|
const saved = this.postView.saved;
|
||||||
const label = saved
|
const label = saved
|
||||||
|
@ -939,7 +857,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
onClick={linkEvent(this, this.handleDeleteClick)}
|
||||||
aria-label={label}
|
|
||||||
>
|
>
|
||||||
{this.state.deleteLoading ? (
|
{this.state.deleteLoading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
|
@ -1442,7 +1359,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
{this.postTitleLine()}
|
{this.postTitleLine()}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
{/* Post body prev or thumbnail */}
|
{/* Post thumbnail */}
|
||||||
{!this.state.imageExpanded && this.thumbnail()}
|
{!this.state.imageExpanded && this.thumbnail()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1489,7 +1406,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
{/* The larger view*/}
|
{/* The larger view*/}
|
||||||
<div className="d-none d-sm-block">
|
<div className="d-none d-sm-block">
|
||||||
<article className="row post-container">
|
<article className="row post-container">
|
||||||
{!this.props.viewOnly && this.voteBar()}
|
{!this.props.viewOnly && (
|
||||||
|
<VoteButtons
|
||||||
|
voteContentType={VoteContentType.Post}
|
||||||
|
id={this.postView.post.id}
|
||||||
|
onVote={this.props.onPostVote}
|
||||||
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
|
counts={this.postView.counts}
|
||||||
|
my_vote={this.postView.my_vote}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<div className="col-sm-2 pe-0 post-media">
|
<div className="col-sm-2 pe-0 post-media">
|
||||||
<div className="">{this.thumbnail()}</div>
|
<div className="">{this.thumbnail()}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1854,24 +1780,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
setupTippy();
|
setupTippy();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUpvote(i: PostListing) {
|
|
||||||
i.setState({ upvoteLoading: true });
|
|
||||||
i.props.onPostVote({
|
|
||||||
post_id: i.postView.post.id,
|
|
||||||
score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
|
|
||||||
auth: myAuthRequired(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDownvote(i: PostListing) {
|
|
||||||
i.setState({ downvoteLoading: true });
|
|
||||||
i.props.onPostVote({
|
|
||||||
post_id: i.postView.post.id,
|
|
||||||
score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
|
|
||||||
auth: myAuthRequired(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
get pointsTippy(): string {
|
get pointsTippy(): string {
|
||||||
const points = I18NextService.i18n.t("number_of_points", {
|
const points = I18NextService.i18n.t("number_of_points", {
|
||||||
count: Number(this.postView.counts.score),
|
count: Number(this.postView.counts.score),
|
||||||
|
|
|
@ -115,7 +115,9 @@ export class CreatePrivateMessage extends Component<
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||||
<h5>{I18NextService.i18n.t("create_private_message")}</h5>
|
<h1 className="h4">
|
||||||
|
{I18NextService.i18n.t("create_private_message")}
|
||||||
|
</h1>
|
||||||
<PrivateMessageForm
|
<PrivateMessageForm
|
||||||
onCreate={this.handlePrivateMessageCreate}
|
onCreate={this.handlePrivateMessageCreate}
|
||||||
recipient={res.person_view.person}
|
recipient={res.person_view.person}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { myAuthRequired } from "@utils/app";
|
import { myAuthRequired } from "@utils/app";
|
||||||
import { capitalizeFirstLetter } from "@utils/helpers";
|
import { capitalizeFirstLetter } from "@utils/helpers";
|
||||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
import { Component, InfernoNode } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import {
|
import {
|
||||||
CreatePrivateMessage,
|
CreatePrivateMessage,
|
||||||
|
@ -11,7 +11,7 @@ import {
|
||||||
import { relTags } from "../../config";
|
import { relTags } from "../../config";
|
||||||
import { I18NextService } from "../../services";
|
import { I18NextService } from "../../services";
|
||||||
import { setupTippy } from "../../tippy";
|
import { setupTippy } from "../../tippy";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon } from "../common/icon";
|
||||||
import { MarkdownTextArea } from "../common/markdown-textarea";
|
import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
import NavigationPrompt from "../common/navigation-prompt";
|
import NavigationPrompt from "../common/navigation-prompt";
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
|
@ -19,6 +19,7 @@ import { PersonListing } from "../person/person-listing";
|
||||||
interface PrivateMessageFormProps {
|
interface PrivateMessageFormProps {
|
||||||
recipient: Person;
|
recipient: Person;
|
||||||
privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
|
privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
|
||||||
|
replyType?: boolean;
|
||||||
onCancel?(): any;
|
onCancel?(): any;
|
||||||
onCreate?(form: CreatePrivateMessage): void;
|
onCreate?(form: CreatePrivateMessage): void;
|
||||||
onEdit?(form: EditPrivateMessage): void;
|
onEdit?(form: EditPrivateMessage): void;
|
||||||
|
@ -28,7 +29,6 @@ interface PrivateMessageFormState {
|
||||||
content?: string;
|
content?: string;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
previewMode: boolean;
|
previewMode: boolean;
|
||||||
showDisclaimer: boolean;
|
|
||||||
submitted: boolean;
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,7 +39,6 @@ export class PrivateMessageForm extends Component<
|
||||||
state: PrivateMessageFormState = {
|
state: PrivateMessageFormState = {
|
||||||
loading: false,
|
loading: false,
|
||||||
previewMode: false,
|
previewMode: false,
|
||||||
showDisclaimer: false,
|
|
||||||
content: this.props.privateMessageView
|
content: this.props.privateMessageView
|
||||||
? this.props.privateMessageView.private_message.content
|
? this.props.privateMessageView.private_message.content
|
||||||
: undefined,
|
: undefined,
|
||||||
|
@ -71,56 +70,26 @@ export class PrivateMessageForm extends Component<
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<form
|
<form className="private-message-form">
|
||||||
className="private-message-form"
|
|
||||||
onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
|
|
||||||
>
|
|
||||||
<NavigationPrompt
|
<NavigationPrompt
|
||||||
when={
|
when={
|
||||||
!this.state.loading && !!this.state.content && !this.state.submitted
|
!this.state.loading && !!this.state.content && !this.state.submitted
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{!this.props.privateMessageView && (
|
{!this.props.privateMessageView && (
|
||||||
<div className="mb-3 row">
|
<div className="mb-3 row align-items-baseline">
|
||||||
<label className="col-sm-2 col-form-label">
|
<label className="col-sm-2 col-form-label">
|
||||||
{capitalizeFirstLetter(I18NextService.i18n.t("to"))}
|
{capitalizeFirstLetter(I18NextService.i18n.t("to"))}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div className="col-sm-10 form-control-plaintext">
|
<div className="col-sm-10">
|
||||||
<PersonListing person={this.props.recipient} />
|
<PersonListing person={this.props.recipient} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="mb-3 row">
|
<div className="alert alert-warning small">
|
||||||
<label className="col-sm-2 col-form-label">
|
<Icon icon="alert-triangle" classes="icon-inline me-1" />
|
||||||
{I18NextService.i18n.t("message")}
|
<T parent="span" i18nKey="private_message_disclaimer">
|
||||||
<button
|
|
||||||
className="btn btn-link text-warning d-inline-block"
|
|
||||||
onClick={linkEvent(this, this.handleShowDisclaimer)}
|
|
||||||
data-tippy-content={I18NextService.i18n.t(
|
|
||||||
"private_message_disclaimer"
|
|
||||||
)}
|
|
||||||
aria-label={I18NextService.i18n.t("private_message_disclaimer")}
|
|
||||||
>
|
|
||||||
<Icon icon="alert-triangle" classes="icon-inline" />
|
|
||||||
</button>
|
|
||||||
</label>
|
|
||||||
<div className="col-sm-10">
|
|
||||||
<MarkdownTextArea
|
|
||||||
initialContent={this.state.content}
|
|
||||||
onContentChange={this.handleContentChange}
|
|
||||||
allLanguages={[]}
|
|
||||||
siteLanguages={[]}
|
|
||||||
hideNavigationWarnings
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{this.state.showDisclaimer && (
|
|
||||||
<div className="mb-3 row">
|
|
||||||
<div className="offset-sm-2 col-sm-10">
|
|
||||||
<div className="alert alert-danger" role="alert">
|
|
||||||
<T i18nKey="private_message_disclaimer">
|
|
||||||
#
|
#
|
||||||
<a
|
<a
|
||||||
className="alert-link"
|
className="alert-link"
|
||||||
|
@ -131,36 +100,28 @@ export class PrivateMessageForm extends Component<
|
||||||
</a>
|
</a>
|
||||||
</T>
|
</T>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="mb-3 row">
|
<div className="mb-3 row">
|
||||||
<div className="offset-sm-2 col-sm-10">
|
<label className="col-sm-2 col-form-label">
|
||||||
<button
|
{I18NextService.i18n.t("message")}
|
||||||
type="submit"
|
</label>
|
||||||
className="btn btn-secondary me-2"
|
<div className="col-sm-10">
|
||||||
disabled={this.state.loading}
|
<MarkdownTextArea
|
||||||
>
|
onSubmit={() => {
|
||||||
{this.state.loading ? (
|
this.handlePrivateMessageSubmit(this, event);
|
||||||
<Spinner />
|
}}
|
||||||
) : this.props.privateMessageView ? (
|
initialContent={this.state.content}
|
||||||
capitalizeFirstLetter(I18NextService.i18n.t("save"))
|
onContentChange={this.handleContentChange}
|
||||||
) : (
|
allLanguages={[]}
|
||||||
capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
|
siteLanguages={[]}
|
||||||
)}
|
hideNavigationWarnings
|
||||||
</button>
|
onReplyCancel={() => this.handleCancel(this)}
|
||||||
{this.props.privateMessageView && (
|
replyType={this.props.replyType}
|
||||||
<button
|
buttonTitle={
|
||||||
type="button"
|
this.props.privateMessageView
|
||||||
className="btn btn-secondary"
|
? capitalizeFirstLetter(I18NextService.i18n.t("save"))
|
||||||
onClick={linkEvent(this, this.handleCancel)}
|
: capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
|
||||||
>
|
}
|
||||||
{I18NextService.i18n.t("cancel")}
|
/>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
|
|
||||||
<li className="list-inline-item"></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
@ -200,8 +161,4 @@ export class PrivateMessageForm extends Component<
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ previewMode: !i.state.previewMode });
|
i.setState({ previewMode: !i.state.previewMode });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleShowDisclaimer(i: PrivateMessageForm) {
|
|
||||||
i.setState({ showDisclaimer: !i.state.showDisclaimer });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -109,17 +109,17 @@ export class PrivateMessage extends Component<
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<div
|
<button
|
||||||
role="button"
|
type="button"
|
||||||
className="pointer text-monospace"
|
className="pointer text-monospace p-0 bg-transparent border-0 d-block"
|
||||||
onClick={linkEvent(this, this.handleMessageCollapse)}
|
onClick={linkEvent(this, this.handleMessageCollapse)}
|
||||||
>
|
>
|
||||||
{this.state.collapsed ? (
|
{this.state.collapsed ? (
|
||||||
<Icon icon="plus-square" classes="icon-inline" />
|
<Icon icon="plus-square" />
|
||||||
) : (
|
) : (
|
||||||
<Icon icon="minus-square" classes="icon-inline" />
|
<Icon icon="minus-square" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{this.state.showEdit && (
|
{this.state.showEdit && (
|
||||||
|
@ -140,11 +140,12 @@ export class PrivateMessage extends Component<
|
||||||
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
|
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 && (
|
{!this.mine && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(this, this.handleMarkRead)}
|
onClick={linkEvent(this, this.handleMarkRead)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
|
@ -174,6 +175,7 @@ export class PrivateMessage extends Component<
|
||||||
<li className="list-inline-item">{this.reportButton}</li>
|
<li className="list-inline-item">{this.reportButton}</li>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(this, this.handleReplyClick)}
|
onClick={linkEvent(this, this.handleReplyClick)}
|
||||||
data-tippy-content={I18NextService.i18n.t("reply")}
|
data-tippy-content={I18NextService.i18n.t("reply")}
|
||||||
|
@ -188,6 +190,7 @@ export class PrivateMessage extends Component<
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(this, this.handleEditClick)}
|
onClick={linkEvent(this, this.handleEditClick)}
|
||||||
data-tippy-content={I18NextService.i18n.t("edit")}
|
data-tippy-content={I18NextService.i18n.t("edit")}
|
||||||
|
@ -198,6 +201,7 @@ export class PrivateMessage extends Component<
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
onClick={linkEvent(this, this.handleDeleteClick)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
|
@ -228,6 +232,7 @@ export class PrivateMessage extends Component<
|
||||||
)}
|
)}
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(this, this.handleViewSource)}
|
onClick={linkEvent(this, this.handleViewSource)}
|
||||||
data-tippy-content={I18NextService.i18n.t("view_source")}
|
data-tippy-content={I18NextService.i18n.t("view_source")}
|
||||||
|
@ -276,10 +281,17 @@ export class PrivateMessage extends Component<
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
{this.state.showReply && (
|
{this.state.showReply && (
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-sm-6">
|
||||||
<PrivateMessageForm
|
<PrivateMessageForm
|
||||||
|
privateMessageView={message_view}
|
||||||
|
replyType={true}
|
||||||
recipient={otherPerson}
|
recipient={otherPerson}
|
||||||
onCreate={this.props.onCreate}
|
onCreate={this.props.onCreate}
|
||||||
|
onCancel={this.handleReplyCancel}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* A collapsed clearfix */}
|
{/* A collapsed clearfix */}
|
||||||
{this.state.collapsed && <div className="row col-12"></div>}
|
{this.state.collapsed && <div className="row col-12"></div>}
|
||||||
|
@ -290,6 +302,7 @@ export class PrivateMessage extends Component<
|
||||||
get reportButton() {
|
get reportButton() {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-link btn-animate text-muted py-0"
|
className="btn btn-link btn-animate text-muted py-0"
|
||||||
onClick={linkEvent(this, this.handleShowReportDialog)}
|
onClick={linkEvent(this, this.handleShowReportDialog)}
|
||||||
data-tippy-content={I18NextService.i18n.t("show_report_dialog")}
|
data-tippy-content={I18NextService.i18n.t("show_report_dialog")}
|
||||||
|
|
|
@ -332,7 +332,9 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async componentDidMount() {
|
async componentDidMount() {
|
||||||
if (!this.state.isIsomorphic) {
|
if (
|
||||||
|
!(this.state.isIsomorphic || this.props.history.location.state?.searched)
|
||||||
|
) {
|
||||||
const promises = [this.fetchCommunities()];
|
const promises = [this.fetchCommunities()];
|
||||||
if (this.state.searchText) {
|
if (this.state.searchText) {
|
||||||
promises.push(this.search());
|
promises.push(this.search());
|
||||||
|
@ -1095,7 +1097,9 @@ export class Search extends Component<any, SearchState> {
|
||||||
sort: sort ?? urlSort,
|
sort: sort ?? urlSort,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.props.history.push(`/search${getQueryString(queryParams)}`);
|
this.props.history.push(`/search${getQueryString(queryParams)}`, {
|
||||||
|
searched: true,
|
||||||
|
});
|
||||||
|
|
||||||
await this.search();
|
await this.search();
|
||||||
}
|
}
|
||||||
|
|
|
@ -77,6 +77,11 @@ export enum VoteType {
|
||||||
Downvote,
|
Downvote,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export enum VoteContentType {
|
||||||
|
Post,
|
||||||
|
Comment,
|
||||||
|
}
|
||||||
|
|
||||||
export interface CommentNodeI {
|
export interface CommentNodeI {
|
||||||
comment_view: CommentView;
|
comment_view: CommentView;
|
||||||
children: Array<CommentNodeI>;
|
children: Array<CommentNodeI>;
|
||||||
|
|
Loading…
Reference in a new issue