Skip to content

Commit 201a4f2

Browse files
dholmsdholms
authored
added real settings including theme+ colors (#10)
1 parent 47e3394 commit 201a4f2

File tree

8 files changed

+252
-54
lines changed

8 files changed

+252
-54
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@
55
"dependencies": {
66
"@material-ui/core": "^4.3.2",
77
"@material-ui/icons": "^4.2.1",
8+
"classnames": "^2.2.6",
89
"prop-types": "^15.7.2",
910
"react": "^16.9.0",
11+
"react-color": "^2.17.3",
1012
"react-dom": "^16.9.0",
1113
"react-scripts": "3.1.1",
1214
"react-syntax-highlighter": "^11.0.2"

‎src/App.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,12 @@ import Main from "./components/Main";
55

66
const theme = createMuiTheme({
77
palette: {
8+
// type: "dark",
89
primary: {
9-
main: "#6446fa",
10-
light: "#9e74ff",
11-
dark: "#1118c6"
10+
main: "#6446fa"
1211
},
1312
secondary: {
14-
main: "#ff5274",
15-
light: "#ff87a2",
16-
dark: "#1118c6"
13+
main: "#ff5274"
1714
}
1815
}
1916
});

‎src/components/ColorPicker.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { withStyles, createStyles } from "@material-ui/core/styles";
4+
import Button from "@material-ui/core/Button";
5+
import Popover from "@material-ui/core/Popover";
6+
import { SwatchesPicker } from "react-color";
7+
8+
class SubmitButton extends React.Component {
9+
state = { anchorEl: null };
10+
11+
openPicker = evt => {
12+
evt.preventDefault();
13+
this.setState({ anchorEl: evt.currentTarget });
14+
};
15+
16+
closePicker = () => {
17+
this.setState({ anchorEl: null });
18+
};
19+
20+
handleChange = evt => {
21+
const value = {
22+
target: {
23+
value: evt.hex
24+
}
25+
};
26+
this.closePicker();
27+
this.props.onChange(value);
28+
};
29+
30+
render() {
31+
const { value, classes } = this.props;
32+
return (
33+
<React.Fragment>
34+
<Button onClick={this.openPicker}>
35+
{value}
36+
<div className={classes.preview} style={{ backgroundColor: value }} />
37+
</Button>
38+
<Popover
39+
open={!!this.state.anchorEl}
40+
anchorEl={this.state.anchorEl}
41+
onClose={this.closePicker}
42+
>
43+
<SwatchesPicker onChangeComplete={this.handleChange} />
44+
</Popover>
45+
</React.Fragment>
46+
);
47+
}
48+
}
49+
50+
SubmitButton.propTypes = {
51+
value: PropTypes.string,
52+
onChange: PropTypes.func,
53+
classes: PropTypes.objectOf(PropTypes.string)
54+
};
55+
56+
const styles = theme =>
57+
createStyles({
58+
button: {
59+
"& svg": {
60+
fontSize: 20,
61+
marginLeft: theme.spacing(1)
62+
}
63+
},
64+
preview: {
65+
marginLeft: theme.spacing(1),
66+
width: theme.spacing(2),
67+
height: theme.spacing(2)
68+
}
69+
});
70+
71+
export default withStyles(styles)(SubmitButton);

‎src/components/Main.js‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
33
import { withStyles, createStyles } from "@material-ui/core/styles";
44
import Container from "@material-ui/core/Container";
55
import Grid from "@material-ui/core/Grid";
6-
import Paper from "@material-ui/core/Paper";
76
import Typography from "@material-ui/core/Typography";
87
import PreferenceForm from "./PreferenceForm";
98
import Preview from "./Preview";
@@ -16,6 +15,10 @@ class Main extends React.Component {
1615
cid: "",
1716
preferences: {
1817
username: "",
18+
primaryColor: "#6446fa",
19+
secondaryColor: "#ff5274",
20+
theme: "light",
21+
font: "Roboto",
1922
codeStyle: "darcula"
2023
},
2124
justSaved: false,
@@ -104,26 +107,22 @@ class Main extends React.Component {
104107
{/* <div className={classes.main}> */}
105108
<Grid container spacing={3}>
106109
<Grid item sm={12} md={6}>
107-
<Paper className={classes.paper}>
108-
<PreferenceForm
109-
cid={this.state.cid}
110-
preferences={this.state.preferences}
111-
justSaved={this.state.justSaved}
112-
justLoaded={this.state.justLoaded}
113-
onCIDChange={this.handleCIDChange}
114-
onPrefChange={this.handlePrefChange}
115-
onLoad={this.handleLoad}
116-
onSave={this.handleSave}
117-
/>
118-
</Paper>
110+
<PreferenceForm
111+
cid={this.state.cid}
112+
preferences={this.state.preferences}
113+
justSaved={this.state.justSaved}
114+
justLoaded={this.state.justLoaded}
115+
onCIDChange={this.handleCIDChange}
116+
onPrefChange={this.handlePrefChange}
117+
onLoad={this.handleLoad}
118+
onSave={this.handleSave}
119+
/>
119120
</Grid>
120121
<Grid item sm={12} md={6}>
121-
<Paper className={classes.paper}>
122-
<Preview
123-
cid={this.state.cid}
124-
preferences={this.state.preferences}
125-
/>
126-
</Paper>
122+
<Preview
123+
cid={this.state.cid}
124+
preferences={this.state.preferences}
125+
/>
127126
</Grid>
128127
</Grid>
129128
{/* </div> */}
@@ -143,13 +142,10 @@ Main.propTypes = {
143142
const styles = theme =>
144143
createStyles({
145144
container: {
146-
marginTop: 64
145+
marginTop: theme.spacing(8)
147146
},
148147
main: {
149148
display: "flex"
150-
},
151-
paper: {
152-
padding: 32
153149
}
154150
});
155151

‎src/components/PreferenceForm.js‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import PropTypes from "prop-types";
33
import { withStyles, createStyles } from "@material-ui/core/styles";
4+
import Paper from "@material-ui/core/Paper";
45
import Typography from "@material-ui/core/Typography";
56
import TextField from "@material-ui/core/TextField";
67
import InputLabel from "@material-ui/core/InputLabel";
@@ -9,6 +10,7 @@ import MenuItem from "@material-ui/core/MenuItem";
910
import Divider from "@material-ui/core/Divider";
1011
import LoadIcon from "@material-ui/icons/Unarchive";
1112
import SaveIcon from "@material-ui/icons/Save";
13+
import ColorPicker from "./ColorPicker";
1214
import SubmitButton from "./SubmitButton";
1315
import styleOptions from "../utils/styleOptions";
1416
import PrefPropType from "../utils/prefPropType";
@@ -27,7 +29,7 @@ class PreferenceForm extends React.Component {
2729
const { preferences, justSaved, justLoaded, classes } = this.props;
2830

2931
return (
30-
<div className={classes.root}>
32+
<Paper className={classes.root}>
3133
<Typography variant="h5" className={classes.header}>
3234
Settings
3335
</Typography>
@@ -49,12 +51,36 @@ class PreferenceForm extends React.Component {
4951
<Divider className={classes.divider} />
5052
<form onSubmit={this.props.onSave}>
5153
<TextField
52-
label="username"
54+
label="Username"
5355
value={preferences.username}
5456
onChange={this.handlePrefChange("username")}
5557
fullWidth
5658
className={classes.input}
5759
/>
60+
<InputLabel shrink>Primary Color</InputLabel>
61+
<ColorPicker
62+
value={preferences.primaryColor}
63+
onChange={this.handlePrefChange("primaryColor")}
64+
/>
65+
<InputLabel shrink>Secondary Color</InputLabel>
66+
<ColorPicker
67+
value={preferences.secondaryColor}
68+
onChange={this.handlePrefChange("secondaryColor")}
69+
/>
70+
<InputLabel shrink>Theme</InputLabel>
71+
<Select
72+
value={preferences.theme}
73+
onChange={this.handlePrefChange("theme")}
74+
fullWidth
75+
className={classes.input}
76+
>
77+
<MenuItem key="light" value="light">
78+
light
79+
</MenuItem>
80+
<MenuItem key="dark" value="dark">
81+
dark
82+
</MenuItem>
83+
</Select>
5884
<InputLabel shrink>Code Style</InputLabel>
5985
<Select
6086
value={preferences.codeStyle}
@@ -75,7 +101,7 @@ class PreferenceForm extends React.Component {
75101
submitted={justSaved}
76102
/>
77103
</form>
78-
</div>
104+
</Paper>
79105
);
80106
}
81107
}
@@ -95,6 +121,7 @@ PreferenceForm.propTypes = {
95121
const styles = theme =>
96122
createStyles({
97123
root: {
124+
padding: theme.spacing(4),
98125
width: "100%"
99126
},
100127
header: {
@@ -103,11 +130,11 @@ const styles = theme =>
103130
marginBottom: theme.spacing(2)
104131
},
105132
divider: {
106-
marginTop: 32,
107-
marginBottom: 32
133+
marginTop: theme.spacing(4),
134+
marginBottom: theme.spacing(4)
108135
},
109136
input: {
110-
marginBottom: 16,
137+
marginBottom: theme.spacing(2),
111138
width: "100%",
112139
display: "block"
113140
}

‎src/components/Preview.js‎

Lines changed: 79 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { withStyles, createStyles } from "@material-ui/core/styles";
3+
import classnames from "classnames";
4+
import {
5+
withStyles,
6+
createStyles,
7+
MuiThemeProvider,
8+
createMuiTheme
9+
} from "@material-ui/core/styles";
10+
import Paper from "@material-ui/core/Paper";
411
import Typography from "@material-ui/core/Typography";
12+
import AppBar from "@material-ui/core/AppBar";
13+
import Toolbar from "@material-ui/core/Toolbar";
14+
import Container from "@material-ui/core/Container";
15+
import Button from "@material-ui/core/Button";
516
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
617
import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
718
import * as codeStyles from "react-syntax-highlighter/dist/esm/styles/hljs";
@@ -10,21 +21,65 @@ import PrefPropType from "../utils/prefPropType";
1021
SyntaxHighlighter.registerLanguage("javascript", js);
1122

1223
class Preview extends React.Component {
24+
getTheme = preferences => {
25+
return createMuiTheme({
26+
palette: {
27+
primary: {
28+
main: preferences.primaryColor
29+
},
30+
secondary: {
31+
main: preferences.secondaryColor
32+
}
33+
}
34+
});
35+
};
36+
1337
render() {
1438
const { preferences = {}, classes } = this.props;
39+
const theme = this.getTheme(preferences);
40+
const isDark = preferences.theme === "dark";
41+
1542
return (
16-
<div className={classes.root}>
17-
<Typography variant="h5" className={classes.header}>
18-
Preview
19-
</Typography>
20-
<div>One: {preferences.username}</div>
21-
<SyntaxHighlighter
22-
language="javascript"
23-
style={codeStyles[preferences.codeStyle]}
24-
>
25-
{codeSample}
26-
</SyntaxHighlighter>
27-
</div>
43+
<Paper
44+
className={classnames(
45+
classes.root,
46+
isDark ? classes.darkTheme : classes.lightTheme
47+
)}
48+
>
49+
<MuiThemeProvider theme={theme}>
50+
<AppBar position="relative">
51+
<Toolbar>
52+
<Typography variant="h5">Preview</Typography>
53+
</Toolbar>
54+
</AppBar>
55+
<Container className={classes.container}>
56+
<Typography variant="h6">
57+
Welcome {preferences.username}!
58+
</Typography>
59+
<Button
60+
color="primary"
61+
variant="contained"
62+
className={classes.button}
63+
>
64+
Primary
65+
</Button>
66+
<Button
67+
color="secondary"
68+
variant="contained"
69+
className={classes.button}
70+
>
71+
Secondary
72+
</Button>
73+
74+
<SyntaxHighlighter
75+
language="javascript"
76+
style={codeStyles[preferences.codeStyle]}
77+
>
78+
{codeSample}
79+
</SyntaxHighlighter>
80+
</Container>
81+
</MuiThemeProvider>
82+
</Paper>
2883
);
2984
}
3085
}
@@ -39,10 +94,17 @@ const styles = theme =>
3994
root: {
4095
width: "100%"
4196
},
42-
header: {
43-
borderBottom: `1px solid ${theme.palette.divider}`,
44-
paddingBottom: theme.spacing(1),
45-
marginBottom: theme.spacing(2)
97+
lightTheme: {},
98+
darkTheme: {
99+
backgroundColor: "#424242",
100+
color: "#fff"
101+
},
102+
container: {
103+
paddingTop: theme.spacing(3),
104+
paddingBottom: theme.spacing(3)
105+
},
106+
button: {
107+
margin: theme.spacing(1)
46108
}
47109
});
48110

0 commit comments

Comments
 (0)