Skip to content

Commit 6e21d23

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
authored
Merge pull request #65 from ChristianEdwardPadilla/development
small changes to export modal styling and add html button styling
2 parents 914366b + a77fb51 commit 6e21d23

File tree

3 files changed

+111
-115
lines changed

3 files changed

+111
-115
lines changed

‎src/components/HTMLComponentPanel.jsx

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

22-
// test
23-
2422
class HTMLComponentPanel extends Component {
2523
state = {
26-
HtmlComponentName: ""
24+
HtmlComponentName: '',
2725
};
2826

29-
handleChange = event => {
27+
handleChange = (event) => {
3028
this.setState({
31-
HtmlComponentName: event.target.value
29+
HtmlComponentName: event.target.value,
3230
});
3331
};
3432

35-
handleCreateHTMLChild = type => {
33+
handleCreateHTMLChild = (type) => {
3634
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
3735
};
3836

@@ -52,61 +50,66 @@ class HTMLComponentPanel extends Component {
5250
className="htmlicons"
5351
aria-label="Image"
5452
onClick={() => {
55-
this.handleCreateHTMLChild("Image");
53+
this.handleCreateHTMLChild('Image');
5654
}}
5755
>
58-
<ImageIcon style={{ color: "#e0e0e0" }} />
56+
<ImageIcon style={{ color: '#e0e0e0' }} />
5957
</IconButton>
6058
</div>
6159
</Grid>
6260
<Grid item xs={4}>
6361
<IconButton
62+
className="htmlicons"
6463
aria-label="Form"
6564
onClick={() => {
66-
this.handleCreateHTMLChild("Form");
65+
this.handleCreateHTMLChild('Form');
6766
}}
6867
>
69-
<FormIcon />
68+
<FormIcon style={{ color: '#e0e0e0' }} />
7069
</IconButton>
7170
</Grid>
7271
<Grid item xs={4}>
7372
<IconButton
73+
className="htmlicons"
7474
aria-label="Button"
7575
onClick={() => {
76-
this.handleCreateHTMLChild("Button");
76+
this.handleCreateHTMLChild('Button');
7777
}}
7878
>
79-
<ButtonIcon />
79+
<ButtonIcon style={{ color: '#e0e0e0' }} />
8080
</IconButton>
8181
</Grid>
8282
<Grid item xs={4}>
8383
<IconButton
84+
className="htmlicons"
8485
aria-label="Link"
8586
onClick={() => {
86-
this.handleCreateHTMLChild("Link");
87+
this.handleCreateHTMLChild('Link');
8788
}}
8889
>
89-
<LinkIcon />
90+
<LinkIcon style={{ color: '#e0e0e0' }} />
9091
</IconButton>
9192
</Grid>
9293
<Grid item xs={4}>
9394
<IconButton
95+
className="htmlicons"
9496
aria-label="List"
9597
onClick={() => {
96-
this.handleCreateHTMLChild("List");
98+
this.handleCreateHTMLChild('List');
9799
}}
98100
>
99-
<ListIcon />
101+
<ListIcon style={{ color: '#e0e0e0' }} />
100102
</IconButton>
101103
</Grid>
102104
<Grid item xs={4}>
103105
<IconButton
106+
className="htmlicons"
104107
aria-label="Paragraph"
105108
onClick={() => {
106-
this.handleCreateHTMLChild("Paragraph");
109+
this.handleCreateHTMLChild('Paragraph');
107110
}}
108111
>
109-
<ParagraphIcon />
112+
<ParagraphIcon style={{ color: '#e0e0e0' }} />
110113
</IconButton>
111114
</Grid>
112115
</Grid>
@@ -118,32 +121,32 @@ class HTMLComponentPanel extends Component {
118121
function styles(theme) {
119122
return {
120123
htmlPanel: {
121-
width: "100%",
122-
height: "30%",
124+
width: '100%',
125+
height: '30%',
123126
// backgroundColor: "#333333",
124-
borderStyle: "solid",
125-
borderWidth: "0.5px",
126-
borderRadius: "1px",
127-
borderColor: "#424242",
128-
bottom: "0px",
129-
padding: "20px"
127+
borderStyle: 'solid',
128+
borderWidth: '0.5px',
129+
borderRadius: '1px',
130+
borderColor: '#424242',
131+
bottom: '0px',
132+
padding: '20px',
130133
},
131134
chip: {
132-
color: "rgba(193, 66, 66, 0)"
135+
color: 'rgba(193, 66, 66, 0)',
133136
},
134137
htmliconwrapper: {
135-
verticalAlign: "baseline"
138+
verticalAlign: 'baseline',
136139
},
137140
htmlicons: {
138-
color: "#ffffff"
141+
color: '#ffffff',
139142
},
140143
tabRoot: {
141-
textTransform: "initial",
144+
textTransform: 'initial',
142145
minWidth: 100,
143146
fontWeight: theme.typography.fontWeightRegular,
144147
// marginRight: theme.spacing.unit * 4,
145-
color: "#ffffff"
146-
}
148+
color: '#ffffff',
149+
},
147150
};
148151
}
149152

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 48 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import React, { Fragment } from "react";
2-
import { withStyles } from "@material-ui/core/styles";
3-
import Typography from "@material-ui/core/Typography";
4-
import List from "@material-ui/core/List";
5-
import ListItem from "@material-ui/core/ListItem";
6-
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
7-
import ListItemText from "@material-ui/core/ListItemText";
8-
import IconButton from "@material-ui/core/IconButton";
9-
import Grid from "@material-ui/core/Grid";
10-
import AddIcon from "@material-ui/icons/Add";
11-
import DeleteIcon from "@material-ui/icons/Delete";
12-
import Fab from "@material-ui/core/Fab";
1+
import React, { Fragment } from 'react';
2+
import { withStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
7+
import ListItemText from '@material-ui/core/ListItemText';
8+
import IconButton from '@material-ui/core/IconButton';
9+
import Grid from '@material-ui/core/Grid';
10+
import AddIcon from '@material-ui/icons/Add';
11+
import DeleteIcon from '@material-ui/icons/Delete';
12+
import Fab from '@material-ui/core/Fab';
1313

14-
import { openExpansionPanel } from "../utils/componentReducer.util";
14+
import { openExpansionPanel } from '../utils/componentReducer.util';
1515

16-
const LeftColExpansionPanel = props => {
16+
const LeftColExpansionPanel = (props) => {
1717
const {
1818
classes,
1919
focusComponent,
@@ -22,43 +22,33 @@ const LeftColExpansionPanel = props => {
2222
changeFocusComponent,
2323
selectableChildren,
2424
components,
25-
deleteComponent
25+
deleteComponent,
2626
} = props;
2727
const { title, id, color } = component;
2828

2929
// show a string of all direct parents. SO the user can gaze at it.
3030
const directParents = components
31-
.filter(comp =>
32-
comp.childrenArray.some(kiddy => kiddy.childComponentId == id)
33-
)
31+
.filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == id))
3432
.map(comp => comp.title)
35-
.join(",");
33+
.join(',');
3634

3735
function isFocused() {
38-
return focusComponent.id == id ? "focused" : "";
36+
return focusComponent.id == id ? 'focused' : '';
3937
}
4038

4139
return (
42-
<Grid
43-
container
44-
spacing={16}
45-
direction="row"
46-
justify="flex-start"
47-
alignItems="baseline"
48-
>
40+
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="baseline">
4941
<Grid item xs={9}>
5042
<div
5143
className={classes.root}
52-
style={
53-
!isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.22)" }
54-
}
44+
style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.22)' }}
5545
>
56-
<Grid item xs={12} style={{ color: "red" }}>
57-
<List style={{ color: "red" }}>
46+
<Grid item xs={12} style={{ color: 'red' }}>
47+
<List style={{ color: 'red' }}>
5848
<ListItem
5949
button
6050
component="a"
61-
style={{ color: "red" }}
51+
style={{ color: 'red' }}
6252
onClick={() => {
6353
changeFocusComponent({ title });
6454
}}
@@ -67,7 +57,7 @@ const LeftColExpansionPanel = props => {
6757
disableTypography
6858
className={classes.light}
6959
primary={
70-
<Typography type="body2" style={{ color: color }}>
60+
<Typography type="body2" style={{ color }}>
7161
{title}
7262
</Typography>
7363
}
@@ -85,21 +75,21 @@ const LeftColExpansionPanel = props => {
8575
{directParents ? (
8676
<p
8777
style={{
88-
marginLeft: "10px",
89-
color: "white",
90-
fontSize: "12px",
91-
marginTop: "1px"
78+
marginLeft: '10px',
79+
color: 'white',
80+
fontSize: '12px',
81+
marginTop: '1px',
9282
}}
9383
>
9484
Used in: {directParents}
9585
</p>
9686
) : (
9787
<p
9888
style={{
99-
marginLeft: "10px",
100-
color: "white",
101-
fontSize: "12px",
102-
marginTop: "1px"
89+
marginLeft: '10px',
90+
color: 'white',
91+
fontSize: '12px',
92+
marginTop: '1px',
10393
}}
10494
>
10595
Not used
@@ -113,16 +103,15 @@ const LeftColExpansionPanel = props => {
113103
aria-label="Delete"
114104
className={classes.margin}
115105
style={{
116-
marginLeft: "10px",
117-
marginTop: "5px",
118-
marginBottom: "10px"
106+
marginLeft: '10px',
107+
marginTop: '5px',
108+
marginBottom: '10px',
119109
}}
120110
// style={{ maxWidth: "20px" }}
121-
onClick={() =>
122-
deleteComponent({
123-
componentId: id,
124-
stateComponents: components
125-
})
111+
onClick={() => deleteComponent({
112+
componentId: id,
113+
stateComponents: components,
114+
})
126115
}
127116
>
128117
<DeleteIcon className={classes.extendedIcon} />
@@ -150,9 +139,9 @@ const LeftColExpansionPanel = props => {
150139
) : (
151140
<IconButton aria-label="Add">
152141
<AddIcon
153-
style={{ color, float: "right" }}
142+
style={{ color, float: 'right' }}
154143
onClick={() => {
155-
addChild({ title, childType: "COMP" });
144+
addChild({ title, childType: 'COMP' });
156145
}}
157146
/>
158147
</IconButton>
@@ -165,17 +154,17 @@ const LeftColExpansionPanel = props => {
165154
function styles(theme) {
166155
return {
167156
root: {
168-
width: "100%",
157+
width: '100%',
169158
// flexGrow: 1,
170159
marginTop: 10,
171-
backgroundColor: "#333333"
160+
backgroundColor: '#333333',
172161
},
173162
light: {
174-
color: "#eee",
175-
"&:hover": {
176-
color: "#1de9b6"
177-
}
178-
}
163+
color: '#eee',
164+
'&:hover': {
165+
color: '#1de9b6',
166+
},
167+
},
179168
};
180169
}
181170

0 commit comments

Comments
 (0)