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

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 2022-08-02 13:51:42 +03:00 committed by GitHub
parent db54c45b13
commit 3960b59765
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 295 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/features/base/icons/svg/checkmark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 476 B

1
react/features/base/icons/svg/index.ts
View File

@ -25,6 +25,7 @@ export { default as IconChat } from './chat.svg';
export { default as IconChatSend } from './send.svg'; export { default as IconChatSend } from './send.svg';
export { default as IconChatUnread } from './chat-unread.svg'; export { default as IconChatUnread } from './chat-unread.svg';
export { default as IconCheck } from './check.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 IconCheckSolid } from './check-solid.svg';
export { default as IconCircle } from './circle.svg'; export { default as IconCircle } from './circle.svg';
export { default as IconClose } from './close.svg'; export { default as IconClose } from './close.svg';

177
react/features/base/ui/components/web/Checkbox.tsx Normal file
View File

@ -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;

54
react/features/settings/components/web/ModeratorTab.js → react/features/settings/components/web/ModeratorTab.tsx
View File

@ -1,16 +1,18 @@
// @flow /* eslint-disable lines-around-comment */
import { Checkbox } from '@atlaskit/checkbox';
import React from 'react'; import React from 'react';
// @ts-ignore
import { AbstractDialogTab } from '../../../base/dialog'; import { AbstractDialogTab } from '../../../base/dialog';
// @ts-ignore
import type { Props as AbstractDialogTabProps } from '../../../base/dialog'; import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
// @ts-ignore
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
import Checkbox from '../../../base/ui/components/web/Checkbox';
/** /**
* The type of the React {@code Component} props of {@link MoreTab}. * The type of the React {@code Component} props of {@link MoreTab}.
*/ */
export type Props = { export type Props = AbstractDialogTabProps & {
...$Exact<AbstractDialogTabProps>,
/** /**
* If set hides the reactions moderation setting. * If set hides the reactions moderation setting.
@ -33,18 +35,18 @@ export type Props = {
*/ */
startAudioMuted: boolean, 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 * Whether or not the user has selected the Start Reactions Muted feature to be
* enabled. * enabled.
*/ */
startReactionsMuted: boolean, startReactionsMuted: boolean,
/**
* Whether or not the user has selected the Start Video Muted feature to be
* enabled.
*/
startVideoMuted: boolean,
/** /**
* Invoked to obtain translated strings. * Invoked to obtain translated strings.
*/ */
@ -83,8 +85,6 @@ class ModeratorTab extends AbstractDialogTab<Props> {
return <div className = 'moderator-tab box'>{ this._renderModeratorSettings() }</div>; return <div className = 'moderator-tab box'>{ this._renderModeratorSettings() }</div>;
} }
_onStartAudioMutedChanged: (Object) => void;
/** /**
* Callback invoked to select if conferences should start * Callback invoked to select if conferences should start
* with audio muted. * with audio muted.
@ -93,12 +93,10 @@ class ModeratorTab extends AbstractDialogTab<Props> {
* *
* @returns {void} * @returns {void}
*/ */
_onStartAudioMutedChanged({ target: { checked } }) { _onStartAudioMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ startAudioMuted: checked }); super._onChange({ startAudioMuted: checked });
} }
_onStartVideoMutedChanged: (Object) => void;
/** /**
* Callback invoked to select if conferences should start * Callback invoked to select if conferences should start
* with video disabled. * with video disabled.
@ -107,12 +105,10 @@ class ModeratorTab extends AbstractDialogTab<Props> {
* *
* @returns {void} * @returns {void}
*/ */
_onStartVideoMutedChanged({ target: { checked } }) { _onStartVideoMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ startVideoMuted: checked }); super._onChange({ startVideoMuted: checked });
} }
_onStartReactionsMutedChanged: (Object) => void;
/** /**
* Callback invoked to select if conferences should start * Callback invoked to select if conferences should start
* with reactions muted. * with reactions muted.
@ -121,12 +117,10 @@ class ModeratorTab extends AbstractDialogTab<Props> {
* *
* @returns {void} * @returns {void}
*/ */
_onStartReactionsMutedChanged({ target: { checked } }) { _onStartReactionsMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ startReactionsMuted: checked }); super._onChange({ startReactionsMuted: checked });
} }
_onFollowMeEnabledChanged: (Object) => void;
/** /**
* Callback invoked to select if follow-me mode * Callback invoked to select if follow-me mode
* should be activated. * should be activated.
@ -135,7 +129,7 @@ class ModeratorTab extends AbstractDialogTab<Props> {
* *
* @returns {void} * @returns {void}
*/ */
_onFollowMeEnabledChanged({ target: { checked } }) { _onFollowMeEnabledChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ followMeEnabled: checked }); super._onChange({ followMeEnabled: checked });
} }
@ -153,7 +147,7 @@ class ModeratorTab extends AbstractDialogTab<Props> {
startAudioMuted, startAudioMuted,
startVideoMuted, startVideoMuted,
startReactionsMuted, startReactionsMuted,
t t // @ts-ignore
} = this.props; } = this.props;
return ( return (
@ -162,24 +156,28 @@ class ModeratorTab extends AbstractDialogTab<Props> {
key = 'moderator'> key = 'moderator'>
<div className = 'moderator-settings-wrapper'> <div className = 'moderator-settings-wrapper'>
<Checkbox <Checkbox
isChecked = { startAudioMuted } checked = { startAudioMuted }
className = 'settings-checkbox'
label = { t('settings.startAudioMuted') } label = { t('settings.startAudioMuted') }
name = 'start-audio-muted' name = 'start-audio-muted'
onChange = { this._onStartAudioMutedChanged } /> onChange = { this._onStartAudioMutedChanged } />
<Checkbox <Checkbox
isChecked = { startVideoMuted } checked = { startVideoMuted }
className = 'settings-checkbox'
label = { t('settings.startVideoMuted') } label = { t('settings.startVideoMuted') }
name = 'start-video-muted' name = 'start-video-muted'
onChange = { this._onStartVideoMutedChanged } /> onChange = { this._onStartVideoMutedChanged } />
<Checkbox <Checkbox
isChecked = { followMeEnabled && !followMeActive } checked = { followMeEnabled && !followMeActive }
isDisabled = { followMeActive } className = 'settings-checkbox'
disabled = { followMeActive }
label = { t('settings.followMe') } label = { t('settings.followMe') }
name = 'follow-me' name = 'follow-me'
onChange = { this._onFollowMeEnabledChanged } /> onChange = { this._onFollowMeEnabledChanged } />
{ !disableReactionsModeration { !disableReactionsModeration
&& <Checkbox && <Checkbox
isChecked = { startReactionsMuted } checked = { startReactionsMuted }
className = 'settings-checkbox'
label = { t('settings.startReactionsMuted') } label = { t('settings.startReactionsMuted') }
name = 'start-reactions-muted' name = 'start-reactions-muted'
onChange = { this._onStartReactionsMutedChanged } /> } onChange = { this._onStartReactionsMutedChanged } /> }

109
react/features/settings/components/web/MoreTab.js → react/features/settings/components/web/MoreTab.tsx
View File

@ -1,24 +1,30 @@
// @flow /* eslint-disable lines-around-comment */
import { Checkbox } from '@atlaskit/checkbox';
import DropdownMenu, { import DropdownMenu, {
DropdownItem, DropdownItem,
DropdownItemGroup DropdownItemGroup
} from '@atlaskit/dropdown-menu'; } from '@atlaskit/dropdown-menu';
import React from 'react'; import React from 'react';
// @ts-ignore
import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut'; import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut';
// @ts-ignore
import { AbstractDialogTab } from '../../../base/dialog'; import { AbstractDialogTab } from '../../../base/dialog';
// @ts-ignore
import type { Props as AbstractDialogTabProps } from '../../../base/dialog'; import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
// @ts-ignore
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
import Checkbox from '../../../base/ui/components/web/Checkbox';
// @ts-ignore
import TouchmoveHack from '../../../chat/components/web/TouchmoveHack'; import TouchmoveHack from '../../../chat/components/web/TouchmoveHack';
// @ts-ignore
import { MAX_ACTIVE_PARTICIPANTS } from '../../../filmstrip'; import { MAX_ACTIVE_PARTICIPANTS } from '../../../filmstrip';
// @ts-ignore
import { SS_DEFAULT_FRAME_RATE } from '../../constants'; import { SS_DEFAULT_FRAME_RATE } from '../../constants';
/** /**
* The type of the React {@code Component} props of {@link MoreTab}. * The type of the React {@code Component} props of {@link MoreTab}.
*/ */
export type Props = { export type Props = AbstractDialogTabProps & {
...$Exact<AbstractDialogTabProps>,
/** /**
* The currently selected desktop share frame rate in the frame rate select dropdown. * The currently selected desktop share frame rate in the frame rate select dropdown.
@ -41,21 +47,26 @@ export type Props = {
*/ */
disableHideSelfView: boolean, 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). * Whether or not follow me is currently active (enabled by some other participant).
*/ */
followMeActive: boolean, followMeActive: boolean,
/**
* Whether or not to hide self-view screen.
*/
hideSelfView: boolean,
/** /**
* All available languages to display in the language select dropdown. * All available languages to display in the language select dropdown.
*/ */
languages: Array<string>, 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. * Whether or not to display the language select dropdown.
*/ */
@ -71,20 +82,15 @@ export type Props = {
*/ */
showNotificationsSettings: boolean, showNotificationsSettings: boolean,
/**
* Whether or not to display the prejoin settings section.
*/
showPrejoinSettings: boolean,
/** /**
* Whether or not to show prejoin screen. * Whether or not to show prejoin screen.
*/ */
showPrejoinPage: boolean, 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. * Invoked to obtain translated strings.
@ -123,6 +129,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
// @ts-ignore
this.state = { this.state = {
isFramerateSelectOpen: false, isFramerateSelectOpen: false,
isLanguageSelectOpen: 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. * Callback invoked to toggle display of the desktop share framerate select dropdown.
* *
@ -173,12 +178,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @private * @private
* @returns {void} * @returns {void}
*/ */
_onFramerateDropdownOpenChange({ isOpen }) { _onFramerateDropdownOpenChange({ isOpen }: {isOpen: boolean}) {
// @ts-ignore
this.setState({ isFramerateSelectOpen: isOpen }); this.setState({ isFramerateSelectOpen: isOpen });
} }
_onFramerateItemSelect: (Object) => void;
/** /**
* Callback invoked to select a frame rate from the select dropdown. * Callback invoked to select a frame rate from the select dropdown.
* *
@ -186,14 +190,12 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @private * @private
* @returns {void} * @returns {void}
*/ */
_onFramerateItemSelect(e) { _onFramerateItemSelect(e: React.ChangeEvent<HTMLSelectElement>) {
const frameRate = e.currentTarget.getAttribute('data-framerate'); const frameRate = e.currentTarget.getAttribute('data-framerate');
super._onChange({ currentFramerate: frameRate }); super._onChange({ currentFramerate: frameRate });
} }
_onLanguageDropdownOpenChange: (Object) => void;
/** /**
* Callback invoked to toggle display of the language select dropdown. * Callback invoked to toggle display of the language select dropdown.
* *
@ -201,12 +203,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @private * @private
* @returns {void} * @returns {void}
*/ */
_onLanguageDropdownOpenChange({ isOpen }) { _onLanguageDropdownOpenChange({ isOpen }: {isOpen: boolean}) {
// @ts-ignore
this.setState({ isLanguageSelectOpen: isOpen }); this.setState({ isLanguageSelectOpen: isOpen });
} }
_onLanguageItemSelect: (Object) => void;
/** /**
* Callback invoked to select a language from select dropdown. * Callback invoked to select a language from select dropdown.
* *
@ -214,14 +215,12 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* *
* @returns {void} * @returns {void}
*/ */
_onLanguageItemSelect(e) { _onLanguageItemSelect(e: React.ChangeEvent<HTMLSelectElement>) {
const language = e.currentTarget.getAttribute('data-language'); const language = e.currentTarget.getAttribute('data-language');
super._onChange({ currentLanguage: language }); super._onChange({ currentLanguage: language });
} }
_onShowPrejoinPageChanged: (Object) => void;
/** /**
* Callback invoked to select if the lobby * Callback invoked to select if the lobby
* should be shown. * should be shown.
@ -230,12 +229,10 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* *
* @returns {void} * @returns {void}
*/ */
_onShowPrejoinPageChanged({ target: { checked } }) { _onShowPrejoinPageChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ showPrejoinPage: checked }); super._onChange({ showPrejoinPage: checked });
} }
_onKeyboardShortcutEnableChanged: (Object) => void;
/** /**
* Callback invoked to select if the given type of * Callback invoked to select if the given type of
* notifications should be shown. * notifications should be shown.
@ -245,17 +242,16 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* *
* @returns {void} * @returns {void}
*/ */
_onEnabledNotificationsChanged({ target: { checked } }, type) { _onEnabledNotificationsChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>, type: any) {
super._onChange({ super._onChange({
enabledNotifications: { enabledNotifications: {
// @ts-ignore
...this.props.enabledNotifications, ...this.props.enabledNotifications,
[type]: checked [type]: checked
} }
}); });
} }
_onEnabledNotificationsChanged: (Object, string) => void;
/** /**
* Callback invoked to select if global keyboard shortcuts * Callback invoked to select if global keyboard shortcuts
* should be enabled. * should be enabled.
@ -264,13 +260,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* *
* @returns {void} * @returns {void}
*/ */
_onKeyboardShortcutEnableChanged({ target: { checked } }) { _onKeyboardShortcutEnableChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
keyboardShortcut.enable(checked); keyboardShortcut.enable(checked);
super._onChange({ keyboardShortcutEnable: checked }); super._onChange({ keyboardShortcutEnable: checked });
} }
_onHideSelfViewChanged: (Object) => void;
/** /**
* Callback invoked to select if hide self view should be enabled. * Callback invoked to select if hide self view should be enabled.
* *
@ -278,12 +272,10 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* *
* @returns {void} * @returns {void}
*/ */
_onHideSelfViewChanged({ target: { checked } }) { _onHideSelfViewChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ hideSelfView: checked }); super._onChange({ hideSelfView: checked });
} }
_onMaxStageParticipantsOpenChange: (Object) => void;
/** /**
* Callback invoked to toggle display of the max stage participants select dropdown. * Callback invoked to toggle display of the max stage participants select dropdown.
* *
@ -291,12 +283,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @private * @private
* @returns {void} * @returns {void}
*/ */
_onMaxStageParticipantsOpenChange({ isOpen }) { _onMaxStageParticipantsOpenChange({ isOpen }: {isOpen: boolean}) {
// @ts-ignore
this.setState({ isMaxStageParticipantsOpen: isOpen }); this.setState({ isMaxStageParticipantsOpen: isOpen });
} }
_onMaxStageParticipantsSelect: (Object) => void;
/** /**
* Callback invoked to select a max number of stage participants from the select dropdown. * 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 * @private
* @returns {void} * @returns {void}
*/ */
_onMaxStageParticipantsSelect(e) { _onMaxStageParticipantsSelect(e: React.ChangeEvent<HTMLSelectElement>) {
const maxParticipants = e.currentTarget.getAttribute('data-maxparticipants'); const maxParticipants = e.currentTarget.getAttribute('data-maxparticipants');
super._onChange({ maxStageParticipants: maxParticipants }); super._onChange({ maxStageParticipants: maxParticipants });
@ -316,8 +307,9 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderFramerateSelect() { _renderFramerateSelect() {
// @ts-ignore
const { currentFramerate, desktopShareFramerates, t } = this.props; const { currentFramerate, desktopShareFramerates, t } = this.props;
const frameRateItems = desktopShareFramerates.map(frameRate => ( const frameRateItems = desktopShareFramerates.map((frameRate: string) => (
<DropdownItem <DropdownItem
data-framerate = { frameRate } data-framerate = { frameRate }
key = { frameRate } key = { frameRate }
@ -337,6 +329,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
flex = { true } flex = { true }
isModal = { true }> isModal = { true }>
<DropdownMenu <DropdownMenu
// @ts-ignore
isOpen = { this.state.isFramerateSelectOpen } isOpen = { this.state.isFramerateSelectOpen }
onOpenChange = { this._onFramerateDropdownOpenChange } onOpenChange = { this._onFramerateDropdownOpenChange }
shouldFitContainer = { true } shouldFitContainer = { true }
@ -370,6 +363,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderKeyboardShortcutCheckbox() { _renderKeyboardShortcutCheckbox() {
// @ts-ignore
const { t } = this.props; const { t } = this.props;
return ( return (
@ -380,7 +374,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
{ t('keyboardShortcuts.keyboardShortcuts') } { t('keyboardShortcuts.keyboardShortcuts') }
</h2> </h2>
<Checkbox <Checkbox
isChecked = { keyboardShortcut.getEnabled() } checked = { keyboardShortcut.getEnabled() }
label = { t('prejoin.keyboardShortcuts') } label = { t('prejoin.keyboardShortcuts') }
name = 'enable-keyboard-shortcuts' name = 'enable-keyboard-shortcuts'
onChange = { this._onKeyboardShortcutEnableChanged } /> onChange = { this._onKeyboardShortcutEnableChanged } />
@ -395,6 +389,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderSelfViewCheckbox() { _renderSelfViewCheckbox() {
// @ts-ignore
const { hideSelfView, t } = this.props; const { hideSelfView, t } = this.props;
return ( return (
@ -405,7 +400,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
{ t('settings.selfView') } { t('settings.selfView') }
</h2> </h2>
<Checkbox <Checkbox
isChecked = { hideSelfView } checked = { hideSelfView }
label = { t('videothumbnail.hideSelfView') } label = { t('videothumbnail.hideSelfView') }
name = 'hide-self-view' name = 'hide-self-view'
onChange = { this._onHideSelfViewChanged } /> onChange = { this._onHideSelfViewChanged } />
@ -424,10 +419,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
currentLanguage, currentLanguage,
languages, languages,
t t
// @ts-ignore
} = this.props; } = this.props;
const languageItems const languageItems
= languages.map(language => ( = languages.map((language: string) => (
<DropdownItem <DropdownItem
data-language = { language } data-language = { language }
key = { language } key = { language }
@ -447,6 +443,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
flex = { true } flex = { true }
isModal = { true }> isModal = { true }>
<DropdownMenu <DropdownMenu
// @ts-ignore
isOpen = { this.state.isLanguageSelectOpen } isOpen = { this.state.isLanguageSelectOpen }
onOpenChange = { this._onLanguageDropdownOpenChange } onOpenChange = { this._onLanguageDropdownOpenChange }
shouldFitContainer = { true } shouldFitContainer = { true }
@ -474,6 +471,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderPrejoinScreenSettings() { _renderPrejoinScreenSettings() {
// @ts-ignore
const { t, showPrejoinPage } = this.props; const { t, showPrejoinPage } = this.props;
return ( return (
@ -484,7 +482,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
{ t('prejoin.premeeting') } { t('prejoin.premeeting') }
</h2> </h2>
<Checkbox <Checkbox
isChecked = { showPrejoinPage } checked = { showPrejoinPage }
label = { t('prejoin.showScreen') } label = { t('prejoin.showScreen') }
name = 'show-prejoin-page' name = 'show-prejoin-page'
onChange = { this._onShowPrejoinPageChanged } /> onChange = { this._onShowPrejoinPageChanged } />
@ -499,6 +497,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderNotificationsSettings() { _renderNotificationsSettings() {
// @ts-ignore
const { t, enabledNotifications } = this.props; const { t, enabledNotifications } = this.props;
return ( return (
@ -511,7 +510,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
{ {
Object.keys(enabledNotifications).map(key => ( Object.keys(enabledNotifications).map(key => (
<Checkbox <Checkbox
isChecked = { enabledNotifications[key] } checked = { enabledNotifications[key] }
key = { key } key = { key }
label = { t(key) } label = { t(key) }
name = { `show-${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 the React Element for the max stage participants dropdown.
* *
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderMaxStageParticipantsSelect() { _renderMaxStageParticipantsSelect() {
// @ts-ignore
const { maxStageParticipants, t, stageFilmstripEnabled } = this.props; const { maxStageParticipants, t, stageFilmstripEnabled } = this.props;
if (!stageFilmstripEnabled) { if (!stageFilmstripEnabled) {
@ -557,6 +555,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
flex = { true } flex = { true }
isModal = { true }> isModal = { true }>
<DropdownMenu <DropdownMenu
// @ts-ignore
isOpen = { this.state.isMaxStageParticipantsOpen } isOpen = { this.state.isMaxStageParticipantsOpen }
onOpenChange = { this._onMaxStageParticipantsOpenChange } onOpenChange = { this._onMaxStageParticipantsOpenChange }
shouldFitContainer = { true } shouldFitContainer = { true }
@ -582,6 +581,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderSettingsRight() { _renderSettingsRight() {
// @ts-ignore
const { showLanguageSettings } = this.props; const { showLanguageSettings } = this.props;
return ( return (
@ -601,6 +601,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderSettingsLeft() { _renderSettingsLeft() {
// @ts-ignore
const { disableHideSelfView, showNotificationsSettings, showPrejoinSettings } = this.props; const { disableHideSelfView, showNotificationsSettings, showPrejoinSettings } = this.props;
return ( return (

5
react/features/settings/components/web/SettingsDialog.js
View File

@ -145,6 +145,11 @@ const styles = theme => {
flex: 1 flex: 1
}, },
'& .settings-checkbox': {
display: 'flex',
marginBottom: `${theme.spacing(2)}px`
},
'& .moderator-settings-wrapper': { '& .moderator-settings-wrapper': {
paddingTop: '20px' paddingTop: '20px'
}, },

53
react/features/settings/components/web/SoundsTab.js → react/features/settings/components/web/SoundsTab.tsx
View File

@ -1,25 +1,29 @@
// @flow /* eslint-disable lines-around-comment */
import Checkbox from '@atlaskit/checkbox';
import React from 'react'; import React from 'react';
// @ts-ignore
import { AbstractDialogTab } from '../../../base/dialog'; import { AbstractDialogTab } from '../../../base/dialog';
// @ts-ignore
import type { Props as AbstractDialogTabProps } from '../../../base/dialog'; import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
// @ts-ignore
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
import Checkbox from '../../../base/ui/components/web/Checkbox';
declare var APP: Object;
/** /**
* The type of the React {@code Component} props of {@link SoundsTab}. * The type of the React {@code Component} props of {@link SoundsTab}.
*/ */
export type Props = { export type Props = AbstractDialogTabProps & {
...$Exact<AbstractDialogTabProps>,
/** /**
* Whether or not the reactions feature is enabled. * Whether or not the reactions feature is enabled.
*/ */
enableReactions: Boolean, enableReactions: Boolean,
/**
* Whether or not moderator muted the sounds.
*/
moderatorMutedSoundsReactions: Boolean,
/** /**
* Whether or not the sound for the incoming message should play. * Whether or not the sound for the incoming message should play.
*/ */
@ -40,20 +44,15 @@ export type Props = {
*/ */
soundsParticipantLeft: Boolean, 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. * Whether or not the sound for reactions should play.
*/ */
soundsReactions: Boolean, 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. * Invoked to obtain translated strings.
@ -80,8 +79,6 @@ class SoundsTab extends AbstractDialogTab<Props> {
this._onChange = this._onChange.bind(this); this._onChange = this._onChange.bind(this);
} }
_onChange: (Object) => void;
/** /**
* Changes a sound setting state. * Changes a sound setting state.
* *
@ -89,7 +86,7 @@ class SoundsTab extends AbstractDialogTab<Props> {
* *
* @returns {void} * @returns {void}
*/ */
_onChange({ target }) { _onChange({ target }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ [target.name]: target.checked }); super._onChange({ [target.name]: target.checked });
} }
@ -109,7 +106,7 @@ class SoundsTab extends AbstractDialogTab<Props> {
soundsReactions, soundsReactions,
enableReactions, enableReactions,
moderatorMutedSoundsReactions, moderatorMutedSoundsReactions,
t t // @ts-ignore
} = this.props; } = this.props;
return ( return (
@ -120,34 +117,40 @@ class SoundsTab extends AbstractDialogTab<Props> {
{t('settings.playSounds')} {t('settings.playSounds')}
</h2> </h2>
{enableReactions && <Checkbox {enableReactions && <Checkbox
isChecked = { soundsReactions } checked = { soundsReactions }
isDisabled = { moderatorMutedSoundsReactions } className = 'settings-checkbox'
disabled = { moderatorMutedSoundsReactions }
label = { t('settings.reactions') } label = { t('settings.reactions') }
name = 'soundsReactions' name = 'soundsReactions'
onChange = { this._onChange } /> onChange = { this._onChange } />
} }
<Checkbox <Checkbox
isChecked = { soundsIncomingMessage } checked = { soundsIncomingMessage }
className = 'settings-checkbox'
label = { t('settings.incomingMessage') } label = { t('settings.incomingMessage') }
name = 'soundsIncomingMessage' name = 'soundsIncomingMessage'
onChange = { this._onChange } /> onChange = { this._onChange } />
<Checkbox <Checkbox
isChecked = { soundsParticipantJoined } checked = { soundsParticipantJoined }
className = 'settings-checkbox'
label = { t('settings.participantJoined') } label = { t('settings.participantJoined') }
name = 'soundsParticipantJoined' name = 'soundsParticipantJoined'
onChange = { this._onChange } /> onChange = { this._onChange } />
<Checkbox <Checkbox
isChecked = { soundsParticipantLeft } checked = { soundsParticipantLeft }
className = 'settings-checkbox'
label = { t('settings.participantLeft') } label = { t('settings.participantLeft') }
name = 'soundsParticipantLeft' name = 'soundsParticipantLeft'
onChange = { this._onChange } /> onChange = { this._onChange } />
<Checkbox <Checkbox
isChecked = { soundsTalkWhileMuted } checked = { soundsTalkWhileMuted }
className = 'settings-checkbox'
label = { t('settings.talkWhileMuted') } label = { t('settings.talkWhileMuted') }
name = 'soundsTalkWhileMuted' name = 'soundsTalkWhileMuted'
onChange = { this._onChange } /> onChange = { this._onChange } />
<Checkbox <Checkbox
isChecked = { soundsParticipantKnocking } checked = { soundsParticipantKnocking }
className = 'settings-checkbox'
label = { t('settings.participantKnocking') } label = { t('settings.participantKnocking') }
name = 'soundsParticipantKnocking' name = 'soundsParticipantKnocking'
onChange = { this._onChange } /> onChange = { this._onChange } />