feat(native-participants-pane) ui fixes

lang/main.json

@@ -593,7 +593,8 @@
         "close": "Close",
         "headings": {
             "lobby": "Lobby ({{count}})",
-            "participantsList": "Meeting participants ({{count}})"
+            "participantsList": "Meeting participants ({{count}})",
+            "waitingLobby": "Waiting in lobby ({{count}})"
         },
         "actions": {
             "allow": "Allow attendees to:",

react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js

@@ -3,7 +3,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
-import { Text } from 'react-native-paper';
+import { Divider, Text } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
@@ -46,6 +46,7 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
                     </Text>
                 </View>
             </View>
+            <Divider style = { styles.divider } />
             <TouchableOpacity
                 onPress = { reject }
                 style = { styles.contextMenuItem }>

react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
-import { Text } from 'react-native-paper';
+import { Divider, Text } from 'react-native-paper';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
@@ -88,6 +88,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     </Text>
                 </View>
             </View>
+            <Divider style = { styles.divider } />
             {
                 isLocalModerator
                 && <TouchableOpacity
@@ -116,6 +117,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     </Text>
                 </TouchableOpacity>
             }
+            <Divider style = { styles.divider } />
             {
                 isLocalModerator && (
                     isParticipantVideoMuted
@@ -165,6 +167,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     style = { styles.contextMenuItemIcon } />
                 <Text style = { styles.contextMenuItemText }>{ t('participantsPane.actions.networkStats') }</Text>
             </TouchableOpacity>
+            <Divider style = { styles.divider } />
             <VolumeSlider
                 initialValue = { volume }
                 onChange = { onVolumeChange } />

react/features/participants-pane/components/native/LobbyParticipantItem.js

@@ -29,6 +29,7 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
     return (
         <ParticipantItem
             audioMuteState = { MediaState.Muted }
+            isKnockingParticipant = { true }
             name = { p.name }
             onPress = { openContextMenuReject }
             participant = { p }

react/features/participants-pane/components/native/LobbyParticipantList.js

@@ -21,13 +21,15 @@ export const LobbyParticipantList = () => {
         <View style = { styles.lobbyList }>
             <View style = { styles.lobbyListDetails } >
                 <Text style = { styles.lobbyListDescription }>
-                    {t('participantsPane.headings.lobby',
+                    {t('participantsPane.headings.waitingLobby',
                         { count: participants.length })}
                 </Text>
                 <Button
-                    labelStyle = { styles.allParticipantActionsButton }
+                    color = '#3D3D3D'
+                    labelStyle = { styles.admitAllParticipantsActionButtonLabel }
                     mode = 'text'
-                    onPress = { admitAll }>
+                    onPress = { admitAll }
+                    style = { styles.admitAllParticipantsActionButton }>
                     {t('lobby.admitAll')}
                 </Button>
             </View>

react/features/participants-pane/components/native/MeetingParticipantItem.js

@@ -30,6 +30,7 @@ export const MeetingParticipantItem = ({ participant: p }: Props) => {
     return (
         <ParticipantItem
             audioMuteState = { isAudioMuted ? MediaState.Muted : MediaState.Unmuted }
+            isKnockingParticipant = { false }
             name = { p.name }
             onPress = { openContextMenuDetails }
             participant = { p }

react/features/participants-pane/components/native/ParticipantItem.js

@@ -30,6 +30,11 @@ type Props = {
      */
     children?: Node,
 
+    /**
+     * Is the participant waiting?
+     */
+    isKnockingParticipant: boolean,
+
     /**
      * The name of the participant. Used for showing lobby names.
      */
@@ -64,6 +69,7 @@ type Props = {
 function ParticipantItem({
     audioMuteState = MediaState.None,
     children,
+    isKnockingParticipant,
     name,
     onPress,
     participant: p,
@@ -89,11 +95,15 @@ function ParticipantItem({
                     </Text>
                     { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
-                <View style = { styles.participantStatesContainer } >
-                    {p.raisedHand && <RaisedHandIndicator />}
-                    <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>
-                    <View style = { styles.participantStateAudio }>{AudioStateIcons[audioMuteState]}</View>
-                </View>
+                {
+                    !isKnockingParticipant && <>
+                        {p.raisedHand && <RaisedHandIndicator />}
+                        <View style = { styles.participantStatesContainer }>
+                            <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>
+                            <View>{AudioStateIcons[audioMuteState]}</View>
+                        </View>
+                    </>
+                }
             </TouchableOpacity>
             { children }
         </View>

react/features/participants-pane/components/native/styles.js

@@ -1,27 +1,11 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
-/**
- * The style for participant states.
- */
-const participantState = {
-    display: 'flex',
-    justifyContent: 'center'
-};
-
-/**
- * The style for participant list.
- */
-const participantList = {
-    marginLeft: BaseTheme.spacing[3],
-    marginRight: BaseTheme.spacing[3],
-    position: 'relative'
-};
-
 /**
  * The style for participant list description.
  */
 const participantListDescription = {
-    color: BaseTheme.palette.text01,
+    ...BaseTheme.typography.heading6,
+    color: BaseTheme.palette.text02,
     paddingBottom: BaseTheme.spacing[3],
     paddingTop: BaseTheme.spacing[3],
     position: 'relative',
@@ -46,7 +30,6 @@ const button = {
     backgroundColor: BaseTheme.palette.action02,
     borderRadius: BaseTheme.shape.borderRadius,
     display: 'flex',
-    height: BaseTheme.spacing[7],
     justifyContent: 'center',
     marginLeft: 'auto'
 };
@@ -55,8 +38,7 @@ const button = {
  * Small buttons.
  */
 const smallButton = {
-    ...button,
-    width: BaseTheme.spacing[7]
+    ...button
 };
 
 /**
@@ -64,7 +46,6 @@ const smallButton = {
  */
 const buttonContent = {
     ...BaseTheme.typography.labelButton,
-    ...flexContent,
     color: BaseTheme.palette.text01,
     justifyContent: 'center'
 };
@@ -87,22 +68,18 @@ export default {
         backgroundColor: BaseTheme.palette.action01,
         borderRadius: BaseTheme.shape.borderRadius,
         flexDirection: 'row',
-        height: BaseTheme.spacing[5],
+        height: BaseTheme.spacing[6],
+        marginRight: BaseTheme.spacing[3],
         position: 'absolute',
         right: 0,
         zIndex: 1
     },
 
-    participantActionsButtonReject: {
-        backgroundColor: BaseTheme.palette.action01,
-        borderRadius: BaseTheme.shape.borderRadius,
-        height: BaseTheme.spacing[5]
-    },
-
     participantActionsButtonContent: {
         alignItems: 'center',
         display: 'flex',
-        height: BaseTheme.spacing[5]
+        height: BaseTheme.spacing[5],
+        top: BaseTheme.spacing[1]
     },
 
     participantActionsButtonText: {
@@ -110,13 +87,16 @@ export default {
         textTransform: 'capitalize'
     },
 
-    allParticipantActionsButton: {
+    admitAllParticipantsActionButtonLabel: {
         ...BaseTheme.typography.heading6,
         color: BaseTheme.palette.link01,
-        marginRight: 'auto',
         textTransform: 'capitalize'
     },
 
+    admitAllParticipantsActionButton: {
+        marginLeft: 'auto'
+    },
+
     participantContainer: {
         alignItems: 'center',
         borderBottomColor: BaseTheme.palette.field01Hover,
@@ -124,6 +104,8 @@ export default {
         display: 'flex',
         flexDirection: 'row',
         height: BaseTheme.spacing[9],
+        paddingLeft: BaseTheme.spacing[3],
+        paddingRight: BaseTheme.spacing[3],
         width: '100%'
     },
 
@@ -163,23 +145,18 @@ export default {
         display: 'flex',
         flexDirection: 'row',
         marginLeft: 'auto',
-        width: 72
-    },
-
-    participantStateAudio: {
-        ...participantState
+        width: '15%'
     },
 
     participantStateVideo: {
-        ...participantState,
-        paddingRight: BaseTheme.spacing[2]
+        paddingRight: BaseTheme.spacing[3]
     },
 
     raisedHandIndicator: {
         backgroundColor: BaseTheme.palette.warning02,
         borderRadius: BaseTheme.shape.borderRadius / 2,
         height: BaseTheme.spacing[4],
-        marginRight: BaseTheme.spacing[2],
+        marginLeft: BaseTheme.spacing[1],
         width: BaseTheme.spacing[4]
     },
 
@@ -188,11 +165,11 @@ export default {
         top: BaseTheme.spacing[1]
     },
     lobbyList: {
-        ...participantList
+        position: 'relative'
     },
 
     meetingList: {
-        ...participantList,
+        position: 'relative',
         marginTop: BaseTheme.spacing[3]
     },
 
@@ -202,6 +179,7 @@ export default {
         flexDirection: 'row',
         justifyContent: 'space-between',
         overflow: 'hidden',
+        paddingLeft: BaseTheme.spacing[3],
         position: 'relative',
         width: '100%'
     },
@@ -211,7 +189,8 @@ export default {
     },
 
     meetingListDescription: {
-        ...participantListDescription
+        ...participantListDescription,
+        marginLeft: BaseTheme.spacing[3]
     },
 
     header: {
@@ -241,17 +220,21 @@ export default {
     },
 
     closeButton: {
-        ...smallButton
+        ...smallButton,
+        width: BaseTheme.spacing[8]
     },
 
     closeIcon: {
         ...buttonContent,
+        height: BaseTheme.spacing[8],
         left: BaseTheme.spacing[2]
     },
 
     inviteButton: {
         backgroundColor: BaseTheme.palette.action01,
-        marginTop: BaseTheme.spacing[2]
+        marginTop: BaseTheme.spacing[2],
+        marginLeft: BaseTheme.spacing[3],
+        marginRight: BaseTheme.spacing[3]
     },
 
     inviteLabel: {
@@ -260,11 +243,13 @@ export default {
     },
 
     moreButton: {
-        ...smallButton
+        ...smallButton,
+        width: BaseTheme.spacing[8]
     },
 
     moreIcon: {
         ...buttonContent,
+        height: BaseTheme.spacing[8],
         left: BaseTheme.spacing[2]
     },
 
@@ -279,10 +264,12 @@ export default {
     },
 
     muteAllContent: {
-        ...buttonContent
+        ...buttonContent,
+        height: BaseTheme.spacing[8]
     },
 
     muteAllLabel: {
+        ...BaseTheme.typography.labelButtonLarge,
         color: BaseTheme.palette.text01,
         textTransform: 'capitalize'
     },
@@ -292,16 +279,12 @@ export default {
     },
 
     contextMenuItemSection: {
-        ...contextMenuItem,
-        borderBottomColor: BaseTheme.palette.section01,
-        borderBottomWidth: 1
+        ...contextMenuItem
     },
 
     contextMenuItemText: {
         ...BaseTheme.typography.bodyShortRegularLarge,
-        alignSelf: 'center',
         color: BaseTheme.palette.text01,
-        flexDirection: 'row',
         marginLeft: BaseTheme.spacing[3]
     },
 
@@ -316,5 +299,9 @@ export default {
 
     contextMenuIcon: {
         color: BaseTheme.palette.actionDanger
+    },
+
+    divider: {
+        backgroundColor: BaseTheme.palette.section01
     }
 };