rn,overflow-menu: add a "more options" button
This commit is contained in:
parent
02131f3346
commit
a4333d3a80
|
@ -590,6 +590,7 @@
|
||||||
"lockRoom": "Toggle meeting password",
|
"lockRoom": "Toggle meeting password",
|
||||||
"moreActions": "Toggle more actions menu",
|
"moreActions": "Toggle more actions menu",
|
||||||
"moreActionsMenu": "More actions menu",
|
"moreActionsMenu": "More actions menu",
|
||||||
|
"moreOptions": "Show more options",
|
||||||
"mute": "Toggle mute audio",
|
"mute": "Toggle mute audio",
|
||||||
"pip": "Toggle Picture-in-Picture mode",
|
"pip": "Toggle Picture-in-Picture mode",
|
||||||
"privateMessage": "Send private message",
|
"privateMessage": "Send private message",
|
||||||
|
@ -632,6 +633,7 @@
|
||||||
"logout": "Logout",
|
"logout": "Logout",
|
||||||
"lowerYourHand": "Lower your hand",
|
"lowerYourHand": "Lower your hand",
|
||||||
"moreActions": "More actions",
|
"moreActions": "More actions",
|
||||||
|
"moreOptions": "More options",
|
||||||
"mute": "Mute / Unmute",
|
"mute": "Mute / Unmute",
|
||||||
"noAudioSignalTitle": "There is no input coming from your mic!",
|
"noAudioSignalTitle": "There is no input coming from your mic!",
|
||||||
"noAudioSignalDesc": "If you did not purposely mute it from system settings or hardware, consider switching the device.",
|
"noAudioSignalDesc": "If you did not purposely mute it from system settings or hardware, consider switching the device.",
|
||||||
|
|
|
@ -44,12 +44,7 @@ type Props = {
|
||||||
/**
|
/**
|
||||||
* Callback to be attached to the custom swipe event of the BottomSheet.
|
* Callback to be attached to the custom swipe event of the BottomSheet.
|
||||||
*/
|
*/
|
||||||
onSwipe?: Function,
|
onSwipe?: Function
|
||||||
|
|
||||||
/**
|
|
||||||
* Function to render a bottom sheet header element, if necessary.
|
|
||||||
*/
|
|
||||||
renderHeader: ?Function
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -80,7 +75,7 @@ class BottomSheet extends PureComponent<Props> {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const { _styles, renderHeader } = this.props;
|
const { _styles } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SlidingView
|
<SlidingView
|
||||||
|
@ -93,7 +88,6 @@ class BottomSheet extends PureComponent<Props> {
|
||||||
<View
|
<View
|
||||||
pointerEvents = 'box-none'
|
pointerEvents = 'box-none'
|
||||||
style = { styles.sheetAreaCover } />
|
style = { styles.sheetAreaCover } />
|
||||||
{ renderHeader && renderHeader() }
|
|
||||||
<SafeAreaView
|
<SafeAreaView
|
||||||
style = { [
|
style = { [
|
||||||
styles.sheetItemContainer,
|
styles.sheetItemContainer,
|
||||||
|
|
|
@ -172,12 +172,6 @@ ColorSchemeRegistry.register('BottomSheet', {
|
||||||
underlayColor: ColorPalette.overflowMenuItemUnderlay
|
underlayColor: ColorPalette.overflowMenuItemUnderlay
|
||||||
},
|
},
|
||||||
|
|
||||||
expandIcon: {
|
|
||||||
color: schemeColor('icon'),
|
|
||||||
fontSize: 16,
|
|
||||||
opacity: 0.7
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Bottom sheet's base style.
|
* Bottom sheet's base style.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M20 9H4v2h16V9zM4 15h16v-2H4v2z"/></svg>
|
|
Before Width: | Height: | Size: 311 B |
|
@ -25,7 +25,6 @@ export { default as IconDeviceHeadphone } from './headset.svg';
|
||||||
export { default as IconDeviceSpeaker } from './volume.svg';
|
export { default as IconDeviceSpeaker } from './volume.svg';
|
||||||
export { default as IconDominantSpeaker } from './dominant-speaker.svg';
|
export { default as IconDominantSpeaker } from './dominant-speaker.svg';
|
||||||
export { default as IconDownload } from './download.svg';
|
export { default as IconDownload } from './download.svg';
|
||||||
export { default as IconDragHandle } from './drag-handle.svg';
|
|
||||||
export { default as IconEventNote } from './event_note.svg';
|
export { default as IconEventNote } from './event_note.svg';
|
||||||
export { default as IconExitFullScreen } from './exit-full-screen.svg';
|
export { default as IconExitFullScreen } from './exit-full-screen.svg';
|
||||||
export { default as IconFeedback } from './feedback.svg';
|
export { default as IconFeedback } from './feedback.svg';
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import { translate } from '../../../base/i18n';
|
||||||
|
import { IconMenu } from '../../../base/icons';
|
||||||
|
import { AbstractButton } from '../../../base/toolbox';
|
||||||
|
import type { AbstractButtonProps } from '../../../base/toolbox';
|
||||||
|
|
||||||
|
|
||||||
|
type Props = AbstractButtonProps;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An implementation of a button to show more menu options.
|
||||||
|
*/
|
||||||
|
class MoreOptionsButton extends AbstractButton<Props, any> {
|
||||||
|
accessibilityLabel = 'toolbar.accessibilityLabel.moreOptions';
|
||||||
|
icon = IconMenu;
|
||||||
|
label = 'toolbar.moreOptions';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default translate(MoreOptionsButton);
|
|
@ -1,12 +1,11 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import { Platform, TouchableOpacity, View } from 'react-native';
|
import { Platform } from 'react-native';
|
||||||
import Collapsible from 'react-native-collapsible';
|
import Collapsible from 'react-native-collapsible';
|
||||||
|
|
||||||
import { ColorSchemeRegistry } from '../../../base/color-scheme';
|
import { ColorSchemeRegistry } from '../../../base/color-scheme';
|
||||||
import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
|
import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
|
||||||
import { IconDragHandle } from '../../../base/icons';
|
|
||||||
import { CHAT_ENABLED, IOS_RECORDING_ENABLED, getFeatureFlag } from '../../../base/flags';
|
import { CHAT_ENABLED, IOS_RECORDING_ENABLED, getFeatureFlag } from '../../../base/flags';
|
||||||
import { connect } from '../../../base/redux';
|
import { connect } from '../../../base/redux';
|
||||||
import { StyleType } from '../../../base/styles';
|
import { StyleType } from '../../../base/styles';
|
||||||
|
@ -21,9 +20,9 @@ import { TileViewButton } from '../../../video-layout';
|
||||||
import HelpButton from '../HelpButton';
|
import HelpButton from '../HelpButton';
|
||||||
|
|
||||||
import AudioOnlyButton from './AudioOnlyButton';
|
import AudioOnlyButton from './AudioOnlyButton';
|
||||||
|
import MoreOptionsButton from './MoreOptionsButton';
|
||||||
import RaiseHandButton from './RaiseHandButton';
|
import RaiseHandButton from './RaiseHandButton';
|
||||||
import ToggleCameraButton from './ToggleCameraButton';
|
import ToggleCameraButton from './ToggleCameraButton';
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The type of the React {@code Component} props of {@link OverflowMenu}.
|
* The type of the React {@code Component} props of {@link OverflowMenu}.
|
||||||
|
@ -100,7 +99,6 @@ class OverflowMenu extends PureComponent<Props, State> {
|
||||||
this._onCancel = this._onCancel.bind(this);
|
this._onCancel = this._onCancel.bind(this);
|
||||||
this._onSwipe = this._onSwipe.bind(this);
|
this._onSwipe = this._onSwipe.bind(this);
|
||||||
this._onToggleMenu = this._onToggleMenu.bind(this);
|
this._onToggleMenu = this._onToggleMenu.bind(this);
|
||||||
this._renderMenuExpandToggle = this._renderMenuExpandToggle.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -119,14 +117,20 @@ class OverflowMenu extends PureComponent<Props, State> {
|
||||||
styles: _bottomSheetStyles.buttons
|
styles: _bottomSheetStyles.buttons
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const moreOptionsButtonProps = {
|
||||||
|
...buttonProps,
|
||||||
|
afterClick: this._onToggleMenu,
|
||||||
|
visible: !showMore
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BottomSheet
|
<BottomSheet
|
||||||
onCancel = { this._onCancel }
|
onCancel = { this._onCancel }
|
||||||
onSwipe = { this._onSwipe }
|
onSwipe = { this._onSwipe }>
|
||||||
renderHeader = { this._renderMenuExpandToggle }>
|
|
||||||
<AudioRouteButton { ...buttonProps } />
|
<AudioRouteButton { ...buttonProps } />
|
||||||
<ToggleCameraButton { ...buttonProps } />
|
<ToggleCameraButton { ...buttonProps } />
|
||||||
<AudioOnlyButton { ...buttonProps } />
|
<AudioOnlyButton { ...buttonProps } />
|
||||||
|
<MoreOptionsButton { ...moreOptionsButtonProps } />
|
||||||
<Collapsible collapsed = { !showMore }>
|
<Collapsible collapsed = { !showMore }>
|
||||||
<RoomLockButton { ...buttonProps } />
|
<RoomLockButton { ...buttonProps } />
|
||||||
<ClosedCaptionButton { ...buttonProps } />
|
<ClosedCaptionButton { ...buttonProps } />
|
||||||
|
@ -149,28 +153,6 @@ class OverflowMenu extends PureComponent<Props, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_renderMenuExpandToggle: () => React$Element<any>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function to render the menu toggle in the bottom sheet header area.
|
|
||||||
*
|
|
||||||
* @returns {React$Element}
|
|
||||||
*/
|
|
||||||
_renderMenuExpandToggle() {
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style = { [
|
|
||||||
this.props._bottomSheetStyles.sheet,
|
|
||||||
styles.expandMenuContainer
|
|
||||||
] }>
|
|
||||||
<TouchableOpacity onPress = { this._onToggleMenu }>
|
|
||||||
{ /* $FlowFixMeProps */ }
|
|
||||||
<IconDragHandle style = { this.props._bottomSheetStyles.expandIcon } />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onCancel: () => boolean;
|
_onCancel: () => boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -240,8 +222,7 @@ class OverflowMenu extends PureComponent<Props, State> {
|
||||||
*/
|
*/
|
||||||
function _mapStateToProps(state) {
|
function _mapStateToProps(state) {
|
||||||
return {
|
return {
|
||||||
_bottomSheetStyles:
|
_bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
|
||||||
ColorSchemeRegistry.get(state, 'BottomSheet'),
|
|
||||||
_chatEnabled: getFeatureFlag(state, CHAT_ENABLED, true),
|
_chatEnabled: getFeatureFlag(state, CHAT_ENABLED, true),
|
||||||
_isOpen: isDialogOpen(state, OverflowMenu_),
|
_isOpen: isDialogOpen(state, OverflowMenu_),
|
||||||
_recordingEnabled: Platform.OS !== 'ios' || getFeatureFlag(state, IOS_RECORDING_ENABLED)
|
_recordingEnabled: Platform.OS !== 'ios' || getFeatureFlag(state, IOS_RECORDING_ENABLED)
|
||||||
|
|
|
@ -55,16 +55,6 @@ const whiteToolbarButtonIcon = {
|
||||||
*/
|
*/
|
||||||
const styles = {
|
const styles = {
|
||||||
|
|
||||||
expandMenuContainer: {
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'column'
|
|
||||||
},
|
|
||||||
|
|
||||||
sheetGestureRecognizer: {
|
|
||||||
alignItems: 'stretch',
|
|
||||||
flexDirection: 'column'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The style of the toolbar.
|
* The style of the toolbar.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue