Commit 40fa8029 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Change themes with path. Refactored navigation component.

parent c3f07afe
import React from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { repoTheme } from '../config';
import { genTheme } from '../config';
import Navigation from './Navigation';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Uploads from './Uploads'
......@@ -9,7 +9,7 @@ import RepoCalc from './RepoCalc';
function App() {
return (
<MuiThemeProvider theme={repoTheme}>
<MuiThemeProvider theme={genTheme}>
<BrowserRouter>
<Navigation>
<Switch>
......@@ -19,6 +19,7 @@ function App() {
<Route path="/upload" component={Uploads} />
<Route exact path="/archive" render={() => <div>Archive</div>} />
<Route path="/archive/:uploadHash/:calcHash" component={ArchiveCalc} />
<Route path="/enc" render={() => <div>In the future, you'll see chart'n'stuff for your calculations and materials.</div>} />
<Route path="/profile" render={() => <div>Profile</div>} />
<Route path="/documentation" render={() => <div>Docs</div>} />
<Route render={() => <div>Not found</div>} />
......
......@@ -16,155 +16,188 @@ import AccountIcon from '@material-ui/icons/AccountCircle';
import DocumentationIcon from '@material-ui/icons/Help';
import HomeIcon from '@material-ui/icons/Home';
import ArchiveIcon from '@material-ui/icons/Storage';
import EncIcon from '@material-ui/icons/Assessment';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'recompose'
import { Avatar } from '@material-ui/core';
import { repoTheme, archiveTheme } from '../config';
import { Avatar, MuiThemeProvider } from '@material-ui/core';
import { genTheme, repoTheme, archiveTheme, encTheme } from '../config';
const drawerWidth = 200;
const toolbarTitles = {
'/': 'Welcome',
'/repo': 'Raw Code Outputs',
'/upload': 'Upload Your Own Data',
'/profile': 'Your Profile',
'/documentation': 'Documentation',
'/archive': 'Code Independent Data'
'/': 'Welcome',
'/repo': 'Raw Code Outputs',
'/upload': 'Upload Your Own Data',
'/profile': 'Your Profile',
'/documentation': 'Documentation',
'/archive': 'Code Independent Data',
'/enc': 'The Material Perspective'
}
const styles = theme => ({
root: {
flexGrow: 1,
},
flex: {
flexGrow: 1,
},
appFrame: {
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex',
width: '100%',
height: '100vh'
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
drawerPaper: {
position: 'relative',
width: drawerWidth,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
height: '100%',
overflow: 'scroll'
},
toolbar: theme.mixins.toolbar,
link: {
textDecoration: 'none',
color: theme.palette.text.primary
const toolbarThemes = {
'/': genTheme,
'/repo': repoTheme,
'/upload': repoTheme,
'/profile': genTheme,
'/documentation': genTheme,
'/archive': archiveTheme,
'/enc': encTheme
}
class Navigation extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
}
});
function ClippedDrawer(props) {
const { classes, children, location: { pathname } } = props;
static styles = theme => ({
root: {
flexGrow: 1,
},
flex: {
flexGrow: 1,
},
appFrame: {
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex',
width: '100%',
height: '100vh'
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
drawerPaper: {
position: 'relative',
width: drawerWidth,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
height: '100%',
overflow: 'scroll'
},
toolbar: theme.mixins.toolbar,
link: {
textDecoration: 'none',
color: theme.palette.text.primary
}
});
const title = (
<Toolbar>
<Typography variant="title" color="inherit" noWrap>
nomad xt
</Typography>
</Toolbar>
)
renderTitle() {
return (
<Toolbar>
<Typography variant="title" color="inherit" noWrap>
nomad xt
</Typography>
</Toolbar>
)
}
const menu = (
<div>
<MenuList>
<MenuItem component={Link} to="/" selected={ '/' === pathname }>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText inset primary="Home"/>
</MenuItem>
<MenuItem component={Link} to="/repo" selected={ pathname.startsWith('/repo') }>
<ListItemIcon>
<SearchIcon style={{fill: repoTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Repository"/>
</MenuItem>
<MenuItem component={Link} to="/upload" selected={ '/upload' === pathname }>
<ListItemIcon>
<BackupIcon style={{fill: repoTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Upload"/>
</MenuItem>
<MenuItem component={Link} to="/archive" selected={ pathname.startsWith('/archive') }>
<ListItemIcon>
<ArchiveIcon style={{fill: archiveTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Archive"/>
</MenuItem>
</MenuList>
<Divider/>
<MenuList>
<MenuItem component={Link} to="/profile" selected={ '/profile' === pathname }>
<ListItemIcon>
<AccountIcon />
</ListItemIcon>
<ListItemText inset primary="Profil"/>
</MenuItem>
<MenuItem component={Link} to="/documentation" selected={ '/documentation' === pathname }>
<ListItemIcon>
<DocumentationIcon />
</ListItemIcon>
<ListItemText inset primary="Documentation"/>
</MenuItem>
</MenuList>
</div>
)
renderMenu() {
const { pathname } = this.props.location
const drawer = (
<Drawer variant="permanent" classes={{ paper: classes.drawerPaper, }} anchor="left">
<div className={classes.toolbar}>
{title}
return (
<div>
<MenuList>
<MenuItem component={Link} to="/" selected={ '/' === pathname }>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText inset primary="Home"/>
</MenuItem>
<MenuItem component={Link} to="/repo" selected={ pathname.startsWith('/repo') }>
<ListItemIcon>
<SearchIcon style={{fill: repoTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Repository"/>
</MenuItem>
<MenuItem component={Link} to="/upload" selected={ '/upload' === pathname }>
<ListItemIcon>
<BackupIcon style={{fill: repoTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Upload"/>
</MenuItem>
<MenuItem component={Link} to="/archive" selected={ pathname.startsWith('/archive') }>
<ListItemIcon>
<ArchiveIcon style={{fill: archiveTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Archive"/>
</MenuItem>
<MenuItem component={Link} to="/enc" selected={ pathname.startsWith('/enc') }>
<ListItemIcon>
<EncIcon style={{fill: encTheme.palette.primary.main}}/>
</ListItemIcon>
<ListItemText inset primary="Encyclopedia"/>
</MenuItem>
</MenuList>
<Divider/>
<MenuList>
<MenuItem component={Link} to="/profile" selected={ '/profile' === pathname }>
<ListItemIcon>
<AccountIcon />
</ListItemIcon>
<ListItemText inset primary="Profil"/>
</MenuItem>
<MenuItem component={Link} to="/documentation" selected={ '/documentation' === pathname }>
<ListItemIcon>
<DocumentationIcon />
</ListItemIcon>
<ListItemText inset primary="Documentation"/>
</MenuItem>
</MenuList>
</div>
<Divider />
{menu}
</Drawer>
);
)
}
const app = (
<div className={classes.root}>
<div className={classes.appFrame}>
<AppBar
position="absolute"
className={classes.appBar}
>
<Toolbar>
<Typography variant="title" color="inherit" noWrap className={classes.flex}>
{toolbarTitles[Object.keys(toolbarTitles).find(key => key === pathname || (key.length > 1 && pathname.startsWith(key)))]}
</Typography>
<Avatar src='/me.jpg'/>
</Toolbar>
</AppBar>
{drawer}
<main className={classes.content}>
<div className={classes.toolbar} />
{children}
</main>
</div>
</div>
);
render() {
const { classes, children, location: { pathname } } = this.props;
return app;
}
const drawer = (
<Drawer variant="permanent" classes={{ paper: classes.drawerPaper, }} anchor="left">
<div className={classes.toolbar}>
{this.renderTitle()}
</div>
<Divider />
{this.renderMenu()}
</Drawer>
)
const selected = dct => dct[Object.keys(dct).find(key => {
return key === pathname || (key.length > 1 && pathname.startsWith(key))
})]
const theme = selected(toolbarThemes)
ClippedDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
return (
<div className={classes.root}>
<div className={classes.appFrame}>
<MuiThemeProvider theme={theme}>
<AppBar
position="absolute"
className={classes.appBar}
>
<Toolbar>
<Typography variant="title" color="inherit" noWrap className={classes.flex}>
{selected(toolbarTitles)}
</Typography>
<Avatar src='/me.jpg'/>
</Toolbar>
</AppBar>
</MuiThemeProvider>
{drawer}
<MuiThemeProvider theme={theme}>
<main className={classes.content}>
<div className={classes.toolbar} />
{children}
</main>
</MuiThemeProvider>
</div>
</div>
)
}
}
export default compose(withRouter, withStyles(styles))(ClippedDrawer)
export default compose(withRouter, withStyles(Navigation.styles))(Navigation)
......@@ -2,10 +2,18 @@ import repo from '@material-ui/core/colors/deepPurple';
import archive from '@material-ui/core/colors/teal';
import enc from '@material-ui/core/colors/amber';
import secondary from '@material-ui/core/colors/blueGrey';
import grey from '@material-ui/core/colors/grey';
import { createMuiTheme } from '@material-ui/core';
export const apiBase = 'http://localhost:5000'
export const genTheme = createMuiTheme({
palette: {
primary: secondary,
secondary: secondary,
}
});
export const repoTheme = createMuiTheme({
palette: {
primary: repo,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment