Skip to content

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

Settings added, color selection operationnal

parent b822f1d8
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: {
width: 64,
height: 64,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
});
class ColorTool extends React.Component {
state = {
primary: '#2196f3',
secondary: '#f50057',
primaryInput: '#2196f3',
secondaryInput: '#f50057',
primaryHue: 'blue',
secondaryHue: 'pink',
primaryShade: 4,
secondaryShade: 11,
};
handleChangeColor = name => event => {
const isRgb = string => /#?([0-9a-f]{6})/i.test(string);
const {
target: { value: color },
} = event;
this.setState({
[`${name}Input`]: color,
});
if (isRgb(color)) {
this.setState({
[name]: color,
});
}
};
handleChangeHue = name => event => {
const {
target: { value: hue },
} = event;
this.setState(state => {
const color = colors[hue][shades[state[`${name}Shade`]]];
return {
[`${name}Hue`]: hue,
[name]: color,
[`${name}Input`]: color,
};
});
};
handleChangeShade = name => (event, shade) => {
this.setState(state => {
const color = colors[state[`${name}Hue`]][shades[shade]];
return {
[`${name}Shade`]: shade,
[name]: color,
[`${name}Input`]: color,
};
});
};
handleChangeDocsColors = () => {
this.props.saveTheme({
palette: {
primary: { main: this.state.primary },
secondary: { main: this.state.secondary },
},
})
};
render() {
const { classes, theme } = this.props;
console.log(theme)
const { primaryShade, secondaryShade } = this.state;
const colorBar = color => {
const background = { main: color };
theme.palette.augmentColor(background);
return (
<Grid container className={classes.colorBar}>
{['dark', 'main', 'light'].map(key => (
<div
className={classes.colorSquare}
style={{ backgroundColor: background[key] }}
key={key}
>
<Typography
variant="caption"
style={{ color: theme.palette.getContrastText(background[key]) }}
>
{rgbToHex(background[key])}
</Typography>
</div>
))}
</Grid>
);
};
const colorPicker = intent => {
const intentInput = this.state[`${intent}Input`];
const intentShade = this.state[`${intent}Shade`];
const color = this.state[`${intent}`];
return (
<Grid item xs={12} sm={6} md={4}>
<Typography gutterBottom variant="title">
{capitalize(intent)}
</Typography>
<Input
id={intent}