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

Merge pull request #6572 from matrix-org/travis/voice-messages/stop-left 

Move stop button to the left of the waveform
pull/21833/head
Travis Ralston 2021-08-07 09:09:21 -06:00 committed by GitHub
parent 7598ce6ca3 fbe8f04942
commit 92a60497d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
res/css/views/rooms/_VoiceRecordComposerTile.scss
View File

@ -20,7 +20,7 @@ limitations under the License.
height: 28px; height: 28px;
border: 2px solid $voice-record-stop-border-color; border: 2px solid $voice-record-stop-border-color;
border-radius: 32px; border-radius: 32px;
margin-right: 16px; // between us and the send button margin-right: 8px; // between us and the waveform component
position: relative; position: relative;
&::after { &::after {
@ -64,6 +64,10 @@ limitations under the License.
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer { .mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
// Note: remaining class properties are in the PlayerContainer CSS. // Note: remaining class properties are in the PlayerContainer CSS.
// fixed height to reduce layout jumps with the play button appearing
// https://github.com/vector-im/element-web/issues/18431
height: 32px;
margin: 6px; // force the composer area to put a gutter around us margin: 6px; // force the composer area to put a gutter around us
margin-right: 12px; // isolate from stop/send button margin-right: 12px; // isolate from stop/send button
@ -83,7 +87,7 @@ limitations under the License.
height: 10px; height: 10px;
position: absolute; position: absolute;
left: 12px; // 12px from the left edge for container padding left: 12px; // 12px from the left edge for container padding
top: 16px; // vertically center (middle align with clock) top: 17px; // vertically center (middle align with clock)
border-radius: 10px; border-radius: 10px;
} }
} }

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

@ -215,7 +215,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
} }
public render(): ReactNode { public render(): ReactNode {
let recordingInfo; let stopOrRecordBtn;
let deleteButton; let deleteButton;
if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) { if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
const classes = classNames({ const classes = classNames({
@ -229,7 +229,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
tooltip = _t("Stop recording"); tooltip = _t("Stop recording");
} }
let stopOrRecordBtn = <AccessibleTooltipButton stopOrRecordBtn = <AccessibleTooltipButton
className={classes} className={classes}
onClick={this.onRecordStartEndClick} onClick={this.onRecordStartEndClick}
title={tooltip} title={tooltip}
@ -237,8 +237,6 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
if (this.state.recorder && !this.state.recorder?.isRecording) { if (this.state.recorder && !this.state.recorder?.isRecording) {
stopOrRecordBtn = null; stopOrRecordBtn = null;
} }
recordingInfo = stopOrRecordBtn;
} }
if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) { if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
@ -266,11 +264,14 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
</span>; </span>;
} }
// The record button (mic icon) is meant to be on the right edge, but we also want the
// stop button to be left of the waveform area. Luckily, none of the surrounding UI is
// rendered when we're not recording, so the record button ends up in the correct spot.
return (<> return (<>
{ uploadIndicator } { uploadIndicator }
{ deleteButton } { deleteButton }
{ stopOrRecordBtn }
{ this.renderWaveformArea() } { this.renderWaveformArea() }
{ recordingInfo }
</>); </>);
} }
} }