Skip to content
GitLab
Commit 4fe1bdf2 authored by Florent Chehab's avatar Florent Chehab
Browse files

Cleaning

parent 0e42118e
Hide whitespace changes
Inline Side-by-side
frontend/src/components/settings/ColorDemo.js
View file @ 4fe1bdf2
......@@ -3,12 +3,49 @@ import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import AppBar from "@material-ui/core/AppBar";
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 MenuIcon from "@material-ui/icons/Menu";
import Typography from "@material-ui/core/Typography";
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 => ({
root: {
position: "relative",
......@@ -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);
frontend/src/components/settings/ColorTools.js
View file @ 4fe1bdf2
/**
*
* 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
// MIT Licence and modified
import React from "react";
import PropTypes from "prop-types";
......@@ -14,7 +32,6 @@ 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 actionTypes from 'docs/src/modules/redux/actionTypes';
import ColorDemo from "./ColorDemo";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
......@@ -22,7 +39,6 @@ import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import areSameThemes from "../../utils/areSameThemes";
import areSameObjects from "../../utils/areSameObjets";
import CustomComponentForAPI from "../CustomComponentForAPI";
......@@ -31,106 +47,65 @@ import { saveAppTheme, saveAppColorPicker } from "../../actions/theme";
import getActions from "../../api/getActions";
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 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",
},
});
// TODO switch to my component
/**
* Component to handle website color customization
*
* @class ColorTool
* @extends {CustomComponentForAPI}
*/
class ColorTool extends CustomComponentForAPI {
state = this.props.state
state = this.props.state;
componentWillUnmount() {
this.props.saveColorPicker(this.state);
}
customComponentDidMount() {
if (areSameObjects(this.props.state, this.state)) {
this.setState(this.props.state);
}
}
customComponentDidUpdate() {
if (!this.allApiDataIsReady()) {
return;
}
const configOnServer = this.props.userData.readSucceeded.data.config;
const themeOnServer = configOnServer.theme;
const colorPickerConfigOnServer = configOnServer.colorPicker;
const serverDataRetrievedAt = this.props.userData.readSucceeded.readAt;
const configOnServer = this.getReadData("userData").config,
themeOnServer = configOnServer.theme,
colorPickerConfigOnServer = configOnServer.colorPicker,
serverDataRetrievedAt = this.getReadTime("userData");
if (!themeOnServer) {
// we need to initialize it
this.handleSendToServer(true, false);
return;
}
if (!colorPickerConfigOnServer) {
this.handleSendToServer(false, true);
if ((!themeOnServer) || (!colorPickerConfigOnServer)) {
// There is nothing to restore
return;
}
if (serverDataRetrievedAt > this.state.updatedAt) {
// we need to set the color picker colors from server color
const primary = themeOnServer.palette.primary.main;
const secondary = themeOnServer.palette.secondary.main;
const primary = themeOnServer.palette.primary.main,
secondary = themeOnServer.palette.secondary.main,
{ primaryHue, secondaryHue, primaryShade, secondaryShade } = colorPickerConfigOnServer;
this.setState({
updatedAt: Date.now(),
primary,
secondary,
primaryHue: colorPickerConfigOnServer.primaryHue,
secondaryHue: colorPickerConfigOnServer.secondaryHue,
primaryShade: colorPickerConfigOnServer.primaryShade,
secondaryShade: colorPickerConfigOnServer.secondaryShade,
primaryHue,
secondaryHue,
primaryShade,
secondaryShade,
darkModeActivated: themeOnServer.palette.type == "light" ? false : true
});
}
}
handleChangeHue = name => event => {
const {
target: { value: hue },
} = event;
const hue = event.target.value;
this.setState(state => {
const color = colors[hue][shades[state[`${name}Shade`]]];
const color = colors[hue][SHADES[state[`${name}Shade`]]];
return {
[`${name}Hue`]: hue,
[name]: color,
......@@ -141,7 +116,7 @@ class ColorTool extends CustomComponentForAPI {
handleChangeShade = name => (event, shade) => {
this.setState(state => {
const color = colors[state[`${name}Hue`]][shades[shade]];
const color = colors[state[`${name}Hue`]][SHADES[shade]];
return {
[`${name}Shade`]: shade,
[name]: color,
......@@ -161,6 +136,12 @@ class ColorTool extends CustomComponentForAPI {
this.props.saveTheme(this.getThemeFromState());
};
/**
* Function used to extract the theme configuration from the state
*
* @returns {object}
* @memberof ColorTool
*/
getThemeFromState() {
return {
palette: {
......@@ -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() {
const { currentUiTheme } = this.props;
const currentTheme = {
......@@ -183,20 +171,24 @@ class ColorTool extends CustomComponentForAPI {
return currentTheme;
}
handleSendToServer = (saveTheme = true, saveColorPicker = true) => {
const userData = this.props.userData.readSucceeded.data;
handleSendToServer = () => {
const userData = this.getReadData("userData");
let newUserData = Object.assign({}, userData);
if (saveTheme) {
newUserData.config.theme = this.getThemeFromProps();
}
if (saveColorPicker) {
newUserData.config.colorPicker = {
primaryHue: this.state.primaryHue,
secondaryHue: this.state.secondaryHue,
primaryShade: this.state.primaryShade,
secondaryShade: this.state.secondaryShade,
};
}
newUserData.config.theme = this.getThemeFromProps();
const { primaryHue,
secondaryHue,
primaryShade,
secondaryShade,
} = this.state;
newUserData.config.colorPicker = {
primaryHue,
secondaryHue,
primaryShade,
secondaryShade,
};
this.props.saveToServer(newUserData);
}
......@@ -248,11 +240,11 @@ class ColorTool extends CustomComponentForAPI {
onChange={this.handleChangeShade(intent)}
aria-labelledby={`${intent}ShadeSliderLabel`}
/>
<Typography>{shades[intentShade]}</Typography>
<Typography>{SHADES[intentShade]}</Typography>
</div>
<div className={classes.swatch}>
{hues.map(hue => {
const shade = intent === "primary" ? shades[primaryShade] : shades[secondaryShade];
{HUES.map(hue => {
const shade = intent === "primary" ? SHADES[primaryShade] : SHADES[secondaryShade];
const backgroundColor = colors[hue][shade];
return (
......@@ -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));
frontend/src/components/settings/Settings.js
View file @ 4fe1bdf2
import React from "react";
import CustomComponentForAPI from "../CustomComponentForAPI";
import React, { Component } from "react";
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 (
<ColorTools /> //TODO fix backgroud
);
......
frontend/src/components/shared/Markdown.js
View file @ 4fe1bdf2
......@@ -4,6 +4,7 @@
import React from "react";
import ReactMarkdown from "react-markdown";
import withStyles from "@material-ui/core/styles/withStyles";
import Typography from "@material-ui/core/Typography";
import Table from "@material-ui/core/Table";
......@@ -17,11 +18,13 @@ import { lighten, darken } from "@material-ui/core/styles/colorManipulator";
import Divider from "@material-ui/core/Divider";
import LinkText from "../other/TextLink";
const styles = (theme) => {
const { palette } = theme;
const linkColor = palette.type == "dark" ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3);
const backgroundTable = palette.type == "dark" ? lighten(palette.background.paper, 0.07) : darken(palette.background.paper, 0.02);
const headerTable = palette.type == "dark" ? lighten(palette.background.paper, 0.13) : darken(palette.background.paper, 0.07);
// Custom styling for the rendered markdown
const styles = theme => {
const { palette } = theme,
linkColor = palette.type == "dark" ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3),
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 {
list: {
color: palette.text.primary,
......@@ -65,12 +68,17 @@ const styles = (theme) => {
};
};
const renderers = {
heading: ({ level, ...props }) => {
let variant;
let paragraph;
/////////////////////////////////////////
/// Renderers definition
////////////////////////////////////////
switch (level) {
const HeadingRenderer = (props) => {
const { level } = props;
let variant = "body2",
paragraph = false;
switch (level) {
case 1:
variant = "h5";
break;
......@@ -87,59 +95,95 @@ const renderers = {
default:
variant = "body2";
break;
}
}
return <Typography {...props} gutterBottom variant={variant} paragraph={paragraph} style={{ fontWeight: 700 }} />;
},
// eslint-disable-next-line no-unused-vars
list: withStyles(styles, { withTheme: true })(({ classes, tight, ordered, ...props }) => (
<ul className={classes.list}>
return (
<Typography gutterBottom variant={variant} paragraph={paragraph} >
{props.children}
</ul>
)),
// eslint-disable-next-line no-unused-vars
listItem: withStyles(styles, { withTheme: true })(({ classes, tight, ordered, ...props }) => (
<li className={classes.listItem}>
<Typography component="span" {...props} />
</li>
)),
paragraph: props => <Typography {...props} paragraph />,
link: props => <LinkText {...props}/>,
// eslint-disable-next-line no-unused-vars
code: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<Typography variant={"body1"} paragraph>
<pre ><code>
{props.value}
</code></pre>
</Typography>
)),
inlineCode: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<code className={classes.code}>
);
};
const ListRenderer = (props, classes) => (
<ul className={classes.list}>
{props.children}
</ul>
);
const ListItemRenderer = (props, classes) => (
<li className={classes.listItem}>
<Typography component="span">
{props.children}
</code>
)),
blockquote: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<blockquote className={classes.blockquote}>
<em>
{props.children}
</em>
</blockquote>
)),
table: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<Paper className={classes.backgroundTable}>
<Table className={classes.table}> {props.children} </Table>
</Paper>
)),
tableHead: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<TableHead classes={{ root: classes.bold }} className={classes.tableHead}> {props.children} </TableHead>
)),
</Typography >
</li>
);
const CodeRenderer = (props) => (
<Typography variant={"body2"} paragraph>
<pre >
<code>
{props.value}
</code>
</pre>
</Typography>
);
const InlineCodeRenderer = (props, classes) => (
<code className={classes.code}>
{props.children}
</code>
);
const BlockquoteRenderer = (props, classes) => (
<blockquote className={classes.blockquote}>
<em>
{props.children}
</em>
</blockquote>
);
const TableRenderer = (props, classes) => (
<Paper className={classes.backgroundTable}>
<Table className={classes.table}> {props.children} </Table>
</Paper>
);
const TableHeadRenderer = (props, classes) => (
<TableHead
classes={{ root: classes.bold }}
className={classes.tableHead}
>
{props.children}
</TableHead>
);
//// End of renderers definition
const renderers = {
heading: HeadingRenderer,
list: withStyles(styles, { withTheme: true })(ListRenderer),
listItem: withStyles(styles, { withTheme: true })(ListItemRenderer),
paragraph: (props) => <Typography paragraph > {props.children} </Typography>,
link: props => <LinkText {...props} />,
code: withStyles(styles, { withTheme: true })(CodeRenderer),
inlineCode: withStyles(styles, { withTheme: true })(InlineCodeRenderer),
blockquote: withStyles(styles, { withTheme: true })(BlockquoteRenderer),
table: withStyles(styles, { withTheme: true })(TableRenderer),
tableHead: withStyles(styles, { withTheme: true })(TableHeadRenderer),
tableBody: props => (<TableBody> {props.children} </TableBody>),
tableRow: props => (<TableRow hover={true}> {props.children} </TableRow>),
tableCell: props => (<TableCell> {props.children} </TableCell>),