Styling and lint
parent
2ad7b45ef6
commit
87b114fccc
|
|
@ -81,6 +81,10 @@ const styles = (theme) =>
|
||||||
margin : theme.spacing(1, 0),
|
margin : theme.spacing(1, 0),
|
||||||
padding : theme.spacing(0, 1)
|
padding : theme.spacing(0, 1)
|
||||||
},
|
},
|
||||||
|
disabledButton :
|
||||||
|
{
|
||||||
|
margin : theme.spacing(1, 0)
|
||||||
|
},
|
||||||
green :
|
green :
|
||||||
{
|
{
|
||||||
color : 'rgba(0, 153, 0, 1)'
|
color : 'rgba(0, 153, 0, 1)'
|
||||||
|
|
@ -270,32 +274,34 @@ const TopBar = (props) =>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title={lockTooltip}>
|
<Tooltip title={lockTooltip}>
|
||||||
<IconButton
|
<span className={classes.disabledButton}>
|
||||||
aria-label={intl.formatMessage({
|
<IconButton
|
||||||
id : 'tooltip.lockRoom',
|
aria-label={intl.formatMessage({
|
||||||
defaultMessage : 'Lock room'
|
id : 'tooltip.lockRoom',
|
||||||
})}
|
defaultMessage : 'Lock room'
|
||||||
className={classes.actionButton}
|
})}
|
||||||
color='inherit'
|
className={classes.actionButton}
|
||||||
disabled={!canLock}
|
color='inherit'
|
||||||
onClick={() =>
|
disabled={!canLock}
|
||||||
{
|
onClick={() =>
|
||||||
if (room.locked)
|
|
||||||
{
|
{
|
||||||
roomClient.unlockRoom();
|
if (room.locked)
|
||||||
|
{
|
||||||
|
roomClient.unlockRoom();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
roomClient.lockRoom();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{ room.locked ?
|
||||||
|
<LockIcon />
|
||||||
|
:
|
||||||
|
<LockOpenIcon />
|
||||||
}
|
}
|
||||||
else
|
</IconButton>
|
||||||
{
|
</span>
|
||||||
roomClient.lockRoom();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{ room.locked ?
|
|
||||||
<LockIcon />
|
|
||||||
:
|
|
||||||
<LockOpenIcon />
|
|
||||||
}
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{ lobbyPeers.length > 0 &&
|
{ lobbyPeers.length > 0 &&
|
||||||
<Tooltip
|
<Tooltip
|
||||||
|
|
@ -304,22 +310,25 @@ const TopBar = (props) =>
|
||||||
defaultMessage : 'Show lobby'
|
defaultMessage : 'Show lobby'
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<IconButton
|
<span className={classes.disabledButton}>
|
||||||
aria-label={intl.formatMessage({
|
<IconButton
|
||||||
id : 'tooltip.lobby',
|
aria-label={intl.formatMessage({
|
||||||
defaultMessage : 'Show lobby'
|
id : 'tooltip.lobby',
|
||||||
})}
|
defaultMessage : 'Show lobby'
|
||||||
color='inherit'
|
})}
|
||||||
disabled={!canPromote}
|
className={classes.actionButton}
|
||||||
onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
|
color='inherit'
|
||||||
>
|
disabled={!canPromote}
|
||||||
<PulsingBadge
|
onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
|
||||||
color='secondary'
|
|
||||||
badgeContent={lobbyPeers.length}
|
|
||||||
>
|
>
|
||||||
<SecurityIcon />
|
<PulsingBadge
|
||||||
</PulsingBadge>
|
color='secondary'
|
||||||
</IconButton>
|
badgeContent={lobbyPeers.length}
|
||||||
|
>
|
||||||
|
<SecurityIcon />
|
||||||
|
</PulsingBadge>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
}
|
}
|
||||||
{ loginEnabled &&
|
{ loginEnabled &&
|
||||||
|
|
@ -339,7 +348,7 @@ const TopBar = (props) =>
|
||||||
{ myPicture ?
|
{ myPicture ?
|
||||||
<Avatar src={myPicture} />
|
<Avatar src={myPicture} />
|
||||||
:
|
:
|
||||||
<AccountCircle className={loggedIn && classes.green} />
|
<AccountCircle className={loggedIn ? classes.green : null} />
|
||||||
}
|
}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,7 @@ const DialogTitle = withStyles(styles)((props) =>
|
||||||
<Avatar src={myPicture} className={classes.largeAvatar} />
|
<Avatar src={myPicture} className={classes.largeAvatar} />
|
||||||
:
|
:
|
||||||
<AccountCircle
|
<AccountCircle
|
||||||
className={classnames(classes.largeIcon, loggedIn && classes.green)}
|
className={classnames(classes.largeIcon, loggedIn ? classes.green : null)}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,7 @@ const Message = (props) =>
|
||||||
<Typography variant='caption'>
|
<Typography variant='caption'>
|
||||||
{ self ?
|
{ self ?
|
||||||
intl.formatMessage({
|
intl.formatMessage({
|
||||||
id : 'room.me',
|
id : 'room.me',
|
||||||
defaultMessage : 'Me'
|
defaultMessage : 'Me'
|
||||||
})
|
})
|
||||||
:
|
:
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue