Merge branch 'main' into csp_media_src_data_urls

This commit is contained in:
SleeplessOne1917 2023-06-25 19:16:46 +00:00 committed by GitHub
commit 1ce6eb3284
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 593 additions and 541 deletions

View file

@ -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,

View file

@ -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);

View file

@ -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"));
} }
} }
}; };

View file

@ -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} />
)} )}

View file

@ -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>
)} )}
</> </>
) : ( ) : (

View file

@ -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({

View file

@ -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) {

View file

@ -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,
})}
/> />
); );
} }

View file

@ -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>

View file

@ -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>

View file

@ -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)}

View file

@ -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)}

View 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>
);
}
}

View file

@ -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">

View file

@ -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 });
} }
} }

View file

@ -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);

View file

@ -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)

View file

@ -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 });
}
} }

View file

@ -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

View file

@ -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),

View file

@ -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}

View file

@ -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 });
}
} }

View file

@ -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")}

View file

@ -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();
} }

View file

@ -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>;