diff options
Diffstat (limited to 'front/odiparpack/app/containers/Templates')
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; |