Skip to content

Commit 0d70b04

Browse files
tonyitotonyito
committed
Fixed duplicate color bug, adjusted some colors to be easier on the eyes, made delete component font more readable by making it pure white
1 parent 8adf559 commit 0d70b04

File tree

3 files changed

+156
-113
lines changed

3 files changed

+156
-113
lines changed

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 149 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ interface LeftColExpPanPropsInt extends PropsInt {
2222
addChild(arg: { title: string; childType: string; HTMLInfo?: object }): void;
2323
changeFocusComponent(arg: { title: string }): void;
2424
selectableChildren: number[];
25-
deleteComponent(arg: { componentId: number; stateComponents: ComponentsInt }): void;
25+
deleteComponent(arg: {
26+
componentId: number;
27+
stateComponents: ComponentsInt;
28+
}): void;
2629
toggleComponentState(arg: number): void;
2730
toggleComponentClass(arg: number): void;
2831
}
@@ -44,7 +47,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
4447
selectableChildren,
4548
deleteComponent,
4649
toggleComponentState,
47-
toggleComponentClass
50+
toggleComponentClass,
4851
} = props;
4952

5053
const { title, id, color, stateful, classBased } = component;
@@ -58,147 +61,178 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
5861
const focusedToggle = isFocused() === 'focused' ? true : false;
5962

6063
return (
61-
<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+
>
6271
<Grid item xs={9}>
6372
<div
6473
className={classes.root}
6574
style={
6675
// shadow to highlight the focused component card
67-
focusedToggle ? { boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)'} : {}
76+
focusedToggle ? { boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)' } : {}
6877
}
6978
>
70-
{/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED */}
71-
<Collapse in={focusedToggle} collapsedHeight={70}>
72-
<Grid item xs={12} style={{ color: 'red', backgroundColor: color, borderRadius: '10px'}}>
73-
<List style={{ color: 'red' }}>
74-
<ListItem
75-
// button // commented out to disable materialUI hover shading effect. TBD if any adverse effects occur
76-
style={{ color: 'red' }}
77-
onClick={() => {
78-
changeFocusComponent({ title });
79-
}}
80-
>
81-
<ListItemText
82-
disableTypography
83-
className={classes.light}
84-
primary={
85-
<div>
86-
<Typography
87-
//type='body2'
88-
style={{
89-
color: '#fff',
90-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
91-
fontSize: '1.40rem',
92-
}}
93-
>
94-
{title}
95-
</Typography>
96-
97-
{/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT
98-
99-
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
100-
*/}
101-
102-
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
103-
{focusedToggle ? (
104-
<InputLabel
105-
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'
106109
style={{
107110
color: '#fff',
108-
marginBottom: '10px',
109-
marginTop: '0px',
110-
marginLeft: '11px',
111-
padding: '0px',
112-
fontSize: '18px',
113-
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',
114113
}}
115114
>
116-
State?
117-
</InputLabel>
118-
) : (
119-
''
120-
)}
115+
{title}
116+
</Typography>
121117

122-
{focusedToggle ? (
123-
<Switch
124-
checked={stateful}
125-
onChange={e => {
126-
toggleComponentState(id);
127-
changeFocusComponent({ title });
128-
}}
129-
value="stateful"
130-
color="primary"
131-
// id={props.id.toString()}
132-
/>
133-
) : (
134-
''
135-
)}
136-
<div>
137-
{/* 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 */}
138124
{focusedToggle ? (
139125
<InputLabel
140-
htmlFor="classBased"
126+
htmlFor="stateful"
141127
style={{
142128
color: '#fff',
143129
marginBottom: '10px',
144130
marginTop: '0px',
145131
marginLeft: '11px',
146132
padding: '0px',
147133
fontSize: '18px',
148-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
134+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
149135
}}
150136
>
151-
Class?
137+
State?
152138
</InputLabel>
153139
) : (
154140
''
155141
)}
142+
156143
{focusedToggle ? (
157144
<Switch
158-
checked={classBased}
145+
checked={stateful}
159146
onChange={e => {
160-
toggleComponentClass(id);
147+
toggleComponentState(id);
161148
changeFocusComponent({ title });
162149
}}
163-
value="classBased"
150+
value="stateful"
164151
color="primary"
152+
// id={props.id.toString()}
165153
/>
166154
) : (
167155
''
168156
)}
169-
{focusedToggle ? (
170-
<Button
171-
variant="text"
172-
size="small"
173-
color="default"
174-
aria-label="Delete"
175-
className={classes.margin}
176-
onClick={() =>
177-
deleteComponent({
178-
componentId: id,
179-
stateComponents: components
180-
})
181-
}
182-
style={{
183-
color: '#D3D3D3',
184-
marginBottom: '0px',
185-
marginTop: '4px',
186-
marginLeft: '0px',
187-
padding: '0px',
188-
}}
189-
>
190-
<DeleteIcon style={{ color: '#e25848', textShadow:'1px 1px 2px rgba(0, 0, 0, 0.5)' }} />
191-
<span style={{ marginTop: '3px', textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}>Delete Component</span>
192-
</Button>
193-
) : ('')}
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>
194229
</div>
195-
</div>
196-
}
197-
style={{ color }}
198-
/>
199-
</ListItem>
200-
</List>
201-
</Grid>
230+
}
231+
style={{ color }}
232+
/>
233+
</ListItem>
234+
</List>
235+
</Grid>
202236
</Collapse>
203237
{/* {id === 1 || !isFocused() ? ( Removed sepearate delete icon and
204238
made it part of card
@@ -232,12 +266,16 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
232266
)} */}
233267
</div>
234268
</Grid>
235-
269+
{/* {Create the '+' symbol that add's components as children.} */}
236270
<Grid item xs={3}>
237271
{id === 1 || isFocused() || !selectableChildren.includes(id) ? (
238272
<div />
239273
) : (
240-
<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+
>
241279
<IconButton
242280
aria-label="Add"
243281
onClick={() => {
@@ -258,14 +296,14 @@ function styles(): any {
258296
root: {
259297
width: '100%',
260298
marginTop: 10,
261-
backgroundColor: '#333333'
299+
backgroundColor: '#333333',
262300
},
263301
light: {
264302
color: '#eee',
265303
'&:hover': {
266-
color: '#1de9b6'
267-
}
268-
}
304+
color: '#1de9b6',
305+
},
306+
},
269307
};
270308
}
271309

‎src/utils/colors.util.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const colors: string[] = [
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)