feat(native-participants-pane) ui fixes

lang/main.json

@@ -1108,6 +1108,7 @@
         "passwordField": "Enter meeting password",
         "passwordJoinButton": "Join",
         "reject": "Reject",
+        "rejectAll": "Reject all",
         "toggleLabel": "Enable lobby"
     }
 }

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

@@ -31,17 +31,17 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
             participant = { p }
             videoMuteState = { MediaState.ForceMuted }>
             <Button
-                labelStyle = { styles.participantActionButtonText }
+                labelStyle = { styles.participantActionsButtonText }
                 mode = 'contained'
                 onPress = { admit }
-                style = { styles.participantActionButton }>
+                style = { styles.participantActionsButtonAdmit }>
                 {t('lobby.admit')}
             </Button>
             <Button
-                labelStyle = { styles.participantActionButtonText }
+                labelStyle = { styles.participantActionsButtonText }
                 mode = 'contained'
                 onPress = { reject }
-                style = { styles.participantActionButton }>
+                style = { styles.participantActionsButtonReject }>
                 {t('lobby.reject')}
             </Button>
         </ParticipantItem>

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

@@ -13,20 +13,20 @@ export const LobbyParticipantList = () => {
     const { t } = useTranslation();
 
     return (
-        <>
-            <View style = { styles.lobbyListContainer } >
+        <View style = { styles.lobbyList }>
+            <View style = { styles.lobbyListDetails } >
                 <Text style = { styles.lobbyListDescription }>
                     {t('participantsPane.headings.lobby',
                         { count: participants.length })}
                 </Text>
                 <View style = { styles.lobbyListActions }>
                     <Button
-                        labelStyle = { styles.allParticipantActionButton }
+                        labelStyle = { styles.allParticipantActionsButton }
                         mode = 'text'>
                         {t('lobby.admitAll')}
                     </Button>
                     <Button
-                        labelStyle = { styles.allParticipantActionButton }
+                        labelStyle = { styles.allParticipantActionsButton }
                         mode = 'text'>
                         {t('lobby.rejectAll')}
                     </Button>
@@ -37,6 +37,6 @@ export const LobbyParticipantList = () => {
                     key = { p.id }
                     participant = { p } />)
             )}
-        </>
+        </View>
     );
 };

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

@@ -80,13 +80,13 @@ function ParticipantItem({
                     </Text>
                     { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
-                { p.local ? <Text style = { styles.participantActions }> ({ children }) </Text> : null }
                 <View style = { styles.participantStatesContainer } >
                     {p.raisedHand && <RaisedHandIndicator />}
                     <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>
                     <View style = { styles.participantStateAudio }>{AudioStateIcons[audioMuteState]}</View>
                 </View>
             </View>
+            { p.local ? <Text style = { styles.participantActions }> { children } </Text> : null }
         </View>
     );
 }

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

@@ -6,9 +6,9 @@ import { View } from 'react-native';
 import { Button, withTheme } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
+import { hideDialog } from '../../../base/dialog';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
-import { close } from '../../actions.any';
 
 import { LobbyParticipantList } from './LobbyParticipantList';
 import styles from './styles';
@@ -33,7 +33,7 @@ type Props = {
 function ParticipantsPane({ theme }: Props) {
     const dispatch = useDispatch();
     const closePane = useCallback(
-        () => dispatch(close()),
+        () => dispatch(hideDialog()),
         [ dispatch ]);
     const { t } = useTranslation();
     const { palette } = theme;
@@ -64,9 +64,7 @@ function ParticipantsPane({ theme }: Props) {
             <View style = { styles.footer }>
                 <Button
                     color = { palette.text01 }
-                    compact = { true }
                     contentStyle = { styles.muteAllContent }
-                    onPress = { closePane }
                     style = { styles.muteAllButton } >
                     { t('participantsPane.actions.muteAll') }
                 </Button>
@@ -79,7 +77,6 @@ function ParticipantsPane({ theme }: Props) {
                             src = { IconHorizontalPoints } />)
                     }
                     mode = 'contained'
-                    onPress = { closePane }
                     style = { styles.moreButton }
                     theme = {{
                         colors: {

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

@@ -38,17 +38,4 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
     }
 }
 
-/**
- * Maps part of the redux state to the component's props.
- *
- * @param {Object} state - The redux store/state.
- * @returns {Props}
- */
-function mapStateToProps(state: Object) {
-
-    return {
-        state
-    };
-}
-
-export default translate(connect(mapStateToProps)(ParticipantsPaneButton));
+export default translate(connect()(ParticipantsPaneButton));

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

@@ -1,19 +1,9 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
-
-/**
- * The style for participant actions.
- */
-const participantActions = {
-    alignItems: 'center',
-    zIndex: 1
-};
-
 /**
  * The style for participant states.
  */
 const participantState = {
-    alignItems: 'center',
     display: 'flex',
     justifyContent: 'center'
 };
@@ -35,7 +25,6 @@ const container = {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
-    height: 72,
     paddingRight: 16,
     width: '100%'
 };
@@ -77,17 +66,19 @@ const buttonContent = {
 export default {
 
     participantActions: {
-        ...participantActions
+        position: 'absolute',
+        right: 0,
+        zIndex: 1
     },
 
     participantActionsHover: {
-        ...participantActions,
         backgroundColor: '#292929',
         bottom: 1,
         display: 'none',
         position: 'absolute',
         right: 8,
         top: 0,
+        zIndex: 1,
         after: {
             backgroundColor: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #292929 100%)',
             content: '',
@@ -103,31 +94,40 @@ export default {
     },
 
     participantActionsPermanent: {
-        ...participantActions,
-        display: 'flex'
+        display: 'flex',
+        zIndex: 1
     },
 
-    participantActionButton: {
+    participantActionsButtonAdmit: {
         backgroundColor: BaseTheme.palette.action01,
-        borderRadius: BaseTheme.shape.borderRadius
+        borderRadius: BaseTheme.shape.borderRadius,
+        height: 32
     },
 
-    participantActionButtonText: {
-        ...BaseTheme.typography.labelRegular
+    participantActionsButtonReject: {
+        backgroundColor: BaseTheme.palette.action01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        height: 32
     },
 
-    allParticipantActionButton: {
+    participantActionsButtonText: {
+    },
+
+    allParticipantActionsButton: {
         ...BaseTheme.typography.labelRegular,
-        color: BaseTheme.palette.action01
+        color: BaseTheme.palette.action01,
+        textTransform: 'capitalize'
+
     },
 
     participantContainer: {
         alignItems: 'center',
+        borderBottomColor: BaseTheme.palette.field01Hover,
+        borderBottomWidth: 2,
         display: 'flex',
         flexDirection: 'row',
-        marginRight: BaseTheme.spacing[6],
-        paddingLeft: 8,
-        paddingRight: 8
+        height: 64,
+        width: '100%'
     },
 
     participantContent: {
@@ -135,19 +135,16 @@ export default {
         display: 'flex',
         flexDirection: 'row',
         flexWrap: 'wrap',
-        height: 64,
         overflow: 'hidden',
-        paddingLeft: BaseTheme.spacing[2],
-        paddingTop: BaseTheme.spacing[4],
         width: '100%'
     },
 
     participantNameContainer: {
         display: 'flex',
         flexDirection: 'row',
-        marginRight: BaseTheme.spacing[3],
+        marginLeft: BaseTheme.spacing[2],
         overflow: 'hidden',
-        width: '50%'
+        width: 232
     },
 
     participantName: {
@@ -165,9 +162,7 @@ export default {
 
     participantStatesContainer: {
         display: 'flex',
-        flexDirection: 'row',
-        justifyItems: 'space-between',
-        marginLeft: 'auto'
+        flexDirection: 'row'
     },
 
     participantStateAudio: {
@@ -175,8 +170,7 @@ export default {
     },
 
     participantStateVideo: {
-        ...participantState,
-        marginRight: 8
+        ...participantState
     },
 
     raisedHandIndicator: {
@@ -191,20 +185,26 @@ export default {
         ...flexContent,
         top: 4
     },
+    lobbyList: {
+        marginLeft: 16,
+        marginRight: 16
+    },
+
+    lobbyListDetails: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%'
+    },
 
     lobbyListDescription: {
         color: BaseTheme.palette.text01,
         overflow: 'hidden',
-        padding: BaseTheme.spacing[2]
-    },
-
-    lobbyListContainer: {
-        ...container
+        width: 188
     },
 
     lobbyListActions: {
-        flexDirection: 'row',
-        marginLeft: 'auto'
+        flexDirection: 'row'
     },
 
     header: {