From 353b46c675caef83561a5cf1d06607251464f6fb Mon Sep 17 00:00:00 2001 From: Rick Watson Date: Sun, 26 May 2019 16:19:16 +0100 Subject: [PATCH] Add user icon to app bar --- interface/src/components/MenuAppBar.js | 172 +++++++++++++++---------- interface/src/forms/ManageUsersForm.js | 2 +- interface/src/forms/UserForm.js | 2 +- 3 files changed, 104 insertions(+), 72 deletions(-) diff --git a/interface/src/components/MenuAppBar.js b/interface/src/components/MenuAppBar.js index 1357279..625ad58 100644 --- a/interface/src/components/MenuAppBar.js +++ b/interface/src/components/MenuAppBar.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; @@ -10,20 +10,28 @@ import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import Hidden from '@material-ui/core/Hidden'; import Divider from '@material-ui/core/Divider'; +import Grow from '@material-ui/core/Grow'; +import MenuItem from '@material-ui/core/MenuItem'; +import MenuList from '@material-ui/core/MenuList'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; +import Popper from '@material-ui/core/Popper'; import MenuIcon from '@material-ui/icons/Menu'; import WifiIcon from '@material-ui/icons/Wifi'; -import SystemUpdateIcon from '@material-ui/icons/SystemUpdate'; +import SystemUpdateIcon from '@material-ui/icons/SystemUpdate'; import AccessTimeIcon from '@material-ui/icons/AccessTime'; import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna'; import LockIcon from '@material-ui/icons/Lock'; +import ClickAwayListener from '@material-ui/core/ClickAwayListener'; + +import Paper from '@material-ui/core/Paper'; + import { APP_NAME } from '../constants/App'; import { withAuthenticationContext } from '../authentication/Context.js'; @@ -31,79 +39,76 @@ const drawerWidth = 290; const styles = theme => ({ root: { - zIndex: 1, - width: '100%', - height: '100%', - }, - toolbar: { - paddingLeft: theme.spacing.unit, - paddingRight: theme.spacing.unit, - [theme.breakpoints.up('md')]: { - paddingLeft: theme.spacing.unit * 3, - paddingRight: theme.spacing.unit * 3, - } - }, - appFrame: { - position: 'relative', display: 'flex', - width: '100%', - height: '100%', + }, + drawer: { + [theme.breakpoints.up('md')]: { + width: drawerWidth, + flexShrink: 0, + }, + }, + title: { + flexGrow: 1 }, appBar: { - position: 'absolute', marginLeft: drawerWidth, [theme.breakpoints.up('md')]: { width: `calc(100% - ${drawerWidth}px)`, }, }, - navIconHide: { + menuButton: { + marginRight: theme.spacing(2), [theme.breakpoints.up('md')]: { display: 'none', }, }, + toolbar: theme.mixins.toolbar, drawerPaper: { width: drawerWidth, - height: '100%', - [theme.breakpoints.up('md')]: { - width: drawerWidth, - position:'fixed', - left:0, - top:0, - overflow:'auto' - }, }, content: { - backgroundColor: theme.palette.background.default, - width:"100%", - marginTop: 56, - [theme.breakpoints.up('md')]: { - paddingLeft: drawerWidth - }, - [theme.breakpoints.up('sm')]: { - height: 'calc(100% - 64px)', - marginTop: 64, - }, + flexGrow: 1, + padding: theme.spacing(), }, + popper: { + zIndex: 3300 + } }); class MenuAppBar extends React.Component { state = { mobileOpen: false, + authMenuOpen: false }; + anchorRef = React.createRef(); + + handleToggle = () => { + this.setState({ authMenuOpen: !this.state.authMenuOpen }); + } + + handleClose = (event) => { + if (this.anchorRef.current && this.anchorRef.current.contains(event.target)) { + return; + } + + this.setState({ authMenuOpen: false }); + } + handleDrawerToggle = () => { this.setState({ mobileOpen: !this.state.mobileOpen }); }; render() { const { classes, theme, children, sectionTitle, authenticationContext } = this.props; + const { mobileOpen, authMenuOpen } = this.state; const drawer = (
- - {APP_NAME} - + + {APP_NAME} + @@ -137,13 +142,6 @@ class MenuAppBar extends React.Component { - - - - - - -
@@ -151,33 +149,66 @@ class MenuAppBar extends React.Component { return (
-
- - + + + + + + + {sectionTitle} + +
- + - - {sectionTitle} - - - - + + {({ TransitionProps, placement }) => ( + + + + + + + + + + + + + + + )} + +
+
+
+
+ +
+
+ {children} +
); } diff --git a/interface/src/forms/ManageUsersForm.js b/interface/src/forms/ManageUsersForm.js index 6ab3f40..75e1bb3 100644 --- a/interface/src/forms/ManageUsersForm.js +++ b/interface/src/forms/ManageUsersForm.js @@ -239,7 +239,7 @@ class ManageUsersForm extends React.Component { } ManageUsersForm.propTypes = { - authenticationContex: PropTypes.object.isRequired, + authenticationContext: PropTypes.object.isRequired, classes: PropTypes.object.isRequired, userData: PropTypes.object, userDataFetched: PropTypes.bool.isRequired, diff --git a/interface/src/forms/UserForm.js b/interface/src/forms/UserForm.js index 1d660db..a0b6adc 100644 --- a/interface/src/forms/UserForm.js +++ b/interface/src/forms/UserForm.js @@ -45,7 +45,7 @@ class UserForm extends React.Component { {creating ? 'Create' : 'Modify'} User - +