Skip to content

Commit 0737544

Browse files
tolgamizrakciChristianEdwardPadilla
tolgamizrakci
authored and
ChristianEdwardPadilla
committed
Merge pull request #51 from tolgamizrakci/development
html element panel in progress
2 parents 79a5d2a + e0e1dd4 commit 0737544

File tree

8 files changed

+303
-94
lines changed

8 files changed

+303
-94
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: 28 additions & 27 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
/** **************************
@@ -37,20 +36,24 @@ function dataTable(props) {
3736
if (!row) return;
3837
// for some reason we must put each value in a div.
3938
return rowHeader.map((header, idx) => (
40-
<TableCell align={'center'} key={`td_${idx}`}>
39+
<TableCell align={"center"} key={`td_${idx}`}>
4140
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
42-
{/* {row[header]} */}
43-
{typeof row[header] === 'string' ? row[header] : row[header].toString()}
41+
{/* {row[header]} */}
42+
{typeof row[header] === "string" ? row[header] : row[header].toString()}
4443
</TableCell>
4544
));
4645
}
47-
//style={{height: 30}}
46+
//style={{height: 30}}
4847
const renderRows = rowData.map(row => (
4948
<TableRow key={`row-${row.id}`}>
5049
{renderRowCells(row)}
51-
<TableCell align={'center'} padding = {'none'} >
52-
<IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)} >
53-
<DeleteIcon/>
50+
<TableCell align={"center"} padding={"none"}>
51+
<IconButton
52+
color="default"
53+
fontSize="small"
54+
onClick={() => deletePropHandler(row.id)}
55+
>
56+
<DeleteIcon />
5457
</IconButton>
5558
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
5659
</TableCell>
@@ -59,11 +62,9 @@ function dataTable(props) {
5962

6063
return (
6164
<Paper className={classes.root}>
62-
<Table className={classes.table}
63-
selectable = {"true"}
64-
>
65+
<Table className={classes.table} selectable={"true"}>
6566
<TableHead>
66-
<TableRow >{renderHeader}</TableRow>
67+
<TableRow>{renderHeader}</TableRow>
6768
</TableHead>
6869
<TableBody>{renderRows}</TableBody>
6970
</Table>

‎src/components/HTMLComponentPanel.jsx

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
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";
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';
1414
import Typography from '@material-ui/core/Typography';
15-
import Grid from "@material-ui/core/Grid";
16-
import Paper from "@material-ui/core/Paper";
15+
import Grid from '@material-ui/core/Grid';
16+
import Paper from '@material-ui/core/Paper';
1717
// import {HTMLelements,getSize} from "../utils/htmlElements.util";
1818

19-
2019
class HTMLComponentPanel extends Component {
2120
state = {
22-
HtmlComponentName: ""
21+
HtmlComponentName: '',
2322
};
2423

2524
handleChange = event => {
2625
this.setState({
27-
HtmlComponentName: event.target.value
26+
HtmlComponentName: event.target.value,
2827
});
2928
};
3029

@@ -36,10 +35,10 @@ class HTMLComponentPanel extends Component {
3635
render() {
3736
const { addChild } = this.props;
3837
return (
39-
<Paper className={"htmlPanelz"}>
38+
<Paper className={'htmlPanelz'}>
4039
<Typography variant="title" component="h3">
41-
Add HTML elements
42-
</Typography>
40+
Add HTML elements
41+
</Typography>
4342
{/* <TextField
4443
id="title-input"
4544
label="Add HTML component"
@@ -102,8 +101,24 @@ class HTMLComponentPanel extends Component {
102101
}
103102
}
104103

105-
function styles() {
106-
return {};
104+
function styles(theme) {
105+
return {
106+
htmlPanel: {
107+
width: '100%',
108+
height: '33%',
109+
// flexGrow: 1,
110+
backgroundColor: '#333333',
111+
// position: "absolute",
112+
// marginTop: 10,
113+
bottom: '0px',
114+
// // marginRight: "20px",
115+
// // marginLeft: "20px",
116+
// // marginBottom: "20px",
117+
// bottom: "0px",
118+
// left: "0px",
119+
// right: "0px"
120+
},
121+
};
107122
}
108123

109124
export default withStyles(styles)(HTMLComponentPanel);

‎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));

0 commit comments

Comments
 (0)