Skip to content

GitLab

Commit 70d6f0b6 authored by Florent Chehab's avatar Florent Chehab
Browse files

Settings added, color selection operationnal

parent b822f1d8
Pipeline #26940 passed with stages
in 2 minutes and 17 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 801 additions and 149 deletions
frontend/src/actions/action-types.js
View file @ 70d6f0b6
export const SAVE_MAIN_MAP_POSITION = 'SAVE_MAIN_MAP_POSITION';
export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES';
export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG';
export const SAVE_APP_THEME = 'SAVE_APP_THEME';
frontend/src/actions/theme.js 0 → 100644
View file @ 70d6f0b6
import {
SAVE_APP_THEME
} from "./action-types";
export function saveAppTheme(theme) {
return {
type: SAVE_APP_THEME,
theme
};
}
frontend/src/components/App.js
View file @ 70d6f0b6
......@@ -22,12 +22,12 @@ import MyComponent from './MyComponent'
// import route Components here
import {
Route,
Route,
} from 'react-router-dom';
import {
countriesFetchData,
currenciesFetchData,
countriesFetchData,
currenciesFetchData,
} from '../generated/actions';
......@@ -35,160 +35,160 @@ import PageMap from './pages/PageMap';
import PageHome from './pages/PageHome';
import PageFilter from './pages/PageFilter';
import PageSearch from './pages/PageSearch';
import PageSettings from './pages/PageSettings';
const drawerWidth = 240;
const styles = theme => ({
root: {
display: 'flex',
root: {
display: 'flex',
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
chip: {
margin: theme.spacing.unit,
},
menuButton: {
marginRight: 4,
},
hideIt: {
display: 'none',
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9,
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
chip: {
margin: theme.spacing.unit,
},
menuButton: {
marginRight: 4,
},
hideIt: {
display: 'none',
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9,
},
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
height: '100vh',
overflow: 'auto',
},
chartContainer: {
marginLeft: -22,
},
tableContainer: {
height: 320,
},
myPaper: {
padding: 16
},
null: {}
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
height: '100vh',
overflow: 'auto',
},
chartContainer: {
marginLeft: -22,
},
tableContainer: {
height: 320,
},
myPaper: {
padding: 16
},
null: {}
});
class App extends MyComponent {
state = {
open: true,
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
myRender() {
const { classes } = this.props;
return (
<React.Fragment>
<CssBaseline />
<div className={classes.root}>
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classNames(classes.toolbarIcon)}>
<div className={classNames((!this.state.open) && classes.hideIt, classes.null)}>
<Chip
avatar={<Avatar> <SchoolIcon /> </Avatar>}
label="Outgoing REX"
className={classes.chip}
color="primary"
/>
</div>
<IconButton onClick={this.handleDrawerOpen} className={classNames(classes.menuButton,
this.state.open && classes.hideIt)}>
<MenuIcon />
</IconButton>
<IconButton onClick={this.handleDrawerClose} className={classNames(classes.menuButton,
(!this.state.open) && classes.hideIt)}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
</Drawer>
<main className={classes.content}>
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
</main>
</div>
</React.Fragment>
);
}
state = {
open: true,
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
myRender() {
const { classes } = this.props;
return (
<React.Fragment>
<CssBaseline />
<div className={classes.root}>
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classNames(classes.toolbarIcon)}>
<div className={classNames((!this.state.open) && classes.hideIt, classes.null)}>
<Chip
avatar={<Avatar> <SchoolIcon /> </Avatar>}
label="Outgoing REX"
className={classes.chip}
color="primary"
/>
</div>
<IconButton onClick={this.handleDrawerOpen} className={classNames(classes.menuButton,
this.state.open && classes.hideIt)}>
<MenuIcon />
</IconButton>
<IconButton onClick={this.handleDrawerClose} className={classNames(classes.menuButton,
(!this.state.open) && classes.hideIt)}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
</Drawer>
<main className={classes.content}>
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} />
</main>
</div>
</React.Fragment>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => {
return {
countries: state.countries,
currencies: state.currencies
}
return {
countries: state.countries,
currencies: state.currencies
}
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: {
countries: () => dispatch(countriesFetchData()),
currencies: () => dispatch(currenciesFetchData()),
}
};
return {
fetchData: {
countries: () => dispatch(countriesFetchData()),
currencies: () => dispatch(currenciesFetchData()),
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(App));
frontend/src/components/ThemeProvider.js 0 → 100644
View file @ 70d6f0b6
import React from "react";
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import { connect } from "react-redux";
import { BrowserRouter as Router, Route } from 'react-router-dom';
class ThemeProvider extends React.Component {
render() {
console.log("ici")
return (
<div>
<MuiThemeProvider theme={createMuiTheme(this.props.theme)}>
<Router>
{this.props.children}
</Router>
</MuiThemeProvider>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
theme: state.app.appTheme
};
};
export default connect(mapStateToProps)(ThemeProvider);
frontend/src/components/map/UnivMap.js
View file @ 70d6f0b6
......@@ -36,13 +36,13 @@ class UnivMap extends MyComponent {
}
saveLeafletInstance = (l) => {
this.setState(Object.assign(this.state, {
this.setState(Object.assign({},this.state, {
leaflet_instance: l,
}))
}
saveSelectedLayer = (e) => {
this.setState(Object.assign(this.state, {
this.setState(Object.assign({},this.state, {
selected_layer: e.name,
}))
}
......
frontend/src/components/pages/PageSettings.js 0 → 100644
View file @ 70d6f0b6
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Settings from '../settings/Settings';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
myPaper: {
padding: 16
}
});
class PageSettings extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.myPaper}>
<Grid container spacing={24}>
<Grid item xs={11}>
<Typography variant="display1" gutterBottom>
Paramètres
</Typography>
</Grid>
</Grid>
<Settings />
</Paper>
);
}
}
PageSettings.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PageSettings);
frontend/src/components/settings/ColorDemo.js 0 → 100644
View file @ 70d6f0b6
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Typography from '@material-ui/core/Typography';
import AddIcon from '@material-ui/icons/Add';
// import MarkdownElement from '@material-ui/docs/MarkdownElement';
const styles = theme => ({
root: {
position: 'relative',
overflow: 'hidden',
},
appFrame: {
position: 'relative',
height: 390,
backgroundColor: theme.palette.background.paper,
},
statusBar: {
width: '100%',
height: 24,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
code: {
marginTop: theme.spacing.unit,
'& pre': {
margin: '0px !important',
},
},
fab: {
position: 'absolute',
bottom: theme.spacing.unit * 2,
right: theme.spacing.unit * 2,
},
});
function ColorDemo(props) {
const { classes, data, theme } = props;
const primary = {
main: data.primary,
output:
data.primaryShade === 4
? `${data.primaryHue}`
: `{
main: '${data.primary}',
}`,
};
const secondary = {
main: data.secondary,
output:
data.secondaryShade === 11
? `${data.secondaryHue}`
: `{
main: '${data.secondary}',
}`,
};
theme.palette.augmentColor(primary);
theme.palette.augmentColor(secondary);
return (
<div className={classes.root}>
<div className={classes.appFrame}>
<div className={classes.statusBar} style={{ backgroundColor: primary.dark }} />
<AppBar position="static" style={{ backgroundColor: primary.main }}>
<Toolbar style={{ color: primary.contrastText }}>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit">
Color sample
</Typography>
</Toolbar>
</AppBar>
{/* <MarkdownElement
dir="ltr"
className={classes.code}
text={`\`\`\`jsx
{
palette: {
primary: ${primary.output},
secondary: ${secondary.output},
},
}
\`\`\``}
/> */}
<Button variant="fab" className={classes.fab} style={{ backgroundColor: secondary.main }}>
<AddIcon nativeColor={secondary.contrastText} />
</Button>
</div>
</div>
);
}
ColorDemo.propTypes = {
classes: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(ColorDemo);
\ No newline at end of file
frontend/src/components/settings/ColorTools.js 0 → 100644
View file @ 70d6f0b6
// Taken from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
// MIT Licence and modified
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import * as colors from '@material-ui/core/colors';
import Grid from '@material-ui/core/Grid';
import Input from '@material-ui/core/Input';
import Radio from '@material-ui/core/Radio';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import CheckIcon from '@material-ui/icons/Check';
import Slider from '@material-ui/lab/Slider';
import { rgbToHex } from '@material-ui/core/styles/colorManipulator';
import { capitalize } from '@material-ui/core/utils/helpers';
// import actionTypes from 'docs/src/modules/redux/actionTypes';
import ColorDemo from './ColorDemo';
import { saveAppTheme } from '../../actions/theme';
const hues = Object.keys(colors).slice(1, 17);
const shades = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 'A700', 'A400', 'A200', 'A100'];
const styles = theme => ({
radio: {
width: 48,
height: 48,
},
radioSelected: {
width: 48,
height: 48,
border: '1px solid white',
color: theme.palette.common.white,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
swatch: {
width: 192,
},
sliderContainer: {
display: 'flex',
alignItems: 'center',
marginTop: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit,
},
slider: {
width: 'calc(100% - 80px)',
},
colorBar: {
marginTop: theme.spacing.unit * 2,
},
colorSquare: {