Skip to content

Commit 5ebf8f5

Browse files
author
Mitchel Severe
committed
Styling changes for application
1 parent a2f38f5 commit 5ebf8f5

File tree

6 files changed

+132
-116
lines changed

6 files changed

+132
-116
lines changed

‎src/components/Dropzone.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,12 @@ class FileDrop extends React.Component {
4747
display: 'flex',
4848
justifyContent: 'center',
4949
alignItems: 'center',
50+
textAlign: 'center',
5051
color: '#999',
51-
fontSize: '48px',
52-
width: '1000px',
52+
fontSize: '44px',
53+
width: '800px',
5354
height: '600px',
55+
padding: '20px',
5456
border: '5px dashed #333',
5557
borderRadius: '4px',
5658
fontWeight: 'bold',

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 104 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { Fragment } from 'react';
22
import { withStyles } from '@material-ui/core/styles';
33
import Typography from '@material-ui/core/Typography';
4+
import KeyboardArrowRightRoundedIcon from '@material-ui/icons/KeyboardArrowRightRounded';
5+
import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded';
46
import List from '@material-ui/core/List';
57
import ListItem from '@material-ui/core/ListItem';
68
import ListItemText from '@material-ui/core/ListItemText';
@@ -16,7 +18,7 @@ import Button from '@material-ui/core/Button';
1618
import Tooltip from '@material-ui/core/Tooltip';
1719
import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces.ts';
1820

19-
const LeftColExpansionPanel = (props: any) => {
21+
const LeftColExpansionPanel: React.FC<Props> = (props) => {
2022
const {
2123
classes,
2224
focusComponent,
@@ -32,126 +34,124 @@ const LeftColExpansionPanel = (props: any) => {
3234
const { title, id, color, expanded, stateful, children } = component;
3335

3436
return (
35-
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="center">
36-
<Grid item xs={9}>
37-
<div
38-
className={classes.root}
39-
style={!expanded ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}
40-
>
41-
<Grid item xs={12} style={{ color: 'red' }}>
42-
<List style={{ color: 'red' }}>
43-
<ListItem
44-
button
45-
style={{ color: 'red' }}
46-
onClick={() => {
47-
// changeFocusComponent({ title });
48-
toggleExpansionPanel(id);
49-
}}
50-
>
51-
<ListItemText
52-
disableTypography
53-
className={classes.light}
54-
primary={
55-
<Typography type="body2" style={{ color, fontSize: '20px', paddingBottom: '0px' }}>
56-
{title}
57-
</Typography>
58-
}
59-
style={{ color }}
60-
/>
61-
</ListItem>
62-
</List>
63-
</Grid>
64-
{!expanded? (
65-
<div />
66-
) : (
67-
<Fragment>
68-
<div className={classes.margin}>
69-
<InputLabel
70-
className={classes.light}
71-
htmlFor='stateful'
72-
style={{
73-
color: '#D3D3D3',
74-
marginBottom: '10px',
75-
marginTop: '0px',
76-
marginLeft: '11px',
77-
padding: '0px',
78-
fontSize: '18px',
79-
}}
80-
>State?</InputLabel>
81-
<Switch
82-
checked={stateful}
83-
onChange={(e) => updateComponent(id, { stateful: e.target.checked })}
84-
value='stateful'
85-
color='primary'
86-
id='stateful'
87-
/>
88-
</div>
89-
<div className={classes.margin}>
90-
<InputLabel
91-
id="label"
92-
className={classes.light}
93-
style={{
94-
color: '#D3D3D3',
95-
marginBottom: '10px',
96-
marginTop: '0px',
97-
marginLeft: '11px',
98-
padding: '0px',
99-
fontSize: '18px',
100-
}}>
101-
Component Type</InputLabel>
102-
<Select
103-
id="select"
104-
value="class"
105-
className={classes.light}
106-
style={{
107-
color: '#D3D3D3',
108-
marginBottom: '10px',
109-
marginTop: '0px',
110-
marginLeft: '11px',
111-
padding: '0px',
112-
fontSize: '18px',
113-
}}>
114-
<MenuItem value="class">Class</MenuItem>
115-
<MenuItem value="functional">Functional</MenuItem>
116-
</Select>
117-
</div>
118-
<Button
119-
variant="text"
120-
size="small"
121-
color="default"
122-
aria-label="Delete"
123-
className={classes.margin}
124-
onClick={() => deleteComponent(id)
37+
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="center" style={{ position: 'relative', margin: '5px 0', width: '100%', backgroundColor: '#303147', borderRadius: '6px'}}>
38+
<Grid
39+
item xs={12}
40+
style={!expanded ? { padding: '0' } : { backgroundColor: color, borderRadius: '6px', color: '#fff', padding: '0 10px 20px' }}
41+
>
42+
<Grid item xs={12}>
43+
<List>
44+
<ListItem
45+
button
46+
onClick={() => {
47+
// changeFocusComponent({ title });
48+
toggleExpansionPanel(id);
49+
}}
50+
style={{ padding: '10px'}}
51+
>
52+
<ListItemText
53+
disableTypography
54+
className={classes.light}
55+
primary={
56+
<Typography type="body2" style={!expanded ? { display:'flex', alignItems: 'center', fontSize: '16px', color } : { display:'flex', alignItems: 'center', fontSize: '16px', color: '#fff' }}>
57+
{!expanded ? <KeyboardArrowRightRoundedIcon style={{ fontSize: '24px', marginRight: '5px', color }} /> : <KeyboardArrowDownRoundedIcon style={{ fontSize: '24px', marginRight: '5px', color: '#fff' }} />}
58+
{title}
59+
</Typography>
12560
}
61+
style={{ color }}
62+
/>
63+
</ListItem>
64+
</List>
65+
</Grid>
66+
{!expanded? (
67+
<div />
68+
) : (
69+
<Fragment>
70+
<div className={classes.margin}>
71+
<InputLabel
72+
htmlFor='stateful'
12673
style={{
127-
color: '#D3D3D3',
74+
color: '#fff',
12875
marginBottom: '10px',
12976
marginTop: '0px',
13077
marginLeft: '11px',
13178
padding: '0px',
79+
fontSize: '18px',
13280
}}
133-
>
134-
<DeleteIcon style={{ color: '#D3D3D3' }} />
135-
Delete Component
136-
</Button>
137-
</Fragment>
138-
)}
139-
</div>
140-
</Grid>
141-
142-
<Grid item xs={3}>
81+
>State?</InputLabel>
82+
<Switch
83+
checked={stateful}
84+
onChange={(e) => updateComponent(id, { stateful: e.target.checked })}
85+
value='stateful'
86+
color='primary'
87+
id='stateful'
88+
/>
89+
</div>
90+
<div className={classes.margin}>
91+
<InputLabel
92+
id="label"
93+
style={{
94+
color: '#fff',
95+
marginBottom: '10px',
96+
marginTop: '0px',
97+
marginLeft: '11px',
98+
padding: '0px',
99+
fontSize: '18px',
100+
}}>
101+
Component Type</InputLabel>
102+
<Select
103+
id="select"
104+
value="class"
105+
style={{
106+
color: '#fff',
107+
marginBottom: '10px',
108+
marginTop: '0px',
109+
marginLeft: '11px',
110+
padding: '0px',
111+
fontSize: '18px',
112+
}}>
113+
<MenuItem value="class">Class</MenuItem>
114+
<MenuItem value="functional">Functional</MenuItem>
115+
</Select>
116+
</div>
117+
<Button
118+
variant="text"
119+
size="small"
120+
color="default"
121+
aria-label="Delete"
122+
className={classes.margin}
123+
onClick={() => deleteComponent(id)
124+
}
125+
style={{
126+
color: '#fff',
127+
marginBottom: '10px',
128+
marginTop: '0px',
129+
marginLeft: '11px',
130+
padding: '0px',
131+
}}
132+
>
133+
<DeleteIcon style={{ color: '#fff' }} />
134+
Delete Component
135+
</Button>
136+
</Fragment>
137+
)}
143138
{/* checks to see if the current component pane is expanded, if the children of the current component has the id of any of the current components or if every component is currently not expanded */ }
144139
{expanded || children.find((childId: number) => childId === id) || components.every((comp) => !comp.expanded) ? (
145140
<div />
146141
) : (
147-
<Tooltip title="Add Child" aria-label="Add Child" placement="left">
142+
<Tooltip
143+
title="Add Child"
144+
aria-label="Add Child"
145+
placement="left"
146+
style={{ position: 'absolute', right: '0', top: '0', bottom: '0' }}
147+
>
148148
<IconButton
149149
aria-label="Add"
150150
onClick={() => {
151151
addChild({ title, childType: 'COMP' });
152152
}}
153153
>
154-
<AddIcon style={{ color, float: 'right' }} />
154+
<AddIcon style={{ color }} />
155155
</IconButton>
156156
</Tooltip>
157157
)}

‎src/containers/LeftContainer.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ class LeftContainer extends Component<Props, State> {
192192
.sort((b: ComponentState, a: ComponentState) => b.id - a.id) // sort by id value of comp
193193
.map((component: ComponentState, i: number) => (
194194
<LeftColExpansionPanel
195-
key={`component-${component.id}`}
195+
key={`component${component.id}`}
196196
index={i}
197197
id={component.id}
198198
component={component}
@@ -209,8 +209,8 @@ class LeftContainer extends Component<Props, State> {
209209
));
210210

211211
return (
212-
<div className="column left-container" style={{ backgroundColor: '#303030' }}>
213-
<Grid container spacing={8} align="stretch" direction="row" alignItems="center">
212+
<div className="column left-container" style={{ maxWidth: '300px'}}>
213+
<Grid container spacing={8} align="stretch" direction="row" alignItems="center" style={{ padding: '10px' }}>
214214
<Grid item xs={8}>
215215
<TextField ref={this.componentNameRef}
216216
id="title-input"
@@ -250,6 +250,9 @@ class LeftContainer extends Component<Props, State> {
250250
</Fab>
251251
</Grid>
252252
</Grid>
253+
<strong
254+
style={{ padding: '10px 10px 10px 5px', color: '#fff' }}
255+
>Components</strong>
253256
<div className="expansionPanel">
254257
{componentsExpansionPanel}
255258
</div>

‎src/containers/MainContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ class MainContainer extends Component<Props, State> {
102102
return (
103103
<div className="main-container">
104104
{modal}
105-
<div className="main" style={{ backgroundColor: '#262626' }}>
105+
<div className="main" style={{ backgroundColor: '#171725' }}>
106106
{main}
107107
</div>
108108
</div>

‎src/containers/RightContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const mapDispatchToProps = (dispatch: any) => ({
3333
const RightContainer: React.FC<Props> = (props) => {
3434
const { components, focusComponent, deleteProp, addProp, focusChild } = props;
3535
return (
36-
<div className="column right-container" style={{ backgroundColor: '#303030' }}>
36+
<div className="column right-container">
3737
<RightTabs
3838
components={components}
3939
focusComponent={focusComponent}

‎src/public/styles/style.css

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,15 @@ header {
4646
}
4747

4848
.column {
49-
width: 25%;
50-
background-color: #252526;
49+
background-color: #222337;
50+
box-shadow: 0 1px 5px rgba(150,150,150,.05), 0 1px 5px rgba(150,150,150,.05);
51+
padding: 10px;
52+
width: 100%;
53+
max-width: 400px;
54+
display: flex;
55+
flex-direction: column;
56+
position: relative;
57+
overflow-x: hidden;
5158
}
5259

5360
/* .column-right-export-btn {
@@ -70,16 +77,19 @@ LEFT COLUMN
7077
/////////////////////////////////////////////
7178
*/
7279

73-
.left {
80+
/* .left-container {
81+
82+
}
83+
84+
.right-container {
7485
padding: 10px;
7586
width: 20%;
7687
min-width: 310px;
7788
display: flex;
7889
flex-direction: column;
7990
position: relative;
8091
overflow-x: hidden;
81-
/* box-shadow: 0 5px 7px 2px rgba(0, 0, 0, 0.4); */
82-
}
92+
} */
8393

8494
/* .htmlPanel {
8595
position: absolute;
@@ -127,6 +137,7 @@ h1 {
127137
display: flex;
128138
flex-direction: column;
129139
flex: 1;
140+
width: calc(100% - 800px);
130141
/* overflow-x: hidden; */
131142
}
132143

0 commit comments

Comments
 (0)