Move room locking to its own icon.
parent
ce76a28e0e
commit
5604ba20bb
|
|
@ -11,15 +11,17 @@ import PropTypes from 'prop-types';
|
|||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import FormLabel from '@material-ui/core/FormLabel';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import FormGroup from '@material-ui/core/FormGroup';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
// import FormLabel from '@material-ui/core/FormLabel';
|
||||
// import FormControl from '@material-ui/core/FormControl';
|
||||
// import FormGroup from '@material-ui/core/FormGroup';
|
||||
// import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
// import Checkbox from '@material-ui/core/Checkbox';
|
||||
// import InputLabel from '@material-ui/core/InputLabel';
|
||||
// import OutlinedInput from '@material-ui/core/OutlinedInput';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
// import Switch from '@material-ui/core/Switch';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListSubheader from '@material-ui/core/ListSubheader';
|
||||
import ListLobbyPeer from './ListLobbyPeer';
|
||||
|
|
@ -56,7 +58,7 @@ const styles = (theme) =>
|
|||
});
|
||||
|
||||
const LockDialog = ({
|
||||
roomClient,
|
||||
// roomClient,
|
||||
room,
|
||||
handleCloseLockDialog,
|
||||
// handleAccessCode,
|
||||
|
|
@ -73,8 +75,8 @@ const LockDialog = ({
|
|||
paper : classes.dialogPaper
|
||||
}}
|
||||
>
|
||||
<DialogTitle id='form-dialog-title'>Room access control</DialogTitle>
|
||||
<form className={classes.lock} autoComplete='off'>
|
||||
<DialogTitle id='form-dialog-title'>Lobby administration</DialogTitle>
|
||||
{/*
|
||||
<FormControl component='fieldset' className={classes.formControl}>
|
||||
<FormLabel component='legend'>Room lock</FormLabel>
|
||||
<FormGroup>
|
||||
|
|
@ -94,7 +96,7 @@ const LockDialog = ({
|
|||
/>}
|
||||
label='Lock'
|
||||
/>
|
||||
{/* TODO: access code
|
||||
TODO: access code
|
||||
<FormControlLabel disabled={ room.locked ? false : true }
|
||||
control={
|
||||
<Checkbox checked={room.joinByAccessCode}
|
||||
|
|
@ -118,13 +120,13 @@ const LockDialog = ({
|
|||
<Button onClick={() => roomClient.setAccessCode(room.accessCode)} color='primary'>
|
||||
save
|
||||
</Button>
|
||||
*/}
|
||||
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
|
||||
{ (lobbyPeers.length > 0) &&
|
||||
*/}
|
||||
{ lobbyPeers.length > 0 ?
|
||||
<List
|
||||
dense={true}
|
||||
dense
|
||||
subheader={
|
||||
<ListSubheader component='div'>
|
||||
Participants in Lobby
|
||||
|
|
@ -138,8 +140,13 @@ const LockDialog = ({
|
|||
})
|
||||
}
|
||||
</List>
|
||||
:
|
||||
<DialogContent>
|
||||
<DialogContentText gutterBottom>
|
||||
There are currently no one in the lobby.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
}
|
||||
</form>
|
||||
<DialogActions>
|
||||
<Button onClick={() => handleCloseLockDialog({ lockDialogOpen: false })} color='primary'>
|
||||
Close
|
||||
|
|
@ -151,7 +158,7 @@ const LockDialog = ({
|
|||
|
||||
LockDialog.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.any.isRequired,
|
||||
// roomClient : PropTypes.any.isRequired,
|
||||
room : appPropTypes.Room.isRequired,
|
||||
handleCloseLockDialog : PropTypes.func.isRequired,
|
||||
handleAccessCode : PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -325,8 +325,34 @@ class Room extends React.PureComponent
|
|||
</Typography>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.actionButtons}>
|
||||
<Tooltip title={`${room.locked ? 'Unlock' : 'Lock'} room`}>
|
||||
<IconButton
|
||||
aria-label='Lock'
|
||||
aria-label='Lock room'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
if (room.locked)
|
||||
{
|
||||
roomClient.unlockRoom();
|
||||
}
|
||||
else
|
||||
{
|
||||
roomClient.lockRoom();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ room.locked ?
|
||||
<LockIcon />
|
||||
:
|
||||
<LockOpenIcon />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{ lobbyPeers.length > 0 &&
|
||||
<Tooltip title='Show lobby'>
|
||||
<IconButton
|
||||
aria-label='Lobby'
|
||||
color='inherit'
|
||||
onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
|
||||
>
|
||||
|
|
@ -337,6 +363,8 @@ class Room extends React.PureComponent
|
|||
<SecurityIcon />
|
||||
</PulsingBadge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
{ this.fullscreen.fullscreenEnabled &&
|
||||
<IconButton
|
||||
aria-label='Fullscreen'
|
||||
|
|
|
|||
Loading…
Reference in New Issue