Browse Source

feat(participants-pane) hide admit all if less than 2 participants

- Fixed admitMultiple action for mobile
- Added token color for button
- Hide Admit all button if less than 2 knocking participants
master
Calinteodor 3 years ago
parent
commit
efc5c9dabe
No account linked to committer's email address

+ 25
- 12
react/features/participants-pane/components/native/LobbyParticipantList.js View File

3
 import React, { useCallback } from 'react';
3
 import React, { useCallback } from 'react';
4
 import { useTranslation } from 'react-i18next';
4
 import { useTranslation } from 'react-i18next';
5
 import { Text, View } from 'react-native';
5
 import { Text, View } from 'react-native';
6
-import { Button } from 'react-native-paper';
6
+import { Button, withTheme } from 'react-native-paper';
7
 import { useDispatch, useSelector } from 'react-redux';
7
 import { useDispatch, useSelector } from 'react-redux';
8
 
8
 
9
 import { admitMultiple } from '../../../lobby/actions.native';
9
 import { admitMultiple } from '../../../lobby/actions.native';
12
 import { LobbyParticipantItem } from './LobbyParticipantItem';
12
 import { LobbyParticipantItem } from './LobbyParticipantItem';
13
 import styles from './styles';
13
 import styles from './styles';
14
 
14
 
15
-export const LobbyParticipantList = () => {
15
+type Props = {
16
+
17
+    /**
18
+     * Theme used for styles.
19
+     */
20
+    theme: Object
21
+};
22
+
23
+const LobbyParticipantList = ({ theme }: Props) => {
16
     const {
24
     const {
17
         lobbyEnabled,
25
         lobbyEnabled,
18
         knockingParticipants: participants
26
         knockingParticipants: participants
19
     } = useSelector(getLobbyState);
27
     } = useSelector(getLobbyState);
20
-
21
     const dispatch = useDispatch();
28
     const dispatch = useDispatch();
22
     const admitAll = useCallback(() =>
29
     const admitAll = useCallback(() =>
23
         dispatch(admitMultiple(participants)),
30
         dispatch(admitMultiple(participants)),
24
-        [ dispatch ]);
31
+        [ dispatch, participants ]);
25
     const { t } = useTranslation();
32
     const { t } = useTranslation();
33
+    const { palette } = theme;
26
 
34
 
27
     if (!lobbyEnabled || !participants.length) {
35
     if (!lobbyEnabled || !participants.length) {
28
         return null;
36
         return null;
35
                     {t('participantsPane.headings.waitingLobby',
43
                     {t('participantsPane.headings.waitingLobby',
36
                         { count: participants.length })}
44
                         { count: participants.length })}
37
                 </Text>
45
                 </Text>
38
-                <Button
39
-                    color = '#3D3D3D'
40
-                    labelStyle = { styles.admitAllParticipantsActionButtonLabel }
41
-                    mode = 'text'
42
-                    onPress = { admitAll }
43
-                    style = { styles.admitAllParticipantsActionButton }>
44
-                    {t('lobby.admitAll')}
45
-                </Button>
46
+                {
47
+                    participants.length > 1 && (
48
+                        <Button
49
+                            color = { palette.action02 }
50
+                            labelStyle = { styles.admitAllParticipantsActionButtonLabel }
51
+                            mode = 'text'
52
+                            onPress = { admitAll }>
53
+                            {t('lobby.admitAll')}
54
+                        </Button>
55
+                    )
56
+                }
46
             </View>
57
             </View>
47
             {
58
             {
48
                 participants.map(p => (
59
                 participants.map(p => (
54
         </View>
65
         </View>
55
     );
66
     );
56
 };
67
 };
68
+
69
+export default withTheme(LobbyParticipantList);

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

18
 import { close } from '../../actions.native';
18
 import { close } from '../../actions.native';
19
 
19
 
20
 import { ContextMenuMore } from './ContextMenuMore';
20
 import { ContextMenuMore } from './ContextMenuMore';
21
-import { LobbyParticipantList } from './LobbyParticipantList';
21
+import LobbyParticipantList from './LobbyParticipantList';
22
 import { MeetingParticipantList } from './MeetingParticipantList';
22
 import { MeetingParticipantList } from './MeetingParticipantList';
23
 import styles from './styles';
23
 import styles from './styles';
24
 
24
 

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

116
         textTransform: 'capitalize'
116
         textTransform: 'capitalize'
117
     },
117
     },
118
 
118
 
119
-    admitAllParticipantsActionButton: {
120
-        marginLeft: 'auto'
121
-    },
122
-
123
     participantContainer: {
119
     participantContainer: {
124
         alignItems: 'center',
120
         alignItems: 'center',
125
         borderBottomColor: BaseTheme.palette.field01Hover,
121
         borderBottomColor: BaseTheme.palette.field01Hover,

+ 7
- 3
react/features/participants-pane/components/web/LobbyParticipantList.js View File

53
             <div className = { classes.heading }>
53
             <div className = { classes.heading }>
54
                 {t('participantsPane.headings.lobby', { count: participants.length })}
54
                 {t('participantsPane.headings.lobby', { count: participants.length })}
55
             </div>
55
             </div>
56
-            <div
57
-                className = { classes.link }
58
-                onClick = { admitAll }>{t('lobby.admitAll')}</div>
56
+            {
57
+                participants.length > 1 && (
58
+                    <div
59
+                        className = { classes.link }
60
+                        onClick = { admitAll }>{t('lobby.admitAll')}</div>
61
+                )
62
+            }
59
         </div>
63
         </div>
60
         <div>
64
         <div>
61
             {participants.map(p => (
65
             {participants.map(p => (

Loading…
Cancel
Save