Styling and lint

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-01 21:49:40 +02:00
parent 2ad7b45ef6
commit 87b114fccc
3 changed files with 51 additions and 42 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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'
}) })
: :