From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Base para front
---
front/odiparpack/app/components/Header/Header.js | 63 ++++++++
front/odiparpack/app/components/Header/UserMenu.js | 177 +++++++++++++++++++++
.../odiparpack/app/components/Header/header-jss.js | 166 +++++++++++++++++++
3 files changed, 406 insertions(+)
create mode 100644 front/odiparpack/app/components/Header/Header.js
create mode 100644 front/odiparpack/app/components/Header/UserMenu.js
create mode 100644 front/odiparpack/app/components/Header/header-jss.js
(limited to 'front/odiparpack/app/components/Header')
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 (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+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 (
+
+ );
+}
+
+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;
--
cgit v1.2.3