Skip to content

Commit

Permalink
[docs] Save one component in the demo (#13537)
Browse files Browse the repository at this point in the history 
* Update class name convention

Updating to most recent naming convention for how classes extends components

* fewer elements
  • Loading branch information
@levelingup @oliviertassinari
levelingup authored and oliviertassinari committed Nov 7, 2018
1 parent c9a192e commit 20cd3e3
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 107 deletions.
132 changes: 65 additions & 67 deletions docs/src/pages/page-layout-examples/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,75 +114,73 @@ class Dashboard extends React.Component {
const { classes } = this.props;

return (
<React.Fragment>
<div className={classes.root}>
<CssBaseline />
<div className={classes.root}>
<AppBar
position="absolute"
className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
>
<Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(
classes.menuButton,
this.state.open && classes.menuButtonHidden,
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
Dashboard
</Typography>
<IconButton color="inherit">
<Badge badgeContent={4} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
</Drawer>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Typography variant="h4" gutterBottom component="h2">
Orders
<AppBar
position="absolute"
className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
>
<Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(
classes.menuButton,
this.state.open && classes.menuButtonHidden,
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
Dashboard
</Typography>
<Typography component="div" className={classes.chartContainer}>
<SimpleLineChart />
</Typography>
<Typography variant="h4" gutterBottom component="h2">
Products
</Typography>
<div className={classes.tableContainer}>
<SimpleTable />
</div>
</main>
</div>
</React.Fragment>
<IconButton color="inherit">
<Badge badgeContent={4} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
</Drawer>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Typography variant="h4" gutterBottom component="h2">
Orders
</Typography>
<Typography component="div" className={classes.chartContainer}>
<SimpleLineChart />
</Typography>
<Typography variant="h4" gutterBottom component="h2">
Products
</Typography>
<div className={classes.tableContainer}>
<SimpleTable />
</div>
</main>
</div>
);
}
}
Expand Down
73 changes: 33 additions & 40 deletions docs/src/pages/page-layout-examples/sign-in/SignIn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles';

const styles = theme => ({
layout: {
main: {
width: 'auto',
display: 'block', // Fix IE 11 issue.
marginLeft: theme.spacing.unit * 3,
Expand Down Expand Up @@ -49,47 +49,40 @@ function SignIn(props) {
const { classes } = props;

return (
<React.Fragment>
<main className={classes.main}>
<CssBaseline />
<main className={classes.layout}>
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockIcon />
</Avatar>
<Typography component="h1" variant="h5">
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="email">Email Address</InputLabel>
<Input id="email" name="email" autoComplete="email" autoFocus />
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<Input name="password" type="password" id="password" autoComplete="current-password" />
</FormControl>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign in
</Typography>
<form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="email">Email Address</InputLabel>
<Input id="email" name="email" autoComplete="email" autoFocus />
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<Input
name="password"
type="password"
id="password"
autoComplete="current-password"
/>
</FormControl>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign in
</Button>
</form>
</Paper>
</main>
</React.Fragment>
</Button>
</form>
</Paper>
</main>
);
}

Expand Down

0 comments on commit 20cd3e3

Please sign in to comment.