Merge branch 'main' into fix/a11y-fixes

This commit is contained in:
SleeplessOne1917 2023-06-25 04:29:53 +00:00 committed by GitHub
commit 083d7a2f05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 99 deletions

View file

@ -35,6 +35,7 @@ export class Icon extends Component<IconProps, any> {
interface SpinnerProps {
large?: boolean;
className?: string;
}
export class Spinner extends Component<SpinnerProps, any> {
@ -46,7 +47,9 @@ export class Spinner extends Component<SpinnerProps, any> {
return (
<Icon
icon="spinner"
classes={`spin ${this.props.large && "spinner-large"}`}
classes={classNames("spin", this.props.className, {
"spinner-large": this.props.large,
})}
/>
);
}

View file

@ -23,15 +23,28 @@ import NavigationPrompt from "./navigation-prompt";
import ProgressBar from "./progress-bar";
interface MarkdownTextAreaProps {
/**
* Initial content inside the textarea
*/
initialContent?: string;
/**
* Numerical ID of the language to select in dropdown
*/
initialLanguageId?: number;
placeholder?: string;
buttonTitle?: string;
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;
focus?: boolean;
disabled?: boolean;
finished?: boolean;
/**
* Whether to show the language selector
*/
showLanguage?: boolean;
hideNavigationWarnings?: boolean;
onContentChange?(val: string): void;
@ -276,19 +289,6 @@ export class MarkdownTextArea extends Component<
{/* A flex expander */}
<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 && (
<button
type="button"
@ -298,16 +298,26 @@ export class MarkdownTextArea extends Component<
{I18NextService.i18n.t("cancel")}
</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
className={`btn btn-sm btn-secondary ms-2 ${
this.state.previewMode && "active"
}`}
onClick={linkEvent(this, this.handlePreviewToggle)}
type="submit"
className="btn btn-sm btn-secondary ms-2"
disabled={this.isDisabled || !this.state.content}
>
{this.state.previewMode
? I18NextService.i18n.t("edit")
: I18NextService.i18n.t("preview")}
{this.state.loading && <Spinner className="me-1" />}
{this.props.buttonTitle}
</button>
)}
</div>

View file

@ -115,7 +115,9 @@ export class CreatePrivateMessage extends Component<
return (
<div className="row">
<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
onCreate={this.handlePrivateMessageCreate}
recipient={res.person_view.person}

View file

@ -1,6 +1,6 @@
import { myAuthRequired } from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, InfernoNode, linkEvent } from "inferno";
import { Component, InfernoNode } from "inferno";
import { T } from "inferno-i18next-dess";
import {
CreatePrivateMessage,
@ -11,7 +11,7 @@ import {
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";
@ -19,6 +19,7 @@ import { PersonListing } from "../person/person-listing";
interface PrivateMessageFormProps {
recipient: Person;
privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
replyType?: boolean;
onCancel?(): any;
onCreate?(form: CreatePrivateMessage): void;
onEdit?(form: EditPrivateMessage): void;
@ -28,7 +29,6 @@ interface PrivateMessageFormState {
content?: string;
loading: boolean;
previewMode: boolean;
showDisclaimer: boolean;
submitted: boolean;
}
@ -39,7 +39,6 @@ export class PrivateMessageForm extends Component<
state: PrivateMessageFormState = {
loading: false,
previewMode: false,
showDisclaimer: false,
content: this.props.privateMessageView
? this.props.privateMessageView.private_message.content
: undefined,
@ -71,98 +70,60 @@ export class PrivateMessageForm extends Component<
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
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>
{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>
);
}
@ -200,8 +161,4 @@ export class PrivateMessageForm extends Component<
event.preventDefault();
i.setState({ previewMode: !i.state.previewMode });
}
handleShowDisclaimer(i: PrivateMessageForm) {
i.setState({ showDisclaimer: !i.state.showDisclaimer });
}
}

View file

@ -145,6 +145,7 @@ export class PrivateMessage extends Component<
<>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
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">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={I18NextService.i18n.t("reply")}
@ -188,6 +190,7 @@ export class PrivateMessage extends Component<
<>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={I18NextService.i18n.t("edit")}
@ -198,6 +201,7 @@ export class PrivateMessage extends Component<
</li>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
@ -228,6 +232,7 @@ export class PrivateMessage extends Component<
)}
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={I18NextService.i18n.t("view_source")}
@ -276,10 +281,17 @@ export class PrivateMessage extends Component<
</form>
)}
{this.state.showReply && (
<PrivateMessageForm
recipient={otherPerson}
onCreate={this.props.onCreate}
/>
<div className="row">
<div className="col-sm-6">
<PrivateMessageForm
privateMessageView={message_view}
replyType={true}
recipient={otherPerson}
onCreate={this.props.onCreate}
onCancel={this.handleReplyCancel}
/>
</div>
</div>
)}
{/* A collapsed clearfix */}
{this.state.collapsed && <div className="row col-12"></div>}
@ -290,6 +302,7 @@ export class PrivateMessage extends Component<
get reportButton() {
return (
<button
type="button"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowReportDialog)}
data-tippy-content={I18NextService.i18n.t("show_report_dialog")}