ref(more-tab) Update design on SettingsDialog More tab (#13006)

This commit is contained in:
Robert Pintilii 2023-03-08 10:40:40 +02:00 committed by GitHub
parent fb81619fc5
commit aa57309057
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 73 deletions

View File

@ -995,7 +995,7 @@
"microphones": "Microphones",
"moderator": "Moderator",
"moderatorOptions": "Moderator options",
"more": "More",
"more": "General",
"name": "Name",
"noDevice": "None",
"notifications": "Notifications",

View File

@ -1,3 +1,6 @@
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React from 'react';
import { WithTranslation } from 'react-i18next';
@ -12,7 +15,12 @@ import { MAX_ACTIVE_PARTICIPANTS } from '../../../filmstrip/constants';
/**
* The type of the React {@code Component} props of {@link MoreTab}.
*/
export type Props = AbstractDialogTabProps & WithTranslation & {
export interface IProps extends AbstractDialogTabProps, WithTranslation {
/**
* CSS classes object.
*/
classes: any;
/**
* Whether or not follow me is currently active (enabled by some other participant).
@ -43,11 +51,23 @@ export type Props = AbstractDialogTabProps & WithTranslation & {
* Wether or not the stage filmstrip is enabled.
*/
stageFilmstripEnabled: boolean;
}
/**
* Invoked to obtain translated strings.
*/
t: Function;
const styles = (theme: Theme) => {
return {
container: {
display: 'flex',
flexDirection: 'column' as const
},
divider: {
margin: `${theme.spacing(4)} 0`,
width: '100%',
height: '1px',
border: 0,
backgroundColor: theme.palette.ui03
}
};
};
/**
@ -55,14 +75,14 @@ export type Props = AbstractDialogTabProps & WithTranslation & {
*
* @augments Component
*/
class MoreTab extends AbstractDialogTab<Props, any> {
class MoreTab extends AbstractDialogTab<IProps, any> {
/**
* Initializes a new {@code MoreTab} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
constructor(props: IProps) {
super(props);
// Bind event handler so it is only bound once for every instance.
@ -78,16 +98,17 @@ class MoreTab extends AbstractDialogTab<Props, any> {
* @returns {ReactElement}
*/
render() {
const content = [];
content.push(this._renderSettingsLeft());
content.push(this._renderSettingsRight());
const { showPrejoinSettings, classes } = this.props;
return (
<div
className = 'more-tab box'
className = { clsx('more-tab', classes.container) }
key = 'more'>
{ content }
{showPrejoinSettings && <>
{this._renderPrejoinScreenSettings()}
<hr className = { classes.divider } />
</>}
{this._renderMaxStageParticipantsSelect()}
</div>
);
}
@ -127,18 +148,11 @@ class MoreTab extends AbstractDialogTab<Props, any> {
const { t, showPrejoinPage } = this.props;
return (
<div
className = 'settings-sub-pane-element'
key = 'prejoin-screen'>
<span className = 'checkbox-label'>
{ t('prejoin.premeeting') }
</span>
<Checkbox
checked = { showPrejoinPage }
label = { t('prejoin.showScreen') }
name = 'show-prejoin-page'
onChange = { this._onShowPrejoinPageChanged } />
</div>
<Checkbox
checked = { showPrejoinPage }
label = { t('prejoin.showScreen') }
name = 'show-prejoin-page'
onChange = { this._onShowPrejoinPageChanged } />
);
}
@ -162,52 +176,13 @@ class MoreTab extends AbstractDialogTab<Props, any> {
});
return (
<div
className = 'settings-sub-pane-element'
key = 'maxStageParticipants'>
<div className = 'dropdown-menu'>
<Select
label = { t('settings.maxStageParticipants') }
onChange = { this._onMaxStageParticipantsSelect }
options = { maxParticipantsItems }
value = { maxStageParticipants } />
</div>
</div>
);
}
/**
* Returns the React element that needs to be displayed on the right half of the more tabs.
*
* @private
* @returns {ReactElement}
*/
_renderSettingsRight() {
return (
<div
className = 'settings-sub-pane right'
key = 'settings-sub-pane-right'>
{ this._renderMaxStageParticipantsSelect() }
</div>
);
}
/**
* Returns the React element that needs to be displayed on the left half of the more tabs.
*
* @returns {ReactElement}
*/
_renderSettingsLeft() {
const { showPrejoinSettings } = this.props;
return (
<div
className = 'settings-sub-pane left'
key = 'settings-sub-pane-left'>
{ showPrejoinSettings && this._renderPrejoinScreenSettings() }
</div>
<Select
label = { t('settings.maxStageParticipants') }
onChange = { this._onMaxStageParticipantsSelect }
options = { maxParticipantsItems }
value = { maxStageParticipants } />
);
}
}
export default translate(MoreTab);
export default withStyles(styles)(translate(MoreTab));

View File

@ -389,8 +389,6 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
if (showMoreTab) {
tabs.push({
name: SETTINGS_TABS.MORE,
// @ts-ignore
component: MoreTab,
labelKey: 'settings.more',
props: moreTabProps,