Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move room locking to its own icon.

master
Håvar Aambø Fosstveit 2019-11-04 23:34:54 +01:00
parent ce76a28e0e
commit 5604ba20bb
2 changed files with 119 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/src/components/AccessControl/LockDialog/LockDialog.js
View File

@ -11,15 +11,17 @@ import PropTypes from 'prop-types';
import Dialog from '@material-ui/core/Dialog'; import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions'; 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 Button from '@material-ui/core/Button';
import FormLabel from '@material-ui/core/FormLabel'; // import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl'; // import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup'; // import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'; // import FormControlLabel from '@material-ui/core/FormControlLabel';
// import Checkbox from '@material-ui/core/Checkbox'; // import Checkbox from '@material-ui/core/Checkbox';
// import InputLabel from '@material-ui/core/InputLabel'; // import InputLabel from '@material-ui/core/InputLabel';
// import OutlinedInput from '@material-ui/core/OutlinedInput'; // 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 List from '@material-ui/core/List';
import ListSubheader from '@material-ui/core/ListSubheader'; import ListSubheader from '@material-ui/core/ListSubheader';
import ListLobbyPeer from './ListLobbyPeer'; import ListLobbyPeer from './ListLobbyPeer';
@ -56,7 +58,7 @@ const styles = (theme) =>
}); });
const LockDialog = ({ const LockDialog = ({
roomClient, // roomClient,
room, room,
handleCloseLockDialog, handleCloseLockDialog,
// handleAccessCode, // handleAccessCode,
@ -73,8 +75,8 @@ const LockDialog = ({
paper : classes.dialogPaper paper : classes.dialogPaper
}} }}
> >
<DialogTitle id='form-dialog-title'>Room access control</DialogTitle> <DialogTitle id='form-dialog-title'>Lobby administration</DialogTitle>
<form className={classes.lock} autoComplete='off'> {/*
<FormControl component='fieldset' className={classes.formControl}> <FormControl component='fieldset' className={classes.formControl}>
<FormLabel component='legend'>Room lock</FormLabel> <FormLabel component='legend'>Room lock</FormLabel>
<FormGroup> <FormGroup>
@ -94,7 +96,7 @@ const LockDialog = ({
/>} />}
label='Lock' label='Lock'
/> />
{/* TODO: access code TODO: access code
<FormControlLabel disabled={ room.locked ? false : true } <FormControlLabel disabled={ room.locked ? false : true }
control={ control={
<Checkbox checked={room.joinByAccessCode} <Checkbox checked={room.joinByAccessCode}
@ -118,13 +120,13 @@ const LockDialog = ({
<Button onClick={() => roomClient.setAccessCode(room.accessCode)} color='primary'> <Button onClick={() => roomClient.setAccessCode(room.accessCode)} color='primary'>
save save
</Button> </Button>
*/}
</FormGroup> </FormGroup>
</FormControl> </FormControl>
*/}
{ (lobbyPeers.length > 0) && { lobbyPeers.length > 0 ?
<List <List
dense={true} dense
subheader={ subheader={
<ListSubheader component='div'> <ListSubheader component='div'>
Participants in Lobby Participants in Lobby
@ -138,8 +140,13 @@ const LockDialog = ({
}) })
} }
</List> </List>
:
<DialogContent>
<DialogContentText gutterBottom>
There are currently no one in the lobby.
</DialogContentText>
</DialogContent>
} }
</form>
<DialogActions> <DialogActions>
<Button onClick={() => handleCloseLockDialog({ lockDialogOpen: false })} color='primary'> <Button onClick={() => handleCloseLockDialog({ lockDialogOpen: false })} color='primary'>
Close Close
@ -151,7 +158,7 @@ const LockDialog = ({
LockDialog.propTypes = LockDialog.propTypes =
{ {
roomClient : PropTypes.any.isRequired, // roomClient : PropTypes.any.isRequired,
room : appPropTypes.Room.isRequired, room : appPropTypes.Room.isRequired,
handleCloseLockDialog : PropTypes.func.isRequired, handleCloseLockDialog : PropTypes.func.isRequired,
handleAccessCode : PropTypes.func.isRequired, handleAccessCode : PropTypes.func.isRequired,

30
app/src/components/Room.js
View File

@ -325,8 +325,34 @@ class Room extends React.PureComponent
</Typography> </Typography>
<div className={classes.grow} /> <div className={classes.grow} />
<div className={classes.actionButtons}> <div className={classes.actionButtons}>
<Tooltip title={`${room.locked ? 'Unlock' : 'Lock'} room`}>
<IconButton <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' color='inherit'
onClick={() => setLockDialogOpen(!room.lockDialogOpen)} onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
> >
@ -337,6 +363,8 @@ class Room extends React.PureComponent
<SecurityIcon /> <SecurityIcon />
</PulsingBadge> </PulsingBadge>
</IconButton> </IconButton>
</Tooltip>
}
{ this.fullscreen.fullscreenEnabled && { this.fullscreen.fullscreenEnabled &&
<IconButton <IconButton
aria-label='Fullscreen' aria-label='Fullscreen'