rn,overflow-menu: add a "more options" button

lang/main.json

@@ -590,6 +590,7 @@
             "lockRoom": "Toggle meeting password",
             "moreActions": "Toggle more actions menu",
             "moreActionsMenu": "More actions menu",
+            "moreOptions": "Show more options",
             "mute": "Toggle mute audio",
             "pip": "Toggle Picture-in-Picture mode",
             "privateMessage": "Send private message",
@@ -632,6 +633,7 @@
         "logout": "Logout",
         "lowerYourHand": "Lower your hand",
         "moreActions": "More actions",
+        "moreOptions": "More options",
         "mute": "Mute / Unmute",
         "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.",

react/features/base/dialog/components/native/BottomSheet.js

@@ -44,12 +44,7 @@ type Props = {
     /**
      * Callback to be attached to the custom swipe event of the BottomSheet.
      */
-    onSwipe?: Function,
-
-    /**
-     * Function to render a bottom sheet header element, if necessary.
-     */
-    renderHeader: ?Function
+    onSwipe?: Function
 };
 
 /**
@@ -80,7 +75,7 @@ class BottomSheet extends PureComponent<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { _styles, renderHeader } = this.props;
+        const { _styles } = this.props;
 
         return (
             <SlidingView
@@ -93,7 +88,6 @@ class BottomSheet extends PureComponent<Props> {
                     <View
                         pointerEvents = 'box-none'
                         style = { styles.sheetAreaCover } />
-                    { renderHeader && renderHeader() }
                     <SafeAreaView
                         style = { [
                             styles.sheetItemContainer,

react/features/base/dialog/components/native/styles.js

@@ -172,12 +172,6 @@ ColorSchemeRegistry.register('BottomSheet', {
         underlayColor: ColorPalette.overflowMenuItemUnderlay
     },
 
-    expandIcon: {
-        color: schemeColor('icon'),
-        fontSize: 16,
-        opacity: 0.7
-    },
-
     /**
      * Bottom sheet's base style.
      */

react/features/base/icons/svg/drag-handle.svg

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

react/features/base/icons/svg/index.js

@@ -25,7 +25,6 @@ export { default as IconDeviceHeadphone } from './headset.svg';
 export { default as IconDeviceSpeaker } from './volume.svg';
 export { default as IconDominantSpeaker } from './dominant-speaker.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 IconExitFullScreen } from './exit-full-screen.svg';
 export { default as IconFeedback } from './feedback.svg';

react/features/toolbox/components/native/MoreOptionsButton.js

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

react/features/toolbox/components/native/OverflowMenu.js

@@ -1,12 +1,11 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import { Platform } from 'react-native';
 import Collapsible from 'react-native-collapsible';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
-import { IconDragHandle } from '../../../base/icons';
 import { CHAT_ENABLED, IOS_RECORDING_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
@@ -21,9 +20,9 @@ import { TileViewButton } from '../../../video-layout';
 import HelpButton from '../HelpButton';
 
 import AudioOnlyButton from './AudioOnlyButton';
+import MoreOptionsButton from './MoreOptionsButton';
 import RaiseHandButton from './RaiseHandButton';
 import ToggleCameraButton from './ToggleCameraButton';
-import styles from './styles';
 
 /**
  * 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._onSwipe = this._onSwipe.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
         };
 
+        const moreOptionsButtonProps = {
+            ...buttonProps,
+            afterClick: this._onToggleMenu,
+            visible: !showMore
+        };
+
         return (
             <BottomSheet
                 onCancel = { this._onCancel }
-                onSwipe = { this._onSwipe }
-                renderHeader = { this._renderMenuExpandToggle }>
+                onSwipe = { this._onSwipe }>
                 <AudioRouteButton { ...buttonProps } />
                 <ToggleCameraButton { ...buttonProps } />
                 <AudioOnlyButton { ...buttonProps } />
+                <MoreOptionsButton { ...moreOptionsButtonProps } />
                 <Collapsible collapsed = { !showMore }>
                     <RoomLockButton { ...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;
 
     /**
@@ -240,8 +222,7 @@ class OverflowMenu extends PureComponent<Props, State> {
  */
 function _mapStateToProps(state) {
     return {
-        _bottomSheetStyles:
-            ColorSchemeRegistry.get(state, 'BottomSheet'),
+        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _chatEnabled: getFeatureFlag(state, CHAT_ENABLED, true),
         _isOpen: isDialogOpen(state, OverflowMenu_),
         _recordingEnabled: Platform.OS !== 'ios' || getFeatureFlag(state, IOS_RECORDING_ENABLED)

react/features/toolbox/components/native/styles.js

@@ -55,16 +55,6 @@ const whiteToolbarButtonIcon = {
  */
 const styles = {
 
-    expandMenuContainer: {
-        alignItems: 'center',
-        flexDirection: 'column'
-    },
-
-    sheetGestureRecognizer: {
-        alignItems: 'stretch',
-        flexDirection: 'column'
-    },
-
     /**
      * The style of the toolbar.
      */