mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 10:09:56 +00:00
Merge branch 'main' into emoji-upload-button
This commit is contained in:
commit
b770a4ef2e
11 changed files with 114 additions and 113 deletions
|
@ -26,9 +26,7 @@
|
||||||
"jsx-a11y/aria-activedescendant-has-tabindex": 1,
|
"jsx-a11y/aria-activedescendant-has-tabindex": 1,
|
||||||
"jsx-a11y/aria-role": 1,
|
"jsx-a11y/aria-role": 1,
|
||||||
"jsx-a11y/click-events-have-key-events": 1,
|
"jsx-a11y/click-events-have-key-events": 1,
|
||||||
"jsx-a11y/iframe-has-title": 1,
|
|
||||||
"jsx-a11y/interactive-supports-focus": 1,
|
"jsx-a11y/interactive-supports-focus": 1,
|
||||||
"jsx-a11y/no-redundant-roles": 1,
|
|
||||||
"jsx-a11y/no-static-element-interactions": 1,
|
"jsx-a11y/no-static-element-interactions": 1,
|
||||||
"jsx-a11y/role-has-required-aria-props": 1,
|
"jsx-a11y/role-has-required-aria-props": 1,
|
||||||
"curly": 0,
|
"curly": 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%);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 btn-text 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>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -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,8 +43,8 @@ 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={{}}
|
||||||
|
@ -56,9 +61,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,
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
@ -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,16 +298,26 @@ export class MarkdownTextArea extends Component<
|
||||||
{I18NextService.i18n.t("cancel")}
|
{I18NextService.i18n.t("cancel")}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{this.state.content && (
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={!this.state.content}
|
||||||
|
className={classNames("btn btn-sm btn-secondary ms-2", {
|
||||||
|
active: this.state.previewMode,
|
||||||
|
})}
|
||||||
|
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||||
|
>
|
||||||
|
{this.state.previewMode
|
||||||
|
? I18NextService.i18n.t("edit")
|
||||||
|
: I18NextService.i18n.t("preview")}
|
||||||
|
</button>
|
||||||
|
{this.props.buttonTitle && (
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm btn-secondary ms-2 ${
|
type="submit"
|
||||||
this.state.previewMode && "active"
|
className="btn btn-sm btn-secondary ms-2"
|
||||||
}`}
|
disabled={this.isDisabled || !this.state.content}
|
||||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
|
||||||
>
|
>
|
||||||
{this.state.previewMode
|
{this.state.loading && <Spinner className="me-1" />}
|
||||||
? I18NextService.i18n.t("edit")
|
{this.props.buttonTitle}
|
||||||
: I18NextService.i18n.t("preview")}
|
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -707,13 +707,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>
|
||||||
|
|
|
@ -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,98 +70,60 @@ 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="alert alert-warning small">
|
||||||
|
<Icon icon="alert-triangle" classes="icon-inline me-1" />
|
||||||
|
<T parent="span" i18nKey="private_message_disclaimer">
|
||||||
|
#
|
||||||
|
<a
|
||||||
|
className="alert-link"
|
||||||
|
rel={relTags}
|
||||||
|
href="https://element.io/get-started"
|
||||||
|
>
|
||||||
|
#
|
||||||
|
</a>
|
||||||
|
</T>
|
||||||
|
</div>
|
||||||
<div className="mb-3 row">
|
<div className="mb-3 row">
|
||||||
<label className="col-sm-2 col-form-label">
|
<label className="col-sm-2 col-form-label">
|
||||||
{I18NextService.i18n.t("message")}
|
{I18NextService.i18n.t("message")}
|
||||||
<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>
|
</label>
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
<MarkdownTextArea
|
<MarkdownTextArea
|
||||||
|
onSubmit={() => {
|
||||||
|
this.handlePrivateMessageSubmit(this, event);
|
||||||
|
}}
|
||||||
initialContent={this.state.content}
|
initialContent={this.state.content}
|
||||||
onContentChange={this.handleContentChange}
|
onContentChange={this.handleContentChange}
|
||||||
allLanguages={[]}
|
allLanguages={[]}
|
||||||
siteLanguages={[]}
|
siteLanguages={[]}
|
||||||
hideNavigationWarnings
|
hideNavigationWarnings
|
||||||
|
onReplyCancel={() => this.handleCancel(this)}
|
||||||
|
replyType={this.props.replyType}
|
||||||
|
buttonTitle={
|
||||||
|
this.props.privateMessageView
|
||||||
|
? capitalizeFirstLetter(I18NextService.i18n.t("save"))
|
||||||
|
: capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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
|
|
||||||
className="alert-link"
|
|
||||||
rel={relTags}
|
|
||||||
href="https://element.io/get-started"
|
|
||||||
>
|
|
||||||
#
|
|
||||||
</a>
|
|
||||||
</T>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="mb-3 row">
|
|
||||||
<div className="offset-sm-2 col-sm-10">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-secondary me-2"
|
|
||||||
disabled={this.state.loading}
|
|
||||||
>
|
|
||||||
{this.state.loading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : this.props.privateMessageView ? (
|
|
||||||
capitalizeFirstLetter(I18NextService.i18n.t("save"))
|
|
||||||
) : (
|
|
||||||
capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{this.props.privateMessageView && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-secondary"
|
|
||||||
onClick={linkEvent(this, this.handleCancel)}
|
|
||||||
>
|
|
||||||
{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>
|
|
||||||
</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 });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -145,6 +145,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.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 && (
|
||||||
<PrivateMessageForm
|
<div className="row">
|
||||||
recipient={otherPerson}
|
<div className="col-sm-6">
|
||||||
onCreate={this.props.onCreate}
|
<PrivateMessageForm
|
||||||
/>
|
privateMessageView={message_view}
|
||||||
|
replyType={true}
|
||||||
|
recipient={otherPerson}
|
||||||
|
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")}
|
||||||
|
|
Loading…
Reference in a new issue