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

Make all buttons part of a button array 

Preparation work for narrow layout of the message composer.
The voice record button needed to be extracted from VoiceRecordComposerTile
pull/21833/head
Germain Souquet 2021-08-25 11:35:23 +01:00
parent 52e1884bbd
commit 3c33e3cc61
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -368,6 +368,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
null,
];
const buttons = [];
if (!this.state.tombstone && this.state.canSendMessages) {
controls.push(
<SendMessageComposer
@ -383,7 +385,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
);
if (!this.state.haveRecording) {
controls.push(
buttons.push(
<UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
<EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
);
@ -392,7 +394,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
if (SettingsStore.getValue(UIFeature.Widgets) &&
SettingsStore.getValue("MessageComposerInput.showStickersButton") &&
!this.state.haveRecording) {
controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
buttons.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
}
controls.push(<VoiceRecordComposerTile
@ -400,8 +402,18 @@ export default class MessageComposer extends React.Component<IProps, IState> {
ref={c => this.voiceRecordingButton = c}
room={this.props.room} />);
if (!this.state.haveRecording) {
buttons.push(
<AccessibleTooltipButton
className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
title={_t("Send voice message")}
/>,
);
}
if (!this.state.isComposerEmpty || this.state.haveRecording) {
controls.push(
buttons.push(
<SendButton
key="controls_send"
onClick={this.sendMessage}
@ -457,6 +469,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
<ReplyPreview permalinkCreator={this.props.permalinkCreator} />
<div className="mx_MessageComposer_row">
{ controls }
{ buttons }
</div>
</div>
</div>

4
src/components/views/rooms/VoiceRecordComposerTile.tsx
View File

@ -137,7 +137,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
await this.disposeRecording();
};
private onRecordStartEndClick = async () => {
public onRecordStartEndClick = async () => {
if (this.state.recorder) {
await this.state.recorder.stop();
return;
@ -215,6 +215,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
}
public render(): ReactNode {
if (!this.state.recordingPhase) return null;
let stopOrRecordBtn;
let deleteButton;
if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {