Browse Source

feat(native-participants-pane) added showHeaderWithNavigation prop to JitsiModal and created close button

master
Calin Chitu 4 years ago
parent
commit
6597bfc2aa

+ 19
- 3
react/features/base/modal/components/JitsiModal.js View File

@@ -66,6 +66,11 @@ type Props = {
66 66
      */
67 67
     position?: string,
68 68
 
69
+    /**
70
+     * True if the header with navigation should be shown, false otherwise.
71
+     */
72
+    showHeaderWithNavigation: boolean,
73
+
69 74
     /**
70 75
      * Additional style to be appended to the View containing the content of the modal.
71 76
      */
@@ -98,7 +103,17 @@ class JitsiModal extends PureComponent<Props> {
98 103
      * @inheritdoc
99 104
      */
100 105
     render() {
101
-        const { _headerStyles, _show, _styles, children, footerComponent, headerProps, position, style } = this.props;
106
+        const {
107
+            _headerStyles,
108
+            _show,
109
+            _styles,
110
+            children,
111
+            footerComponent,
112
+            headerProps,
113
+            position,
114
+            showHeaderWithNavigation,
115
+            style
116
+        } = this.props;
102 117
 
103 118
         return (
104 119
             <SlidingView
@@ -117,9 +132,10 @@ class JitsiModal extends PureComponent<Props> {
117 132
                         _styles.page,
118 133
                         style
119 134
                     ] }>
120
-                    <HeaderWithNavigation
135
+                    {showHeaderWithNavigation
136
+                    && <HeaderWithNavigation
121 137
                         { ...headerProps }
122
-                        onPressBack = { this._onRequestClose } />
138
+                        onPressBack = { this._onRequestClose } />}
123 139
                     <SafeAreaView style = { styles.safeArea }>
124 140
                         { children }
125 141
                     </SafeAreaView>

+ 2
- 1
react/features/chat/components/native/Chat.js View File

@@ -44,7 +44,8 @@ class Chat extends AbstractChat<Props> {
44 44
                     headerLabelKey: 'chat.title'
45 45
                 }}
46 46
                 modalId = { CHAT_VIEW_MODAL_ID }
47
-                onClose = { this._onClose }>
47
+                onClose = { this._onClose }
48
+                showHeaderWithNavigation = { true }>
48 49
 
49 50
                 <MessageContainer messages = { this.props._messages } />
50 51
                 <MessageRecipient />

+ 1
- 0
react/features/etherpad/components/native/SharedDocument.js View File

@@ -78,6 +78,7 @@ class SharedDocument extends PureComponent<Props> {
78 78
                     headerLabelKey: 'documentSharing.title'
79 79
                 }}
80 80
                 modalId = { SHARE_DOCUMENT_VIEW_ID }
81
+                showHeaderWithNavigation = { true }
81 82
                 style = { styles.webView }>
82 83
                 <WebView
83 84
                     onError = { this._onError }

+ 2
- 1
react/features/help/components/HelpView.js View File

@@ -33,7 +33,8 @@ class HelpView extends PureComponent<Props> {
33 33
                 headerProps = {{
34 34
                     headerLabelKey: 'helpView.header'
35 35
                 }}
36
-                modalId = { HELP_VIEW_MODAL_ID }>
36
+                modalId = { HELP_VIEW_MODAL_ID }
37
+                showHeaderWithNavigation = { true }>
37 38
                 <WebView source = {{ uri: this.props._url }} />
38 39
             </JitsiModal>
39 40
         );

+ 2
- 1
react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js View File

@@ -176,7 +176,8 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
176 176
                     headerLabelKey: 'inviteDialog.header',
177 177
                     onPressForward: this._onInvite
178 178
                 }}
179
-                modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }>
179
+                modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }
180
+                showHeaderWithNavigation = { true }>
180 181
                 <View
181 182
                     style = { styles.searchFieldWrapper }>
182 183
                     <View style = { styles.searchIconWrapper }>

+ 2
- 1
react/features/invite/components/dial-in-summary/native/DialInSummary.js View File

@@ -58,7 +58,8 @@ class DialInSummary extends Component<Props> {
58 58
                     headerLabelKey: 'info.label'
59 59
                 }}
60 60
                 modalId = { DIAL_IN_SUMMARY_VIEW_ID }
61
-                style = { styles.backDrop } >
61
+                showHeaderWithNavigation = { true }
62
+                style = { styles.backDrop }>
62 63
                 <WebView
63 64
                     onError = { this._onError }
64 65
                     onShouldStartLoadWithRequest = { this._onNavigate }

+ 21
- 9
react/features/participants-pane/components/native/ParticipantsPane.js View File

@@ -1,14 +1,17 @@
1 1
 // @flow
2 2
 
3 3
 import React, { useCallback } from 'react';
4
-import { Button, Text, withTheme } from 'react-native-paper';
4
+import { Button, withTheme } from 'react-native-paper';
5 5
 import { useDispatch } from 'react-redux';
6 6
 
7 7
 
8 8
 import { translate } from '../../../base/i18n';
9
+import { Icon, IconClose } from '../../../base/icons';
9 10
 import { JitsiModal } from '../../../base/modal';
10 11
 import { close } from '../../actions';
11 12
 
13
+import styles from './styles';
14
+
12 15
 /**
13 16
  * {@code ParticipantsPane}'s React {@code Component} prop types.
14 17
  */
@@ -31,16 +34,25 @@ function ParticipantsPane({ theme }: Props) {
31 34
         () => dispatch(close()),
32 35
         [ dispatch ]);
33 36
 
37
+    const { palette } = theme;
38
+
34 39
     return (
35 40
         <JitsiModal
36
-            headerProps = {{
37
-                onPressBack: closePane()
38
-            }}>
39
-            {/* eslint-disable-next-line react/jsx-no-bind */}
40
-            <Button onPress = { closePane }> X</Button>
41
-            <Text>
42
-                OLE
43
-            </Text>
41
+            showHeaderWithNavigation = { false }
42
+            style = { styles.participantsPane }>
43
+            <Button
44
+                mode = 'contained'
45
+                onPress = { closePane }
46
+                style = { styles.closeButton }
47
+                theme = {{
48
+                    colors: {
49
+                        primary: palette.action02
50
+                    }
51
+                }}>
52
+                <Icon
53
+                    src = { IconClose }
54
+                    style = { styles.closeIcon } />
55
+            </Button>
44 56
         </JitsiModal>
45 57
     );
46 58
 }

+ 26
- 0
react/features/participants-pane/components/native/styles.js View File

@@ -0,0 +1,26 @@
1
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
2
+
3
+/**
4
+ * The styles of the native components of the feature {@code participants}.
5
+ */
6
+export default {
7
+    participantsPane: {
8
+        backgroundColor: BaseTheme.palette.ui01,
9
+        padding: 16
10
+    },
11
+
12
+    closeButton: {
13
+        alignItems: 'center',
14
+        display: 'flex',
15
+        height: 48,
16
+        justifyContent: 'center',
17
+        marginLeft: 'auto'
18
+    },
19
+
20
+    closeIcon: {
21
+        display: 'flex',
22
+        flex: 1,
23
+        fontSize: 24,
24
+        justifyContent: 'center'
25
+    }
26
+};

+ 2
- 1
react/features/settings/components/native/SettingsView.js View File

@@ -158,7 +158,8 @@ class SettingsView extends AbstractSettingsView<Props, State> {
158 158
                     headerLabelKey: 'settingsView.header'
159 159
                 }}
160 160
                 modalId = { SETTINGS_VIEW_ID }
161
-                onClose = { this._onClose }>
161
+                onClose = { this._onClose }
162
+                showHeaderWithNavigation = { true }>
162 163
                 <ScrollView>
163 164
                     <FormSectionAccordion
164 165
                         accordion = { false }

Loading…
Cancel
Save