From 8ca786ce74550b6e488fc204a4a1aedff0a2588b Mon Sep 17 00:00:00 2001 From: Horatiu Muresan Date: Wed, 4 Jan 2023 12:53:27 +0200 Subject: [PATCH] Address review --- css/premeeting/_prejoin.scss | 2 +- react/features/base/ui/components/types.ts | 5 + .../base/ui/components/web/Button.tsx | 2 + .../prejoin/components/web/DropdownButton.tsx | 124 ------------------ .../prejoin/components/web/Prejoin.js | 19 +-- 5 files changed, 19 insertions(+), 133 deletions(-) delete mode 100644 react/features/prejoin/components/web/DropdownButton.tsx diff --git a/css/premeeting/_prejoin.scss b/css/premeeting/_prejoin.scss index 575f0dae8..32992da46 100644 --- a/css/premeeting/_prejoin.scss +++ b/css/premeeting/_prejoin.scss @@ -50,7 +50,7 @@ * Override default InlineDialog behaviour, since it does not play nicely with relative widths */ & > div:nth-child(2) { - background: #fff; + background: #E0E0E0; padding: 0; position: absolute !important; width: 100%; diff --git a/react/features/base/ui/components/types.ts b/react/features/base/ui/components/types.ts index 61875cc51..e5fd8dbc7 100644 --- a/react/features/base/ui/components/types.ts +++ b/react/features/base/ui/components/types.ts @@ -34,6 +34,11 @@ export interface IButtonProps { */ onClick?: (e?: React.MouseEvent | GestureResponderEvent) => void; + /** + * Key press callback. + */ + onKeyPress?: (e?: React.KeyboardEvent) => void; + /** * The type of button to be displayed. */ diff --git a/react/features/base/ui/components/web/Button.tsx b/react/features/base/ui/components/web/Button.tsx index 5502b20dc..e00bfa412 100644 --- a/react/features/base/ui/components/web/Button.tsx +++ b/react/features/base/ui/components/web/Button.tsx @@ -187,6 +187,7 @@ const Button = React.forwardRef(({ label, labelKey, onClick = () => null, + onKeyPress = () => null, size = 'medium', testId, type = BUTTON_TYPES.PRIMARY @@ -206,6 +207,7 @@ const Button = React.forwardRef(({ disabled = { disabled } { ...(id ? { id } : {}) } onClick = { onClick } + onKeyPress = { onKeyPress } ref = { ref } title = { accessibilityLabel } type = { isSubmit ? 'submit' : 'button' }> diff --git a/react/features/prejoin/components/web/DropdownButton.tsx b/react/features/prejoin/components/web/DropdownButton.tsx deleted file mode 100644 index c697a6a41..000000000 --- a/react/features/prejoin/components/web/DropdownButton.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React, { useCallback } from 'react'; -import { makeStyles } from 'tss-react/mui'; - -import Icon from '../../../base/icons/components/Icon'; - -interface IProps { - - /** - * Attribute used in automated testing. - */ - dataTestId: string; - - /** - * Whether the button is disabled. - */ - disabled: boolean; - - /** - * The button's icon. - */ - icon: Function; - - /** - * The button's label. - */ - label: string; - - /** - * Function to be called when button is clicked. - */ - onButtonClick: (e?: React.MouseEvent) => void; - - /** - * Function to be called on key pressed. - */ - onKeyPressed: (e?: React.KeyboardEvent) => void; -} - - -const useStyles = makeStyles()(theme => { - return { - prejoinPreviewDropdownBtn: { - alignItems: 'center', - color: '#1C2025', - cursor: 'pointer', - display: 'flex', - height: 40, - fontSize: 15, - lineHeight: '24px', - padding: '0 16px', // @ts-ignore - backgroundColor: theme.palette.field02, - - '&:hover': { // @ts-ignore - backgroundColor: theme.palette.field02Hover - }, - - '&.disabled': { - background: theme.palette.disabled01, - border: '1px solid #5E6D7A', - color: '#AFB6BC', - cursor: 'initial', - - '.icon': { - '& > svg': { - fill: '#AFB6BC' - } - } - } - }, - prejoinPreviewDropdownIcon: { - display: 'inline-block', - marginRight: 16, - - '& > svg': { - fill: '#1C2025' - } - } - }; -}); - -/** - * Buttons used for pre meeting actions. - * - * @returns {ReactElement} - */ -const DropdownButton = ({ - dataTestId, - disabled, - icon, - onButtonClick, - onKeyPressed, - label -}: IProps) => { - const { classes, cx } = useStyles(); - const containerClasses = cx( - classes.prejoinPreviewDropdownBtn, - disabled && 'disabled' - ); - - const onClick = useCallback(() => - !disabled && onButtonClick(), [ disabled ]); - - const onKeyPress = useCallback(() => - !disabled && onKeyPressed(), [ disabled ]); - - return ( -
- - {label} -
- ); -}; - -export default DropdownButton; diff --git a/react/features/prejoin/components/web/Prejoin.js b/react/features/prejoin/components/web/Prejoin.js index 4fb7dbc10..f0b457165 100644 --- a/react/features/prejoin/components/web/Prejoin.js +++ b/react/features/prejoin/components/web/Prejoin.js @@ -13,6 +13,8 @@ import { ActionButton, InputField, PreMeetingScreen } from '../../../base/premee import { connect } from '../../../base/redux'; import { getDisplayName, updateSettings } from '../../../base/settings'; import { getLocalJitsiVideoTrack } from '../../../base/tracks'; +import Button from '../../../base/ui/components/web/Button'; +import { BUTTON_TYPES } from '../../../base/ui/constants.any'; import { joinConference as joinConferenceAction, joinConferenceWithoutAudio as joinConferenceWithoutAudioAction, @@ -26,7 +28,6 @@ import { isPrejoinDisplayNameVisible } from '../../functions'; -import DropdownButton from './DropdownButton'; import JoinByPhoneDialog from './dialogs/JoinByPhoneDialog'; type Props = { @@ -297,20 +298,20 @@ class Prejoin extends Component { const noAudio = { key: 'no-audio', - dataTestId: 'prejoin.joinWithoutAudio', + testId: 'prejoin.joinWithoutAudio', icon: IconVolumeOff, label: t('prejoin.joinWithoutAudio'), - onButtonClick: joinConferenceWithoutAudio, - onKeyPressed: this._onJoinConferenceWithoutAudioKeyPress + onClick: joinConferenceWithoutAudio, + onKeyPress: this._onJoinConferenceWithoutAudioKeyPress }; const byPhone = { key: 'by-phone', - dataTestId: 'prejoin.joinByPhone', + testId: 'prejoin.joinByPhone', icon: IconPhoneRinging, label: t('prejoin.joinAudioByPhone'), - onButtonClick: this._showDialog, - onKeyPressed: this._showDialogKeyPress + onClick: this._showDialog, + onKeyPress: this._showDialogKeyPress }; return { @@ -394,9 +395,11 @@ class Prejoin extends Component { {extraButtonsToRender.map(({ key, ...rest }: Object) => ( - ))} }