diff options
Diffstat (limited to 'front/odiparpack/app/components/Header')
| -rw-r--r-- | front/odiparpack/app/components/Header/Header.js | 63 | ||||
| -rw-r--r-- | front/odiparpack/app/components/Header/UserMenu.js | 177 | ||||
| -rw-r--r-- | front/odiparpack/app/components/Header/header-jss.js | 166 |
3 files changed, 406 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Header/Header.js b/front/odiparpack/app/components/Header/Header.js new file mode 100644 index 0000000..e1d0bf5 --- /dev/null +++ b/front/odiparpack/app/components/Header/Header.js @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import SearchIcon from '@material-ui/icons/Search'; +import MenuIcon from '@material-ui/icons/Menu'; +import { AppBar, Toolbar, IconButton, Hidden } from '@material-ui/core'; +import UserMenu from './UserMenu'; +import styles from './header-jss'; + +function Header(props) { + const { + classes, + toggleDrawerOpen, + margin, + turnDarker, + } = props; + + return ( + <AppBar + className={ + classNames( + classes.appBar, + margin && classes.appBarShift, + classes.appbar, + turnDarker && classes.darker + ) + } + > + <Toolbar disableGutters> + <IconButton + className={classes.menuButton} + color="inherit" + aria-label="Menu" + onClick={toggleDrawerOpen} + > + <MenuIcon /> + </IconButton> + <div className={classes.flex}> + <div className={classes.wrapper}> + <div className={classes.search}> + <SearchIcon /> + </div> + <input className={classes.input} placeholder="Search" /> + </div> + </div> + <Hidden xsDown> + <span className={classes.separatorV} /> + </Hidden> + <UserMenu /> + </Toolbar> + </AppBar> + ); +} + +Header.propTypes = { + classes: PropTypes.object.isRequired, + toggleDrawerOpen: PropTypes.func.isRequired, + margin: PropTypes.bool.isRequired, + turnDarker: PropTypes.bool.isRequired, +}; + +export default withStyles(styles)(Header); diff --git a/front/odiparpack/app/components/Header/UserMenu.js b/front/odiparpack/app/components/Header/UserMenu.js new file mode 100644 index 0000000..3ec891e --- /dev/null +++ b/front/odiparpack/app/components/Header/UserMenu.js @@ -0,0 +1,177 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import { Link } from 'react-router-dom'; +import Avatar from '@material-ui/core/Avatar'; +import IconButton from '@material-ui/core/IconButton'; +import Button from '@material-ui/core/Button'; +import Info from '@material-ui/icons/Info'; +import Warning from '@material-ui/icons/Warning'; +import Check from '@material-ui/icons/CheckCircle'; +import Error from '@material-ui/icons/RemoveCircle'; +import ExitToApp from '@material-ui/icons/ExitToApp'; +import Badge from '@material-ui/core/Badge'; +import Divider from '@material-ui/core/Divider'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import Notification from '@material-ui/icons/Notifications'; +import dummy from 'ba-api/dummyContents'; +import messageStyles from 'ba-styles/Messages.scss'; +import avatarApi from 'ba-api/avatars'; +import link from 'ba-api/link'; +import styles from './header-jss'; + +function UserMenu(props) { + const { classes, dark } = props; + const [anchorEl, setAnchorEl] = useState(null); + const [openMenu, setOpenMenu] = useState(null); + + const handleMenu = menu => (event) => { + setOpenMenu(openMenu === menu ? null : menu); + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setOpenMenu(null); + setAnchorEl(null); + }; + + return ( + <div> + <IconButton + aria-haspopup="true" + onClick={handleMenu('notification')} + color="inherit" + className={classNames(classes.notifIcon, dark ? classes.dark : classes.light)} + > + <Badge className={classes.badge} badgeContent={4} color="secondary"> + <Notification /> + </Badge> + </IconButton> + <Menu + id="menu-notification" + anchorEl={anchorEl} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + className={classes.notifMenu} + PaperProps={{ + style: { + width: 350, + }, + }} + open={openMenu === 'notification'} + onClose={handleClose} + > + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageInfo}> + <ListItemAvatar> + <Avatar alt="User Name" src={avatarApi[0]} /> + </ListItemAvatar> + <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageInfo}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Info /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={dummy.text.sentences} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageSuccess}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Check /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageWarning}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Warning /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageError}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Error /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Suspendisse pharetra pulvinar sollicitudin. Aenean ut orci eu odio cursus lobortis eget tempus velit. " className={classes.textNotif} secondary="Jan 9, 2016" /> + </div> + </MenuItem> + </Menu> + <Button onClick={handleMenu('user-setting')}> + <Avatar + alt={dummy.user.name} + src={dummy.user.avatar} + /> + </Button> + <Menu + id="menu-appbar" + anchorEl={anchorEl} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + open={openMenu === 'user-setting'} + onClose={handleClose} + > + <MenuItem onClick={handleClose} component={Link} to={link.profile}>My Profile</MenuItem> + <MenuItem onClick={handleClose} component={Link} to={link.calendar}>My Calendar</MenuItem> + <MenuItem onClick={handleClose} component={Link} to={link.email}> + My Inbox + <ListItemIcon> + <Badge className={classNames(classes.badge, classes.badgeMenu)} badgeContent={2} color="secondary" /> + </ListItemIcon> + </MenuItem> + <Divider /> + <MenuItem onClick={handleClose} component={Link} to="/"> + <ListItemIcon> + <ExitToApp /> + </ListItemIcon> + Log Out + </MenuItem> + </Menu> + </div> + ); +} + +UserMenu.propTypes = { + classes: PropTypes.object.isRequired, + dark: PropTypes.bool, +}; + +UserMenu.defaultProps = { + dark: false +}; + +export default withStyles(styles)(UserMenu); diff --git a/front/odiparpack/app/components/Header/header-jss.js b/front/odiparpack/app/components/Header/header-jss.js new file mode 100644 index 0000000..e0a1d6b --- /dev/null +++ b/front/odiparpack/app/components/Header/header-jss.js @@ -0,0 +1,166 @@ +import { fade } from '@material-ui/core/styles/colorManipulator'; +const drawerWidth = 240; + +const styles = theme => ({ + appBar: { + position: 'fixed', + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin', 'background'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + boxShadow: 'none !important', + '& ::-webkit-input-placeholder': { /* Chrome/Opera/Safari */ + color: 'rgba(255,255,255,.3)' + }, + '& ::-moz-placeholder': { /* Firefox 19+ */ + color: 'rgba(255,255,255,.3)' + }, + '& :-ms-input-placeholder': { /* IE 10+ */ + color: 'rgba(255,255,255,.3)' + }, + '& :-moz-placeholder': { /* Firefox 18- */ + color: 'rgba(255,255,255,.3)' + }, + '& $menuButton': { + marginLeft: theme.spacing(2) + } + }, + flex: { + flex: 1, + textAlign: 'right' + }, + appBarShift: { + transition: theme.transitions.create(['width', 'margin', 'background'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('lg')]: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + }, + '& $menuButton': { + marginLeft: 0 + } + }, + menuButton: { + [theme.breakpoints.up('lg')]: { + marginLeft: 0, + } + }, + hide: { + display: 'none', + }, + textField: { + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), + width: 200, + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + wrapper: { + fontFamily: theme.typography.fontFamily, + position: 'relative', + marginRight: theme.spacing(2), + marginLeft: theme.spacing(1), + borderRadius: 2, + background: fade(theme.palette.common.white, 0.15), + display: 'inline-block', + '&:hover': { + background: fade(theme.palette.common.white, 0.25), + }, + '& $input': { + transition: theme.transitions.create('width'), + width: 180, + '&:focus': { + width: 350, + }, + [theme.breakpoints.down('xs')]: { + display: 'none' + }, + }, + }, + search: { + width: theme.spacing(9), + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + [theme.breakpoints.down('xs')]: { + display: 'none' + }, + }, + input: { + font: 'inherit', + padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(9)}px`, + border: 0, + display: 'block', + verticalAlign: 'middle', + whiteSpace: 'normal', + background: 'none', + margin: 0, // Reset for Safari + color: 'inherit', + width: '100%', + '&:focus': { + outline: 0, + }, + }, + userMenu: { + display: 'flex', + alignItems: 'center' + }, + popperClose: { + pointerEvents: 'none', + zIndex: 2 + }, + darker: { + background: theme.palette.primary.dark, + '&:after': { + content: '""', + left: -240, + width: 'calc(100% + 240px)', + position: 'absolute', + bottom: -2, + height: 1, + background: '#000', + filter: 'blur(3px)' + } + }, + separatorV: { + borderLeft: `1px solid ${theme.palette.grey[300]}`, + height: 20, + margin: '0 10px', + opacity: 0.4 + }, + notifMenu: { + width: 350, + '& li': { + height: 'auto', + '& h3': { + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis' + } + } + }, + badgeMenu: { + '& span': { + top: 0, + right: -30 + } + }, + textNotif: { + '& span': { + display: 'block', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis' + } + } +}); + +export default styles; |