Skip to content

Commit 639d41c

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #51 from tolgamizrakci/development
html element panel in progress
2 parents b4f4f9c + cc97a52 commit 639d41c

File tree

8 files changed

+310
-159
lines changed

8 files changed

+310
-159
lines changed

‎src/components/BottomPanel.jsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
3-
import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
4-
import RightTabs from './RightTabs.jsx';
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import {
4+
handleClose,
5+
deleteCompProp,
6+
addCompProp
7+
} from "../actions/components";
8+
import RightTabs from "./RightTabs.jsx";
9+
import { some } from "bluebird-lst";
510

6-
const IPC = require('electron').ipcRenderer;
11+
const IPC = require("electron").ipcRenderer;
712

813
const mapDispatchToProps = dispatch => ({
914
handleNotificationClose: () => dispatch(handleClose()),
1015
deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
11-
addProp: prop => dispatch(addCompProp(prop)),
16+
addProp: prop => dispatch(addCompProp(prop))
1217
});
1318

1419
const mapStateToProps = store => ({
1520
// successOpen: store.workspace.successOpen,
1621
// errorOpen: store.workspace.errorOpen,
1722
// appDir: store.workspace.appDir,
23+
focusChild: store.workspace.focusChild
1824
});
1925

2026
class BottomPanel extends Component {
@@ -24,7 +30,7 @@ class BottomPanel extends Component {
2430
// };
2531

2632
viewAppDir = () => {
27-
IPC.send('view_app_dir', this.props.appDir);
33+
IPC.send("view_app_dir", this.props.appDir);
2834
};
2935

3036
render() {
@@ -37,16 +43,18 @@ class BottomPanel extends Component {
3743
focusComponent,
3844
deleteProp,
3945
addProp,
46+
focusChild
4047
// rightColumnOpen
4148
} = this.props;
4249

4350
return (
44-
<div className="bottom-panel" style={{ width: '100%' }}>
51+
<div className="bottom-panel" style={{ width: "100%" }}>
4552
<RightTabs
4653
components={components}
4754
focusComponent={focusComponent}
4855
deleteProp={deleteProp}
4956
addProp={addProp}
57+
focusChild={focusChild}
5058
// rightColumnOpen={rightColumnOpen}
5159
/>
5260
{/* <Snackbars
@@ -63,5 +71,5 @@ class BottomPanel extends Component {
6371

6472
export default connect(
6573
mapStateToProps,
66-
mapDispatchToProps,
74+
mapDispatchToProps
6775
)(BottomPanel);

‎src/components/DataTable.jsx

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import React from 'react';
1+
import React from "react";
22
// import PropTypes from 'prop-types';
3-
import { withStyles } from '@material-ui/core/styles';
4-
import Table from '@material-ui/core/Table';
5-
import TableBody from '@material-ui/core/TableBody';
6-
import TableCell from '@material-ui/core/TableCell';
7-
import TableHead from '@material-ui/core/TableHead';
8-
import TableRow from '@material-ui/core/TableRow';
9-
import Paper from '@material-ui/core/Paper';
10-
import Button from '@material-ui/core/Button';
11-
import DeleteIcon from '@material-ui/icons/Delete';
12-
import { IconButton } from '@material-ui/core';
13-
3+
import { withStyles } from "@material-ui/core/styles";
4+
import Table from "@material-ui/core/Table";
5+
import TableBody from "@material-ui/core/TableBody";
6+
import TableCell from "@material-ui/core/TableCell";
7+
import TableHead from "@material-ui/core/TableHead";
8+
import TableRow from "@material-ui/core/TableRow";
9+
import Paper from "@material-ui/core/Paper";
10+
import Button from "@material-ui/core/Button";
11+
import DeleteIcon from "@material-ui/icons/Delete";
12+
import { IconButton } from "@material-ui/core";
1413

1514
const styles = theme => ({
1615
root: {
17-
width: '100%',
16+
width: "80%",
1817
marginTop: theme.spacing.unit * 3,
19-
overflowX: 'auto',
18+
overflowX: "auto"
2019
},
2120
table: {
22-
minWidth: 500,
23-
},
21+
minWidth: 500
22+
}
2423
});
2524

2625
/** **************************
@@ -29,9 +28,7 @@ const styles = theme => ({
2928
* ****************************** */
3029

3130
function dataTable(props) {
32-
const {
33-
classes, rowData, rowHeader, deletePropHandler,
34-
} = props;
31+
const { classes, rowData, rowHeader, deletePropHandler } = props;
3532

3633
const renderHeader = rowHeader.map((col, idx) => (
3734
<TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -41,20 +38,24 @@ function dataTable(props) {
4138
if (!row) return;
4239
// for some reason we must put each value in a div.
4340
return rowHeader.map((header, idx) => (
44-
<TableCell align={'center'} key={`td_${idx}`}>
41+
<TableCell align={"center"} key={`td_${idx}`}>
4542
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
46-
{/* {row[header]} */}
47-
{typeof row[header] === 'string' ? row[header] : row[header].toString()}
43+
{/* {row[header]} */}
44+
{typeof row[header] === "string" ? row[header] : row[header].toString()}
4845
</TableCell>
4946
));
5047
}
51-
//style={{height: 30}}
48+
//style={{height: 30}}
5249
const renderRows = rowData.map(row => (
5350
<TableRow key={`row-${row.id}`}>
5451
{renderRowCells(row)}
55-
<TableCell align={'center'} padding = {'none'} >
56-
<IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)} >
57-
<DeleteIcon/>
52+
<TableCell align={"center"} padding={"none"}>
53+
<IconButton
54+
color="default"
55+
fontSize="small"
56+
onClick={() => deletePropHandler(row.id)}
57+
>
58+
<DeleteIcon />
5859
</IconButton>
5960
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
6061
</TableCell>
@@ -63,11 +64,9 @@ function dataTable(props) {
6364

6465
return (
6566
<Paper className={classes.root}>
66-
<Table className={classes.table}
67-
selectable = {"true"}
68-
>
67+
<Table className={classes.table} selectable={"true"}>
6968
<TableHead>
70-
<TableRow >{renderHeader}</TableRow>
69+
<TableRow>{renderHeader}</TableRow>
7170
</TableHead>
7271
<TableBody>{renderRows}</TableBody>
7372
</Table>

‎src/components/HTMLComponentPanel.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,11 @@ function styles(theme) {
132132
htmlPanel: {
133133
width: "100%",
134134
height: "33%",
135-
flexGrow: 1,
135+
// flexGrow: 1,
136136
backgroundColor: "#333333",
137137
// position: "absolute",
138138
// marginTop: 10,
139-
bottom: 0
139+
bottom: "0px"
140140
// // marginRight: "20px",
141141
// // marginLeft: "20px",
142142
// // marginBottom: "20px",

‎src/components/HtmlAttr.jsx

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React, { Component, Fragment } from "react";
2+
import { connect } from "react-redux";
3+
import { withStyles } from "@material-ui/core/styles";
4+
import Chip from "@material-ui/core/Chip";
5+
import Avatar from "@material-ui/core/Avatar";
6+
import FormControl from "@material-ui/core/FormControl";
7+
import Grid from "@material-ui/core/Grid";
8+
import TextField from "@material-ui/core/TextField";
9+
import IconButton from "@material-ui/core/IconButton";
10+
import Select from "@material-ui/core/Select";
11+
import Switch from "@material-ui/core/Switch";
12+
import InputLabel from "@material-ui/core/InputLabel";
13+
import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline";
14+
import { addProp, deleteProp } from "../actions/components";
15+
import DataTable from "./DataTable.jsx";
16+
import htmlElements from "../utils/htmlElements.util";
17+
import UpdateIcon from "@material-ui/icons/Update";
18+
19+
const styles = theme => ({
20+
root: {
21+
display: "flex",
22+
justifyContent: "center",
23+
flexWrap: "wrap"
24+
},
25+
chip: {
26+
margin: theme.spacing.unit,
27+
color: "#eee",
28+
backgroundColor: "#333333"
29+
},
30+
column: {
31+
display: "inline-flex",
32+
alignItems: "baseline"
33+
},
34+
icon: {
35+
fontSize: "20px",
36+
color: "#eee",
37+
opacity: "0.7",
38+
transition: "all .2s ease",
39+
40+
"&:hover": {
41+
color: "red"
42+
}
43+
},
44+
cssLabel: {
45+
color: "white",
46+
47+
"&$cssFocused": {
48+
color: "green"
49+
}
50+
},
51+
cssFocused: {},
52+
input: {
53+
color: "#eee",
54+
marginBottom: "10px",
55+
width: "60%"
56+
},
57+
light: {
58+
color: "#eee"
59+
},
60+
avatar: {
61+
color: "#eee",
62+
fontSize: "10px"
63+
}
64+
});
65+
66+
const mapDispatchToProps = dispatch => ({
67+
addProp: ({ key, value, required, type }) =>
68+
dispatch(
69+
addProp({
70+
key,
71+
value,
72+
required,
73+
type
74+
})
75+
),
76+
deleteProp: propId => dispatch(deleteProp(propId))
77+
});
78+
79+
const mapStateToProps = store => ({
80+
focusComponent: store.workspace.focusComponent,
81+
focusChild: store.workspace.focusChild
82+
});
83+
84+
class HtmlAttr extends Component {
85+
state = {
86+
propKey: "",
87+
propValue: "",
88+
propRequired: false,
89+
propType: ""
90+
};
91+
92+
handleChange = event => {
93+
this.setState({
94+
[event.target.id]: event.target.value.trim()
95+
});
96+
};
97+
98+
render() {
99+
const {
100+
focusComponent,
101+
classes,
102+
deleteProp,
103+
addProp,
104+
focusChild
105+
} = this.props;
106+
107+
return (
108+
<Fragment>
109+
{/* {focusChild} */}
110+
<Grid container spacing={8} alignItems="baseline" align="stretch">
111+
<Grid item xs={6}>
112+
<TextField
113+
id="classNane"
114+
label="ClassName"
115+
margin="normal"
116+
autoFocus
117+
onChange={this.handleChange}
118+
value={this.state.propKey}
119+
/>
120+
<IconButton
121+
aria-label="Update"
122+
onClick={() => {
123+
// this.handleCreateHTMLChild("List");
124+
}}
125+
>
126+
<UpdateIcon />
127+
</IconButton>
128+
</Grid>
129+
<Grid item xs={6}>
130+
<TextField
131+
disabled
132+
id="filled-disabled"
133+
label="Current Value"
134+
defaultValue="image"
135+
style={{ background: "bcbcbc" }}
136+
className={classes.textField}
137+
margin="normal"
138+
variant="filled"
139+
/>
140+
</Grid>
141+
</Grid>
142+
</Fragment>
143+
);
144+
}
145+
}
146+
147+
export default connect(
148+
mapStateToProps,
149+
mapDispatchToProps
150+
)(withStyles(styles)(HtmlAttr));

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ function styles(theme) {
152152
return {
153153
root: {
154154
width: "100%",
155-
flexGrow: 1,
155+
// flexGrow: 1,
156156
marginTop: 10,
157157
backgroundColor: "#333333"
158158
},

0 commit comments

Comments
 (0)