diff options
Diffstat (limited to 'front/odiparpack/app/containers/Layouts/demos')
16 files changed, 1299 insertions, 0 deletions
diff --git a/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js new file mode 100644 index 0000000..864d17e --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js @@ -0,0 +1,85 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Paper, Divider, Grid } from '@material-ui/core'; + +const styles = theme => ({ + container: { + display: 'grid', + gridTemplateColumns: 'repeat(12, 1fr)', + gridGap: `${theme.spacing(3)}px`, + }, + paper: { + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, + whiteSpace: 'nowrap', + marginBottom: theme.spacing(1), + backgroundColor: theme.palette.secondary.light, + }, + divider: { + margin: `${theme.spacing(2)}px 0`, + }, +}); + +function CSSGrid(props) { + const { classes } = props; + + return ( + <div> + <Typography variant="subtitle1" gutterBottom> + Material-UI Grid: + </Typography> + <Grid container spacing={3}> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={8}> + <Paper className={classes.paper}>xs=8</Paper> + </Grid> + <Grid item xs={4}> + <Paper className={classes.paper}>xs=4</Paper> + </Grid> + </Grid> + <Divider className={classes.divider} /> + <Typography variant="subtitle1" gutterBottom> + CSS Grid Layout: + </Typography> + <div className={classes.container}> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 8' }}> + <Paper className={classes.paper}>xs=8</Paper> + </div> + <div style={{ gridColumnEnd: 'span 4' }}> + <Paper className={classes.paper}>xs=4</Paper> + </div> + </div> + </div> + ); +} + +CSSGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CSSGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js new file mode 100644 index 0000000..be557b4 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js @@ -0,0 +1,115 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import compose from 'recompose/compose'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Hidden, Divider, withWidth, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + container: { + display: 'flex', + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + flex: '1 0 auto', + margin: theme.spacing(1), + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +function Breakpoint(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + {/* Breakpoin up block */} + <Typography variant="h5">Breakpoint up</Typography> + <Typography gutterBottom noWrap> + Using any breakpoint up property, the given children will be hidden at or above the breakpoint. + </Typography> + <div className={classes.container}> + <Hidden xsUp> + <Paper className={classes.paper}>xsUp</Paper> + </Hidden> + <Hidden smUp> + <Paper className={classes.paper}>smUp</Paper> + </Hidden> + <Hidden mdUp> + <Paper className={classes.paper}>mdUp</Paper> + </Hidden> + <Hidden lgUp> + <Paper className={classes.paper}>lgUp</Paper> + </Hidden> + <Hidden xlUp> + <Paper className={classes.paper}>xlUp</Paper> + </Hidden> + </div> + <Typography variant="caption" gutterBottom align="center"> +Current width: + {props.width} + </Typography> + <Divider className={classes.divider} /> + {/* Breakpoin down block */} + <Typography variant="h5">Breakpoint down</Typography> + <Typography gutterBottom noWrap> + Using any breakpoint down property, the given children will be hidden at or below the breakpoint. + </Typography> + <div className={classes.container}> + <Hidden xsDown> + <Paper className={classes.paper}>xsDown</Paper> + </Hidden> + <Hidden smDown> + <Paper className={classes.paper}>smDown</Paper> + </Hidden> + <Hidden mdDown> + <Paper className={classes.paper}>mdDown</Paper> + </Hidden> + <Hidden lgDown> + <Paper className={classes.paper}>lgDown</Paper> + </Hidden> + <Hidden xlDown> + <Paper className={classes.paper}>xlDown</Paper> + </Hidden> + </div> + <Typography variant="caption" gutterBottom align="center"> +Current width: + {props.width} + </Typography> + <Divider className={classes.divider} /> + {/* Breakpoin only block */} + <Typography variant="h5">Breakpoint only</Typography> + <Typography gutterBottom noWrap> + Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s). + </Typography> + <div className={classes.container}> + <Hidden only="lg"> + <Paper className={classes.paper}>Hidden on lg</Paper> + </Hidden> + <Hidden only="sm"> + <Paper className={classes.paper}>Hidden on sm</Paper> + </Hidden> + <Hidden only={['sm', 'lg']}> + <Paper className={classes.paper}>Hidden on sm and lg</Paper> + </Hidden> + </div> + <Typography variant="caption" gutterBottom align="center"> +Current width: + {props.width} + </Typography> + </div> + ); +} + +Breakpoint.propTypes = { + classes: PropTypes.object.isRequired, + width: PropTypes.string.isRequired, +}; + +export default compose(withStyles(styles), withWidth())(Breakpoint); diff --git a/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js new file mode 100644 index 0000000..cd94ef9 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import compose from 'recompose/compose'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid, withWidth, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + container: { + display: 'flex', + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + flex: '1 0 auto', + margin: theme.spacing(1), + }, +}); + +function GridIntegration(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <div className={classes.container}> + <Grid container spacing={3}> + <Grid item xs hidden={{ xsUp: true }}> + <Paper className={classes.paper}>xsUp</Paper> + </Grid> + <Grid item xs hidden={{ smUp: true }}> + <Paper className={classes.paper}>smUp</Paper> + </Grid> + <Grid item xs hidden={{ mdUp: true }}> + <Paper className={classes.paper}>mdUp</Paper> + </Grid> + <Grid item xs hidden={{ lgUp: true }}> + <Paper className={classes.paper}>lgUp</Paper> + </Grid> + <Grid item xs hidden={{ xlUp: true }}> + <Paper className={classes.paper}>xlUp</Paper> + </Grid> + </Grid> + </div> + <Typography variant="caption" align="center"> +Current width: + {props.width} + </Typography> + </div> + ); +} + +GridIntegration.propTypes = { + classes: PropTypes.object.isRequired, + width: PropTypes.string.isRequired, +}; + +export default compose(withStyles(styles), withWidth())(GridIntegration); diff --git a/front/odiparpack/app/containers/Layouts/demos/Centered.js b/front/odiparpack/app/containers/Layouts/demos/Centered.js new file mode 100644 index 0000000..cdd1c10 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Centered.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + backgroundColor: theme.palette.secondary.light, + }, +}); + +function CenteredGrid(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item xs={12}> + <Paper className={classes.paper}>xs=12</Paper> + </Grid> + <Grid item xs={6}> + <Paper className={classes.paper}>xs=6</Paper> + </Grid> + <Grid item xs={6}> + <Paper className={classes.paper}>xs=6</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + </Grid> + </div> + ); +} + +CenteredGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CenteredGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/FullHeader.js b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js new file mode 100644 index 0000000..d5ef402 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js @@ -0,0 +1,153 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + }, + menuButton: { + marginLeft: 0, + marginRight: 36, + }, + drawerPaper: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + position: 'relative', + }, + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: 70, + [theme.breakpoints.up('sm')]: { + width: 70, + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class FullHeader extends React.Component { + state = { + open: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.resize.bind(this)); + this.resize(); + } + + resize() { + this.setState({ open: window.innerWidth >= 760 }); + } + + handleDrawerToggle = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const drawer = ( + <div> + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classes.appBar} + > + <Toolbar> + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerToggle} + className={classNames(classes.menuButton)} + > + <MenuIcon /> + </IconButton> + <Typography variant="h6" color="inherit" noWrap> + Clipped under the app bar + </Typography> + </Toolbar> + </AppBar> + <Hidden mdUp> + <Drawer + variant="temporary" + anchor="left" + open={open} + onClose={this.handleDrawerToggle} + classes={{ + paper: classes.drawerPaper, + }} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + > + {drawer} + </Drawer> + </Hidden> + <Hidden smDown implementation="css"> + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + {drawer} + </Drawer> + </Hidden> + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap>Your App Content</Typography> + </main> + </div> + ); + } +} + +FullHeader.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(FullHeader); diff --git a/front/odiparpack/app/containers/Layouts/demos/FullWidth.js b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js new file mode 100644 index 0000000..fa7dbce --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + backgroundColor: theme.palette.secondary.light + }, +}); + +function FullWidthGrid(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item xs={12}> + <Paper className={classes.paper}>xs=12</Paper> + </Grid> + <Grid item xs={12} sm={6}> + <Paper className={classes.paper}>xs=12 sm=6</Paper> + </Grid> + <Grid item xs={12} sm={6}> + <Paper className={classes.paper}>xs=12 sm=6</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + </Grid> + </div> + ); +} + +FullWidthGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FullWidthGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/GridLayout.js b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js new file mode 100644 index 0000000..d764c1c --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Grid, FormLabel, FormControlLabel, Radio, RadioGroup, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + height: 140, + width: 100, + backgroundColor: theme.palette.secondary.light, + }, + control: { + marginTop: theme.spacing(2), + padding: theme.spacing(2), + }, +}); + +class GuttersGrid extends React.Component { + state = { + spacing: '2', + }; + + handleChange = key => (event, value) => { + this.setState({ + [key]: value, + }); + }; + + render() { + const { classes } = this.props; + const { spacing } = this.state; + + return ( + <Grid container className={classes.root}> + <Grid item xs={12}> + <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}> + {[0, 1, 2].map(value => ( + <Grid key={value} item> + <Paper className={classes.paper} /> + </Grid> + ))} + </Grid> + </Grid> + <Grid item xs={12}> + <Paper className={classes.control}> + <Grid container> + <Grid item> + <FormLabel>spacing</FormLabel> + <RadioGroup + name="spacing" + aria-label="spacing" + value={spacing} + onChange={this.handleChange('spacing')} + row + > + <FormControlLabel value="0" control={<Radio />} label="0" /> + <FormControlLabel value="1" control={<Radio />} label="1" /> + <FormControlLabel value="2" control={<Radio />} label="2" /> + <FormControlLabel value="3" control={<Radio />} label="3" /> + <FormControlLabel value="4" control={<Radio />} label="4" /> + </RadioGroup> + </Grid> + </Grid> + </Paper> + </Grid> + </Grid> + ); + } +} + +GuttersGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(GuttersGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/Interactive.js b/front/odiparpack/app/containers/Layouts/demos/Interactive.js new file mode 100644 index 0000000..2f46841 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Interactive.js @@ -0,0 +1,138 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Grid, FormControl, FormLabel, FormControlLabel, RadioGroup, Radio, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + demo: { + height: 240, + }, + paper: { + padding: theme.spacing(2), + height: '100%', + backgroundColor: theme.palette.secondary.light, + }, + control: { + padding: theme.spacing(2), + }, +}); + +class InteractiveGrid extends React.Component { + state = { + direction: 'row', + justify: 'center', + alignItems: 'center', + }; + + handleChange = key => (event, value) => { + this.setState({ + [key]: value, + }); + }; + + render() { + const { classes } = this.props; + const { alignItems, direction, justify } = this.state; + return ( + <Grid container className={classes.root}> + <Grid item xs={12}> + <Grid + container + className={classes.demo} + alignItems={alignItems} + direction={direction} + justify={justify} + > + {[0, 1, 2].map(value => ( + <Grid key={value} item> + <Paper + className={classes.paper} + style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }} + > + {`Cell ${value + 1}`} + </Paper> + </Grid> + ))} + </Grid> + </Grid> + <Grid item xs={12}> + <Paper className={classes.control}> + <Grid container> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>direction</FormLabel> + <RadioGroup + name="direction" + aria-label="direction" + value={direction} + onChange={this.handleChange('direction')} + > + <FormControlLabel value="row" control={<Radio />} label="row" /> + <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" /> + <FormControlLabel value="column" control={<Radio />} label="column" /> + <FormControlLabel + value="column-reverse" + control={<Radio />} + label="column-reverse" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>justify</FormLabel> + <RadioGroup + name="justify" + aria-label="justify" + value={justify} + onChange={this.handleChange('justify')} + > + <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" /> + <FormControlLabel value="center" control={<Radio />} label="center" /> + <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" /> + <FormControlLabel + value="space-between" + control={<Radio />} + label="space-between" + /> + <FormControlLabel + value="space-around" + control={<Radio />} + label="space-around" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>alignItems</FormLabel> + <RadioGroup + name="alignItems" + aria-label="alignItems" + value={alignItems} + onChange={this.handleChange('alignItems')} + > + <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" /> + <FormControlLabel value="center" control={<Radio />} label="center" /> + <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" /> + <FormControlLabel value="stretch" control={<Radio />} label="stretch" /> + <FormControlLabel value="baseline" control={<Radio />} label="baseline" /> + </RadioGroup> + </FormControl> + </Grid> + </Grid> + </Paper> + </Grid> + </Grid> + ); + } +} + +InteractiveGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(InteractiveGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/Limitation.js b/front/odiparpack/app/containers/Layouts/demos/Limitation.js new file mode 100644 index 0000000..076c85f --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Limitation.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid, Avatar, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + overflow: 'hidden', + padding: `0 ${theme.spacing(3)}px`, + }, + wrapper: { + maxWidth: 400, + }, + paper: { + margin: theme.spacing(1), + padding: theme.spacing(2), + backgroundColor: theme.palette.secondary.light, + }, +}); + +function AutoGridNoWrap(props) { + const { classes } = props; + const message = `Truncation should be conditionally applicable on this long line of text + as this is a much longer line than what the container can support. `; + + return ( + <div className={classes.root}> + <div className={classes.wrapper}> + <Paper className={classes.paper}> + <Grid container wrap="nowrap"> + <Grid item> + <Avatar>W</Avatar> + </Grid> + <Grid item xs zeroMinWidth> + <Typography noWrap>{message}</Typography> + </Grid> + </Grid> + </Paper> + <Paper className={classes.paper}> + <Grid container wrap="nowrap"> + <Grid item> + <Avatar>W</Avatar> + </Grid> + <Grid item xs> + <Typography noWrap>{message}</Typography> + </Grid> + </Grid> + </Paper> + <Paper className={classes.paper}> + <Grid container wrap="nowrap"> + <Grid item> + <Avatar>W</Avatar> + </Grid> + <Grid item xs> + <Typography>{message}</Typography> + </Grid> + </Grid> + </Paper> + </div> + </div> + ); +} + +AutoGridNoWrap.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AutoGridNoWrap); diff --git a/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js new file mode 100644 index 0000000..89de6fc --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { red, green, indigo as blue } from '@material-ui/core/colors'; +import { Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + padding: theme.spacing(1), + '& h3': { + color: theme.palette.common.white, + }, + [theme.breakpoints.down('sm')]: { + backgroundColor: red[500], + }, + [theme.breakpoints.up('md')]: { + backgroundColor: blue[500], + }, + [theme.breakpoints.up('lg')]: { + backgroundColor: green[500], + }, + }, +}); + +function MediaQuery(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Typography variant="subtitle1">down(sm): red</Typography> + <Typography variant="subtitle1">up(md): blue</Typography> + <Typography variant="subtitle1">up(lg): green</Typography> + </div> + ); +} + +MediaQuery.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MediaQuery); diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js new file mode 100644 index 0000000..3f1c10c --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js @@ -0,0 +1,169 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: 0, + width: '100%', + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + }, + }, + menuButton: { + marginLeft: 0, + marginRight: 36, + }, + drawerPaper: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + position: 'relative', + }, + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: 70, + [theme.breakpoints.up('sm')]: { + width: 70, + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class SidebarLayout extends React.Component { + state = { + open: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.resize.bind(this)); + this.resize(); + } + + resize() { + this.setState({ open: window.innerWidth >= 760 }); + } + + handleDrawerToggle = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const drawer = ( + <div> + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classNames(classes.appBar, open && classes.appBarShift)} + > + <Toolbar> + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerToggle} + className={classNames(classes.menuButton)} + > + <MenuIcon /> + </IconButton> + <Typography variant="h6" color="inherit" noWrap> + App Layout with Sidebar + </Typography> + </Toolbar> + </AppBar> + <Hidden mdUp> + <Drawer + variant="temporary" + anchor="left" + open={open} + onClose={this.handleDrawerToggle} + classes={{ + paper: classes.drawerPaper, + }} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + > + {drawer} + </Drawer> + </Hidden> + <Hidden smDown implementation="css"> + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + {drawer} + </Drawer> + </Hidden> + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap>Your App Content</Typography> + </main> + </div> + ); + } +} + +SidebarLayout.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(SidebarLayout); diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js new file mode 100644 index 0000000..85c5229 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js @@ -0,0 +1,175 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + }, + flexwrap: { + display: 'flex' + }, + flex: { + flex: 1 + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginRight: 0, + width: '100%', + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + marginRight: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + }, + }, + menuButton: { + marginRight: 0, + marginLeft: 36, + }, + drawerPaper: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + position: 'relative', + }, + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: 70, + [theme.breakpoints.up('sm')]: { + width: 70, + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class SidebarLayoutRight extends React.Component { + state = { + open: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.resize.bind(this)); + this.resize(); + } + + resize() { + this.setState({ open: window.innerWidth >= 760 }); + } + + handleDrawerToggle = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const drawer = ( + <div> + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classNames(classes.appBar, open && classes.appBarShift)} + > + <Toolbar className={classes.flexwrap}> + <Typography variant="h6" color="inherit" className={classes.flex} noWrap> + App Layout with Right Sidebar + </Typography> + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerToggle} + className={classNames(classes.menuButton)} + > + <MenuIcon /> + </IconButton> + </Toolbar> + </AppBar> + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap>Your App Content</Typography> + </main> + <Hidden mdUp> + <Drawer + variant="temporary" + anchor="right" + open={open} + onClose={this.handleDrawerToggle} + classes={{ + paper: classes.drawerPaper, + }} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + > + {drawer} + </Drawer> + </Hidden> + <Hidden smDown implementation="css"> + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + {drawer} + </Drawer> + </Hidden> + </div> + ); + } +} + +SidebarLayoutRight.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(SidebarLayoutRight); diff --git a/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js new file mode 100644 index 0000000..2aab0e3 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withWidth, Typography } from '@material-ui/core'; + +const components = { + sm: 'em', + md: 'u', + lg: 'del', +}; + +function WithWidth(props) { + const { width } = props; + const Component = components[width] || 'span'; + + return ( + <Typography variant="subtitle1"> + <Component>{`Current width: ${width}`}</Component> + </Typography> + ); +} + +WithWidth.propTypes = { + width: PropTypes.string.isRequired, +}; + +export default withWidth()(WithWidth); diff --git a/front/odiparpack/app/containers/Layouts/demos/breakpoint.md b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md new file mode 100644 index 0000000..e5037ec --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md @@ -0,0 +1,6 @@ + + | innerWidth |xs | sm | md | lg | xl | + |--------|-----|----|----|----|----|----| + | width | xs | sm | md | lg | xl | + | smUp | show | hide | + | mdDown | | | hide | show | diff --git a/front/odiparpack/app/containers/Layouts/demos/index.js b/front/odiparpack/app/containers/Layouts/demos/index.js new file mode 100644 index 0000000..70f3804 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/index.js @@ -0,0 +1,13 @@ +export AutoLayout from './AutoLayout'; +export Centered from './Centered'; +export FullWidth from './FullWidth'; +export GridLayout from './GridLayout'; +export Interactive from './Interactive'; +export Limitation from './Limitation'; +export SidebarLayout from './SidebarLayout'; +export SidebarLayoutRight from './SidebarLayoutRight'; +export FullHeader from './FullHeader'; +export Breakpoint from './Breakpoint'; +export BreakpointGrid from './BreakpointGrid'; +export MediaQueries from './MediaQueries'; +export WIthWIdth from './WIthWIdth'; diff --git a/front/odiparpack/app/containers/Layouts/demos/menuData.js b/front/odiparpack/app/containers/Layouts/demos/menuData.js new file mode 100644 index 0000000..cd2d653 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/menuData.js @@ -0,0 +1,64 @@ +// This file is shared across the demos. + +import React from 'react'; +import InboxIcon from '@material-ui/icons/MoveToInbox'; +import DraftsIcon from '@material-ui/icons/Drafts'; +import StarIcon from '@material-ui/icons/Star'; +import SendIcon from '@material-ui/icons/Send'; +import MailIcon from '@material-ui/icons/Mail'; +import DeleteIcon from '@material-ui/icons/Delete'; +import ReportIcon from '@material-ui/icons/Report'; + +import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'; + +export const mailFolderListItems = ( + <div> + <ListItem button> + <ListItemIcon> + <InboxIcon /> + </ListItemIcon> + <ListItemText primary="Inbox" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <StarIcon /> + </ListItemIcon> + <ListItemText primary="Starred" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <SendIcon /> + </ListItemIcon> + <ListItemText primary="Send mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DraftsIcon /> + </ListItemIcon> + <ListItemText primary="Drafts" /> + </ListItem> + </div> +); + +export const otherMailFolderListItems = ( + <div> + <ListItem button> + <ListItemIcon> + <MailIcon /> + </ListItemIcon> + <ListItemText primary="All mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DeleteIcon /> + </ListItemIcon> + <ListItemText primary="Trash" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <ReportIcon /> + </ListItemIcon> + <ListItemText primary="Spam" /> + </ListItem> + </div> +); |