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

ref(ui-components) Replace Switch with new components (#11956)

This commit is contained in:
Robert Pintilii 2022-08-03 14:24:44 +03:00 committed by GitHub
parent fa5ee32720
commit 3a87282e26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 95 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
react/features/speaker-stats/components/web/FaceExpressionsSwitch.js
View File

@ -1,97 +0,0 @@
// @flow
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Switch } from '../../../base/react';
const useStyles = makeStyles(theme => {
return {
switchContainer: {
display: 'flex',
alignItems: 'center',
'& svg': {
display: 'none'
},
'& div': {
width: 38,
'& > label': {
width: 32,
height: 20,
backgroundColor: theme.palette.ui05,
'&:not([data-checked]):hover': {
backgroundColor: theme.palette.ui05
},
'&[data-checked]': {
backgroundColor: theme.palette.action01,
'&:hover': {
backgroundColor: theme.palette.action01
},
'&::before': {
margin: '0 0 1.5px -3px',
backgroundColor: theme.palette.text01
}
},
'&:focus-within': {
borderColor: 'transparent'
},
'&::before': {
width: 14,
height: 14,
margin: '0 0 1.5px 1.5px',
backgroundColor: theme.palette.text01
}
}
}
},
switchLabel: {
marginRight: 10,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
}
};
});
/**
* The type of the React {@code Component} props of {@link ToggleFaceExpressionsButton}.
*/
type Props = {
/**
* The function to initiate the change in the speaker stats table.
*/
onChange: Function,
/**
* The state of the button.
*/
showFaceExpressions: boolean,
};
/**
* React component for toggling face expressions grid.
*
* @returns {React$Element<any>}
*/
export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: Props) {
const classes = useStyles();
const { t } = useTranslation();
return (
<div className = { classes.switchContainer } >
<label
className = { classes.switchLabel }
htmlFor = 'face-expressions-switch'>
{ t('speakerStats.displayEmotions')}
</label>
<Switch
id = 'face-expressions-switch'
onValueChange = { onChange }
trackColor = {{ false: 'blue' }}
value = { showFaceExpressions } />
</div>
);
}

63
react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx Normal file
View File

@ -0,0 +1,63 @@
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import { useTranslation } from 'react-i18next';
import Switch from '../../../base/ui/components/web/Switch';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
const useStyles = makeStyles((theme: Theme) => {
return {
switchContainer: {
display: 'flex',
alignItems: 'center'
},
switchLabel: {
marginRight: 10,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
}
};
});
/**
* The type of the React {@code Component} props of {@link ToggleFaceExpressionsButton}.
*/
type Props = {
/**
* The function to initiate the change in the speaker stats table.
*/
onChange: (checked?: boolean) => void,
/**
* The state of the button.
*/
showFaceExpressions: boolean,
};
/**
* React component for toggling face expressions grid.
*
* @returns {React$Element<any>}
*/
export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: Props) {
const classes = useStyles();
const { t } = useTranslation();
return (
<div className = { classes.switchContainer } >
<label
className = { classes.switchLabel }
htmlFor = 'face-expressions-switch'>
{ t('speakerStats.displayEmotions')}
</label>
<Switch
checked = { showFaceExpressions }
id = 'face-expressions-switch'
onChange = { onChange } />
</div>
);
}

23
react/features/video-menu/components/web/MuteEveryoneDialog.js → react/features/video-menu/components/web/MuteEveryoneDialog.tsx
View File

@ -1,12 +1,13 @@
// @flow
/* eslint-disable lines-around-comment */
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { Switch } from '../../../base/react';
import { connect } from '../../../base/redux';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Switch from '../../../base/ui/components/web/Switch';
import AbstractMuteEveryoneDialog, { abstractMapStateToProps, type Props }
// @ts-ignore
from '../AbstractMuteEveryoneDialog';
/**
@ -23,9 +24,11 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
* @returns {void}
*/
_onToggleModeration() {
// @ts-ignore
this.setState(state => {
return {
audioModerationEnabled: !state.audioModerationEnabled,
// @ts-ignore
content: this.props.t(state.audioModerationEnabled
? 'dialog.muteEveryoneDialog' : 'dialog.muteEveryoneDialogModerationOn'
)
@ -44,21 +47,26 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
<Dialog
okKey = 'dialog.muteParticipantButton'
onSubmit = { this._onSubmit }
// @ts-ignore
titleString = { this.props.title }
width = 'small'>
<div className = 'mute-dialog'>
{/* @ts-ignore */}
{ this.state.content }
{/* @ts-ignore */}
{ this.props.isModerationSupported && this.props.exclude.length === 0 && (
<>
<div className = 'separator-line' />
<div className = 'control-row'>
<label htmlFor = 'moderation-switch'>
{/* @ts-ignore */}
{this.props.t('dialog.moderationAudioLabel')}
</label>
<Switch
// @ts-ignore
checked = { !this.state.audioModerationEnabled }
id = 'moderation-switch'
onValueChange = { this._onToggleModeration }
value = { !this.state.audioModerationEnabled } />
onChange = { this._onToggleModeration } />
</div>
</>
)}
@ -70,4 +78,5 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
_onSubmit: () => boolean;
}
// @ts-ignore
export default translate(connect(abstractMapStateToProps)(MuteEveryoneDialog));

23
react/features/video-menu/components/web/MuteEveryonesVideoDialog.js → react/features/video-menu/components/web/MuteEveryonesVideoDialog.tsx
View File

@ -1,12 +1,13 @@
// @flow
/* eslint-disable lines-around-comment */
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { Switch } from '../../../base/react';
import { connect } from '../../../base/redux';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Switch from '../../../base/ui/components/web/Switch';
import AbstractMuteEveryonesVideoDialog, { abstractMapStateToProps, type Props }
// @ts-ignore
from '../AbstractMuteEveryonesVideoDialog';
/**
@ -23,9 +24,11 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
* @returns {void}
*/
_onToggleModeration() {
// @ts-ignore
this.setState(state => {
return {
moderationEnabled: !state.moderationEnabled,
// @ts-ignore
content: this.props.t(state.moderationEnabled
? 'dialog.muteEveryonesVideoDialog' : 'dialog.muteEveryonesVideoDialogModerationOn'
)
@ -44,21 +47,26 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
<Dialog
okKey = 'dialog.muteParticipantsVideoButton'
onSubmit = { this._onSubmit }
// @ts-ignore
titleString = { this.props.title }
width = 'small'>
<div className = 'mute-dialog'>
{/* @ts-ignore */}
{this.state.content}
{/* @ts-ignore */}
{ this.props.isModerationSupported && this.props.exclude.length === 0 && (
<>
<div className = 'separator-line' />
<div className = 'control-row'>
<label htmlFor = 'moderation-switch'>
{/* @ts-ignore */}
{this.props.t('dialog.moderationVideoLabel')}
</label>
<Switch
// @ts-ignore
checked = { !this.state.moderationEnabled }
id = 'moderation-switch'
onValueChange = { this._onToggleModeration }
value = { !this.state.moderationEnabled } />
onChange = { this._onToggleModeration } />
</div>
</>
)}
@ -70,4 +78,5 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
_onSubmit: () => boolean;
}
// @ts-ignore
export default translate(connect(abstractMapStateToProps)(MuteEveryonesVideoDialog));