Skip to content

Commit c6fe306

Browse files
spincycle01spincycle01
committed
rolled back main container, removed applicdation actions, and added back mainContainerHeader. Currently, export exists on banner at the top and working with other functionality
2 parents 00d7d2b + 639d41c commit c6fe306

16 files changed

+723
-422
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: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +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';
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";
1113

1214
const styles = theme => ({
1315
root: {
14-
width: '100%',
16+
width: "80%",
1517
marginTop: theme.spacing.unit * 3,
16-
overflowX: 'auto',
18+
overflowX: "auto"
1719
},
1820
table: {
19-
minWidth: 700,
20-
},
21+
minWidth: 500
22+
}
2123
});
2224

2325
/** **************************
@@ -26,9 +28,7 @@ const styles = theme => ({
2628
* ****************************** */
2729

2830
function dataTable(props) {
29-
const {
30-
classes, rowData, rowHeader, deletePropHandler,
31-
} = props;
31+
const { classes, rowData, rowHeader, deletePropHandler } = props;
3232

3333
const renderHeader = rowHeader.map((col, idx) => (
3434
<TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -38,24 +38,33 @@ function dataTable(props) {
3838
if (!row) return;
3939
// for some reason we must put each value in a div.
4040
return rowHeader.map((header, idx) => (
41-
<TableCell key={`td_${idx}`}>
42-
<div>{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div>
41+
<TableCell align={"center"} key={`td_${idx}`}>
42+
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
43+
{/* {row[header]} */}
44+
{typeof row[header] === "string" ? row[header] : row[header].toString()}
4345
</TableCell>
4446
));
4547
}
46-
48+
//style={{height: 30}}
4749
const renderRows = rowData.map(row => (
4850
<TableRow key={`row-${row.id}`}>
4951
{renderRowCells(row)}
50-
<TableCell>
51-
<Button onClick={() => deletePropHandler(row.id)}>Delete</Button>
52+
<TableCell align={"center"} padding={"none"}>
53+
<IconButton
54+
color="default"
55+
fontSize="small"
56+
onClick={() => deletePropHandler(row.id)}
57+
>
58+
<DeleteIcon />
59+
</IconButton>
60+
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
5261
</TableCell>
5362
</TableRow>
5463
));
5564

5665
return (
5766
<Paper className={classes.root}>
58-
<Table className={classes.table}>
67+
<Table className={classes.table} selectable={"true"}>
5968
<TableHead>
6069
<TableRow>{renderHeader}</TableRow>
6170
</TableHead>

‎src/components/GrandchildRectangle.jsx

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import React, { Component } from 'react';
2-
import { Rect, Group } from 'react-konva';
1+
import React, { Component } from "react";
2+
import { Rect, Group } from "react-konva";
33

44
class GrandchildRectangle extends Component {
55
getComponentColor(componentId) {
6-
const color = this.props.components.find(comp => comp.id == componentId).color;
6+
const color = this.props.components.find(comp => comp.id == componentId)
7+
.color;
78
return color;
89
}
910

1011
getPseudoChild() {
11-
return this.props.components.find(comp => comp.id === this.props.childComponentId);
12+
return this.props.components.find(
13+
comp => comp.id === this.props.childComponentId
14+
);
1215
}
1316

1417
render() {
@@ -25,7 +28,7 @@ class GrandchildRectangle extends Component {
2528
width,
2629
height,
2730
focusChild,
28-
components,
31+
components
2932
} = this.props;
3033

3134
// the Group is responsible for dragging of all children
@@ -51,17 +54,21 @@ class GrandchildRectangle extends Component {
5154
scaleY={1}
5255
width={width}
5356
height={height}
54-
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
57+
stroke={
58+
childType === "COMP"
59+
? this.getComponentColor(childComponentId)
60+
: "#000000"
61+
}
5562
// fill={color}
5663
// opacity={0.8}
5764
strokeWidth={4}
5865
strokeScaleEnabled={false}
5966
draggable={false}
6067
/>
61-
{childType === 'COMP'
62-
&& components
68+
{childType === "COMP" &&
69+
components
6370
.find(comp => comp.title === childComponentName)
64-
.childrenArray.filter(child => child.childId !== '-1')
71+
.childrenArray.filter(child => child.childId !== "-1")
6572
.map((grandchild, i) => (
6673
<GrandchildRectangle
6774
key={i}
@@ -72,17 +79,21 @@ class GrandchildRectangle extends Component {
7279
childComponentId={grandchild.childComponentId}
7380
focusChild={focusChild}
7481
childId={childId}
75-
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
82+
width={
83+
grandchild.position.width *
84+
(width / this.getPseudoChild().position.width)
85+
}
7686
height={
77-
grandchild.position.height * (height / this.getPseudoChild().position.height)
87+
grandchild.position.height *
88+
(height / this.getPseudoChild().position.height)
7889
}
7990
x={
80-
(grandchild.position.x - this.getPseudoChild().position.x)
81-
* (width / this.getPseudoChild().position.width)
91+
(grandchild.position.x - this.getPseudoChild().position.x) *
92+
(width / this.getPseudoChild().position.width)
8293
}
8394
y={
84-
(grandchild.position.y - this.getPseudoChild().position.y)
85-
* (height / this.getPseudoChild().position.height)
95+
(grandchild.position.y - this.getPseudoChild().position.y) *
96+
(height / this.getPseudoChild().position.height)
8697
}
8798
/>
8899
))}

‎src/components/HTMLComponentPanel.jsx

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import Grid from "@material-ui/core/Grid";
1616
import Paper from "@material-ui/core/Paper";
1717
// import {HTMLelements,getSize} from "../utils/htmlElements.util";
1818

19-
2019
class HTMLComponentPanel extends Component {
2120
state = {
2221
HtmlComponentName: ""
@@ -33,12 +32,12 @@ class HTMLComponentPanel extends Component {
3332
};
3433

3534
render() {
36-
const { addChild } = this.props;
35+
const { addChild, classes } = this.props;
3736
return (
38-
<Paper className={"htmlPanelz"}>
39-
<Typography variant="title" component="h3">
40-
Add HTML elements
41-
</Typography>
37+
<div className={classes.htmlPanel}>
38+
<Typography variant="title" component="h4">
39+
Add HTML elements
40+
</Typography>
4241
{/* <TextField
4342
id="title-input"
4443
label="Add HTML component"
@@ -123,13 +122,29 @@ class HTMLComponentPanel extends Component {
123122
</IconButton>
124123
</Grid>
125124
</Grid>
126-
</Paper>
125+
</div>
127126
);
128127
}
129128
}
130129

131-
function styles() {
132-
return {};
130+
function styles(theme) {
131+
return {
132+
htmlPanel: {
133+
width: "100%",
134+
height: "33%",
135+
// flexGrow: 1,
136+
backgroundColor: "#333333",
137+
// position: "absolute",
138+
// marginTop: 10,
139+
bottom: "0px"
140+
// // marginRight: "20px",
141+
// // marginLeft: "20px",
142+
// // marginBottom: "20px",
143+
// bottom: "0px",
144+
// left: "0px",
145+
// right: "0px"
146+
}
147+
};
133148
}
134149

135150
export default withStyles(styles)(HTMLComponentPanel);

0 commit comments

Comments
 (0)