OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use tooltip compound in `MessageComposer.tsx`

pull/28217/head
Florian Duros 2024-05-21 17:42:01 +02:00
parent a5e4daa0d1
commit 7d3b3d7f95
No known key found for this signature in database
GPG Key ID: A5BBB4041B493F15
1 changed files with 61 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/views/rooms/MessageComposer.tsx
View File

@ -25,6 +25,7 @@ import {
THREAD_RELATION_TYPE, THREAD_RELATION_TYPE,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { Optional } from "matrix-events-sdk"; import { Optional } from "matrix-events-sdk";
import { Tooltip } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../MatrixClientPeg";
@ -40,7 +41,6 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import VoiceRecordComposerTile from "./VoiceRecordComposerTile"; import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore"; import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
import { RecordingState } from "../../../audio/VoiceRecording"; import { RecordingState } from "../../../audio/VoiceRecording";
import Tooltip, { Alignment } from "../elements/Tooltip";
import ResizeNotifier from "../../../utils/ResizeNotifier"; import ResizeNotifier from "../../../utils/ResizeNotifier";
import { E2EStatus } from "../../../utils/ShieldUtils"; import { E2EStatus } from "../../../utils/ShieldUtils";
import SendMessageComposer, { SendMessageComposer as SendMessageComposerClass } from "./SendMessageComposer"; import SendMessageComposer, { SendMessageComposer as SendMessageComposerClass } from "./SendMessageComposer";
@ -110,7 +110,6 @@ interface IState {
} }
export class MessageComposer extends React.Component<IProps, IState> { export class MessageComposer extends React.Component<IProps, IState> {
private tooltipId = `mx_MessageComposer_${Math.random()}`;
private dispatcherRef?: string; private dispatcherRef?: string;
private messageComposerInput = createRef<SendMessageComposerClass>(); private messageComposerInput = createRef<SendMessageComposerClass>();
private voiceRecordingButton = createRef<VoiceRecordComposerTile>(); private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
@ -568,12 +567,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
} }
let recordingTooltip: JSX.Element | undefined; let recordingTooltip: JSX.Element | undefined;
if (this.state.recordingTimeLeftSeconds) {
const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds); const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds);
recordingTooltip = ( const secondsLeft = this.state.recordingTimeLeftSeconds ? Math.round(this.state.recordingTimeLeftSeconds) : 0;
<Tooltip id={this.tooltipId} label={formatTimeLeft(secondsLeft)} alignment={Alignment.Top} />
);
}
const threadId = const threadId =
this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null; this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;
@ -599,13 +595,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
}); });
return ( return (
<div <Tooltip open={isTooltipOpen} label={formatTimeLeft(secondsLeft)} placement="top">
className={classes} <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
ref={this.ref}
aria-describedby={this.state.recordingTimeLeftSeconds ? this.tooltipId : undefined}
role="region"
aria-label={_t("a11y|message_composer")}
>
{recordingTooltip} {recordingTooltip}
<div className="mx_MessageComposer_wrapper"> <div className="mx_MessageComposer_wrapper">
<ReplyPreview <ReplyPreview
@ -653,7 +644,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
key="controls_send" key="controls_send"
onClick={this.sendMessage} onClick={this.sendMessage}
title={ title={
this.state.haveRecording ? _t("composer|send_button_voice_message") : undefined this.state.haveRecording
? _t("composer|send_button_voice_message")
: undefined
} }
/> />
)} )}
@ -661,6 +654,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
</div> </div>
</div> </div>
</div> </div>
</Tooltip>
); );
} }
} }