adding-participants-button-on-navbar

FeracodeBR · Oct 21, 2019 · fd78014 · fd78014
1 parent 8b66656
commit fd78014
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 29 deletions.
diff --git a/react/features/base/settings/constants.js b/react/features/base/settings/constants.js
@@ -3,4 +3,4 @@
 /**
  * The default server URL to open if no other was specified.
  */
-export const DEFAULT_SERVER_URL = 'https://meet-dev.smashinnovations.com';
+export const DEFAULT_SERVER_URL = 'https://meet-staging.smashinnovations.com';
diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js
@@ -29,7 +29,6 @@ import { BackButtonRegistry } from '../../../mobile/back-button';
 import { AddPeopleDialog, CalleeInfoContainer } from '../../../invite';
 import { Captions } from '../../../subtitles';
 import { isToolboxVisible, setToolboxVisible, Toolbox } from '../../../toolbox';
-import ParticipantsListButton from '../../../toolbox/components/native/ParticipantsListButton';
 
 import {
     AbstractConference,
@@ -42,7 +41,6 @@ import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
 
 import type { AbstractProps } from '../AbstractConference';
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
-import AudioMuteButton from '../../../toolbox/components/AudioMuteButton';
 
 /**
  * The type of the React {@code Component} props of {@link Conference}.
@@ -253,9 +251,7 @@ class Conference extends AbstractConference<Props, *> {
             _reducedUI,
             _shouldDisplayTileView,
             _toolboxVisible,
-            _styles
         } = this.props;
-        const { buttonStyles, toggledButtonStyles } = _styles;
         const showGradient = _toolboxVisible;
         const applyGradientStretching = _filmstripVisible && isNarrowAspectRatio(this) && !_shouldDisplayTileView;
 
@@ -341,9 +337,6 @@ class Conference extends AbstractConference<Props, *> {
                     pointerEvents = 'box-none'
                     style = { styles.navBarSafeView }>
                     <NavigationBar />
-                    <ParticipantsListButton
-                        styles = { buttonStyles }
-                        toggledStyles = { toggledButtonStyles } />
                     { this._renderNotificationsContainer() }
                 </SafeAreaView>
 

diff --git a/react/features/conference/components/native/ConferencePageSideBar.native.js b/react/features/conference/components/native/ConferencePageSideBar.native.js
@@ -1,14 +1,15 @@
 // @flow
 
 import React, { Component } from 'react';
-import { SafeAreaView, ScrollView } from 'react-native';
+import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
-import { IconSmashHexagon } from '../../../base/icons';
+import { IconSmashHexagon, IconArrowBack, Icon } from '../../../base/icons';
 import {
     getLocalParticipant
 } from '../../../base/participants';
 import {
-    SlidingView
+    SlidingView,
+    Header
 } from '../../../base/react';
 import { connect } from '../../../base/redux';
 
@@ -86,6 +87,19 @@ class ConferencePageSideBar extends Component<Props> {
                 position = 'left'
                 show = { this.props._visible }
                 style = { styles.sideBar } >
+                <Header style = { styles.sideBarHeader }>
+                    <View style = { styles.sideBarHeaderAction }>
+                        <TouchableOpacity onPress = { this._onHideSideBar }>
+                            <Icon
+                                src = { IconArrowBack }
+                                style = { styles.sideBarHeaderIcon } />
+                        </TouchableOpacity>
+                    </View>
+                    <View style = { styles.sideBarHeaderText }>
+                        <Text style = { styles.sideBarHeaderTitle } >Participants</Text>
+                    </View>
+                    <View style = { styles.sideBarHeaderAction } />
+                </Header>
                 <SafeAreaView style = { styles.sideBarBody }>
                     <ScrollView
                         style = { styles.itemContainer }>

diff --git a/react/features/conference/components/native/NavigationBar.js b/react/features/conference/components/native/NavigationBar.js
@@ -10,6 +10,9 @@ import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { isToolboxVisible } from '../../../toolbox';
 
 import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
+import ParticipantsListButton
+    from '../../../toolbox/components/native/ParticipantsListButton';
 
 type Props = {
 
@@ -21,7 +24,9 @@ type Props = {
     /**
      * True if the navigation bar should be visible.
      */
-    _visible: boolean
+    _visible: boolean,
+
+    _styles: Object
 };
 
 /**
@@ -39,6 +44,8 @@ class NavigationBar extends Component<Props> {
             return null;
         }
 
+        const { _styles } = this.props;
+
         return [
             <LinearGradient
                 colors = { NAVBAR_GRADIENT_COLORS }
@@ -58,11 +65,19 @@ class NavigationBar extends Component<Props> {
                 <View
                     pointerEvents = 'box-none'
                     style = { styles.roomNameWrapper }>
-                    <Text
-                        numberOfLines = { 1 }
-                        style = { styles.roomName }>
-                        { this.props._meetingName }
-                    </Text>
+                    <View style = { styles.roomNameAction } />
+                    <View style = { styles.roomNameTitle } >
+                        <Text
+                            numberOfLines = { 1 }
+                            style = { styles.roomName }>
+                            { this.props._meetingName }
+                        </Text>
+                    </View>
+                    <View style = { styles.roomNameAction } >
+                        <ParticipantsListButton
+                            styles = { _styles.buttonStyles }
+                            toggledStyles = { _styles.toggledButtonStyles } />
+                    </View>
                 </View>
             </View>
         ];
@@ -82,7 +97,8 @@ class NavigationBar extends Component<Props> {
 function _mapStateToProps(state) {
     return {
         _meetingName: getConferenceName(state),
-        _visible: isToolboxVisible(state)
+        _visible: isToolboxVisible(state),
+        _styles: ColorSchemeRegistry.get(state, 'Toolbox')
     };
 }
 

diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js
@@ -6,8 +6,6 @@ import { FILMSTRIP_SIZE } from '../../../filmstrip';
 
 export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ];
 
-const SIDEBAR_HEADER_HEIGHT = 150;
-
 // From brand guideline
 const BOTTOM_GRADIENT_HEIGHT = 290;
 const DEFAULT_GRADIENT_SIZE = 140;
@@ -112,17 +110,24 @@ export default {
     roomName: {
         color: ColorPalette.white,
         fontSize: 17,
-        fontWeight: '400'
+        fontWeight: '400',
+        textAlign: 'center'
     },
 
     roomNameWrapper: {
         flexDirection: 'row',
-        justifyContent: 'center',
+        justifyContent: 'space-between',
+        alignItems: 'center',
         left: 0,
-        paddingHorizontal: 48,
         position: 'absolute',
         right: 0
     },
+    roomNameTitle: {
+        flex: 6
+    },
+    roomNameAction: {
+        flex: 2
+    },
 
     /**
      * The style of the {@link View} which expands over the whole
@@ -161,12 +166,25 @@ export default {
      * The style of the side bar header.
      */
     sideBarHeader: {
-        alignItems: 'center',
-        flexDirection: 'column',
-        height: SIDEBAR_HEADER_HEIGHT,
-        justifyContent: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
         padding: BoxModel.padding
     },
+    sideBarHeaderTitle: {
+        fontSize: 18,
+        color: ColorPalette.white,
+        textAlign: 'center'
+    },
+    sideBarHeaderIcon: {
+        fontSize: 22,
+        color: ColorPalette.white
+    },
+    sideBarHeaderAction: {
+        flex: 2
+    },
+    sideBarHeaderText: {
+        flex: 6
+    },
 
     /**
      * Style of the menu items in the side bar.
@@ -191,7 +209,8 @@ export default {
 
     sideBarAvatar: {
         height: 30,
-        width: 30
+        width: 30,
+        borderRadius: 15
     },
 
     /**

diff --git a/react/features/toolbox/components/native/ParticipantsListButton.js b/react/features/toolbox/components/native/ParticipantsListButton.js
@@ -10,7 +10,8 @@ import {
     createShortcutEvent,
     sendAnalytics
 } from '../../../analytics';
-import { setSideBarVisible } from '../../../conference/actions.native';
+import { setSideBarVisible } from '../../../conference';
+import { toggleToolboxVisible } from '../../';
 
 declare var APP: Object;
 
@@ -121,6 +122,7 @@ class ParticipantsListButton extends AbstractParticipantsListButton<Props, *> {
      */
     _setIsParticipantsShown(participantsIsShow: boolean) {
         this.props.dispatch(setSideBarVisible(participantsIsShow, /* ensureTrack */ true));
+        this.props.dispatch(toggleToolboxVisible());
     }
 
     /**