haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(ui-components) Use new Button on prejoin (#12372)

This commit is contained in:
Robert Pintilii 2022-10-13 13:42:39 +03:00 committed by GitHub
parent f5fb402784
commit 51bbc3f87f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/premeeting/_lobby.scss
View File

@ -204,3 +204,7 @@
}
}
}
.lobby-button-margin {
margin-bottom: 16px;
}

3
react/features/base/ui/constants.ts
View File

@ -190,7 +190,8 @@ export const commonStyles = (theme: Theme) => {
},
'.prejoin-dialog-btn': {
width: '309px'
width: '309px',
marginBottom: '8px'
},
'.prejoin-dialog-dialin-container': {

56
react/features/lobby/components/web/LobbyScreen.js
View File

@ -4,9 +4,10 @@ import React from 'react';
import { translate } from '../../../base/i18n';
import { Icon, IconClose } from '../../../base/icons';
import { ActionButton, InputField, PreMeetingScreen } from '../../../base/premeeting';
import { InputField, PreMeetingScreen } from '../../../base/premeeting';
import { LoadingIndicator } from '../../../base/react';
import { connect } from '../../../base/redux';
import Button from '../../../base/ui/components/web/Button';
import ChatInput from '../../../chat/components/web/ChatInput';
import MessageContainer from '../../../chat/components/web/MessageContainer';
import AbstractLobbyScreen, {
@ -222,22 +223,22 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
* @inheritdoc
*/
_renderPasswordJoinButtons() {
const { t } = this.props;
return (
<>
<ActionButton
<Button
className = 'lobby-button-margin'
fullWidth = { true }
labelKey = 'prejoin.joinMeeting'
onClick = { this._onJoinWithPassword }
testId = 'lobby.passwordJoinButton'
type = 'primary'>
{ t('prejoin.joinMeeting') }
</ActionButton>
<ActionButton
type = 'primary' />
<Button
className = 'lobby-button-margin'
fullWidth = { true }
labelKey = 'lobby.backToKnockModeButton'
onClick = { this._onSwitchToKnockMode }
testId = 'lobby.backToKnockModeButton'
type = 'secondary'>
{ t('lobby.backToKnockModeButton') }
</ActionButton>
type = 'secondary' />
</>
);
}
@ -248,30 +249,35 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
* @inheritdoc
*/
_renderStandardButtons() {
const { _knocking, _isLobbyChatActive, _renderPassword, t } = this.props;
const { _knocking, _isLobbyChatActive, _renderPassword } = this.props;
return (
<>
{ _knocking || <ActionButton
{_knocking || <Button
className = 'lobby-button-margin'
disabled = { !this.state.displayName }
fullWidth = { true }
labelKey = 'lobby.knockButton'
onClick = { this._onAskToJoin }
testId = 'lobby.knockButton'
type = 'primary'>
{ t('lobby.knockButton') }
</ActionButton> }
{ (_knocking && _isLobbyChatActive) && <ActionButton
className = 'open-chat-button'
type = 'primary' />
}
{(_knocking && _isLobbyChatActive) && <Button
className = 'lobby-button-margin open-chat-button'
fullWidth = { true }
labelKey = 'toolbar.openChat'
onClick = { this._onToggleChat }
testId = 'toolbar.openChat'
type = 'primary' >
{ t('toolbar.openChat') }
</ActionButton> }
{_renderPassword && <ActionButton
type = 'primary' />
}
{_renderPassword && <Button
className = 'lobby-button-margin'
fullWidth = { true }
labelKey = 'lobby.enterPasswordButton'
onClick = { this._onSwitchToPasswordMode }
testId = 'lobby.enterPasswordButton'
type = 'secondary'>
{ t('lobby.enterPasswordButton') }
</ActionButton> }
type = 'secondary' />
}
</>
);
}

19
react/features/prejoin/components/dialogs/DialInDialog.tsx
View File

@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
import { IconArrowLeft } from '../../../base/icons/svg';
// @ts-ignore
import { ActionButton } from '../../../base/premeeting';
import { Button } from '../../../base/ui/components/web';
// @ts-ignore
import { getCountryCodeFromPhone } from '../../utils';
// @ts-ignore
@ -153,18 +152,18 @@ function DialinDialog(props: Props) {
{t('prejoin.connectedWithAudioQ')}
</Label>
<div className = 'prejoin-dialog-dialin-btns'>
<ActionButton
<Button
className = 'prejoin-dialog-btn'
fullWidth = { true }
labelKey = 'prejoin.joinMeeting'
onClick = { onPrimaryButtonClick }
type = 'primary'>
{t('prejoin.joinMeeting')}
</ActionButton>
<ActionButton
type = 'primary' />
<Button
className = 'prejoin-dialog-btn'
fullWidth = { true }
labelKey = 'dialog.Cancel'
onClick = { onTextButtonClick }
type = 'text'>
{t('dialog.Cancel')}
</ActionButton>
type = 'tertiary' />
</div>
</div>
);

19
react/features/prejoin/components/dialogs/DialOutDialog.tsx
View File

@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
import { IconClose } from '../../../base/icons/svg';
// @ts-ignore
import { ActionButton } from '../../../base/premeeting';
import { Button } from '../../../base/ui/components/web';
// @ts-ignore
import Label from '../Label';
// @ts-ignore
@ -77,12 +76,12 @@ function DialOutDialog(props: Props) {
<div className = { classes.picker }>
<CountryPicker onSubmit = { onSubmit } />
</div>
<ActionButton
<Button
className = 'prejoin-dialog-btn'
fullWidth = { true }
labelKey = 'prejoin.callMe'
onClick = { onSubmit }
type = 'primary'>
{t('prejoin.callMe')}
</ActionButton>
type = 'primary' />
<div className = 'prejoin-dialog-delimiter-container'>
<div className = 'prejoin-dialog-delimiter' />
<div className = 'prejoin-dialog-delimiter-txt-container'>
@ -92,12 +91,12 @@ function DialOutDialog(props: Props) {
</div>
</div>
<div className = 'prejoin-dialog-dialin-container'>
<ActionButton
<Button
className = 'prejoin-dialog-btn'
fullWidth = { true }
labelKey = 'prejoin.iWantToDialIn'
onClick = { onTextButtonClick }
type = 'text'>
{t('prejoin.iWantToDialIn')}
</ActionButton>
type = 'tertiary' />
</div>
</div>
);