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
This commit is contained in:
Calinteodor 2021-07-30 12:48:06 +03:00 committed by GitHub
parent d22fc88ae3
commit efc5c9dabe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 20 deletions

View File

@ -3,7 +3,7 @@
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Text, View } from 'react-native';
import { Button } from 'react-native-paper';
import { Button, withTheme } from 'react-native-paper';
import { useDispatch, useSelector } from 'react-redux';
import { admitMultiple } from '../../../lobby/actions.native';
@ -12,17 +12,25 @@ import { getLobbyState } from '../../../lobby/functions';
import { LobbyParticipantItem } from './LobbyParticipantItem';
import styles from './styles';
export const LobbyParticipantList = () => {
type Props = {
/**
* Theme used for styles.
*/
theme: Object
};
const LobbyParticipantList = ({ theme }: Props) => {
const {
lobbyEnabled,
knockingParticipants: participants
} = useSelector(getLobbyState);
const dispatch = useDispatch();
const admitAll = useCallback(() =>
dispatch(admitMultiple(participants)),
[ dispatch ]);
[ dispatch, participants ]);
const { t } = useTranslation();
const { palette } = theme;
if (!lobbyEnabled || !participants.length) {
return null;
@ -35,14 +43,17 @@ export const LobbyParticipantList = () => {
{t('participantsPane.headings.waitingLobby',
{ count: participants.length })}
</Text>
<Button
color = '#3D3D3D'
labelStyle = { styles.admitAllParticipantsActionButtonLabel }
mode = 'text'
onPress = { admitAll }
style = { styles.admitAllParticipantsActionButton }>
{t('lobby.admitAll')}
</Button>
{
participants.length > 1 && (
<Button
color = { palette.action02 }
labelStyle = { styles.admitAllParticipantsActionButtonLabel }
mode = 'text'
onPress = { admitAll }>
{t('lobby.admitAll')}
</Button>
)
}
</View>
{
participants.map(p => (
@ -54,3 +65,5 @@ export const LobbyParticipantList = () => {
</View>
);
};
export default withTheme(LobbyParticipantList);

View File

@ -18,7 +18,7 @@ import MuteEveryoneDialog
import { close } from '../../actions.native';
import { ContextMenuMore } from './ContextMenuMore';
import { LobbyParticipantList } from './LobbyParticipantList';
import LobbyParticipantList from './LobbyParticipantList';
import { MeetingParticipantList } from './MeetingParticipantList';
import styles from './styles';

View File

@ -116,10 +116,6 @@ export default {
textTransform: 'capitalize'
},
admitAllParticipantsActionButton: {
marginLeft: 'auto'
},
participantContainer: {
alignItems: 'center',
borderBottomColor: BaseTheme.palette.field01Hover,

View File

@ -53,9 +53,13 @@ export const LobbyParticipantList = () => {
<div className = { classes.heading }>
{t('participantsPane.headings.lobby', { count: participants.length })}
</div>
<div
className = { classes.link }
onClick = { admitAll }>{t('lobby.admitAll')}</div>
{
participants.length > 1 && (
<div
className = { classes.link }
onClick = { admitAll }>{t('lobby.admitAll')}</div>
)
}
</div>
<div>
{participants.map(p => (