import { relTags } from "../../config";
import { I18NextService } from "../../services";
import { setupTippy } from "../../tippy";
-import { Icon, Spinner } from "../common/icon";
+import { Icon } from "../common/icon";
import { MarkdownTextArea } from "../common/markdown-textarea";
import NavigationPrompt from "../common/navigation-prompt";
import { PersonListing } from "../person/person-listing";
content?: string;
loading: boolean;
previewMode: boolean;
- showDisclaimer: boolean;
submitted: boolean;
}
state: PrivateMessageFormState = {
loading: false,
previewMode: false,
- showDisclaimer: false,
content: this.props.privateMessageView
? this.props.privateMessageView.private_message.content
: undefined,
render() {
return (
- <form
- className="private-message-form"
- onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
- >
+ <form className="private-message-form">
<NavigationPrompt
when={
!this.state.loading && !!this.state.content && !this.state.submitted
}
/>
{!this.props.privateMessageView && (
- <div className="mb-3 row">
+ <div className="mb-3 row align-items-baseline">
<label className="col-sm-2 col-form-label">
{capitalizeFirstLetter(I18NextService.i18n.t("to"))}
</label>
- <div className="col-sm-10 form-control-plaintext">
+ <div className="col-sm-10">
<PersonListing person={this.props.recipient} />
</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">
<label className="col-sm-2 col-form-label">
{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>
<div className="col-sm-10">
<MarkdownTextArea
+ onSubmit={() => {
+ this.handlePrivateMessageSubmit(this, event);
+ }}
initialContent={this.state.content}
onContentChange={this.handleContentChange}
allLanguages={[]}
siteLanguages={[]}
hideNavigationWarnings
+ buttonTitle={
+ this.props.privateMessageView
+ ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
+ : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
+ }
/>
</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">
+ <div className="mb-3 d-flex justify-content-end">
+ {this.props.privateMessageView && (
<button
- type="submit"
- className="btn btn-secondary me-2"
- disabled={this.state.loading}
+ type="button"
+ className="btn btn-secondary w-auto"
+ onClick={linkEvent(this, this.handleCancel)}
>
- {this.state.loading ? (
- <Spinner />
- ) : this.props.privateMessageView ? (
- capitalizeFirstLetter(I18NextService.i18n.t("save"))
- ) : (
- capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
- )}
+ {I18NextService.i18n.t("cancel")}
</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>
);
event.preventDefault();
i.setState({ previewMode: !i.state.previewMode });
}
-
- handleShowDisclaimer(i: PrivateMessageForm) {
- i.setState({ showDisclaimer: !i.state.showDisclaimer });
- }
}