Skip to content

Commit a157dde

Browse files
ibeeliotibeeliot
authored
Merge pull request #26 from tonyito/mvp
Refactored Component Cards
2 parents 742af53 + bd84335 commit a157dde

File tree

3 files changed

+167
-93
lines changed

3 files changed

+167
-93
lines changed

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 159 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import AddIcon from '@material-ui/icons/Add';
1010
import DeleteIcon from '@material-ui/icons/Delete';
1111
import Button from '@material-ui/core/Button';
1212
import Tooltip from '@material-ui/core/Tooltip';
13+
import Collapse from '@material-ui/core/Collapse';
1314
import Switch from '@material-ui/core/Switch'; // for state/class toggling
1415
import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
1516

@@ -21,14 +22,18 @@ interface LeftColExpPanPropsInt extends PropsInt {
2122
addChild(arg: { title: string; childType: string; HTMLInfo?: object }): void;
2223
changeFocusComponent(arg: { title: string }): void;
2324
selectableChildren: number[];
24-
deleteComponent(arg: { componentId: number; stateComponents: ComponentsInt }): void;
25+
deleteComponent(arg: {
26+
componentId: number;
27+
stateComponents: ComponentsInt;
28+
}): void;
2529
toggleComponentState(arg: number): void;
2630
toggleComponentClass(arg: number): void;
2731
}
2832

29-
interface TypographyProps {
30-
type: string;
31-
}
33+
//interface created but never used
34+
// interface TypographyProps {
35+
// type: string;
36+
// }
3237

3338
// TODO: ASSIGN SPECIFIC TYPING TO INCOMING PROPS (REMOVE ANY)
3439
const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
@@ -42,7 +47,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
4247
selectableChildren,
4348
deleteComponent,
4449
toggleComponentState,
45-
toggleComponentClass
50+
toggleComponentClass,
4651
} = props;
4752

4853
const { title, id, color, stateful, classBased } = component;
@@ -56,7 +61,13 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
5661
const focusedToggle = isFocused() === 'focused' ? true : false;
5762

5863
return (
59-
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="center">
64+
<Grid
65+
container
66+
spacing={16}
67+
direction="row"
68+
justify="flex-start"
69+
alignItems="center"
70+
>
6071
<Grid item xs={9}>
6172
<div
6273
className={classes.root}
@@ -65,112 +76,166 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
6576
focusedToggle ? { boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)' } : {}
6677
}
6778
>
68-
{/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED */}
69-
<Grid item xs={12} style={{ color: 'red', backgroundColor: color }}>
70-
<List style={{ color: 'red' }}>
71-
<ListItem
72-
// button // commented out to disable materialUI hover shading effect. TBD if any adverse effects occur
73-
style={{ color: 'red' }}
74-
onClick={() => {
75-
changeFocusComponent({ title });
76-
}}
77-
>
78-
<ListItemText
79-
disableTypography
80-
className={classes.light}
81-
primary={
82-
<div>
83-
<Typography
84-
//type='body2'
85-
style={{
86-
color: '#fff',
87-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',
88-
fontSize: '1.40rem'
89-
}}
90-
>
91-
{title}
92-
</Typography>
93-
94-
{/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT
95-
96-
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
97-
*/}
98-
99-
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
100-
{focusedToggle ? (
101-
<InputLabel
102-
htmlFor="stateful"
79+
{/* {This is the component responsible for the collapsing transition animation for each component card} */}
80+
<Collapse
81+
in={focusedToggle}
82+
collapsedHeight={70} //The type for the Collapse component is asking for a string, but if you put in a string and not a number, the component itself breaks.
83+
>
84+
{/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED. */}
85+
<Grid
86+
item
87+
xs={12}
88+
style={{
89+
color: 'red',
90+
backgroundColor: color,
91+
borderRadius: '10px',
92+
}}
93+
>
94+
<List style={{ color: 'red' }}>
95+
<ListItem
96+
// button // commented out to disable materialUI hover shading effect. TBD if any adverse effects occur
97+
style={{ color: 'red' }}
98+
onClick={() => {
99+
changeFocusComponent({ title });
100+
}}
101+
>
102+
<ListItemText
103+
disableTypography
104+
className={classes.light}
105+
primary={
106+
<div>
107+
<Typography
108+
//type='body2'
103109
style={{
104110
color: '#fff',
105-
marginBottom: '10px',
106-
marginTop: '0px',
107-
marginLeft: '11px',
108-
padding: '0px',
109-
fontSize: '18px',
110-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
111+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
112+
fontSize: '1.40rem',
111113
}}
112114
>
113-
State?
114-
</InputLabel>
115-
) : (
116-
''
117-
)}
115+
{title}
116+
</Typography>
118117

119-
{focusedToggle ? (
120-
<Switch
121-
checked={stateful}
122-
onChange={e => {
123-
toggleComponentState(id);
124-
changeFocusComponent({ title });
125-
}}
126-
value="stateful"
127-
color="primary"
128-
// id={props.id.toString()}
129-
/>
130-
) : (
131-
''
132-
)}
133-
<div>
134-
{/* LABEL/TOGGLE(SWITCH) FOR CLASS BASED */}
118+
{/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT
119+
120+
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
121+
*/}
122+
123+
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
135124
{focusedToggle ? (
136125
<InputLabel
137-
htmlFor="classBased"
126+
htmlFor="stateful"
138127
style={{
139128
color: '#fff',
140129
marginBottom: '10px',
141130
marginTop: '0px',
142131
marginLeft: '11px',
143132
padding: '0px',
144-
fontSize: '18px'
133+
fontSize: '18px',
134+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
145135
}}
146136
>
147-
Class?
137+
State?
148138
</InputLabel>
149139
) : (
150140
''
151141
)}
142+
152143
{focusedToggle ? (
153144
<Switch
154-
checked={classBased}
145+
checked={stateful}
155146
onChange={e => {
156-
toggleComponentClass(id);
147+
toggleComponentState(id);
157148
changeFocusComponent({ title });
158149
}}
159-
value="classBased"
150+
value="stateful"
160151
color="primary"
152+
// id={props.id.toString()}
161153
/>
162154
) : (
163155
''
164156
)}
157+
<div>
158+
{/* LABEL/TOGGLE(SWITCH) FOR CLASS BASED */}
159+
{focusedToggle ? (
160+
<InputLabel
161+
htmlFor="classBased"
162+
style={{
163+
color: '#fff',
164+
marginBottom: '10px',
165+
marginTop: '0px',
166+
marginLeft: '11px',
167+
padding: '0px',
168+
fontSize: '18px',
169+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
170+
}}
171+
>
172+
Class?
173+
</InputLabel>
174+
) : (
175+
''
176+
)}
177+
{focusedToggle ? (
178+
<Switch
179+
checked={classBased}
180+
onChange={e => {
181+
toggleComponentClass(id);
182+
changeFocusComponent({ title });
183+
}}
184+
value="classBased"
185+
color="primary"
186+
/>
187+
) : (
188+
''
189+
)}
190+
{focusedToggle && component.id !== 1 ? (
191+
<Button
192+
variant="text"
193+
size="small"
194+
color="default"
195+
aria-label="Delete"
196+
className={classes.margin}
197+
onClick={() =>
198+
deleteComponent({
199+
componentId: id,
200+
stateComponents: components,
201+
})
202+
}
203+
style={{
204+
color: 'white',
205+
marginBottom: '0px',
206+
marginTop: '4px',
207+
}}
208+
>
209+
<DeleteIcon
210+
style={{
211+
color: '#b30000',
212+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
213+
}}
214+
/>
215+
<span
216+
style={{
217+
marginTop: '3px',
218+
fontSize: '15px',
219+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)',
220+
}}
221+
>
222+
Delete Component
223+
</span>
224+
</Button>
225+
) : (
226+
''
227+
)}
228+
</div>
165229
</div>
166-
</div>
167-
}
168-
style={{ color }}
169-
/>
170-
</ListItem>
171-
</List>
172-
</Grid>
173-
{id === 1 || !isFocused() ? (
230+
}
231+
style={{ color }}
232+
/>
233+
</ListItem>
234+
</List>
235+
</Grid>
236+
</Collapse>
237+
{/* {id === 1 || !isFocused() ? ( Removed sepearate delete icon and
238+
made it part of card
174239
<div />
175240
) : (
176241
<Fragment>
@@ -198,22 +263,26 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
198263
<span style={{ marginTop: '3px' }}>Delete Component</span>
199264
</Button>
200265
</Fragment>
201-
)}
266+
)} */}
202267
</div>
203268
</Grid>
204-
269+
{/* {Create the '+' symbol that add's components as children.} */}
205270
<Grid item xs={3}>
206271
{id === 1 || isFocused() || !selectableChildren.includes(id) ? (
207272
<div />
208273
) : (
209-
<Tooltip title="add as child" aria-label="add as child" placement="left">
274+
<Tooltip
275+
title="add as child"
276+
aria-label="add as child"
277+
placement="left"
278+
>
210279
<IconButton
211280
aria-label="Add"
212281
onClick={() => {
213282
addChild({ title, childType: 'COMP' });
214283
}}
215284
>
216-
<AddIcon style={{ color, float: 'right' }} />
285+
<AddIcon style={{ color, float: 'right', marginTop: '10px' }} />
217286
</IconButton>
218287
</Tooltip>
219288
)}
@@ -227,14 +296,14 @@ function styles(): any {
227296
root: {
228297
width: '100%',
229298
marginTop: 10,
230-
backgroundColor: '#333333'
299+
backgroundColor: '#333333',
231300
},
232301
light: {
233302
color: '#eee',
234303
'&:hover': {
235-
color: '#1de9b6'
236-
}
237-
}
304+
color: '#1de9b6',
305+
},
306+
},
238307
};
239308
}
240309

‎src/utils/colors.util.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ const colors: string[] = [
88
'#f64c72',
99
'#c99261',
1010
'#355586',
11-
'#5cdb95',
11+
'#52C586',
1212
'#7395ae',
1313
'#981d5c',
1414
'#556738',
1515
'#45a29e',
1616
'#d79922',
17-
'#0a2aa9',
17+
'#073b79',
1818
'#9f2b17',
1919
'#e98074',
2020
'#8860d0',

‎src/utils/componentReducer.util.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,12 @@ export const addComponent = (state: ApplicationStateInt, { title }: { title: str
5656
}
5757

5858
//chooses a color for the component from the random color generator
59-
const componentColor = getColor();
59+
let componentColor = getColor();
60+
//Makes sure no two consecutive components have the same color
61+
const lastColor = state.components.find(element => element.id === state.nextId - 1).color;
62+
while (componentColor === lastColor) {
63+
componentColor = getColor();
64+
}
6065
//assigns the componentID to whatever issupposed to be next
6166
const componentId = state.nextId;
6267

0 commit comments

Comments
 (0)