nova/esp8266-react-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

look and feel tweeks

Browse Source
This commit is contained in:
Rick Watson 2019-05-27 21:01:00 +01:00
parent fa3132a2fa
commit c8857f06ac
4 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
interface/src/components/MenuAppBar.js
View File

@ -10,13 +10,12 @@ import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Hidden from '@material-ui/core/Hidden'; import Hidden from '@material-ui/core/Hidden';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
import Grow from '@material-ui/core/Grow'; import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Popper from '@material-ui/core/Popper'; import Popper from '@material-ui/core/Popper';
import MenuIcon from '@material-ui/icons/Menu'; import MenuIcon from '@material-ui/icons/Menu';
import WifiIcon from '@material-ui/icons/Wifi'; import WifiIcon from '@material-ui/icons/Wifi';
@ -26,7 +25,10 @@ import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna'; import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
import LockIcon from '@material-ui/icons/Lock'; import LockIcon from '@material-ui/icons/Lock';
import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Paper from '@material-ui/core/Paper'; import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Avatar from '@material-ui/core/Avatar';
import { APP_NAME } from '../constants/App'; import { APP_NAME } from '../constants/App';
import { withAuthenticationContext } from '../authentication/Context.js'; import { withAuthenticationContext } from '../authentication/Context.js';
@ -66,9 +68,16 @@ const styles = theme => ({
flexGrow: 1, flexGrow: 1,
padding: theme.spacing(), padding: theme.spacing(),
}, },
popper: { authMenu: {
zIndex: 3300 zIndex: theme.zIndex.tooltip,
maxWidth: 400,
},
authMenuActions: {
padding: theme.spacing(2),
"& > * + *" :{
marginLeft: theme.spacing(2),
} }
},
}); });
class MenuAppBar extends React.Component { class MenuAppBar extends React.Component {
@ -169,26 +178,27 @@ class MenuAppBar extends React.Component {
> >
<AccountCircleIcon /> <AccountCircleIcon />
</IconButton> </IconButton>
<Popper open={authMenuOpen} anchorEl={this.anchorRef.current} transition disablePortal> <Popper open={authMenuOpen} anchorEl={this.anchorRef.current} transition className={classes.authMenu}>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper id="menu-list-grow">
<ClickAwayListener onClickAway={this.handleClose}> <ClickAwayListener onClickAway={this.handleClose}>
<MenuList> <Card id="menu-list-grow">
<MenuItem button onClick={authenticationContext.signOut}> <CardContent>
<ListItemIcon> <List disablePadding>
<ListItem disableGutters>
<ListItemAvatar>
<Avatar>
<AccountCircleIcon /> <AccountCircleIcon />
</ListItemIcon> </Avatar>
<ListItemText primary="Sign Out" secondary={"Signed in as: " + authenticationContext.jwt.username} /> </ListItemAvatar>
</MenuItem> <ListItemText primary={"Signed in as: " + authenticationContext.jwt.username} secondary={ authenticationContext.jwt.admin ? "Admin User" : "Standard User"} />
</MenuList> </ListItem>
</List>
</CardContent>
<Divider />
<CardActions className={classes.authMenuActions}>
<Button className={classes.authMenuButtons} variant="contained" color="primary" onClick={authenticationContext.signOut}>Sign Out</Button>
</CardActions>
</Card>
</ClickAwayListener> </ClickAwayListener>
</Paper>
</Grow>
)}
</Popper> </Popper>
</div> </div>
</Toolbar> </Toolbar>

2
interface/src/forms/ManageUsersForm.js
View File

@ -192,7 +192,7 @@ class ManageUsersForm extends React.Component {
{ {
this.noAdminConfigured() && this.noAdminConfigured() &&
<Typography component="div" variant="body1"> <Typography component="div" variant="body1">
<Box bgcolor="error.main" color="error.contrastText" p={2} m={2}> <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
You must have at least one admin user configured. You must have at least one admin user configured.
</Box> </Box>
</Typography> </Typography>

2
interface/src/forms/SecuritySettingsForm.js
View File

@ -59,7 +59,7 @@ class SecuritySettingsForm extends React.Component {
margin="normal" margin="normal"
/> />
<Typography component="div" variant="body1"> <Typography component="div" variant="body1">
<Box bgcolor="primary.main" color="primary.contrastText" p={2} m={2}> <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
If you modify the JWT Secret, all users will be logged out. If you modify the JWT Secret, all users will be logged out.
</Box> </Box>
</Typography> </Typography>