Skip to content

Commit 65e1ff0

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #49 from tolgamizrakci/development
Development
2 parents b1e5d7c + ade12be commit 65e1ff0

File tree

10 files changed

+520
-361
lines changed

10 files changed

+520
-361
lines changed

‎src/components/MainContainerHeader.jsx renamed to ‎src/components/ApplicationActions.jsx

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
1-
import React from 'react';
1+
import React from "react";
22
// import PropTypes from 'prop-types';
3-
import Button from '@material-ui/core/Button';
4-
import ZoomInIcon from '@material-ui/icons/ZoomIn';
5-
import ZoomOutIcon from '@material-ui/icons/ZoomOut';
6-
import ImageSearchIcon from '@material-ui/icons/ImageSearch';
7-
import OpenWithIcon from '@material-ui/icons/OpenWith';
8-
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
9-
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
10-
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
11-
import GetAppIcon from '@material-ui/icons/GetApp';
12-
import { withStyles } from '@material-ui/core/styles';
13-
import Tooltip from '@material-ui/core/Tooltip';
3+
import Button from "@material-ui/core/Button";
4+
import ZoomInIcon from "@material-ui/icons/ZoomIn";
5+
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
6+
import ImageSearchIcon from "@material-ui/icons/ImageSearch";
7+
import OpenWithIcon from "@material-ui/icons/OpenWith";
8+
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
9+
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
10+
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
11+
import GetAppIcon from "@material-ui/icons/GetApp";
12+
import { withStyles } from "@material-ui/core/styles";
13+
import Tooltip from "@material-ui/core/Tooltip";
1414

1515
const styles = () => ({
1616
iconSmall: {
17-
fontSize: 10,
17+
fontSize: 10
1818
},
1919
button: {
2020
// borderRight: '1px solid grey',
21-
borderRadius: '0px',
22-
backgroundColor: '#212121',
21+
borderRadius: "0px",
22+
backgroundColor: "#212121",
2323

24-
'&:hover > span > svg': {
25-
color: '#1de9b6',
26-
transition: 'all .2s ease',
24+
"&:hover > span > svg": {
25+
color: "#1de9b6",
26+
transition: "all .2s ease"
2727
},
28-
'&:hover': {
29-
backgroundColor: '#212121',
28+
"&:hover": {
29+
backgroundColor: "#212121"
3030
},
31-
'&:disabled': {
32-
backgroundColor: '#424242',
31+
"&:disabled": {
32+
backgroundColor: "#424242"
3333
},
3434

35-
'&:disabled > span > svg': {
36-
color: '#eee',
37-
opacity: '0.3',
38-
},
35+
"&:disabled > span > svg": {
36+
color: "#eee",
37+
opacity: "0.3"
38+
}
3939
},
4040
light: {
41-
color: '#eee',
41+
color: "#eee"
4242
// opacity: '0.7',
4343
},
4444
dark: {
45-
color: '#1de9b6',
46-
},
45+
color: "#1de9b6"
46+
}
4747
});
4848

49-
50-
const MainContainerHeader = (props) => {
49+
const MainContainerHeader = props => {
5150
const {
5251
classes,
5352
image,
@@ -56,7 +55,7 @@ const MainContainerHeader = (props) => {
5655
totalComponents,
5756
showGenerateAppModal,
5857
collapseColumn,
59-
rightColumnOpen,
58+
rightColumnOpen
6059
} = props;
6160

6261
return (
@@ -74,14 +73,18 @@ const MainContainerHeader = (props) => {
7473
</Button>
7574
</div>
7675
</Tooltip>
77-
<Tooltip title={image ? 'update image' : 'upload image'}>
76+
<Tooltip title={image ? "update image" : "upload image"}>
7877
<div>
79-
<Button color="default" className={classes.button} onClick={updateImage}>
78+
<Button
79+
color="default"
80+
className={classes.button}
81+
onClick={updateImage}
82+
>
8083
<ImageSearchIcon className={classes.light} />
8184
</Button>
8285
</div>
8386
</Tooltip>
84-
<Tooltip title={'export'}>
87+
<Tooltip title={"export"}>
8588
<div>
8689
<Button
8790
color="default"

‎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: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ import LinkIcon from "@material-ui/icons/Link";
1111
import ListIcon from "@material-ui/icons/List";
1212
import ParagraphIcon from "@material-ui/icons/LocalParking";
1313
import theme from "../components/theme";
14-
import Typography from '@material-ui/core/Typography';
14+
import Typography from "@material-ui/core/Typography";
1515
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: 0
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)