diff --git a/lang/main.json b/lang/main.json index 2e44156d8..0c8d94165 100644 --- a/lang/main.json +++ b/lang/main.json @@ -991,6 +991,7 @@ "maxStageParticipants": "Maximum number of participants who can be pinned to the main stage (EXPERIMENTAL)", "microphones": "Microphones", "moderator": "Moderator", + "moderatorOptions": "Moderator options", "more": "More", "name": "Name", "noDevice": "None", diff --git a/react/features/base/icons/svg/host.svg b/react/features/base/icons/svg/host.svg new file mode 100644 index 000000000..e49c95007 --- /dev/null +++ b/react/features/base/icons/svg/host.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/react/features/base/icons/svg/index.ts b/react/features/base/icons/svg/index.ts index 8f2a23cb7..081bf61a0 100644 --- a/react/features/base/icons/svg/index.ts +++ b/react/features/base/icons/svg/index.ts @@ -43,6 +43,7 @@ export { default as IconFeedback } from './feedback.svg'; export { default as IconGear } from './gear.svg'; export { default as IconGoogle } from './google.svg'; export { default as IconHangup } from './hangup.svg'; +export { default as IconHost } from './host.svg'; export { default as IconHelp } from './help.svg'; export { default as IconHighlight } from './highlight.svg'; export { default as IconImage } from './image.svg'; diff --git a/react/features/settings/components/web/ModeratorTab.tsx b/react/features/settings/components/web/ModeratorTab.tsx index e52136e56..04ce7f0f5 100644 --- a/react/features/settings/components/web/ModeratorTab.tsx +++ b/react/features/settings/components/web/ModeratorTab.tsx @@ -1,18 +1,23 @@ +import { Theme } from '@mui/material'; +import { withStyles } from '@mui/styles'; import React from 'react'; import { WithTranslation } from 'react-i18next'; -// @ts-ignore -import { AbstractDialogTab } from '../../../base/dialog'; -// eslint-disable-next-line lines-around-comment -// @ts-ignore -import type { Props as AbstractDialogTabProps } from '../../../base/dialog'; +import AbstractDialogTab, { + IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab'; import { translate } from '../../../base/i18n/functions'; +import { withPixelLineHeight } from '../../../base/styles/functions.web'; import Checkbox from '../../../base/ui/components/web/Checkbox'; /** * The type of the React {@code Component} props of {@link ModeratorTab}. */ -export type Props = AbstractDialogTabProps & WithTranslation & { +export interface IProps extends AbstractDialogTabProps, WithTranslation { + + /** + * CSS classes object. + */ + classes: any; /** * If set hides the reactions moderation setting. @@ -46,11 +51,25 @@ export type Props = AbstractDialogTabProps & WithTranslation & { * enabled. */ startVideoMuted: boolean; +} - /** - * Invoked to obtain translated strings. - */ - t: Function; +const styles = (theme: Theme) => { + return { + container: { + display: 'flex', + flexDirection: 'column' as const + }, + + title: { + ...withPixelLineHeight(theme.typography.heading6), + color: `${theme.palette.text01} !important`, + marginBottom: theme.spacing(3) + }, + + checkbox: { + marginBottom: theme.spacing(3) + } + }; }; /** @@ -58,14 +77,14 @@ export type Props = AbstractDialogTabProps & WithTranslation & { * * @augments Component */ -class ModeratorTab extends AbstractDialogTab { +class ModeratorTab extends AbstractDialogTab { /** * Initializes a new {@code ModeratorTab} 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. @@ -75,16 +94,6 @@ class ModeratorTab extends AbstractDialogTab { this._onFollowMeEnabledChanged = this._onFollowMeEnabledChanged.bind(this); } - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - return
{ this._renderModeratorSettings() }
; - } - /** * Callback invoked to select if conferences should start * with audio muted. @@ -134,58 +143,59 @@ class ModeratorTab extends AbstractDialogTab { } /** - * Returns the React Element for modifying conference-wide settings. + * Implements React's {@link Component#render()}. * - * @private + * @inheritdoc * @returns {ReactElement} */ - _renderModeratorSettings() { + render() { const { + classes, disableReactionsModeration, followMeActive, followMeEnabled, startAudioMuted, startVideoMuted, startReactionsMuted, - t // @ts-ignore + t } = this.props; return (
-
- - - - { !disableReactionsModeration +

+ {t('settings.moderatorOptions')} +

+ + + + { !disableReactionsModeration && } -
); } } -// @ts-ignore -export default translate(ModeratorTab); +export default withStyles(styles)(translate(ModeratorTab)); diff --git a/react/features/settings/components/web/SettingsDialog.tsx b/react/features/settings/components/web/SettingsDialog.tsx index c42159a7c..124c1e06f 100644 --- a/react/features/settings/components/web/SettingsDialog.tsx +++ b/react/features/settings/components/web/SettingsDialog.tsx @@ -4,7 +4,7 @@ import { withStyles } from '@mui/styles'; import React, { Component } from 'react'; import { IReduxState } from '../../../app/types'; -import { IconBell, IconCalendar, IconGear, IconModerator, IconUser, IconVolumeUp } from '../../../base/icons/svg'; +import { IconBell, IconCalendar, IconGear, IconHost, IconUser, IconVolumeUp } from '../../../base/icons/svg'; import { connect } from '../../../base/redux/functions'; import { withPixelLineHeight } from '../../../base/styles/functions.web'; import DialogWithTabs, { IDialogTab } from '../../../base/ui/components/web/DialogWithTabs'; @@ -151,10 +151,6 @@ const styles = (theme: Theme) => { marginBottom: theme.spacing(2) }, - '& .moderator-settings-wrapper': { - paddingTop: '20px' - }, - '& .calendar-tab': { alignItems: 'center', flexDirection: 'column', @@ -280,18 +276,6 @@ function _mapStateToProps(state: IReduxState, ownProps: any) { }); } - if (showProfileSettings) { - tabs.push({ - name: SETTINGS_TABS.PROFILE, - component: ProfileTab, - labelKey: 'profile.title', - props: getProfileTabProps(state), - className: `settings-pane ${classes.settingsDialog}`, - submit: submitProfileTab, - icon: IconUser - }); - } - if (showModeratorSettings) { tabs.push({ name: SETTINGS_TABS.MODERATOR, @@ -311,7 +295,19 @@ function _mapStateToProps(state: IReduxState, ownProps: any) { }, className: `settings-pane ${classes.settingsDialog} moderator-pane`, submit: submitModeratorTab, - icon: IconModerator + icon: IconHost + }); + } + + if (showProfileSettings) { + tabs.push({ + name: SETTINGS_TABS.PROFILE, + component: ProfileTab, + labelKey: 'profile.title', + props: getProfileTabProps(state), + className: `settings-pane ${classes.settingsDialog} profile-pane`, + submit: submitProfileTab, + icon: IconUser }); }