mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-15 22:51:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Changed the buttons to TooltipButtons and added the tooltip for the hangup button

Browse source 
Signed-off-by: Peter Vágner <pvdeejay@gmail.com>
This commit is contained in:
Peter Vágner 2021-06-12 14:17:10 +02:00
parent 6458f717cc
commit a94d11235e
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/views/voip/CallView.tsx
View file

@ -25,6 +25,8 @@ import RoomAvatar from "../avatars/RoomAvatar";
import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call'; import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
import classNames from 'classnames'; import classNames from 'classnames';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard'; import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} from '../../structures/ContextMenu'; import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} from '../../structures/ContextMenu';
import CallContextMenu from '../context_menus/CallContextMenu'; import CallContextMenu from '../context_menus/CallContextMenu';
@ -438,40 +440,40 @@ export default class CallView extends React.Component<IProps, IState> {
mx_CallView_callControls_hidden: !this.state.controlsVisible, mx_CallView_callControls_hidden: !this.state.controlsVisible,
}); });
const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleTooltipButton
className={vidClasses} className={vidClasses}
onClick={this.onVidMuteClick} onClick={this.onVidMuteClick}
aria-label={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")} title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
/> : null; /> : null;
// The dial pad & 'more' button actions are only relevant in a connected call // The dial pad & 'more' button actions are only relevant in a connected call
// When not connected, we have to put something there to make the flexbox alignment correct // When not connected, we have to put something there to make the flexbox alignment correct
const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuTooltipButton
className="mx_CallView_callControls_button mx_CallView_callControls_dialpad" className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
inputRef={this.dialpadButton} inputRef={this.dialpadButton}
onClick={this.onDialpadClick} onClick={this.onDialpadClick}
isExpanded={this.state.showDialpad} isExpanded={this.state.showDialpad}
aria-label={_t("Dialpad")} title={_t("Dialpad")}
/> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />; /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />;
const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuTooltipButton
className="mx_CallView_callControls_button mx_CallView_callControls_button_more" className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
onClick={this.onMoreClick} onClick={this.onMoreClick}
inputRef={this.contextMenuButton} inputRef={this.contextMenuButton}
isExpanded={this.state.showMoreMenu} isExpanded={this.state.showMoreMenu}
aria-label={_t("More")} title={_t("More")}
/> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />; /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />;
// in the near future, the dial pad button will go on the left. For now, it's the nothing button // in the near future, the dial pad button will go on the left. For now, it's the nothing button
// because something needs to have margin-right: auto to make the alignment correct. // because something needs to have margin-right: auto to make the alignment correct.
const callControls = <div className={callControlsClasses}> const callControls = <div className={callControlsClasses}>
{dialpadButton} {dialpadButton}
<AccessibleButton <AccessibleTooltipButton
className={micClasses} className={micClasses}
onClick={this.onMicMuteClick} onClick={this.onMicMuteClick}
aria-label={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")} title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
/> />
<AccessibleButton <AccessibleTooltipButton
className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup" className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
onClick={() => { onClick={() => {
dis.dispatch({ dis.dispatch({
@ -479,6 +481,7 @@ export default class CallView extends React.Component<IProps, IState> {
room_id: callRoomId, room_id: callRoomId,
}); });
}} }}
title={_t("Hangup")}
/> />
{vidMuteButton} {vidMuteButton}
<div className={micCacheClasses} /> <div className={micCacheClasses} />

1
src/i18n/strings/en_EN.json
View file

@ -895,6 +895,7 @@
"More": "More", "More": "More",
"Unmute the microphone": "Unmute the microphone", "Unmute the microphone": "Unmute the microphone",
"Mute the microphone": "Mute the microphone", "Mute the microphone": "Mute the microphone",
"Hangup": "Hangup",
"unknown person": "unknown person", "unknown person": "unknown person",
"Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>", "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
"You held the call <a>Switch</a>": "You held the call <a>Switch</a>", "You held the call <a>Switch</a>": "You held the call <a>Switch</a>",