feat(ui-components) Add Checkbox component (#11927)
Replace all checkboxes in the Settings Dialog Convert some dialog tabs to TS
This commit is contained in:
Robert Pintilii
GitHub
parent
db54c45b13
commit
3960b59765
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.94839 9.04724C4.73143 8.81109 4.37968 8.81109 4.16272 9.04724C3.94576 9.2834 3.94576 9.66627 4.16272 9.90243L6.8458 12.8229C7.06316 13.0595 7.41572 13.059 7.6325 12.8218L13.8383 6.03117C14.0547 5.7944 14.0538 5.41152 13.8362 5.17599C13.6187 4.94046 13.267 4.94147 13.0506 5.17824L7.2376 11.539L4.94839 9.04724Z" fill="currentColor" stroke="currentColor" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 476 B |
|
|
@ -25,6 +25,7 @@ export { default as IconChat } from './chat.svg';
|
|||
export { default as IconChatSend } from './send.svg';
|
||||
export { default as IconChatUnread } from './chat-unread.svg';
|
||||
export { default as IconCheck } from './check.svg';
|
||||
export { default as IconCheckMark } from './checkmark.svg';
|
||||
export { default as IconCheckSolid } from './check-solid.svg';
|
||||
export { default as IconCircle } from './circle.svg';
|
||||
export { default as IconClose } from './close.svg';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
import { makeStyles } from '@material-ui/core';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { isMobileBrowser } from '../../../environment/utils';
|
||||
import Icon from '../../../icons/components/Icon';
|
||||
import { IconCheckMark } from '../../../icons/svg';
|
||||
import { withPixelLineHeight } from '../../../styles/functions.web';
|
||||
// eslint-disable-next-line lines-around-comment
|
||||
// @ts-ignore
|
||||
import BaseTheme from '../BaseTheme.web';
|
||||
|
||||
interface CheckboxProps {
|
||||
|
||||
/**
|
||||
* Whether the input is checked or not.
|
||||
*/
|
||||
checked: boolean;
|
||||
|
||||
/**
|
||||
* Class name for additional styles.
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* Whether the input is disabled or not.
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* The label of the input.
|
||||
*/
|
||||
label: string;
|
||||
|
||||
/**
|
||||
* The name of the input.
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Change callback.
|
||||
*/
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: any) => {
|
||||
return {
|
||||
formControl: {
|
||||
...withPixelLineHeight(theme.typography.bodyLongRegular),
|
||||
color: theme.palette.text01,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
|
||||
'&.is-mobile': {
|
||||
...withPixelLineHeight(theme.typography.bodyLongRegularLarge)
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
activeArea: {
|
||||
display: 'grid',
|
||||
placeContent: 'center',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
backgroundColor: 'transparent',
|
||||
marginRight: '15px',
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
|
||||
'& input[type="checkbox"]': {
|
||||
appearance: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
margin: 0,
|
||||
font: 'inherit',
|
||||
color: theme.palette.icon03,
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
border: `2px solid ${theme.palette.icon03}`,
|
||||
borderRadius: '3px',
|
||||
cursor: 'pointer',
|
||||
|
||||
display: 'grid',
|
||||
placeContent: 'center',
|
||||
|
||||
'&::before': {
|
||||
content: 'url("")',
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
opacity: 0,
|
||||
backgroundColor: theme.palette.action01,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: 0,
|
||||
borderRadius: '3px',
|
||||
transition: '.2s'
|
||||
},
|
||||
|
||||
'&:checked::before': {
|
||||
opacity: 1
|
||||
},
|
||||
|
||||
'&:disabled': {
|
||||
backgroundColor: theme.palette.ui03,
|
||||
borderColor: theme.palette.ui04,
|
||||
|
||||
'&::before': {
|
||||
backgroundColor: theme.palette.ui04
|
||||
}
|
||||
},
|
||||
|
||||
'&:checked+.checkmark': {
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
|
||||
'& .checkmark': {
|
||||
position: 'absolute',
|
||||
left: '3px',
|
||||
top: '3px',
|
||||
opacity: 0,
|
||||
transition: '.2s'
|
||||
},
|
||||
|
||||
'&.is-mobile': {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
|
||||
'& input[type="checkbox"]': {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
|
||||
'&::before': {
|
||||
width: '24px',
|
||||
height: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
'& .checkmark': {
|
||||
left: '11px',
|
||||
top: '10px'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Checkbox = ({
|
||||
checked,
|
||||
className,
|
||||
disabled,
|
||||
label,
|
||||
name,
|
||||
onChange
|
||||
}: CheckboxProps) => {
|
||||
const styles = useStyles();
|
||||
const isMobile = isMobileBrowser();
|
||||
|
||||
return (<div className = { clsx(styles.formControl, isMobile && 'is-mobile', className) }>
|
||||
<label className = { clsx(styles.activeArea, isMobile && 'is-mobile') }>
|
||||
<input
|
||||
checked = { checked }
|
||||
disabled = { disabled }
|
||||
name = { name }
|
||||
onChange = { onChange }
|
||||
type = 'checkbox' />
|
||||
<Icon
|
||||
className = 'checkmark'
|
||||
color = { disabled ? BaseTheme.palette.icon03 : BaseTheme.palette.icon01 }
|
||||
size = { 18 }
|
||||
src = { IconCheckMark } />
|
||||
</label>
|
||||
<label>{label}</label>
|
||||
</div>);
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
// @flow
|
||||
import { Checkbox } from '@atlaskit/checkbox';
|
||||
/* eslint-disable lines-around-comment */
|
||||
import React from 'react';
|
||||
|
||||
// @ts-ignore
|
||||
import { AbstractDialogTab } from '../../../base/dialog';
|
||||
// @ts-ignore
|
||||
import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
|
||||
// @ts-ignore
|
||||
import { translate } from '../../../base/i18n';
|
||||
import Checkbox from '../../../base/ui/components/web/Checkbox';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link MoreTab}.
|
||||
*/
|
||||
export type Props = {
|
||||
...$Exact<AbstractDialogTabProps>,
|
||||
export type Props = AbstractDialogTabProps & {
|
||||
|
||||
/**
|
||||
* If set hides the reactions moderation setting.
|
||||
|
|
@ -33,18 +35,18 @@ export type Props = {
|
|||
*/
|
||||
startAudioMuted: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not the user has selected the Start Video Muted feature to be
|
||||
* enabled.
|
||||
*/
|
||||
startVideoMuted: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not the user has selected the Start Reactions Muted feature to be
|
||||
* enabled.
|
||||
*/
|
||||
startReactionsMuted: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not the user has selected the Start Video Muted feature to be
|
||||
* enabled.
|
||||
*/
|
||||
startVideoMuted: boolean,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
|
|
@ -83,8 +85,6 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
return <div className = 'moderator-tab box'>{ this._renderModeratorSettings() }</div>;
|
||||
}
|
||||
|
||||
_onStartAudioMutedChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if conferences should start
|
||||
* with audio muted.
|
||||
|
|
@ -93,12 +93,10 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onStartAudioMutedChanged({ target: { checked } }) {
|
||||
_onStartAudioMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ startAudioMuted: checked });
|
||||
}
|
||||
|
||||
_onStartVideoMutedChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if conferences should start
|
||||
* with video disabled.
|
||||
|
|
@ -107,12 +105,10 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onStartVideoMutedChanged({ target: { checked } }) {
|
||||
_onStartVideoMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ startVideoMuted: checked });
|
||||
}
|
||||
|
||||
_onStartReactionsMutedChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if conferences should start
|
||||
* with reactions muted.
|
||||
|
|
@ -121,12 +117,10 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onStartReactionsMutedChanged({ target: { checked } }) {
|
||||
_onStartReactionsMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ startReactionsMuted: checked });
|
||||
}
|
||||
|
||||
_onFollowMeEnabledChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if follow-me mode
|
||||
* should be activated.
|
||||
|
|
@ -135,7 +129,7 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onFollowMeEnabledChanged({ target: { checked } }) {
|
||||
_onFollowMeEnabledChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ followMeEnabled: checked });
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +147,7 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
startAudioMuted,
|
||||
startVideoMuted,
|
||||
startReactionsMuted,
|
||||
t
|
||||
t // @ts-ignore
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -162,24 +156,28 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|||
key = 'moderator'>
|
||||
<div className = 'moderator-settings-wrapper'>
|
||||
<Checkbox
|
||||
isChecked = { startAudioMuted }
|
||||
checked = { startAudioMuted }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.startAudioMuted') }
|
||||
name = 'start-audio-muted'
|
||||
onChange = { this._onStartAudioMutedChanged } />
|
||||
<Checkbox
|
||||
isChecked = { startVideoMuted }
|
||||
checked = { startVideoMuted }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.startVideoMuted') }
|
||||
name = 'start-video-muted'
|
||||
onChange = { this._onStartVideoMutedChanged } />
|
||||
<Checkbox
|
||||
isChecked = { followMeEnabled && !followMeActive }
|
||||
isDisabled = { followMeActive }
|
||||
checked = { followMeEnabled && !followMeActive }
|
||||
className = 'settings-checkbox'
|
||||
disabled = { followMeActive }
|
||||
label = { t('settings.followMe') }
|
||||
name = 'follow-me'
|
||||
onChange = { this._onFollowMeEnabledChanged } />
|
||||
{ !disableReactionsModeration
|
||||
&& <Checkbox
|
||||
isChecked = { startReactionsMuted }
|
||||
checked = { startReactionsMuted }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.startReactionsMuted') }
|
||||
name = 'start-reactions-muted'
|
||||
onChange = { this._onStartReactionsMutedChanged } /> }
|
||||
|
|
@ -1,24 +1,30 @@
|
|||
// @flow
|
||||
import { Checkbox } from '@atlaskit/checkbox';
|
||||
/* eslint-disable lines-around-comment */
|
||||
import DropdownMenu, {
|
||||
DropdownItem,
|
||||
DropdownItemGroup
|
||||
} from '@atlaskit/dropdown-menu';
|
||||
import React from 'react';
|
||||
|
||||
// @ts-ignore
|
||||
import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut';
|
||||
// @ts-ignore
|
||||
import { AbstractDialogTab } from '../../../base/dialog';
|
||||
// @ts-ignore
|
||||
import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
|
||||
// @ts-ignore
|
||||
import { translate } from '../../../base/i18n';
|
||||
import Checkbox from '../../../base/ui/components/web/Checkbox';
|
||||
// @ts-ignore
|
||||
import TouchmoveHack from '../../../chat/components/web/TouchmoveHack';
|
||||
// @ts-ignore
|
||||
import { MAX_ACTIVE_PARTICIPANTS } from '../../../filmstrip';
|
||||
// @ts-ignore
|
||||
import { SS_DEFAULT_FRAME_RATE } from '../../constants';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link MoreTab}.
|
||||
*/
|
||||
export type Props = {
|
||||
...$Exact<AbstractDialogTabProps>,
|
||||
export type Props = AbstractDialogTabProps & {
|
||||
|
||||
/**
|
||||
* The currently selected desktop share frame rate in the frame rate select dropdown.
|
||||
|
|
@ -41,21 +47,26 @@ export type Props = {
|
|||
*/
|
||||
disableHideSelfView: boolean,
|
||||
|
||||
/**
|
||||
* The types of enabled notifications that can be configured and their specific visibility.
|
||||
*/
|
||||
enabledNotifications: Object,
|
||||
|
||||
/**
|
||||
* Whether or not follow me is currently active (enabled by some other participant).
|
||||
*/
|
||||
followMeActive: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not to hide self-view screen.
|
||||
*/
|
||||
hideSelfView: boolean,
|
||||
|
||||
/**
|
||||
* All available languages to display in the language select dropdown.
|
||||
*/
|
||||
languages: Array<string>,
|
||||
|
||||
/**
|
||||
* The types of enabled notifications that can be configured and their specific visibility.
|
||||
*/
|
||||
enabledNotifications: Object,
|
||||
|
||||
/**
|
||||
* Whether or not to display the language select dropdown.
|
||||
*/
|
||||
|
|
@ -71,20 +82,15 @@ export type Props = {
|
|||
*/
|
||||
showNotificationsSettings: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not to display the prejoin settings section.
|
||||
*/
|
||||
showPrejoinSettings: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not to show prejoin screen.
|
||||
*/
|
||||
showPrejoinPage: boolean,
|
||||
|
||||
/**
|
||||
* Whether or not to hide self-view screen.
|
||||
* Whether or not to display the prejoin settings section.
|
||||
*/
|
||||
hideSelfView: boolean,
|
||||
showPrejoinSettings: boolean,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
|
|
@ -123,6 +129,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
// @ts-ignore
|
||||
this.state = {
|
||||
isFramerateSelectOpen: false,
|
||||
isLanguageSelectOpen: false,
|
||||
|
|
@ -164,8 +171,6 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
_onFramerateDropdownOpenChange: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to toggle display of the desktop share framerate select dropdown.
|
||||
*
|
||||
|
|
@ -173,12 +178,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onFramerateDropdownOpenChange({ isOpen }) {
|
||||
_onFramerateDropdownOpenChange({ isOpen }: {isOpen: boolean}) {
|
||||
// @ts-ignore
|
||||
this.setState({ isFramerateSelectOpen: isOpen });
|
||||
}
|
||||
|
||||
_onFramerateItemSelect: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select a frame rate from the select dropdown.
|
||||
*
|
||||
|
|
@ -186,14 +190,12 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onFramerateItemSelect(e) {
|
||||
_onFramerateItemSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const frameRate = e.currentTarget.getAttribute('data-framerate');
|
||||
|
||||
super._onChange({ currentFramerate: frameRate });
|
||||
}
|
||||
|
||||
_onLanguageDropdownOpenChange: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to toggle display of the language select dropdown.
|
||||
*
|
||||
|
|
@ -201,12 +203,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onLanguageDropdownOpenChange({ isOpen }) {
|
||||
_onLanguageDropdownOpenChange({ isOpen }: {isOpen: boolean}) {
|
||||
// @ts-ignore
|
||||
this.setState({ isLanguageSelectOpen: isOpen });
|
||||
}
|
||||
|
||||
_onLanguageItemSelect: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select a language from select dropdown.
|
||||
*
|
||||
|
|
@ -214,14 +215,12 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onLanguageItemSelect(e) {
|
||||
_onLanguageItemSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const language = e.currentTarget.getAttribute('data-language');
|
||||
|
||||
super._onChange({ currentLanguage: language });
|
||||
}
|
||||
|
||||
_onShowPrejoinPageChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if the lobby
|
||||
* should be shown.
|
||||
|
|
@ -230,12 +229,10 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onShowPrejoinPageChanged({ target: { checked } }) {
|
||||
_onShowPrejoinPageChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ showPrejoinPage: checked });
|
||||
}
|
||||
|
||||
_onKeyboardShortcutEnableChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if the given type of
|
||||
* notifications should be shown.
|
||||
|
|
@ -245,17 +242,16 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onEnabledNotificationsChanged({ target: { checked } }, type) {
|
||||
_onEnabledNotificationsChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>, type: any) {
|
||||
super._onChange({
|
||||
enabledNotifications: {
|
||||
// @ts-ignore
|
||||
...this.props.enabledNotifications,
|
||||
[type]: checked
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_onEnabledNotificationsChanged: (Object, string) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if global keyboard shortcuts
|
||||
* should be enabled.
|
||||
|
|
@ -264,13 +260,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onKeyboardShortcutEnableChanged({ target: { checked } }) {
|
||||
_onKeyboardShortcutEnableChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
keyboardShortcut.enable(checked);
|
||||
super._onChange({ keyboardShortcutEnable: checked });
|
||||
}
|
||||
|
||||
_onHideSelfViewChanged: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select if hide self view should be enabled.
|
||||
*
|
||||
|
|
@ -278,12 +272,10 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onHideSelfViewChanged({ target: { checked } }) {
|
||||
_onHideSelfViewChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ hideSelfView: checked });
|
||||
}
|
||||
|
||||
_onMaxStageParticipantsOpenChange: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to toggle display of the max stage participants select dropdown.
|
||||
*
|
||||
|
|
@ -291,12 +283,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMaxStageParticipantsOpenChange({ isOpen }) {
|
||||
_onMaxStageParticipantsOpenChange({ isOpen }: {isOpen: boolean}) {
|
||||
// @ts-ignore
|
||||
this.setState({ isMaxStageParticipantsOpen: isOpen });
|
||||
}
|
||||
|
||||
_onMaxStageParticipantsSelect: (Object) => void;
|
||||
|
||||
/**
|
||||
* Callback invoked to select a max number of stage participants from the select dropdown.
|
||||
*
|
||||
|
|
@ -304,7 +295,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMaxStageParticipantsSelect(e) {
|
||||
_onMaxStageParticipantsSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const maxParticipants = e.currentTarget.getAttribute('data-maxparticipants');
|
||||
|
||||
super._onChange({ maxStageParticipants: maxParticipants });
|
||||
|
|
@ -316,8 +307,9 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderFramerateSelect() {
|
||||
// @ts-ignore
|
||||
const { currentFramerate, desktopShareFramerates, t } = this.props;
|
||||
const frameRateItems = desktopShareFramerates.map(frameRate => (
|
||||
const frameRateItems = desktopShareFramerates.map((frameRate: string) => (
|
||||
<DropdownItem
|
||||
data-framerate = { frameRate }
|
||||
key = { frameRate }
|
||||
|
|
@ -337,6 +329,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
flex = { true }
|
||||
isModal = { true }>
|
||||
<DropdownMenu
|
||||
// @ts-ignore
|
||||
isOpen = { this.state.isFramerateSelectOpen }
|
||||
onOpenChange = { this._onFramerateDropdownOpenChange }
|
||||
shouldFitContainer = { true }
|
||||
|
|
@ -370,6 +363,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderKeyboardShortcutCheckbox() {
|
||||
// @ts-ignore
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -380,7 +374,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
{ t('keyboardShortcuts.keyboardShortcuts') }
|
||||
</h2>
|
||||
<Checkbox
|
||||
isChecked = { keyboardShortcut.getEnabled() }
|
||||
checked = { keyboardShortcut.getEnabled() }
|
||||
label = { t('prejoin.keyboardShortcuts') }
|
||||
name = 'enable-keyboard-shortcuts'
|
||||
onChange = { this._onKeyboardShortcutEnableChanged } />
|
||||
|
|
@ -395,6 +389,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderSelfViewCheckbox() {
|
||||
// @ts-ignore
|
||||
const { hideSelfView, t } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -405,7 +400,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
{ t('settings.selfView') }
|
||||
</h2>
|
||||
<Checkbox
|
||||
isChecked = { hideSelfView }
|
||||
checked = { hideSelfView }
|
||||
label = { t('videothumbnail.hideSelfView') }
|
||||
name = 'hide-self-view'
|
||||
onChange = { this._onHideSelfViewChanged } />
|
||||
|
|
@ -424,10 +419,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
currentLanguage,
|
||||
languages,
|
||||
t
|
||||
// @ts-ignore
|
||||
} = this.props;
|
||||
|
||||
const languageItems
|
||||
= languages.map(language => (
|
||||
= languages.map((language: string) => (
|
||||
<DropdownItem
|
||||
data-language = { language }
|
||||
key = { language }
|
||||
|
|
@ -447,6 +443,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
flex = { true }
|
||||
isModal = { true }>
|
||||
<DropdownMenu
|
||||
// @ts-ignore
|
||||
isOpen = { this.state.isLanguageSelectOpen }
|
||||
onOpenChange = { this._onLanguageDropdownOpenChange }
|
||||
shouldFitContainer = { true }
|
||||
|
|
@ -474,6 +471,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderPrejoinScreenSettings() {
|
||||
// @ts-ignore
|
||||
const { t, showPrejoinPage } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -484,7 +482,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
{ t('prejoin.premeeting') }
|
||||
</h2>
|
||||
<Checkbox
|
||||
isChecked = { showPrejoinPage }
|
||||
checked = { showPrejoinPage }
|
||||
label = { t('prejoin.showScreen') }
|
||||
name = 'show-prejoin-page'
|
||||
onChange = { this._onShowPrejoinPageChanged } />
|
||||
|
|
@ -499,6 +497,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderNotificationsSettings() {
|
||||
// @ts-ignore
|
||||
const { t, enabledNotifications } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -511,7 +510,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
{
|
||||
Object.keys(enabledNotifications).map(key => (
|
||||
<Checkbox
|
||||
isChecked = { enabledNotifications[key] }
|
||||
checked = { enabledNotifications[key] }
|
||||
key = { key }
|
||||
label = { t(key) }
|
||||
name = { `show-${key}` }
|
||||
|
|
@ -523,14 +522,13 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
_renderMaxStageParticipantsSelect: () => void;
|
||||
|
||||
/**
|
||||
* Returns the React Element for the max stage participants dropdown.
|
||||
*
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderMaxStageParticipantsSelect() {
|
||||
// @ts-ignore
|
||||
const { maxStageParticipants, t, stageFilmstripEnabled } = this.props;
|
||||
|
||||
if (!stageFilmstripEnabled) {
|
||||
|
|
@ -557,6 +555,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
flex = { true }
|
||||
isModal = { true }>
|
||||
<DropdownMenu
|
||||
// @ts-ignore
|
||||
isOpen = { this.state.isMaxStageParticipantsOpen }
|
||||
onOpenChange = { this._onMaxStageParticipantsOpenChange }
|
||||
shouldFitContainer = { true }
|
||||
|
|
@ -582,6 +581,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderSettingsRight() {
|
||||
// @ts-ignore
|
||||
const { showLanguageSettings } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -601,6 +601,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderSettingsLeft() {
|
||||
// @ts-ignore
|
||||
const { disableHideSelfView, showNotificationsSettings, showPrejoinSettings } = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -145,6 +145,11 @@ const styles = theme => {
|
|||
flex: 1
|
||||
},
|
||||
|
||||
'& .settings-checkbox': {
|
||||
display: 'flex',
|
||||
marginBottom: `${theme.spacing(2)}px`
|
||||
},
|
||||
|
||||
'& .moderator-settings-wrapper': {
|
||||
paddingTop: '20px'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,25 +1,29 @@
|
|||
// @flow
|
||||
|
||||
import Checkbox from '@atlaskit/checkbox';
|
||||
/* eslint-disable lines-around-comment */
|
||||
import React from 'react';
|
||||
|
||||
// @ts-ignore
|
||||
import { AbstractDialogTab } from '../../../base/dialog';
|
||||
// @ts-ignore
|
||||
import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
|
||||
// @ts-ignore
|
||||
import { translate } from '../../../base/i18n';
|
||||
|
||||
declare var APP: Object;
|
||||
import Checkbox from '../../../base/ui/components/web/Checkbox';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link SoundsTab}.
|
||||
*/
|
||||
export type Props = {
|
||||
...$Exact<AbstractDialogTabProps>,
|
||||
export type Props = AbstractDialogTabProps & {
|
||||
|
||||
/**
|
||||
* Whether or not the reactions feature is enabled.
|
||||
*/
|
||||
enableReactions: Boolean,
|
||||
|
||||
/**
|
||||
* Whether or not moderator muted the sounds.
|
||||
*/
|
||||
moderatorMutedSoundsReactions: Boolean,
|
||||
|
||||
/**
|
||||
* Whether or not the sound for the incoming message should play.
|
||||
*/
|
||||
|
|
@ -40,20 +44,15 @@ export type Props = {
|
|||
*/
|
||||
soundsParticipantLeft: Boolean,
|
||||
|
||||
/**
|
||||
* Whether or not the sound for the talk while muted notification should play.
|
||||
*/
|
||||
soundsTalkWhileMuted: Boolean,
|
||||
|
||||
/**
|
||||
* Whether or not the sound for reactions should play.
|
||||
*/
|
||||
soundsReactions: Boolean,
|
||||
|
||||
/**
|
||||
* Whether or not moderator muted the sounds.
|
||||
* Whether or not the sound for the talk while muted notification should play.
|
||||
*/
|
||||
moderatorMutedSoundsReactions: Boolean,
|
||||
soundsTalkWhileMuted: Boolean,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
|
|
@ -80,8 +79,6 @@ class SoundsTab extends AbstractDialogTab<Props> {
|
|||
this._onChange = this._onChange.bind(this);
|
||||
}
|
||||
|
||||
_onChange: (Object) => void;
|
||||
|
||||
/**
|
||||
* Changes a sound setting state.
|
||||
*
|
||||
|
|
@ -89,7 +86,7 @@ class SoundsTab extends AbstractDialogTab<Props> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onChange({ target }) {
|
||||
_onChange({ target }: React.ChangeEvent<HTMLInputElement>) {
|
||||
super._onChange({ [target.name]: target.checked });
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +106,7 @@ class SoundsTab extends AbstractDialogTab<Props> {
|
|||
soundsReactions,
|
||||
enableReactions,
|
||||
moderatorMutedSoundsReactions,
|
||||
t
|
||||
t // @ts-ignore
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -120,34 +117,40 @@ class SoundsTab extends AbstractDialogTab<Props> {
|
|||
{t('settings.playSounds')}
|
||||
</h2>
|
||||
{enableReactions && <Checkbox
|
||||
isChecked = { soundsReactions }
|
||||
isDisabled = { moderatorMutedSoundsReactions }
|
||||
checked = { soundsReactions }
|
||||
className = 'settings-checkbox'
|
||||
disabled = { moderatorMutedSoundsReactions }
|
||||
label = { t('settings.reactions') }
|
||||
name = 'soundsReactions'
|
||||
onChange = { this._onChange } />
|
||||
}
|
||||
<Checkbox
|
||||
isChecked = { soundsIncomingMessage }
|
||||
checked = { soundsIncomingMessage }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.incomingMessage') }
|
||||
name = 'soundsIncomingMessage'
|
||||
onChange = { this._onChange } />
|
||||
<Checkbox
|
||||
isChecked = { soundsParticipantJoined }
|
||||
checked = { soundsParticipantJoined }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.participantJoined') }
|
||||
name = 'soundsParticipantJoined'
|
||||
onChange = { this._onChange } />
|
||||
<Checkbox
|
||||
isChecked = { soundsParticipantLeft }
|
||||
checked = { soundsParticipantLeft }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.participantLeft') }
|
||||
name = 'soundsParticipantLeft'
|
||||
onChange = { this._onChange } />
|
||||
<Checkbox
|
||||
isChecked = { soundsTalkWhileMuted }
|
||||
checked = { soundsTalkWhileMuted }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.talkWhileMuted') }
|
||||
name = 'soundsTalkWhileMuted'
|
||||
onChange = { this._onChange } />
|
||||
<Checkbox
|
||||
isChecked = { soundsParticipantKnocking }
|
||||
checked = { soundsParticipantKnocking }
|
||||
className = 'settings-checkbox'
|
||||
label = { t('settings.participantKnocking') }
|
||||
name = 'soundsParticipantKnocking'
|
||||
onChange = { this._onChange } />
|
||||
Loading…
Reference in New Issue