bottom-sheet: tweak UI

- re-add thepand icon, shaped like a pill
- round top corners

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

@@ -44,7 +44,12 @@ type Props = {
     /**
      * 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
 };
 
 /**
@@ -75,7 +80,7 @@ class BottomSheet extends PureComponent<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { _styles } = this.props;
+        const { _styles, renderHeader } = this.props;
 
         return (
             <SlidingView
@@ -88,6 +93,7 @@ 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,6 +172,12 @@ ColorSchemeRegistry.register('BottomSheet', {
         underlayColor: ColorPalette.overflowMenuItemUnderlay
     },
 
+    expandIcon: {
+        color: schemeColor('icon'),
+        fontSize: 48,
+        opacity: 0.8
+    },
+
     /**
      * Bottom sheet's base style.
      */

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+   <path
+     d="m 5.6875,10.59375 h 12.625 c 0.779062,0 1.40625,0.627187 1.40625,1.40625 0,0.779062 -0.627188,1.40625 -1.40625,1.40625 H 5.6875 c -0.7790625,0 -1.40625,-0.627188 -1.40625,-1.40625 0,-0.779063 0.6271875,-1.40625 1.40625,-1.40625 z"
+     id="rect3711" />
+</svg>

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

@@ -25,6 +25,7 @@ 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/OverflowMenu.js

@@ -1,11 +1,12 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { Platform } from 'react-native';
+import { Platform, TouchableOpacity, View } 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';
@@ -23,6 +24,7 @@ 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}.
@@ -99,6 +101,7 @@ 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);
     }
 
     /**
@@ -126,7 +129,8 @@ class OverflowMenu extends PureComponent<Props, State> {
         return (
             <BottomSheet
                 onCancel = { this._onCancel }
-                onSwipe = { this._onSwipe }>
+                onSwipe = { this._onSwipe }
+                renderHeader = { this._renderMenuExpandToggle }>
                 <AudioRouteButton { ...buttonProps } />
                 <ToggleCameraButton { ...buttonProps } />
                 <AudioOnlyButton { ...buttonProps } />
@@ -153,6 +157,28 @@ 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;
 
     /**

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

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