Skip to content

Commit 6a021bb

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
Merge pull request #65 from ChristianEdwardPadilla/development
small changes to export modal styling and add html button styling
2 parents 1d6dce6 + 82f839d commit 6a021bb

File tree

3 files changed

+109
-96
lines changed

3 files changed

+109
-96
lines changed

‎src/components/HTMLComponentPanel.jsx

Lines changed: 46 additions & 43 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 = {
2624
HtmlComponentName: '',
2725
};
2826

29-
handleChange = event => {
27+
handleChange = (event) => {
3028
this.setState({
3129
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={() => {
6665
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={() => {
7676
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={() => {
8687
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={() => {
9698
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={() => {
106109
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: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,54 @@
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 => {
17-
const { classes, focusComponent, component, addChild, changeFocusComponent, selectableChildren } = props;
16+
const LeftColExpansionPanel = (props) => {
17+
const {
18+
classes,
19+
focusComponent,
20+
component,
21+
addChild,
22+
changeFocusComponent,
23+
selectableChildren,
24+
components,
25+
deleteComponent,
26+
} = props;
1827
const { title, id, color } = component;
1928

29+
// show a string of all direct parents. SO the user can gaze at it.
30+
const directParents = components
31+
.filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == id))
32+
.map(comp => comp.title)
33+
.join(',');
34+
2035
function isFocused() {
2136
return focusComponent.id == id ? 'focused' : '';
2237
}
2338

2439
return (
25-
<Grid
26-
container
27-
spacing={16}
28-
direction="row"
29-
justify="flex-start"
30-
alignItems="baseline"
31-
>
40+
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="baseline">
3241
<Grid item xs={9}>
3342
<div
3443
className={classes.root}
35-
style={
36-
!isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.22)" }
37-
}
44+
style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.22)' }}
3845
>
39-
<Grid item xs={12} style={{ color: "red" }}>
40-
<List style={{ color: "red" }}>
46+
<Grid item xs={12} style={{ color: 'red' }}>
47+
<List style={{ color: 'red' }}>
4148
<ListItem
4249
button
4350
component="a"
44-
style={{ color: "red" }}
51+
style={{ color: 'red' }}
4552
onClick={() => {
4653
changeFocusComponent({ title });
4754
}}
@@ -50,7 +57,7 @@ const LeftColExpansionPanel = props => {
5057
disableTypography
5158
className={classes.light}
5259
primary={
53-
<Typography type="body2" style={{ color: color }}>
60+
<Typography type="body2" style={{ color }}>
5461
{title}
5562
</Typography>
5663
}
@@ -68,21 +75,21 @@ const LeftColExpansionPanel = props => {
6875
{directParents ? (
6976
<p
7077
style={{
71-
marginLeft: "10px",
72-
color: "white",
73-
fontSize: "12px",
74-
marginTop: "1px"
78+
marginLeft: '10px',
79+
color: 'white',
80+
fontSize: '12px',
81+
marginTop: '1px',
7582
}}
7683
>
7784
Used in: {directParents}
7885
</p>
7986
) : (
8087
<p
8188
style={{
82-
marginLeft: "10px",
83-
color: "white",
84-
fontSize: "12px",
85-
marginTop: "1px"
89+
marginLeft: '10px',
90+
color: 'white',
91+
fontSize: '12px',
92+
marginTop: '1px',
8693
}}
8794
>
8895
Not used
@@ -96,16 +103,15 @@ const LeftColExpansionPanel = props => {
96103
aria-label="Delete"
97104
className={classes.margin}
98105
style={{
99-
marginLeft: "10px",
100-
marginTop: "5px",
101-
marginBottom: "10px"
106+
marginLeft: '10px',
107+
marginTop: '5px',
108+
marginBottom: '10px',
102109
}}
103110
// style={{ maxWidth: "20px" }}
104-
onClick={() =>
105-
deleteComponent({
106-
componentId: id,
107-
stateComponents: components
108-
})
111+
onClick={() => deleteComponent({
112+
componentId: id,
113+
stateComponents: components,
114+
})
109115
}
110116
>
111117
<DeleteIcon className={classes.extendedIcon} />
@@ -133,9 +139,9 @@ const LeftColExpansionPanel = props => {
133139
) : (
134140
<IconButton aria-label="Add">
135141
<AddIcon
136-
style={{ color, float: "right" }}
142+
style={{ color, float: 'right' }}
137143
onClick={() => {
138-
addChild({ title, childType: "COMP" });
144+
addChild({ title, childType: 'COMP' });
139145
}}
140146
/>
141147
<ListItemSecondaryAction>

‎src/components/SimpleModal.jsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,24 @@ import Modal from '@material-ui/core/Modal';
44
import { withStyles } from '@material-ui/core/styles';
55
import Typography from '@material-ui/core/Typography';
66
import Button from '@material-ui/core/Button';
7-
import Icon from '@material-ui/core/Icon';
7+
import IconButton from '@material-ui/core/IconButton';
8+
import CloseIcon from '@material-ui/icons/Close';
89

910
const styles = theme => ({
1011
paper: {
1112
position: 'absolute',
1213
width: 'auto',
1314
maxWidth: '500px',
15+
height: 'auto',
16+
maxHeight: '300px',
1417
backgroundColor: theme.palette.background.paper,
1518
boxShadow: theme.shadows[5],
1619
padding: '4%',
1720
minWidth: '500px',
21+
minHeight: '300px',
1822
},
1923
button: {
20-
marginTop: '8%',
24+
marginTop: '0%',
2125
height: 'auto',
2226
marginLeft: '3%',
2327
borderRadius: '4px',
@@ -54,9 +58,9 @@ const SimpleModal = (props) => {
5458
}}
5559
className={classes.paper}
5660
>
57-
<Icon
61+
<IconButton
62+
aria-label="Close"
5863
onClick={closeModal}
59-
className="closeIcon"
6064
style={{
6165
position: 'absolute',
6266
top: '2%',
@@ -65,8 +69,8 @@ const SimpleModal = (props) => {
6569
fontWeight: 'bold',
6670
}}
6771
>
68-
close
69-
</Icon>
72+
<CloseIcon />
73+
</IconButton>
7074
<Typography variant="title" id="modal-title">
7175
{message}
7276
</Typography>

0 commit comments

Comments
 (0)