GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

Added theme swapping.

This commit is contained in:
wildscotsmen 2018-11-29 23:55:21 -05:00
parent c3974fe5ea
commit 0dd7ce50d2
1 changed files with 117 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/components/Main.js
View File

@ -33,6 +33,9 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore'; import ExpandMore from '@material-ui/icons/ExpandMore';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery'; import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import indigo from '@material-ui/core/colors/indigo';
const drawerWidth = 240; const drawerWidth = 240;
@ -77,6 +80,17 @@ class ResponsiveDrawer extends React.Component {
key: 'Home', key: 'Home',
open: false, open: false,
open2: false, open2: false,
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
primary: indigo,
secondary: indigo
}
}),
themeName: 'light',
themeChecked: true
}; };
handleDrawerToggle = () => { handleDrawerToggle = () => {
@ -97,8 +111,38 @@ class ResponsiveDrawer extends React.Component {
}); });
} }
handleChange = name => event => {
this.setState({ [name]: event.target.checked });
if (this.state.themeName === 'light') {
this.setState({
themeName: 'dark',
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
type: 'dark'
}
})
})
} else {
this.setState({
themeName: 'light',
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
primary: indigo,
secondary: indigo
}
})
})
}
};
render() { render() {
const { classes, theme } = this.props; const { classes } = this.props;
const drawer = ( const drawer = (
<div> <div>
@ -178,70 +222,78 @@ class ResponsiveDrawer extends React.Component {
); );
return ( return (
<div className={classes.root}> <MuiThemeProvider theme={this.state.theme}>
<CssBaseline /> <div className={classes.root}>
<AppBar position="fixed" className={classes.appBar}> <CssBaseline />
<Toolbar> <AppBar position="fixed" color="primary" className={classes.appBar}>
<IconButton <Toolbar>
color="inherit" <IconButton
aria-label="Open drawer" color="inherit"
onClick={this.handleDrawerToggle} aria-label="Open drawer"
className={classes.menuButton} onClick={this.handleDrawerToggle}
> className={classes.menuButton}
<MenuIcon /> >
</IconButton> <MenuIcon />
<Typography variant="title" color="inherit" noWrap> </IconButton>
Marten Tracker <Typography variant="title" color="inherit" noWrap>
</Typography> Marten Tracker
</Toolbar> </Typography>
</AppBar> <Switch
<nav className={classes.drawer}> checked={this.state.themeChecked}
<Hidden smUp implementation="css"> onChange={this.handleChange('themeChecked')}
<Drawer value="themeChecked"
container={this.props.container} color="default"
variant="temporary" />
anchor={theme.direction === 'rtl' ? 'right' : 'left'} </Toolbar>
open={this.state.mobileOpen} </AppBar>
onClose={this.handleDrawerToggle} <nav className={classes.drawer}>
classes={{ <Hidden smUp implementation="css">
paper: classes.drawerPaper, <Drawer
}} container={this.props.container}
ModalProps={{ variant="temporary"
keepMounted: true, // Better open performance on mobile. anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
}} open={this.state.mobileOpen}
> onClose={this.handleDrawerToggle}
{drawer} classes={{
</Drawer> paper: classes.drawerPaper,
</Hidden> }}
<Hidden xsDown implementation="css"> ModalProps={{
<Drawer keepMounted: true, // Better open performance on mobile.
classes={{ }}
paper: classes.drawerPaper, >
}} {drawer}
variant="permanent" </Drawer>
open </Hidden>
> <Hidden xsDown implementation="css">
{drawer} <Drawer
</Drawer> classes={{
</Hidden> paper: classes.drawerPaper,
</nav> }}
<main className={classes.content}> variant="permanent"
<div className={classes.toolbar} /> open
{this.state.key === 'Home' && <Home />} >
{this.state.key === 'Report' && <Report />} {drawer}
{this.state.key === 'Map' && <ViewMap />} </Drawer>
{this.state.key === 'List' && <SightingList />} </Hidden>
{this.state.key === 'About' && <About />} </nav>
{this.state.key === 'Contact' && <Contact />} <main className={classes.content}>
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>} <div className={classes.toolbar} />
{this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>} {this.state.key === 'Home' && <Home />}
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>} {this.state.key === 'Report' && <Report />}
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>} {this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>} {this.state.key === 'List' && <SightingList key={this.state.themeName} />}
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>} {this.state.key === 'About' && <About />}
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'}/>} {this.state.key === 'Contact' && <Contact />}
</main> {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
</div> {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
</main>
</div>
</MuiThemeProvider>
); );
} }
} }