Skip to content

Commit dda6a38

Browse files
Tolga MizrakciTolga Mizrakci
Tolga Mizrakci
authored and
Tolga Mizrakci
committed
adding htmlcomp panel
1 parent 9cdc8fe commit dda6a38

File tree

3 files changed

+190
-77
lines changed

3 files changed

+190
-77
lines changed

‎src/components/HTMLComponentPanel.jsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import { compose } from "redux";
4+
import { withStyles } from "@material-ui/core/styles";
5+
import TextField from "@material-ui/core/TextField";
6+
import IconButton from "@material-ui/core/IconButton";
7+
import ImageIcon from "@material-ui/icons/Image";
8+
import FormIcon from "@material-ui/icons/Description";
9+
import ButtonIcon from "@material-ui/icons/EditAttributes";
10+
import LinkIcon from "@material-ui/icons/Link";
11+
import ListIcon from "@material-ui/icons/List";
12+
import ParagraphIcon from "@material-ui/icons/LocalParking";
13+
import theme from "../components/theme";
14+
15+
import Grid from "@material-ui/core/Grid";
16+
import Paper from "@material-ui/core/Paper";
17+
18+
class HTMLComponentPanel extends Component {
19+
render() {
20+
return (
21+
<Paper className={"htmlPanelz"}>
22+
<TextField
23+
id="title-input"
24+
label="Add HTML component"
25+
placeholder="Name of Component"
26+
margin="normal"
27+
autoFocus
28+
// onChange={this.handleChange}
29+
// onKeyPress={ev => {
30+
// if (ev.key === "Enter") {
31+
// // Do code here
32+
// this.handleAddComponent();
33+
// ev.preventDefault();
34+
// }
35+
// }}
36+
// value={componentName}
37+
// name="componentName"
38+
// className={classes.light}
39+
// InputProps={{
40+
// className: classes.input
41+
// }}
42+
// InputLabelProps={{
43+
// className: classes.input
44+
// }}
45+
/>
46+
<Grid container spacing={24} alignItems="baseline" align="stretch">
47+
<Grid item xs={4}>
48+
<IconButton aria-label="Image">
49+
<ImageIcon />
50+
</IconButton>
51+
</Grid>
52+
<Grid item xs={4}>
53+
<IconButton aria-label="Form">
54+
<FormIcon />
55+
</IconButton>
56+
</Grid>
57+
<Grid item xs={4}>
58+
<IconButton aria-label="Button">
59+
<ButtonIcon />
60+
</IconButton>
61+
</Grid>
62+
<Grid item xs={4}>
63+
<IconButton aria-label="Link">
64+
<LinkIcon />
65+
</IconButton>
66+
</Grid>
67+
<Grid item xs={4}>
68+
<IconButton aria-label="List">
69+
<ListIcon />
70+
</IconButton>
71+
</Grid>
72+
<Grid item xs={4}>
73+
<IconButton aria-label="List">
74+
<ParagraphIcon />
75+
</IconButton>
76+
</Grid>
77+
</Grid>
78+
</Paper>
79+
);
80+
}
81+
}
82+
83+
function styles() {
84+
return {};
85+
}
86+
87+
export default withStyles(styles)(HTMLComponentPanel);

‎src/containers/LeftContainer.jsx

Lines changed: 92 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,105 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
3-
import { compose } from 'redux';
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import { compose } from "redux";
44
// import PropTypes from 'prop-types';
5-
import FormControl from '@material-ui/core/FormControl';
6-
import TextField from '@material-ui/core/TextField';
7-
import Button from '@material-ui/core/Button';
8-
import AddIcon from '@material-ui/icons/Add';
9-
import Grid from '@material-ui/core/Grid';
10-
import { withStyles } from '@material-ui/core/styles';
11-
import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
5+
import FormControl from "@material-ui/core/FormControl";
6+
import TextField from "@material-ui/core/TextField";
7+
import Button from "@material-ui/core/Button";
8+
import AddIcon from "@material-ui/icons/Add";
9+
import Grid from "@material-ui/core/Grid";
10+
import { withStyles } from "@material-ui/core/styles";
11+
import LeftColExpansionPanel from "../components/LeftColExpansionPanel.jsx";
12+
import HTMLComponentPanel from "../components/HTMLComponentPanel.jsx";
13+
1214
// import createModal from '../utils/createModal.util';
13-
import * as actions from '../actions/components';
15+
import * as actions from "../actions/components";
16+
17+
function styles() {
18+
return {
19+
cssLabel: {
20+
color: "white",
21+
22+
"&$cssFocused": {
23+
color: "green"
24+
}
25+
},
26+
cssFocused: {},
27+
input: {
28+
color: "#fff",
29+
opacity: "0.7",
30+
marginBottom: "10px"
31+
},
32+
underline: {
33+
color: "white",
34+
"&::before": {
35+
color: "white"
36+
}
37+
},
38+
button: {
39+
color: "#fff",
40+
41+
"&:disabled": {
42+
color: "grey"
43+
}
44+
},
45+
clearButton: {
46+
top: "96%",
47+
position: "sticky!important",
48+
zIndex: "1",
49+
50+
"&:disabled": {
51+
color: "grey",
52+
backgroundColor: "#424242"
53+
}
54+
}
55+
};
56+
}
1457

1558
const mapDispatchToProps = dispatch => ({
1659
addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
1760
updateComponent: ({
18-
id, index, newParentId = null, color = null, stateful = null,
19-
}) => dispatch(
20-
actions.updateComponent({
21-
id,
22-
index,
23-
newParentId,
24-
color,
25-
stateful,
26-
}),
27-
),
61+
id,
62+
index,
63+
newParentId = null,
64+
color = null,
65+
stateful = null
66+
}) =>
67+
dispatch(
68+
actions.updateComponent({
69+
id,
70+
index,
71+
newParentId,
72+
color,
73+
stateful
74+
})
75+
),
2876
// deleteComponent: ({ index, id, parentIds }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
2977
// moveToBottom: componentId => dispatch(actions.moveToBottom(componentId)),
3078
// moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
3179
// openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
3280
// deleteAllData: () => dispatch(actions.deleteAllData()),
3381
addChild: ({ title }) => dispatch(actions.addChild({ title })),
34-
changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
35-
changeFocusChild: ({ title, childId }) => dispatch(actions.changeFocusChild({ title, childId })),
82+
changeFocusComponent: ({ title }) =>
83+
dispatch(actions.changeFocusComponent({ title })),
84+
changeFocusChild: ({ title, childId }) =>
85+
dispatch(actions.changeFocusChild({ title, childId }))
3686
});
3787

3888
class LeftContainer extends Component {
3989
state = {
40-
componentName: '',
90+
componentName: ""
4191
};
4292

43-
handleChange = (event) => {
93+
handleChange = event => {
4494
this.setState({
45-
[event.target.name]: event.target.value,
95+
[event.target.name]: event.target.value
4696
});
4797
};
4898

4999
handleAddComponent = () => {
50100
this.props.addComponent({ title: this.state.componentName });
51101
this.setState({
52-
componentName: '',
102+
componentName: ""
53103
});
54104
};
55105

@@ -64,7 +114,7 @@ class LeftContainer extends Component {
64114
addChild,
65115
changeFocusComponent,
66116
changeFocusChild,
67-
selectableChildren,
117+
selectableChildren
68118
} = this.props;
69119
const { componentName } = this.state;
70120

@@ -93,13 +143,13 @@ class LeftContainer extends Component {
93143
<Grid item xs={10}>
94144
<TextField
95145
id="title-input"
96-
label="Add a new component"
97-
placeholder="AppComponent"
146+
label="Add class component"
147+
placeholder="Name of component"
98148
margin="normal"
99149
autoFocus
100150
onChange={this.handleChange}
101-
onKeyPress={(ev) => {
102-
if (ev.key === 'Enter') {
151+
onKeyPress={ev => {
152+
if (ev.key === "Enter") {
103153
// Do code here
104154
this.handleAddComponent();
105155
ev.preventDefault();
@@ -109,10 +159,10 @@ class LeftContainer extends Component {
109159
name="componentName"
110160
className={classes.light}
111161
InputProps={{
112-
className: classes.input,
162+
className: classes.input
113163
}}
114164
InputLabelProps={{
115-
className: classes.input,
165+
className: classes.input
116166
}}
117167
/>
118168
</Grid>
@@ -131,6 +181,12 @@ class LeftContainer extends Component {
131181
</Grid>
132182
</Grid>
133183
<div className="expansionPanel">{componentsExpansionPanel}</div>
184+
<div className={"htmlPanel"}>
185+
<HTMLComponentPanel
186+
focusComponent={focusComponent}
187+
addChild={addChild}
188+
/>
189+
</div>
134190
</div>
135191
);
136192
}
@@ -140,8 +196,8 @@ export default compose(
140196
withStyles(styles),
141197
connect(
142198
null,
143-
mapDispatchToProps,
144-
),
199+
mapDispatchToProps
200+
)
145201
)(LeftContainer);
146202

147203
// LeftContainer.propTypes = {
@@ -157,44 +213,3 @@ export default compose(
157213
// totalComponents: PropTypes.number.isRequired,
158214
// classes: PropTypes.object,
159215
// };
160-
161-
function styles() {
162-
return {
163-
cssLabel: {
164-
color: 'white',
165-
166-
'&$cssFocused': {
167-
color: 'green',
168-
},
169-
},
170-
cssFocused: {},
171-
input: {
172-
color: '#fff',
173-
opacity: '0.7',
174-
marginBottom: '10px',
175-
},
176-
underline: {
177-
color: 'white',
178-
'&::before': {
179-
color: 'white',
180-
},
181-
},
182-
button: {
183-
color: '#fff',
184-
185-
'&:disabled': {
186-
color: 'grey',
187-
},
188-
},
189-
clearButton: {
190-
top: '96%',
191-
position: 'sticky!important',
192-
zIndex: '1',
193-
194-
'&:disabled': {
195-
color: 'grey',
196-
backgroundColor: '#424242',
197-
},
198-
},
199-
};
200-
}

‎src/public/styles/style.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,17 @@ LEFT COLUMN
7676
flex-direction: column;
7777
}
7878

79+
.htmlPanel {
80+
position: absolute;
81+
bottom: 0px;
82+
margin-right: 20px;
83+
margin-left: 20px;
84+
margin-bottom: 20px;
85+
left: 0px;
86+
right: 0px;
87+
width: 16%;
88+
}
89+
7990
.component-input {
8091
bottom: 2.8%;
8192
}

0 commit comments

Comments
 (0)