feat(toolbox/conference): button places updates

react/features/conference/components/native/TitleBar.js

@@ -9,6 +9,8 @@ import { connect } from '../../../base/redux';
 import InviteButton from '../../../invite/components/add-people-dialog/native/InviteButton';
 import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
+import ToggleCameraButton
+    from '../../../toolbox/components/native/ToggleCameraButton';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
 import ConferenceTimer from '../ConferenceTimer';
 
@@ -82,10 +84,13 @@ const TitleBar = (props: Props) => (<>
             <Labels createOnPress = { props._createOnPress } />
         </View>
         <View style = { styles.titleBarButtonContainer }>
-            <AudioDeviceToggleButton styles = { styles.inviteButton } />
+            <ToggleCameraButton styles = { styles.titleBarButton } />
         </View>
         <View style = { styles.titleBarButtonContainer }>
-            <InviteButton styles = { styles.inviteButton } />
+            <AudioDeviceToggleButton styles = { styles.titleBarButton } />
+        </View>
+        <View style = { styles.titleBarButtonContainer }>
+            <InviteButton styles = { styles.titleBarButton } />
         </View>
     </View>}
 </>);

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

@@ -75,7 +75,7 @@ export default {
         width: BaseTheme.spacing[7]
     },
 
-    inviteButton: {
+    titleBarButton: {
         iconStyle: {
             color: BaseTheme.palette.icon01,
             padding: 12,

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

@@ -7,7 +7,6 @@ import { BottomSheet, hideSheet } from '../../../base/dialog';
 import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import { connect } from '../../../base/redux';
 import { SharedDocumentButton } from '../../../etherpad';
-import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
 import { ReactionMenu } from '../../../reactions/components';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
 import { LiveStreamButton, RecordButton } from '../../../recording';
@@ -115,25 +114,11 @@ class OverflowMenu extends PureComponent<Props, State> {
             styles: bottomSheetStyles.buttons
         };
 
-        const topButtonProps = {
-            afterClick: this._onCancel,
-            showLabel: true,
-            styles: {
-                ...bottomSheetStyles.buttons,
-                style: {
-                    ...bottomSheetStyles.buttons.style,
-                    borderTopLeftRadius: 16,
-                    borderTopRightRadius: 16
-                }
-            }
-        };
-
         return (
             <BottomSheet
                 renderFooter = { _reactionsEnabled && !toolbarButtons.has('raisehand')
                     ? this._renderReactionMenu
                     : null }>
-                <ParticipantsPaneButton { ...topButtonProps } />
                 {_selfViewHidden && <ToggleSelfViewButton { ...buttonProps } />}
                 <OpenCarmodeButton { ...buttonProps } />
                 <AudioOnlyButton { ...buttonProps } />

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

@@ -20,7 +20,6 @@ import VideoMuteButton from '../VideoMuteButton';
 
 import OverflowMenuButton from './OverflowMenuButton';
 import RaiseHandButton from './RaiseHandButton';
-import ToggleCameraButton from './ToggleCameraButton';
 import styles from './styles';
 
 /**
@@ -103,14 +102,8 @@ function Toolbox(props: Props) {
                         styles = { buttonStylesBorderless }
                         toggledStyles = { backgroundToggledStyle } />)}
                 {additionalButtons.has('tileview') && <TileViewButton styles = { buttonStylesBorderless } />}
-                {additionalButtons.has('participantspane')
+                <ParticipantsPaneButton
-                && <ParticipantsPaneButton
                     styles = { buttonStylesBorderless } />
-                }
-                {additionalButtons.has('togglecamera')
-                      && <ToggleCameraButton
-                          styles = { buttonStylesBorderless }
-                          toggledStyles = { backgroundToggledStyle } />}
                 <OverflowMenuButton
                     styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />