Browse Source

bottom-sheet: tweak UI

- re-add thepand icon, shaped like a pill
- round top corners
master
Saúl Ibarra Corretgé 5 years ago
parent
commit
579d08e27e

+ 8
- 2
react/features/base/dialog/components/native/BottomSheet.js View File

44
     /**
44
     /**
45
      * Callback to be attached to the custom swipe event of the BottomSheet.
45
      * Callback to be attached to the custom swipe event of the BottomSheet.
46
      */
46
      */
47
-    onSwipe?: Function
47
+    onSwipe?: Function,
48
+
49
+    /**
50
+     * Function to render a bottom sheet header element, if necessary.
51
+     */
52
+    renderHeader: ?Function
48
 };
53
 };
49
 
54
 
50
 /**
55
 /**
75
      * @returns {ReactElement}
80
      * @returns {ReactElement}
76
      */
81
      */
77
     render() {
82
     render() {
78
-        const { _styles } = this.props;
83
+        const { _styles, renderHeader } = this.props;
79
 
84
 
80
         return (
85
         return (
81
             <SlidingView
86
             <SlidingView
88
                     <View
93
                     <View
89
                         pointerEvents = 'box-none'
94
                         pointerEvents = 'box-none'
90
                         style = { styles.sheetAreaCover } />
95
                         style = { styles.sheetAreaCover } />
96
+                    { renderHeader && renderHeader() }
91
                     <SafeAreaView
97
                     <SafeAreaView
92
                         style = { [
98
                         style = { [
93
                             styles.sheetItemContainer,
99
                             styles.sheetItemContainer,

+ 6
- 0
react/features/base/dialog/components/native/styles.js View File

172
         underlayColor: ColorPalette.overflowMenuItemUnderlay
172
         underlayColor: ColorPalette.overflowMenuItemUnderlay
173
     },
173
     },
174
 
174
 
175
+    expandIcon: {
176
+        color: schemeColor('icon'),
177
+        fontSize: 48,
178
+        opacity: 0.8
179
+    },
180
+
175
     /**
181
     /**
176
      * Bottom sheet's base style.
182
      * Bottom sheet's base style.
177
      */
183
      */

+ 11
- 0
react/features/base/icons/svg/drag-handle.svg View File

1
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+<svg
3
+   xmlns="http://www.w3.org/2000/svg"
4
+   xmlns:xlink="http://www.w3.org/1999/xlink"
5
+   width="24"
6
+   height="24"
7
+   viewBox="0 0 24 24">
8
+   <path
9
+     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"
10
+     id="rect3711" />
11
+</svg>

+ 1
- 0
react/features/base/icons/svg/index.js View File

25
 export { default as IconDeviceSpeaker } from './volume.svg';
25
 export { default as IconDeviceSpeaker } from './volume.svg';
26
 export { default as IconDominantSpeaker } from './dominant-speaker.svg';
26
 export { default as IconDominantSpeaker } from './dominant-speaker.svg';
27
 export { default as IconDownload } from './download.svg';
27
 export { default as IconDownload } from './download.svg';
28
+export { default as IconDragHandle } from './drag-handle.svg';
28
 export { default as IconEventNote } from './event_note.svg';
29
 export { default as IconEventNote } from './event_note.svg';
29
 export { default as IconExitFullScreen } from './exit-full-screen.svg';
30
 export { default as IconExitFullScreen } from './exit-full-screen.svg';
30
 export { default as IconFeedback } from './feedback.svg';
31
 export { default as IconFeedback } from './feedback.svg';

+ 28
- 2
react/features/toolbox/components/native/OverflowMenu.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import React, { PureComponent } from 'react';
3
 import React, { PureComponent } from 'react';
4
-import { Platform } from 'react-native';
4
+import { Platform, TouchableOpacity, View } from 'react-native';
5
 import Collapsible from 'react-native-collapsible';
5
 import Collapsible from 'react-native-collapsible';
6
 
6
 
7
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
7
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
8
 import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
8
 import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
9
+import { IconDragHandle } from '../../../base/icons';
9
 import { CHAT_ENABLED, IOS_RECORDING_ENABLED, getFeatureFlag } from '../../../base/flags';
10
 import { CHAT_ENABLED, IOS_RECORDING_ENABLED, getFeatureFlag } from '../../../base/flags';
10
 import { connect } from '../../../base/redux';
11
 import { connect } from '../../../base/redux';
11
 import { StyleType } from '../../../base/styles';
12
 import { StyleType } from '../../../base/styles';
23
 import MoreOptionsButton from './MoreOptionsButton';
24
 import MoreOptionsButton from './MoreOptionsButton';
24
 import RaiseHandButton from './RaiseHandButton';
25
 import RaiseHandButton from './RaiseHandButton';
25
 import ToggleCameraButton from './ToggleCameraButton';
26
 import ToggleCameraButton from './ToggleCameraButton';
27
+import styles from './styles';
26
 
28
 
27
 /**
29
 /**
28
  * The type of the React {@code Component} props of {@link OverflowMenu}.
30
  * The type of the React {@code Component} props of {@link OverflowMenu}.
99
         this._onCancel = this._onCancel.bind(this);
101
         this._onCancel = this._onCancel.bind(this);
100
         this._onSwipe = this._onSwipe.bind(this);
102
         this._onSwipe = this._onSwipe.bind(this);
101
         this._onToggleMenu = this._onToggleMenu.bind(this);
103
         this._onToggleMenu = this._onToggleMenu.bind(this);
104
+        this._renderMenuExpandToggle = this._renderMenuExpandToggle.bind(this);
102
     }
105
     }
103
 
106
 
104
     /**
107
     /**
126
         return (
129
         return (
127
             <BottomSheet
130
             <BottomSheet
128
                 onCancel = { this._onCancel }
131
                 onCancel = { this._onCancel }
129
-                onSwipe = { this._onSwipe }>
132
+                onSwipe = { this._onSwipe }
133
+                renderHeader = { this._renderMenuExpandToggle }>
130
                 <AudioRouteButton { ...buttonProps } />
134
                 <AudioRouteButton { ...buttonProps } />
131
                 <ToggleCameraButton { ...buttonProps } />
135
                 <ToggleCameraButton { ...buttonProps } />
132
                 <AudioOnlyButton { ...buttonProps } />
136
                 <AudioOnlyButton { ...buttonProps } />
153
         );
157
         );
154
     }
158
     }
155
 
159
 
160
+    _renderMenuExpandToggle: () => React$Element<any>;
161
+
162
+    /**
163
+     * Function to render the menu toggle in the bottom sheet header area.
164
+     *
165
+     * @returns {React$Element}
166
+     */
167
+    _renderMenuExpandToggle() {
168
+        return (
169
+            <View
170
+                style = { [
171
+                    this.props._bottomSheetStyles.sheet,
172
+                    styles.expandMenuContainer
173
+                ] }>
174
+                <TouchableOpacity onPress = { this._onToggleMenu }>
175
+                    { /* $FlowFixMeProps */ }
176
+                    <IconDragHandle style = { this.props._bottomSheetStyles.expandIcon } />
177
+                </TouchableOpacity>
178
+            </View>
179
+        );
180
+    }
181
+
156
     _onCancel: () => boolean;
182
     _onCancel: () => boolean;
157
 
183
 
158
     /**
184
     /**

+ 12
- 0
react/features/toolbox/components/native/styles.js View File

55
  */
55
  */
56
 const styles = {
56
 const styles = {
57
 
57
 
58
+    expandMenuContainer: {
59
+        alignItems: 'center',
60
+        borderTopLeftRadius: 16,
61
+        borderTopRightRadius: 16,
62
+        flexDirection: 'column'
63
+    },
64
+
65
+    sheetGestureRecognizer: {
66
+        alignItems: 'stretch',
67
+        flexDirection: 'column'
68
+    },
69
+
58
     /**
70
     /**
59
      * The style of the toolbar.
71
      * The style of the toolbar.
60
      */
72
      */

Loading…
Cancel
Save