ref(moderator-settings) Update Moderator tab in Settings Dialog (#12991)
Update design
This commit is contained in:
Robert Pintilii
GitHub
parent
b1a71d55d7
commit
d550254f31
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1602 8.24439C13.3281 8.16225 14.25 7.18879 14.25 6C14.25 4.75736 13.2426 3.75 12 3.75C10.7574 3.75 9.75 4.75736 9.75 6C9.75 7.18151 10.6607 8.15032 11.8184 8.24278C11.5197 8.21896 11.2375 8.13687 10.9831 8.00775C9.85816 9.83693 8.19346 10.3318 6.74461 10.3424C6.66364 9.17333 5.68961 8.25 4.5 8.25C3.25736 8.25 2.25 9.25736 2.25 10.5C2.25 11.7426 3.25736 12.75 4.5 12.75C5.32135 12.75 6.03995 12.31 6.43279 11.6528C6.39557 11.715 6.35542 11.7754 6.31253 11.8336C6.67901 11.8506 7.06503 11.8447 7.4618 11.805C8.64456 11.6868 9.95784 11.2623 11.0918 10.2228C11.4736 9.87283 11.8205 9.46641 12.1289 9.0006C12.4727 9.47803 12.8468 9.89069 13.2474 10.2432C14.3929 11.2513 15.6592 11.6829 16.8118 11.8042C17.1152 11.8362 17.4101 11.8467 17.6932 11.8412C17.6739 11.8152 17.6551 11.7887 17.6369 11.7619C18.0415 12.3582 18.725 12.75 19.5 12.75C20.7426 12.75 21.75 11.7426 21.75 10.5C21.75 9.25736 20.7426 8.25 19.5 8.25C18.3129 8.25 17.3405 9.16938 17.256 10.335C15.9245 10.2658 14.3912 9.7053 13.1957 7.90649C12.8918 8.09752 12.5389 8.21778 12.1602 8.24439ZM12 6.75C12.4142 6.75 12.75 6.41421 12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75ZM20.25 10.5C20.25 10.9142 19.9142 11.25 19.5 11.25C19.0858 11.25 18.75 10.9142 18.75 10.5C18.75 10.0858 19.0858 9.75 19.5 9.75C19.9142 9.75 20.25 10.0858 20.25 10.5ZM4.5 11.25C4.91421 11.25 5.25 10.9142 5.25 10.5C5.25 10.0858 4.91421 9.75 4.5 9.75C4.08579 9.75 3.75 10.0858 3.75 10.5C3.75 10.9142 4.08579 11.25 4.5 11.25Z" fill="white"/>
|
||||
<path d="M17.9485 12.1296C18.3135 12.4773 18.7952 12.7036 19.3289 12.7437L19.2591 12.9706C19.1623 13.2853 18.8715 13.5 18.5423 13.5C18.0377 13.5 17.677 13.0117 17.8254 12.5294L17.9485 12.1296Z" fill="white"/>
|
||||
<path d="M12.75 18.0001C13.1642 18.0001 13.5 18.3359 13.5 18.7501C13.5 19.1643 13.1642 19.5001 12.75 19.5001H7.85792C7.19941 19.5001 6.61791 19.0706 6.42425 18.4412L4.6712 12.7437C5.20487 12.7036 5.6866 12.4773 6.05164 12.1296L7.85792 18.0001H12.75Z" fill="white"/>
|
||||
<path d="M11.25 18.0002C10.8358 18.0002 10.5 18.336 10.5 18.7502C10.5 19.1644 10.8358 19.5002 11.25 19.5002H16.1421C16.8006 19.5002 17.3821 19.0707 17.5757 18.4413L19.3289 12.7437C18.7952 12.7036 18.3135 12.4773 17.9485 12.1296L16.1421 18.0002H11.25Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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<Props> {
|
||||
class ModeratorTab extends AbstractDialogTab<IProps, any> {
|
||||
/**
|
||||
* 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<Props> {
|
|||
this._onFollowMeEnabledChanged = this._onFollowMeEnabledChanged.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return <div className = 'moderator-tab box'>{ this._renderModeratorSettings() }</div>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback invoked to select if conferences should start
|
||||
* with audio muted.
|
||||
|
|
@ -134,58 +143,59 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
}
|
||||
|
||||
/**
|
||||
* 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 (
|
||||
<div
|
||||
className = 'settings-sub-pane-element'
|
||||
className = { `moderator-tab ${classes.container}` }
|
||||
key = 'moderator'>
|
||||
<div className = 'moderator-settings-wrapper'>
|
||||
<Checkbox
|
||||
checked = { startAudioMuted }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.startAudioMuted') }
|
||||
name = 'start-audio-muted'
|
||||
onChange = { this._onStartAudioMutedChanged } />
|
||||
<Checkbox
|
||||
checked = { startVideoMuted }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.startVideoMuted') }
|
||||
name = 'start-video-muted'
|
||||
onChange = { this._onStartVideoMutedChanged } />
|
||||
<Checkbox
|
||||
checked = { followMeEnabled && !followMeActive }
|
||||
className = 'settings-checkbox'
|
||||
disabled = { followMeActive }
|
||||
label = { t('settings.followMe') }
|
||||
name = 'follow-me'
|
||||
onChange = { this._onFollowMeEnabledChanged } />
|
||||
{ !disableReactionsModeration
|
||||
<h2 className = { classes.title }>
|
||||
{t('settings.moderatorOptions')}
|
||||
</h2>
|
||||
<Checkbox
|
||||
checked = { startAudioMuted }
|
||||
className = { classes.checkbox }
|
||||
label = { t('settings.startAudioMuted') }
|
||||
name = 'start-audio-muted'
|
||||
onChange = { this._onStartAudioMutedChanged } />
|
||||
<Checkbox
|
||||
checked = { startVideoMuted }
|
||||
className = { classes.checkbox }
|
||||
label = { t('settings.startVideoMuted') }
|
||||
name = 'start-video-muted'
|
||||
onChange = { this._onStartVideoMutedChanged } />
|
||||
<Checkbox
|
||||
checked = { followMeEnabled && !followMeActive }
|
||||
className = { classes.checkbox }
|
||||
disabled = { followMeActive }
|
||||
label = { t('settings.followMe') }
|
||||
name = 'follow-me'
|
||||
onChange = { this._onFollowMeEnabledChanged } />
|
||||
{ !disableReactionsModeration
|
||||
&& <Checkbox
|
||||
checked = { startReactionsMuted }
|
||||
className = 'settings-checkbox'
|
||||
className = { classes.checkbox }
|
||||
label = { t('settings.startReactionsMuted') }
|
||||
name = 'start-reactions-muted'
|
||||
onChange = { this._onStartReactionsMutedChanged } /> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
export default translate(ModeratorTab);
|
||||
export default withStyles(styles)(translate(ModeratorTab));
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue