Skip to content

Commit bdce2ab

Browse files
spincycle01ChristianEdwardPadilla
spincycle01
authored and
ChristianEdwardPadilla
committed
styling changed for the HTML component panel
2 parents a1a608c + c23a08f commit bdce2ab

15 files changed

+632
-179
lines changed

‎src/components/GrandchildRectangle.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@ class GrandchildRectangle extends Component {
1313
return this.props.components.find(comp => comp.id === this.props.childComponentId);
1414
}
1515

16+
setImage = imageSource => {
17+
//console.log("IMAGE SOURCE", imageSource);
18+
if (!imageSource) return;
19+
const image = new window.Image();
20+
image.src = imageSource;
21+
if (!image.height) return null;
22+
return image;
23+
};
24+
1625
render() {
1726
const {
1827
x,
@@ -28,6 +37,7 @@ class GrandchildRectangle extends Component {
2837
height,
2938
focusChild,
3039
components,
40+
imageSource,
3141
} = this.props;
3242

3343
// the Group is responsible for dragging of all children
@@ -46,6 +56,7 @@ class GrandchildRectangle extends Component {
4656
width={width}
4757
height={height}
4858
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
59+
fillPatternImage={imageSource ? this.setImage(imageSource) : null}
4960
// fill={color}
5061
// opacity={0.8}
5162
strokeWidth={4}
@@ -62,10 +73,19 @@ class GrandchildRectangle extends Component {
6273
components={components}
6374
componentId={componentId}
6475
childType={grandchild.childType}
76+
imageSource={
77+
grandchild.htmlElement == 'Image' && grandchild.HTMLInfo.Src ? grandchild.HTMLInfo.Src : null
78+
}
6579
childComponentName={grandchild.componentName}
6680
childComponentId={grandchild.childComponentId}
6781
focusChild={focusChild}
6882
childId={childId}
83+
// fillPatternImage={
84+
// grandchild.HTMLInfo.Src
85+
// ? this.setImage(grandchild.HTMLInfo.Src)
86+
// : null
87+
// }
88+
// test test
6989
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
7090
height={grandchild.position.height * (height / this.getPseudoChild().position.height)}
7191
x={

‎src/components/HTMLComponentPanel.jsx

Lines changed: 111 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
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 Typography from '@material-ui/core/Typography';
14-
import Grid from '@material-ui/core/Grid';
15-
import Paper from '@material-ui/core/Paper';
16-
import Tab from '@material-ui/core/Tab';
17-
import Chip from '@material-ui/core/Chip';
18-
import theme from './theme.ts';
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 Typography from "@material-ui/core/Typography";
14+
import Grid from "@material-ui/core/Grid";
15+
import Paper from "@material-ui/core/Paper";
16+
import Tab from "@material-ui/core/Tab";
17+
import Chip from "@material-ui/core/Chip";
18+
import theme from "./theme.ts";
1919

2020
// import {HTMLelements,getSize} from "../utils/htmlElements.util";
2121

2222
class HTMLComponentPanel extends Component {
2323
state = {
24-
HtmlComponentName: '',
24+
HtmlComponentName: ""
2525
};
2626

27-
handleChange = (event) => {
27+
handleChange = event => {
2828
this.setState({
29-
HtmlComponentName: event.target.value,
29+
HtmlComponentName: event.target.value
3030
});
3131
};
3232

33-
handleCreateHTMLChild = (type) => {
33+
handleCreateHTMLChild = type => {
3434
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
3535
};
3636

@@ -50,67 +50,127 @@ class HTMLComponentPanel extends Component {
5050
className="htmlicons"
5151
aria-label="Image"
5252
onClick={() => {
53-
this.handleCreateHTMLChild('Image');
53+
this.handleCreateHTMLChild("Image");
5454
}}
5555
>
56-
<ImageIcon style={{ color: '#e0e0e0' }} />
56+
<ImageIcon style={{ color: "#e0e0e0" }} />
5757
</IconButton>
58+
<Chip
59+
label="Image"
60+
className={classes.chip}
61+
variant="outlined"
62+
style={{
63+
color: "white",
64+
borderColor: "#424242",
65+
borderWidth: "0.5px"
66+
}}
67+
/>
5868
</div>
5969
</Grid>
6070
<Grid item xs={4}>
6171
<IconButton
6272
className="htmlicons"
6373
aria-label="Form"
6474
onClick={() => {
65-
this.handleCreateHTMLChild('Form');
75+
this.handleCreateHTMLChild("Form");
6676
}}
6777
>
68-
<FormIcon style={{ color: '#e0e0e0' }} />
78+
<FormIcon style={{ color: "#e0e0e0" }} />
6979
</IconButton>
80+
<Chip
81+
label="Form"
82+
className={classes.chip}
83+
variant="outlined"
84+
style={{
85+
color: "white",
86+
borderColor: "#424242",
87+
borderWidth: "0.5px"
88+
}}
89+
/>
7090
</Grid>
7191
<Grid item xs={4}>
7292
<IconButton
7393
className="htmlicons"
7494
aria-label="Button"
7595
onClick={() => {
76-
this.handleCreateHTMLChild('Button');
96+
this.handleCreateHTMLChild("Button");
7797
}}
7898
>
79-
<ButtonIcon style={{ color: '#e0e0e0' }} />
99+
<ButtonIcon style={{ color: "#e0e0e0" }} />
80100
</IconButton>
101+
<Chip
102+
label="Button"
103+
className={classes.chip}
104+
variant="outlined"
105+
style={{
106+
color: "white",
107+
borderColor: "#424242",
108+
borderWidth: "0.5px"
109+
}}
110+
/>
81111
</Grid>
82112
<Grid item xs={4}>
83113
<IconButton
84114
className="htmlicons"
85115
aria-label="Link"
86116
onClick={() => {
87-
this.handleCreateHTMLChild('Link');
117+
this.handleCreateHTMLChild("Link");
88118
}}
89119
>
90-
<LinkIcon style={{ color: '#e0e0e0' }} />
120+
<LinkIcon style={{ color: "#e0e0e0" }} />
91121
</IconButton>
122+
<Chip
123+
label="Link"
124+
className={classes.chip}
125+
variant="outlined"
126+
style={{
127+
color: "white",
128+
borderColor: "#424242",
129+
borderWidth: "0.5px"
130+
}}
131+
/>
92132
</Grid>
93133
<Grid item xs={4}>
94134
<IconButton
95135
className="htmlicons"
96136
aria-label="List"
97137
onClick={() => {
98-
this.handleCreateHTMLChild('List');
138+
this.handleCreateHTMLChild("List");
99139
}}
100140
>
101-
<ListIcon style={{ color: '#e0e0e0' }} />
141+
<ListIcon style={{ color: "#e0e0e0" }} />
102142
</IconButton>
143+
<Chip
144+
label="List"
145+
className={classes.chip}
146+
variant="outlined"
147+
style={{
148+
color: "white",
149+
borderColor: "#424242",
150+
borderWidth: "0.5px"
151+
}}
152+
/>
103153
</Grid>
104154
<Grid item xs={4}>
105155
<IconButton
106156
className="htmlicons"
107157
aria-label="Paragraph"
108158
onClick={() => {
109-
this.handleCreateHTMLChild('Paragraph');
159+
this.handleCreateHTMLChild("Paragraph");
110160
}}
111161
>
112-
<ParagraphIcon style={{ color: '#e0e0e0' }} />
162+
<ParagraphIcon style={{ color: "#e0e0e0" }} />
113163
</IconButton>
164+
<Chip
165+
label="Paragraph"
166+
className={classes.chip}
167+
variant="outlined"
168+
style={{
169+
color: "white",
170+
borderColor: "#424242",
171+
borderWidth: "0.5px"
172+
}}
173+
/>
114174
</Grid>
115175
</Grid>
116176
</Paper>
@@ -121,32 +181,34 @@ class HTMLComponentPanel extends Component {
121181
function styles(theme) {
122182
return {
123183
htmlPanel: {
124-
width: '100%',
125-
height: '30%',
126-
// backgroundColor: "#333333",
127-
borderStyle: 'solid',
128-
borderWidth: '0.5px',
129-
borderRadius: '1px',
130-
borderColor: '#424242',
131-
bottom: '0px',
132-
padding: '20px',
184+
width: "100%",
185+
height: "30%",
186+
backgroundColor: "#212121",
187+
borderStyle: "solid",
188+
borderWidth: "0.5px",
189+
borderRadius: "1px",
190+
borderColor: "#424242",
191+
bottom: "0px",
192+
padding: "10px",
193+
boxShadow: "0 6px 6px rgba(0,0,0,0.23)"
194+
// paddingBottom: "10px"
133195
},
134196
chip: {
135-
color: 'rgba(193, 66, 66, 0)',
197+
color: "rgba(193, 66, 66, 0)"
136198
},
137199
htmliconwrapper: {
138-
verticalAlign: 'baseline',
200+
verticalAlign: "baseline"
139201
},
140202
htmlicons: {
141-
color: '#ffffff',
203+
color: "#ffffff"
142204
},
143205
tabRoot: {
144-
textTransform: 'initial',
206+
textTransform: "initial",
145207
minWidth: 100,
146208
fontWeight: theme.typography.fontWeightRegular,
147209
// marginRight: theme.spacing.unit * 4,
148-
color: '#ffffff',
149-
},
210+
color: "#ffffff"
211+
}
150212
};
151213
}
152214

0 commit comments

Comments
 (0)