Commit 8414b9b2 authored by Florent Chehab's avatar Florent Chehab

Darkmode managed ; simplier ColorDemo

parent 909be99e
Pipeline #26945 passed with stages
in 2 minutes and 27 seconds
......@@ -17,7 +17,7 @@ const styles = theme => ({
},
appFrame: {
position: 'relative',
height: 390,
height: 200,
backgroundColor: theme.palette.background.paper,
},
statusBar: {
......@@ -42,35 +42,14 @@ const styles = theme => ({
});
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);
const { classes } = props;
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 }}>
<div className={classes.statusBar} />
<AppBar position="static" >
<Toolbar >
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
......@@ -79,20 +58,8 @@ function ColorDemo(props) {
</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 variant="fab" className={classes.fab} color="secondary" >
<AddIcon />
</Button>
</div>
</div>
......@@ -101,7 +68,6 @@ function ColorDemo(props) {
ColorDemo.propTypes = {
classes: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
......
// Taken 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';
......@@ -20,6 +20,12 @@ 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'];
......@@ -67,8 +73,8 @@ class ColorTool extends React.Component {
componentWillUnmount() {
this.props.saveColorPicker(this.state);
}
componentDidMount(){
if (JSON.stringify(this.props.state) != JSON.stringify(this.state)){
componentDidMount() {
if (JSON.stringify(this.props.state) != JSON.stringify(this.state)) {
this.setState(this.props.state);
}
}
......@@ -117,6 +123,12 @@ class ColorTool extends React.Component {
});
};
handleChangeNightMode() {
this.setState({
darkModeActivated: !this.state.darkModeActivated
})
}
handleChangeDocsColors = () => {
this.props.saveTheme(this.getThemeFromState());
};
......@@ -126,6 +138,7 @@ class ColorTool extends React.Component {
palette: {
primary: { main: this.state.primary },
secondary: { main: this.state.secondary },
type: this.state.darkModeActivated ? 'dark' : 'light'
},
}
}
......@@ -229,18 +242,34 @@ class ColorTool extends React.Component {
}
const hasChanges = JSON.stringify(tmp) != JSON.stringify(this.getThemeFromState());
return (
<Grid container spacing={40} className={classes.root}>
<Grid item xs={12}>
<FormControlLabel
labelPlacement='start'
label={this.state.darkModeActivated ? 'Désactiver le mode nuit :' : 'Activer le monde nuit : '}
control={
<Switch
checked={this.state.darkModeActivated}
onChange={() => this.handleChangeNightMode()}
value="Nimportequoi"
/>
}
/>
</Grid>
{colorPicker('primary')}
{colorPicker('secondary')}
<Grid item xs={12} sm={6} md={4}>
<ColorDemo data={this.state} />
<MuiThemeProvider theme={createMuiTheme(this.getThemeFromState())}>
<ColorDemo />
</MuiThemeProvider >
</Grid>
<Grid item xs={3}>
<Grid item xs={6}>
<Button variant="contained" color="secondary" disabled={!hasChanges} onClick={this.handleChangeDocsColors}>
Appliquer à tout le site
</Button>
</Grid>
<Grid item xs={3}>
<Grid item xs={6}>
<Button variant="contained" color="primary" disabled={true} onClick={console.log("click")}>
Sauvegarder
......
......@@ -29,7 +29,7 @@ const defaultColorPicker = {
secondaryHue: 'pink',
primaryShade: 4,
secondaryShade: 11,
applied: false,
darkModeActivated: defaultTheme.palette.type == 'dark'
};
export function saveAppColorPicker(state = defaultColorPicker, action) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment