Commit 05513735 authored by Florent Chehab's avatar Florent Chehab

Merge branch 'frontend_color' into 'master'

Frontend color

See merge request chehabfl/outgoing_rex!31
parents b822f1d8 8414b9b2
Pipeline #26946 passed with stages
in 2 minutes and 49 seconds
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';
export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER';
import {
SAVE_APP_THEME,
SAVE_APP_COLOR_PICKER
} from "./action-types";
export function saveAppTheme(theme) {
return {
type: SAVE_APP_THEME,
theme
};
}
export function saveAppColorPicker(s) {
return {
type: SAVE_APP_COLOR_PICKER,
state: s
};
}
......@@ -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));
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);
......@@ -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,
}))
}
......
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);
......@@ -31,7 +31,6 @@ class Search extends MyComponent {
}
getSuggestions(value) {
console.log(value)
const { universities } = this.getAllFetchedData();
const filter = fuzzysort.go(value, _.map(universities, (univ) => univ), { keys: ['name', 'acronym'] });
let out;
......
......@@ -46,21 +46,18 @@ class UnivList extends React.Component {
handleNext = () => {
console.log("next")
this.setState(prevState => ({
activeStep: prevState.activeStep + 1,
}));
};
handleBack = () => {
console.log("back")
this.setState(prevState => ({
activeStep: prevState.activeStep - 1,
}));
};
handleStepChange = activeStep => {
console.log("step change")
this.setState({ activeStep });
};
......@@ -75,7 +72,6 @@ class UnivList extends React.Component {
}
const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
console.log("maxSteps", maxSteps, "numberOfItems", numberOfItems, "itemsPerPage");
return (
<div className={classes.root}>
<SwipeableViews
......
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: 200,
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 } = props;
return (
<div className={classes.root}>
<div className={classes.appFrame}>
<div className={classes.statusBar} />
<AppBar position="static" >
<Toolbar >
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit">
Color sample
</Typography>
</Toolbar>
</AppBar>
<Button variant="fab" className={classes.fab} color="secondary" >
<AddIcon />
</Button>
</div>
</div>
);
}
ColorDemo.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(ColorDemo);
\ No newline at end of file
// Inspired by 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, saveAppColorPicker } from '../../actions/theme';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
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 = this.props.state
componentWillUnmount() {
this.props.saveColorPicker(this.state);
}
componentDidMount() {
if (JSON.stringify(this.props.state) != JSON.stringify(this.state)) {
this.setState(this.props.state);
}
}
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,
};
});
};
handleChangeNightMode() {
this.setState({
darkModeActivated: !this.state.darkModeActivated
})
}
handleChangeDocsColors = () => {
this.props.saveTheme(this.getThemeFromState());
};
getThemeFromState() {
return {
palette: {
primary: { main: this.state.primary },
secondary: { main: this.state.secondary },
type: this.state.darkModeActivated ? 'dark' : 'light'
},
}
}
render() {
const { classes, theme } = this.props;
const { primaryShade, secondaryShade } = this.state;
const colorBar = color => {
const background = { main: color };
theme.palette.augmentColor(background);
return (
<Grid container className={classes.colorBar}>