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 --- .../app/containers/Layouts/demos/AutoLayout.js | 85 ++++++++++ .../app/containers/Layouts/demos/Breakpoint.js | 115 ++++++++++++++ .../app/containers/Layouts/demos/BreakpointGrid.js | 60 +++++++ .../app/containers/Layouts/demos/Centered.js | 54 +++++++ .../app/containers/Layouts/demos/FullHeader.js | 153 ++++++++++++++++++ .../app/containers/Layouts/demos/FullWidth.js | 54 +++++++ .../app/containers/Layouts/demos/GridLayout.js | 78 +++++++++ .../app/containers/Layouts/demos/Interactive.js | 138 ++++++++++++++++ .../app/containers/Layouts/demos/Limitation.js | 68 ++++++++ .../app/containers/Layouts/demos/MediaQueries.js | 41 +++++ .../app/containers/Layouts/demos/SidebarLayout.js | 169 ++++++++++++++++++++ .../containers/Layouts/demos/SidebarLayoutRight.js | 175 +++++++++++++++++++++ .../app/containers/Layouts/demos/WIthWIdth.js | 26 +++ .../app/containers/Layouts/demos/breakpoint.md | 6 + .../app/containers/Layouts/demos/index.js | 13 ++ .../app/containers/Layouts/demos/menuData.js | 64 ++++++++ 16 files changed, 1299 insertions(+) create mode 100644 front/odiparpack/app/containers/Layouts/demos/AutoLayout.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/Breakpoint.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/Centered.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/FullHeader.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/FullWidth.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/GridLayout.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/Interactive.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/Limitation.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/MediaQueries.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/breakpoint.md create mode 100644 front/odiparpack/app/containers/Layouts/demos/index.js create mode 100644 front/odiparpack/app/containers/Layouts/demos/menuData.js (limited to 'front/odiparpack/app/containers/Layouts/demos') 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 ( +
+ + Material-UI Grid: + + + + xs=3 + + + xs=3 + + + xs=3 + + + xs=3 + + + xs=8 + + + xs=4 + + + + + CSS Grid Layout: + +
+
+ xs=3 +
+
+ xs=3 +
+
+ xs=3 +
+
+ xs=3 +
+
+ xs=8 +
+
+ xs=4 +
+
+
+ ); +} + +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 ( +
+ {/* Breakpoin up block */} + Breakpoint up + + Using any breakpoint up property, the given children will be hidden at or above the breakpoint. + +
+ + xsUp + + + smUp + + + mdUp + + + lgUp + + + xlUp + +
+ +Current width: + {props.width} + + + {/* Breakpoin down block */} + Breakpoint down + + Using any breakpoint down property, the given children will be hidden at or below the breakpoint. + +
+ + xsDown + + + smDown + + + mdDown + + + lgDown + + + xlDown + +
+ +Current width: + {props.width} + + + {/* Breakpoin only block */} + Breakpoint only + + Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s). + +
+ + Hidden on lg + + + Hidden on sm + + + Hidden on sm and lg + +
+ +Current width: + {props.width} + +
+ ); +} + +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 ( +
+
+ + + + + + + +
+ +Current width: + {props.width} + +
+ ); +} + +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 ( +
+ + + xs=12 + + + xs=6 + + + xs=6 + + + xs=3 + + + xs=3 + + + xs=3 + + + xs=3 + + +
+ ); +} + +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 = ( +
+
+ + {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + return ( +
+ + + + + + + Clipped under the app bar + + + + + + {drawer} + + + + + {drawer} + + +
+
+ Your App Content +
+
+ ); + } +} + +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 ( +
+ + + xs=12 + + + xs=12 sm=6 + + + xs=12 sm=6 + + + xs=6 sm=3 + + + xs=6 sm=3 + + + xs=6 sm=3 + + + xs=6 sm=3 + + +
+ ); +} + +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 ( + + + + {[0, 1, 2].map(value => ( + + + + ))} + + + + + + + spacing + + } label="0" /> + } label="1" /> + } label="2" /> + } label="3" /> + } label="4" /> + + + + + + + ); + } +} + +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 ( + + + + {[0, 1, 2].map(value => ( + + + {`Cell ${value + 1}`} + + + ))} + + + + + + + + direction + + } label="row" /> + } label="row-reverse" /> + } label="column" /> + } + label="column-reverse" + /> + + + + + + justify + + } label="flex-start" /> + } label="center" /> + } label="flex-end" /> + } + label="space-between" + /> + } + label="space-around" + /> + + + + + + alignItems + + } label="flex-start" /> + } label="center" /> + } label="flex-end" /> + } label="stretch" /> + } label="baseline" /> + + + + + + + + ); + } +} + +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 ( +
+
+ + + + W + + + {message} + + + + + + + W + + + {message} + + + + + + + W + + + {message} + + + +
+
+ ); +} + +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 ( +
+ down(sm): red + up(md): blue + up(lg): green +
+ ); +} + +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 = ( +
+
+ + {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + return ( +
+ + + + + + + App Layout with Sidebar + + + + + + {drawer} + + + + + {drawer} + + +
+
+ Your App Content +
+
+ ); + } +} + +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 = ( +
+
+ + {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + return ( +
+ + + + App Layout with Right Sidebar + + + + + + +
+
+ Your App Content +
+ + + {drawer} + + + + + {drawer} + + +
+ ); + } +} + +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 ( + + {`Current width: ${width}`} + + ); +} + +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 = ( +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+); + +export const otherMailFolderListItems = ( +
+ + + + + + + + + + + + + + + + + + +
+); -- cgit v1.2.3