Commit 4fe1bdf2 authored by Florent Chehab's avatar Florent Chehab
Browse files

Cleaning

parent 0e42118e
...@@ -3,12 +3,49 @@ import PropTypes from "prop-types"; ...@@ -3,12 +3,49 @@ import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import AppBar from "@material-ui/core/AppBar"; import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar"; import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button"; import Fab from "@material-ui/core/Fab";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu"; import MenuIcon from "@material-ui/icons/Menu";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import AddIcon from "@material-ui/icons/Add"; import AddIcon from "@material-ui/icons/Add";
/**
* React component for demo purposes
*
* @param {object} props
* @returns
*/
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="h6" color="inherit">
Color sample
</Typography>
</Toolbar>
</AppBar>
<Fab className={classes.fab} color="secondary" >
<AddIcon />
</Fab>
</div>
</div>
);
}
ColorDemo.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
const styles = theme => ({ const styles = theme => ({
root: { root: {
position: "relative", position: "relative",
...@@ -40,34 +77,4 @@ const styles = theme => ({ ...@@ -40,34 +77,4 @@ const styles = theme => ({
}, },
}); });
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="h6" 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); export default withStyles(styles, { withTheme: true })(ColorDemo);
/**
*
* WARNING THIS FILE HAS NOT BEEN FULLY REVIEWED AS OF 22.02.2019
* THINGS MIGHT NOT BE SUPER CLEAR OR BROKEN
*
*
*
*
*
*
*
* TODO
*
*
*
*
*/
// Inspired by from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js // 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 React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
...@@ -14,7 +32,6 @@ import Button from "@material-ui/core/Button"; ...@@ -14,7 +32,6 @@ import Button from "@material-ui/core/Button";
import CheckIcon from "@material-ui/icons/Check"; import CheckIcon from "@material-ui/icons/Check";
import Slider from "@material-ui/lab/Slider"; import Slider from "@material-ui/lab/Slider";
import { rgbToHex } from "@material-ui/core/styles/colorManipulator"; import { rgbToHex } from "@material-ui/core/styles/colorManipulator";
// import actionTypes from 'docs/src/modules/redux/actionTypes';
import ColorDemo from "./ColorDemo"; import ColorDemo from "./ColorDemo";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch"; import Switch from "@material-ui/core/Switch";
...@@ -22,7 +39,6 @@ import createMuiTheme from "@material-ui/core/styles/createMuiTheme"; ...@@ -22,7 +39,6 @@ import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import areSameThemes from "../../utils/areSameThemes"; import areSameThemes from "../../utils/areSameThemes";
import areSameObjects from "../../utils/areSameObjets";
import CustomComponentForAPI from "../CustomComponentForAPI"; import CustomComponentForAPI from "../CustomComponentForAPI";
...@@ -31,106 +47,65 @@ import { saveAppTheme, saveAppColorPicker } from "../../actions/theme"; ...@@ -31,106 +47,65 @@ import { saveAppTheme, saveAppColorPicker } from "../../actions/theme";
import getActions from "../../api/getActions"; import getActions from "../../api/getActions";
const hues = Object.keys(colors).slice(1, 17); 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 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",
},
});
// TODO switch to my component /**
* Component to handle website color customization
*
* @class ColorTool
* @extends {CustomComponentForAPI}
*/
class ColorTool extends CustomComponentForAPI { class ColorTool extends CustomComponentForAPI {
state = this.props.state state = this.props.state;
componentWillUnmount() { componentWillUnmount() {
this.props.saveColorPicker(this.state); this.props.saveColorPicker(this.state);
} }
customComponentDidMount() {
if (areSameObjects(this.props.state, this.state)) {
this.setState(this.props.state);
}
}
customComponentDidUpdate() { customComponentDidUpdate() {
if (!this.allApiDataIsReady()) { if (!this.allApiDataIsReady()) {
return; return;
} }
const configOnServer = this.props.userData.readSucceeded.data.config; const configOnServer = this.getReadData("userData").config,
const themeOnServer = configOnServer.theme; themeOnServer = configOnServer.theme,
const colorPickerConfigOnServer = configOnServer.colorPicker; colorPickerConfigOnServer = configOnServer.colorPicker,
const serverDataRetrievedAt = this.props.userData.readSucceeded.readAt; serverDataRetrievedAt = this.getReadTime("userData");
if (!themeOnServer) { if ((!themeOnServer) || (!colorPickerConfigOnServer)) {
// we need to initialize it // There is nothing to restore
this.handleSendToServer(true, false);
return;
}
if (!colorPickerConfigOnServer) {
this.handleSendToServer(false, true);
return; return;
} }
if (serverDataRetrievedAt > this.state.updatedAt) { if (serverDataRetrievedAt > this.state.updatedAt) {
// we need to set the color picker colors from server color // we need to set the color picker colors from server color
const primary = themeOnServer.palette.primary.main; const primary = themeOnServer.palette.primary.main,
const secondary = themeOnServer.palette.secondary.main; secondary = themeOnServer.palette.secondary.main,
{ primaryHue, secondaryHue, primaryShade, secondaryShade } = colorPickerConfigOnServer;
this.setState({ this.setState({
updatedAt: Date.now(), updatedAt: Date.now(),
primary, primary,
secondary, secondary,
primaryHue: colorPickerConfigOnServer.primaryHue, primaryHue,
secondaryHue: colorPickerConfigOnServer.secondaryHue, secondaryHue,
primaryShade: colorPickerConfigOnServer.primaryShade, primaryShade,
secondaryShade: colorPickerConfigOnServer.secondaryShade, secondaryShade,
darkModeActivated: themeOnServer.palette.type == "light" ? false : true darkModeActivated: themeOnServer.palette.type == "light" ? false : true
}); });
} }
} }
handleChangeHue = name => event => { handleChangeHue = name => event => {
const { const hue = event.target.value;
target: { value: hue },
} = event;
this.setState(state => { this.setState(state => {
const color = colors[hue][shades[state[`${name}Shade`]]]; const color = colors[hue][SHADES[state[`${name}Shade`]]];
return { return {
[`${name}Hue`]: hue, [`${name}Hue`]: hue,
[name]: color, [name]: color,
...@@ -141,7 +116,7 @@ class ColorTool extends CustomComponentForAPI { ...@@ -141,7 +116,7 @@ class ColorTool extends CustomComponentForAPI {
handleChangeShade = name => (event, shade) => { handleChangeShade = name => (event, shade) => {
this.setState(state => { this.setState(state => {
const color = colors[state[`${name}Hue`]][shades[shade]]; const color = colors[state[`${name}Hue`]][SHADES[shade]];
return { return {
[`${name}Shade`]: shade, [`${name}Shade`]: shade,
[name]: color, [name]: color,
...@@ -161,6 +136,12 @@ class ColorTool extends CustomComponentForAPI { ...@@ -161,6 +136,12 @@ class ColorTool extends CustomComponentForAPI {
this.props.saveTheme(this.getThemeFromState()); this.props.saveTheme(this.getThemeFromState());
}; };
/**
* Function used to extract the theme configuration from the state
*
* @returns {object}
* @memberof ColorTool
*/
getThemeFromState() { getThemeFromState() {
return { return {
palette: { palette: {
...@@ -171,6 +152,13 @@ class ColorTool extends CustomComponentForAPI { ...@@ -171,6 +152,13 @@ class ColorTool extends CustomComponentForAPI {
}; };
} }
/**
* Function used to extract the theme information from the current Ui Theme
* set through the props
*
* @returns
* @memberof ColorTool
*/
getThemeFromProps() { getThemeFromProps() {
const { currentUiTheme } = this.props; const { currentUiTheme } = this.props;
const currentTheme = { const currentTheme = {
...@@ -183,20 +171,24 @@ class ColorTool extends CustomComponentForAPI { ...@@ -183,20 +171,24 @@ class ColorTool extends CustomComponentForAPI {
return currentTheme; return currentTheme;
} }
handleSendToServer = (saveTheme = true, saveColorPicker = true) => { handleSendToServer = () => {
const userData = this.props.userData.readSucceeded.data; const userData = this.getReadData("userData");
let newUserData = Object.assign({}, userData); let newUserData = Object.assign({}, userData);
if (saveTheme) {
newUserData.config.theme = this.getThemeFromProps(); newUserData.config.theme = this.getThemeFromProps();
}
if (saveColorPicker) { const { primaryHue,
secondaryHue,
primaryShade,
secondaryShade,
} = this.state;
newUserData.config.colorPicker = { newUserData.config.colorPicker = {
primaryHue: this.state.primaryHue, primaryHue,
secondaryHue: this.state.secondaryHue, secondaryHue,
primaryShade: this.state.primaryShade, primaryShade,
secondaryShade: this.state.secondaryShade, secondaryShade,
}; };
}
this.props.saveToServer(newUserData); this.props.saveToServer(newUserData);
} }
...@@ -248,11 +240,11 @@ class ColorTool extends CustomComponentForAPI { ...@@ -248,11 +240,11 @@ class ColorTool extends CustomComponentForAPI {
onChange={this.handleChangeShade(intent)} onChange={this.handleChangeShade(intent)}
aria-labelledby={`${intent}ShadeSliderLabel`} aria-labelledby={`${intent}ShadeSliderLabel`}
/> />
<Typography>{shades[intentShade]}</Typography> <Typography>{SHADES[intentShade]}</Typography>
</div> </div>
<div className={classes.swatch}> <div className={classes.swatch}>
{hues.map(hue => { {HUES.map(hue => {
const shade = intent === "primary" ? shades[primaryShade] : shades[secondaryShade]; const shade = intent === "primary" ? SHADES[primaryShade] : SHADES[secondaryShade];
const backgroundColor = colors[hue][shade]; const backgroundColor = colors[hue][shade];
return ( return (
...@@ -358,4 +350,45 @@ const mapDispatchToProps = (dispatch) => { ...@@ -358,4 +350,45 @@ const mapDispatchToProps = (dispatch) => {
}, },
}; };
}; };
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",
},
});
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(ColorTool)); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(ColorTool));
import React from "react"; import React, { Component } from "react";
import CustomComponentForAPI from "../CustomComponentForAPI";
import ColorTools from "./ColorTools"; import ColorTools from "./ColorTools";
class Settings extends CustomComponentForAPI {
customRender() { /**
* React component to handle the site settings
*
* @class Settings
* @extends {Component}
*/
class Settings extends Component {
render() {
return ( return (
<ColorTools /> //TODO fix backgroud <ColorTools /> //TODO fix backgroud
); );
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
import React from "react"; import React from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
...@@ -17,11 +18,13 @@ import { lighten, darken } from "@material-ui/core/styles/colorManipulator"; ...@@ -17,11 +18,13 @@ import { lighten, darken } from "@material-ui/core/styles/colorManipulator";
import Divider from "@material-ui/core/Divider"; import Divider from "@material-ui/core/Divider";
import LinkText from "../other/TextLink"; import LinkText from "../other/TextLink";
const styles = (theme) => { // Custom styling for the rendered markdown
const { palette } = theme; const styles = theme => {
const linkColor = palette.type == "dark" ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3); const { palette } = theme,
const backgroundTable = palette.type == "dark" ? lighten(palette.background.paper, 0.07) : darken(palette.background.paper, 0.02); linkColor = palette.type == "dark" ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3),
const headerTable = palette.type == "dark" ? lighten(palette.background.paper, 0.13) : darken(palette.background.paper, 0.07); backgroundTable = palette.type == "dark" ? lighten(palette.background.paper, 0.07) : darken(palette.background.paper, 0.02),
headerTable = palette.type == "dark" ? lighten(palette.background.paper, 0.13) : darken(palette.background.paper, 0.07);
return { return {
list: { list: {
color: palette.text.primary, color: palette.text.primary,
...@@ -65,10 +68,15 @@ const styles = (theme) => { ...@@ -65,10 +68,15 @@ const styles = (theme) => {
}; };
}; };
const renderers = { /////////////////////////////////////////
heading: ({ level, ...props }) => { /// Renderers definition
let variant; ////////////////////////////////////////
let paragraph;
const HeadingRenderer = (props) => {
const { level } = props;
let variant = "body2",
paragraph = false;
switch (level) { switch (level) {
case 1: case 1:
...@@ -89,57 +97,93 @@ const renderers = { ...@@ -89,57 +97,93 @@ const renderers = {
break; break;
} }
return <Typography {...props} gutterBottom variant={variant} paragraph={paragraph} style={{ fontWeight: 700 }} />; return (
}, <Typography gutterBottom variant={variant} paragraph={paragraph} >
// eslint-disable-next-line no-unused-vars {props.children}
list: withStyles(styles, { withTheme: true })(({ classes, tight, ordered, ...props }) => ( </Typography>
);
};
const ListRenderer = (props, classes) => (
<ul className={classes.list}> <ul className={classes.list}>
{props.children} {props.children}
</ul> </ul>
)), );
// eslint-disable-next-line no-unused-vars
listItem: withStyles(styles, { withTheme: true })(({ classes, tight, ordered, ...props }) => ( const ListItemRenderer = (props, classes) => (
<li className={classes.listItem}> <li className={classes.listItem}>
<Typography component="span" {...props} /> <Typography component="span">