Añadir plantilla

Base para front

3 files changed, 292 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Templates/Dashboard.js b/front/odiparpack/app/containers/Templates/Dashboard.js
new file mode 100644
index 0000000..5f24777
--- /dev/null
+++ b/front/odiparpack/app/containers/Templates/Dashboard.js
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { Header, Sidebar, BreadCrumb } from 'ba-components';
+import { toggleAction, openAction, playTransitionAction } from 'ba-actions/UiActions';
+import { Fade } from '@material-ui/core';
+import styles from './appStyles-jss';
+
+function Dashboard(props) {
+  const {
+    classes,
+    children,
+    history,
+    toggleDrawer,
+    sidebarOpen,
+    initialOpen,
+    loadTransition,
+    pageLoaded
+  } = props;
+  const [transform, setTransform] = useState(0);
+
+  const darker = true;
+
+  const handleScroll = () => {
+    const doc = document.documentElement;
+    const scroll = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+    setTransform(scroll);
+  };
+
+  useEffect(() => {
+    // Scroll content to top
+    window.addEventListener('scroll', handleScroll);
+
+    // Set expanded sidebar menu
+    const currentPath = history.location.pathname;
+    initialOpen(currentPath);
+
+    // Play page transition
+    loadTransition(true);
+
+    // Execute all arguments when page changes
+    const unlisten = history.listen(() => {
+      window.scrollTo(0, 0);
+      setTimeout(() => {
+        loadTransition(true);
+      }, 500);
+    });
+
+    return () => {
+      unlisten();
+    };
+  }, []);
+
+  return (
+    <div className={classes.appFrameInner}>
+      <Header toggleDrawerOpen={toggleDrawer} turnDarker={transform > 30 && darker} margin={sidebarOpen} />
+      <Sidebar
+        open={sidebarOpen}
+        toggleDrawerOpen={toggleDrawer}
+        loadTransition={loadTransition}
+        turnDarker={transform > 30 && darker}
+      />
+      <main className={classNames(classes.content, !sidebarOpen && classes.contentPadding)} id="mainContent">
+        <div className={classes.bgbar} />
+        <section className={classes.mainWrap}>
+          <BreadCrumb separator=" › " theme="light" location={history.location} />
+          <Fade
+            in={pageLoaded}
+            mountOnEnter
+            unmountOnExit
+            {...(pageLoaded ? { timeout: 700 } : {})}
+          >
+            <div className={!pageLoaded ? classes.hideApp : ''}>
+              {children}
+            </div>
+          </Fade>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+Dashboard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  initialOpen: PropTypes.func.isRequired,
+  toggleDrawer: PropTypes.func.isRequired,
+  loadTransition: PropTypes.func.isRequired,
+  sidebarOpen: PropTypes.bool.isRequired,
+  pageLoaded: PropTypes.bool.isRequired
+};
+
+const reducer = 'ui';
+const mapStateToProps = state => ({
+  sidebarOpen: state.getIn([reducer, 'sidebarOpen']),
+  pageLoaded: state.getIn([reducer, 'pageLoaded'])
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleDrawer: () => dispatch(toggleAction),
+  initialOpen: bindActionCreators(openAction, dispatch),
+  loadTransition: bindActionCreators(playTransitionAction, dispatch),
+});
+
+const DashboardMaped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Dashboard);
+
+export default (withStyles(styles)(DashboardMaped));
diff --git a/front/odiparpack/app/containers/Templates/Outer.js b/front/odiparpack/app/containers/Templates/Outer.js
new file mode 100644
index 0000000..f6448be
--- /dev/null
+++ b/front/odiparpack/app/containers/Templates/Outer.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import brand from 'ba-api/brand';
+import logo from 'ba-images/logo.svg';
+import { Hidden } from '@material-ui/core';
+import styles from './appStyles-jss';
+
+function Outer(props) {
+  const {
+    classes,
+    children,
+  } = props;
+  return (
+    <div className={classes.appFrameOuter}>
+      <main className={classes.outerContent} id="mainContent">
+        <Hidden mdUp>
+          <div className={classes.brand}>
+            <img src={logo} alt={brand.name} />
+            <h3>{brand.name}</h3>
+          </div>
+        </Hidden>
+        {children}
+      </main>
+    </div>
+  );
+}
+
+Outer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default (withStyles(styles)(Outer));
diff --git a/front/odiparpack/app/containers/Templates/appStyles-jss.js b/front/odiparpack/app/containers/Templates/appStyles-jss.js
new file mode 100644
index 0000000..f9175eb
--- /dev/null
+++ b/front/odiparpack/app/containers/Templates/appStyles-jss.js
@@ -0,0 +1,144 @@
+import bg from 'ba-images/material_bg.svg';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+const appFrame = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '100%',
+  zIndex: 1,
+};
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    minHeight: '100%',
+    marginTop: 0,
+    zIndex: 1,
+  },
+  appFrameInner: {
+    ...appFrame,
+    flexDirection: 'row'
+  },
+  appFrameOuter: {
+    ...appFrame,
+  },
+  content: {
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    padding: theme.spacing(1.5),
+    paddingLeft: 0,
+    minHeight: '100%',
+    overflow: 'hidden',
+  },
+  outerContent: {
+    background: `url(${bg}) no-repeat ${theme.palette.primary.main} left bottom`,
+    width: '100%',
+    backgroundSize: 'cover',
+    flexDirection: 'column',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    [theme.breakpoints.down('md')]: {
+      padding: '20px 0'
+    },
+  },
+  bgbar: {
+    backgroundColor: theme.palette.primary.main,
+    width: '100%',
+    position: 'fixed',
+    height: 184,
+    top: 0,
+    left: 0
+  },
+  mainWrap: {
+    position: 'relative',
+    marginTop: theme.spacing(6),
+    marginLeft: theme.spacing(1.5),
+    height: '100%',
+    '& > div': {
+      paddingBottom: theme.spacing(4),
+      willChange: 'inherit !important' // hack for floating form issue whne expaded
+    }
+  },
+  preloader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    zIndex: 1000,
+    background: 'transparent',
+    height: 3,
+  },
+  materialBg: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    width: '100%',
+    opacity: 0.5
+  },
+  contentPadding: {
+    paddingLeft: 80
+  },
+  hideApp: {
+    display: 'none'
+  },
+  circularProgress: {
+    position: 'absolute',
+    top: 'calc(50% - 100px)',
+    left: 'calc(50% - 100px)',
+  },
+  brand: {
+    height: 54,
+    display: 'flex',
+    padding: '10px 10px 5px',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& img': {
+      width: 20
+    },
+    '& h3': {
+      margin: 0,
+      fontSize: 16,
+      fontWeight: 500,
+      paddingLeft: 10,
+      color: theme.palette.common.white,
+    }
+  },
+  btn: {},
+  icon: {},
+  btnPicker: {
+    position: 'fixed',
+    zIndex: 2000,
+    right: 0,
+    top: 200,
+    background: fade(theme.palette.background.paper, 0.8),
+    borderRadius: '30px 0 0 30px',
+    padding: '4px 8px 4px 4px',
+    overflow: 'hidden',
+    border: `1px solid ${theme.palette.grey[300]}`,
+    '& $btn': {
+      background: theme.palette.secondary.main,
+      borderRadius: 30,
+      padding: 8,
+      boxShadow: theme.shadows[4],
+      display: 'flex',
+      alignItems: 'center',
+      width: 40,
+      height: 40,
+      textCenter: 'cener',
+      overflow: 'hidden',
+      color: 'transparent',
+      transition: 'all 0.3s ease',
+      '& $icon': {
+        color: theme.palette.background.paper,
+      },
+      '&:hover': {
+        color: theme.palette.background.paper,
+        width: 90
+      }
+    }
+  }
+});
+
+export default styles;