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

128
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,68 +595,66 @@ 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} {recordingTooltip}
aria-describedby={this.state.recordingTimeLeftSeconds ? this.tooltipId : undefined} <div className="mx_MessageComposer_wrapper">
role="region" <ReplyPreview
aria-label={_t("a11y|message_composer")} replyToEvent={this.props.replyToEvent}
> permalinkCreator={this.props.permalinkCreator}
{recordingTooltip} />
<div className="mx_MessageComposer_wrapper"> <div className="mx_MessageComposer_row">
<ReplyPreview {e2eIcon}
replyToEvent={this.props.replyToEvent} {composer}
permalinkCreator={this.props.permalinkCreator} <div className="mx_MessageComposer_actions">
/> {controls}
<div className="mx_MessageComposer_row"> {canSendMessages && (
{e2eIcon} <MessageComposerButtons
{composer} addEmoji={this.addEmoji}
<div className="mx_MessageComposer_actions"> haveRecording={this.state.haveRecording}
{controls} isMenuOpen={this.state.isMenuOpen}
{canSendMessages && ( isStickerPickerOpen={this.state.isStickerPickerOpen}
<MessageComposerButtons menuPosition={menuPosition}
addEmoji={this.addEmoji} relation={this.props.relation}
haveRecording={this.state.haveRecording} onRecordStartEndClick={this.onRecordStartEndClick}
isMenuOpen={this.state.isMenuOpen} setStickerPickerOpen={this.setStickerPickerOpen}
isStickerPickerOpen={this.state.isStickerPickerOpen} showLocationButton={
menuPosition={menuPosition} !window.electron && SettingsStore.getValue(UIFeature.LocationSharing)
relation={this.props.relation} }
onRecordStartEndClick={this.onRecordStartEndClick} showPollsButton={this.state.showPollsButton}
setStickerPickerOpen={this.setStickerPickerOpen} showStickersButton={this.showStickersButton}
showLocationButton={ isRichTextEnabled={this.state.isRichTextEnabled}
!window.electron && SettingsStore.getValue(UIFeature.LocationSharing) onComposerModeClick={this.onRichTextToggle}
} toggleButtonMenu={this.toggleButtonMenu}
showPollsButton={this.state.showPollsButton} showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
showStickersButton={this.showStickersButton} onStartVoiceBroadcastClick={() => {
isRichTextEnabled={this.state.isRichTextEnabled} setUpVoiceBroadcastPreRecording(
onComposerModeClick={this.onRichTextToggle} this.props.room,
toggleButtonMenu={this.toggleButtonMenu} MatrixClientPeg.safeGet(),
showVoiceBroadcastButton={this.state.showVoiceBroadcastButton} SdkContextClass.instance.voiceBroadcastPlaybacksStore,
onStartVoiceBroadcastClick={() => { SdkContextClass.instance.voiceBroadcastRecordingsStore,
setUpVoiceBroadcastPreRecording( SdkContextClass.instance.voiceBroadcastPreRecordingStore,
this.props.room, );
MatrixClientPeg.safeGet(), this.toggleButtonMenu();
SdkContextClass.instance.voiceBroadcastPlaybacksStore, }}
SdkContextClass.instance.voiceBroadcastRecordingsStore, />
SdkContextClass.instance.voiceBroadcastPreRecordingStore, )}
); {showSendButton && (
this.toggleButtonMenu(); <SendButton
}} key="controls_send"
/> onClick={this.sendMessage}
)} title={
{showSendButton && ( this.state.haveRecording
<SendButton ? _t("composer|send_button_voice_message")
key="controls_send" : undefined
onClick={this.sendMessage} }
title={ />
this.state.haveRecording ? _t("composer|send_button_voice_message") : undefined )}
} </div>
/>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </Tooltip>
); );
} }
} }