App: upgrade material-ui.

master
Tom Hacohen 6 years ago
parent c1d446551b
commit fbdd478602

@ -6,16 +6,14 @@ import { createSelector } from 'reselect';
import { MuiThemeProvider as ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x import { MuiThemeProvider as ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import amber from '@material-ui/core/colors/amber'; import amber from '@material-ui/core/colors/amber';
import lightBlue from '@material-ui/core/colors/lightBlue'; import lightBlue from '@material-ui/core/colors/lightBlue';
import getMuiTheme from 'material-ui/styles/getMuiTheme'; import AppBar from '@material-ui/core/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import Toolbar from '@material-ui/core/Toolbar';
import { amber500, amber700, lightBlue500, darkBlack, white } from 'material-ui/styles/colors';
import AppBar from 'material-ui/AppBar';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@material-ui/core/Drawer';
import IconButton from 'material-ui/IconButton'; import IconButton from '@material-ui/core/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu'; import NavigationMenu from '@material-ui/icons/Menu';
import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back'; import NavigationBack from '@material-ui/icons/ArrowBack';
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh'; import NavigationRefresh from '@material-ui/icons/Refresh';
import './App.css'; import './App.css';
@ -38,28 +36,22 @@ const muiTheme = createMuiTheme({
light: lightBlue.A200, light: lightBlue.A200,
main: lightBlue.A400, main: lightBlue.A400,
dark: lightBlue.A700, dark: lightBlue.A700,
contrastText: white, contrastText: 'white',
}, },
} }
}); });
const muiThemeV0 = getMuiTheme({ // FIXME: get rid of this one
palette: {
primary1Color: amber500,
primary2Color: amber700,
accent1Color: lightBlue500,
textColor: darkBlack,
alternateTextColor: white,
}
});
export function getPalette(part: string): string { export function getPalette(part: string): string {
const theme = muiThemeV0; const palette = {
if ((theme.palette === undefined) || (theme.palette[part] === undefined)) { primary1Color: amber[500],
return ''; primary2Color: amber[700],
} accent1Color: lightBlue[500],
textColor: 'black',
alternateTextColor: 'white',
};
return theme.palette[part]; return palette[part] || '';
} }
export const routeResolver = new RouteResolver({ export const routeResolver = new RouteResolver({
@ -136,12 +128,26 @@ const AppBarWitHistory = withRouter(
} = this.props; } = this.props;
return ( return (
<AppBar <AppBar
iconElementLeft={!this.canGoBack() ? position="static"
toggleDrawerIcon :
<IconButton onClick={this.goBack}><NavigationBack /></IconButton>
}
{...props} {...props}
/> >
<Toolbar>
<div style={{ marginLeft: -12, marginRight: 20, }}>
{!this.canGoBack() ?
toggleDrawerIcon :
<IconButton onClick={this.goBack}><NavigationBack /></IconButton>
}
</div>
<div style={{ flexGrow: 1, fontSize: '1.25em' }}>
{C.appName}
</div>
<div style={{ marginRight: -12 }}>
{this.props.iconElementRight}
</div>
</Toolbar>
</AppBar>
); );
} }
} }
@ -188,31 +194,28 @@ class App extends React.PureComponent {
return ( return (
<ThemeProvider theme={muiTheme}> <ThemeProvider theme={muiTheme}>
<MuiThemeProvider muiTheme={muiThemeV0}> <BrowserRouter>
<BrowserRouter> <div>
<div> <AppBarWitHistory
<AppBarWitHistory toggleDrawerIcon={<IconButton onClick={this.toggleDrawer}><NavigationMenu /></IconButton>}
title={C.appName} iconElementRight={
toggleDrawerIcon={<IconButton onClick={this.toggleDrawer}><NavigationMenu /></IconButton>} <IconButton disabled={!credentials || fetching} onClick={this.refresh}>
iconElementRight={ <IconRefreshWithSpin spin={fetching} />
<IconButton disabled={!credentials || fetching} onClick={this.refresh}> </IconButton>}
<IconRefreshWithSpin spin={fetching} />
</IconButton>} />
<Drawer
/> open={this.state.drawerOpen}
<Drawer onClose={this.toggleDrawer}
open={this.state.drawerOpen} >
onClose={this.toggleDrawer} <SideMenu etesync={credentials} onCloseDrawerRequest={this.closeDrawer} />
> </Drawer>
<SideMenu etesync={credentials} onCloseDrawerRequest={this.closeDrawer} />
</Drawer> <ErrorBoundary>
<LoginGate credentials={this.props.credentials} />
<ErrorBoundary> </ErrorBoundary>
<LoginGate credentials={this.props.credentials} /> </div>
</ErrorBoundary> </BrowserRouter>
</div>
</BrowserRouter>
</MuiThemeProvider>
</ThemeProvider> </ThemeProvider>
); );
} }

Loading…
Cancel
Save