Añadir plantilla

Base para front

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;