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

Added theme swapping.

Browse Source
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 Collapse from '@material-ui/core/Collapse';
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;
@ -77,6 +80,17 @@ class ResponsiveDrawer extends React.Component {
key: 'Home',
open: false,
open2: false,
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
primary: indigo,
secondary: indigo
}
}),
themeName: 'light',
themeChecked: true
};
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() {
const { classes, theme } = this.props;
const { classes } = this.props;
const drawer = (
<div>
@ -178,70 +222,78 @@ class ResponsiveDrawer extends React.Component {
);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
Marten Tracker
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
<Hidden smUp implementation="css">
<Drawer
container={this.props.container}
variant="temporary"
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={this.state.mobileOpen}
onClose={this.handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
{this.state.key === 'Home' && <Home />}
{this.state.key === 'Report' && <Report />}
{this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'List' && <SightingList />}
{this.state.key === 'About' && <About />}
{this.state.key === 'Contact' && <Contact />}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
{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 theme={this.state.theme}>
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" color="primary" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
Marten Tracker
</Typography>
<Switch
checked={this.state.themeChecked}
onChange={this.handleChange('themeChecked')}
value="themeChecked"
color="default"
/>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
<Hidden smUp implementation="css">
<Drawer
container={this.props.container}
variant="temporary"
anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
open={this.state.mobileOpen}
onClose={this.handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
{this.state.key === 'Home' && <Home />}
{this.state.key === 'Report' && <Report />}
{this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'List' && <SightingList key={this.state.themeName} />}
{this.state.key === 'About' && <About />}
{this.state.key === 'Contact' && <Contact />}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
{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>
);
}
}