Skip to content

Commit bc63540

Browse files
ZackVandiverZackVandiver
authored
Merge pull request #4 from oslabs-beta/feature/accordions
Feature/accordions
2 parents 7fb671d + 8d50e18 commit bc63540

File tree

8 files changed

+197
-277
lines changed

8 files changed

+197
-277
lines changed

‎app/src/components/left/ComponentDrag.tsx

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,47 @@
1-
import ComponentPanelItem from '../right/ComponentPanelItem';
2-
import Grid from '@mui/material/Grid';
31
import React from 'react';
2+
import Grid from '@mui/material/Grid';
43
import { RootState } from '../../redux/store';
54
import makeStyles from '@mui/styles/makeStyles';
65
import { useSelector } from 'react-redux';
6+
import ComponentPanelItem from '../right/ComponentPanelItem';
7+
78

8-
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
9+
const useStyles = makeStyles({
10+
panelWrapper: {
11+
display: 'flex',
12+
flexDirection: 'column',
13+
alignItems: 'center',
14+
flexGrow: 1,
15+
overflow: 'auto'
16+
},
17+
panelWrapperList: {
18+
minHeight: 'auto'
19+
},
20+
lightThemeFontColor: {
21+
color: '#fff'
22+
},
23+
darkThemeFontColor: {
24+
color: '#fff'
25+
}
26+
});
27+
28+
const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
929
const classes = useStyles();
1030
const state = useSelector((store: RootState) => store.appState);
1131

1232
const isFocus = (targetId: Number) => {
1333
return state.canvasFocus.componentId === targetId ? true : false;
1434
};
1535

36+
if (!isVisible) return null;
37+
1638
return (
1739
<div className={classes.panelWrapper}>
1840
<div className={classes.panelWrapperList}>
1941
<h4 className={classes.darkThemeFontColor}>
2042
{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
2143
? 'Pages'
22-
: 'Root Components'}
44+
: ''}
2345
</h4>
2446
<Grid
2547
container
@@ -47,23 +69,5 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
4769
);
4870
};
4971

50-
const useStyles = makeStyles({
51-
panelWrapper: {
52-
display: 'flex',
53-
flexDirection: 'column',
54-
alignItems: 'center',
55-
flexGrow: 1,
56-
overflow: 'auto'
57-
},
58-
panelWrapperList: {
59-
minHeight: '120px'
60-
},
61-
lightThemeFontColor: {
62-
color: '#fff'
63-
},
64-
darkThemeFontColor: {
65-
color: '#fff'
66-
}
67-
});
68-
6972
export default ComponentDrag;
73+

‎app/src/components/left/ComponentsContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const useStyles = makeStyles({
4848
overflow: 'auto'
4949
},
5050
panelWrapperList: {
51-
minHeight: '120px'
51+
minHeight: 'auto'
5252
},
5353
lightThemeFontColor: {
5454
color: '#fff'

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 130 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,101 +5,158 @@ import React from 'react';
55
import { RootState } from '../../redux/store';
66
import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
77
import { emitEvent } from '../../helperFunctions/socket';
8+
import Accordion from '@mui/material/Accordion';
9+
import AccordionSummary from '@mui/material/AccordionSummary';
10+
import AccordionDetails from '@mui/material/AccordionDetails';
11+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
12+
import { makeStyles } from '@mui/styles';
13+
import ComponentDrag from './ComponentDrag';
814

9-
/*
10-
DESCRIPTION: This is the top half of the left panel, starting from the 'HTML
11-
Elements' header. The boxes containing each HTML element are rendered in
12-
HTMLItem, which itself is rendered by this component.
1315

14-
Central state contains all available HTML elements (stored in the HTMLTypes property).
15-
The data for HTMLTypes is stored in HTMLTypes.tsx and is added to central state in
16-
initialState.tsx.
16+
const useStyles = makeStyles({
17+
accordion: {
18+
backgroundColor: '#000000', // Set the background color to gray
19+
color: '#ffffff', // Set the text color to white
20+
},
21+
accordionSummary: {
22+
backgroundColor: '#000000', // Set the background color of the summary to gray
23+
color: '#ffffff', // Set the text color of the summary to white
24+
},
25+
});
1726

18-
Hook state:
19-
-tag:
20-
*/
21-
// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
2227
const DragDropPanel = (props): JSX.Element => {
28+
const classes = useStyles();
2329
const dispatch = useDispatch();
2430

25-
const state = useSelector((store: RootState) => store.appState); // current state
26-
const contextParam = useSelector((store: RootState) => store.contextSlice); // current contextParam
27-
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode); // current roomCode
31+
const state = useSelector((store: RootState) => store.appState);
32+
const contextParam = useSelector((store: RootState) => store.contextSlice);
33+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
2834

29-
// function for delete element
3035
const handleDelete = (id: number): void => {
3136
dispatch(deleteElement({ id: id, contextParam: contextParam }));
3237
if (roomCode) {
33-
// send delete element to server to broadcast to all users
3438
emitEvent('deleteElementAction', roomCode, {
3539
id,
3640
contextParam
3741
});
3842
}
3943
};
4044

41-
// filter out separator so that it will not appear on the html panel
4245
const htmlTypesToRender = state.HTMLTypes.filter(
4346
(type) => type.name !== 'separator'
4447
);
48+
4549
return (
4650
<div className={'HTMLItems'}>
4751
<div id="HTMLItemsTopHalf">
48-
<h3 style={{ color: '#ffffff' }}> HTML Elements </h3>
49-
<Grid
50-
container
51-
// spacing={{ xs: 0.5, md: 0.5 }}
52-
// columns={{ xs: 4, sm: 4, md: 4 }}
53-
justifyContent="center"
54-
>
55-
{htmlTypesToRender.map((option) => {
56-
if (
57-
!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
58-
option.name
59-
)
60-
) {
61-
return (
62-
<HTMLItem
63-
name={option.name}
64-
key={`html-${option.name}`}
65-
id={option.id}
66-
icon={option.icon}
67-
handleDelete={handleDelete}
68-
/>
69-
);
70-
}
71-
})}
72-
</Grid>
73-
74-
{state.projectType === 'Classic React' ? (
75-
<h3 style={{ color: '#ffffff' }}>React Router</h3>
76-
) : null}
77-
<Grid
78-
container
79-
// spacing={{ xs: 0.5, md: 0.5 }}
80-
// columns={{ xs: 4, sm: 4, md: 4 }}
81-
justifyContent="center"
82-
>
83-
{htmlTypesToRender.map((option) => {
84-
if (
85-
(option.name === 'Switch' ||
86-
option.name === 'LinkTo' ||
87-
option.name === 'Route') &&
88-
state.projectType === 'Classic React'
89-
) {
90-
return (
91-
<HTMLItem
92-
name={option.name}
93-
key={`html-${option.name}`}
94-
id={option.id}
95-
icon={option.icon}
96-
handleDelete={handleDelete}
97-
/>
98-
);
99-
}
100-
})}
101-
</Grid>
102-
52+
<Accordion className={classes.accordion}>
53+
<AccordionSummary
54+
expandIcon={<ExpandMoreIcon />}
55+
aria-controls="panel1a-content"
56+
id="panel1a-header"
57+
className={classes.accordionSummary}
58+
>
59+
<h3>Root Components</h3>
60+
</AccordionSummary>
61+
<AccordionDetails>
62+
<ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
63+
</AccordionDetails>
64+
</Accordion>
65+
<Accordion className={classes.accordion}>
66+
<AccordionSummary
67+
expandIcon={<ExpandMoreIcon />}
68+
aria-controls="panel1a-content"
69+
id="panel1a-header"
70+
className={classes.accordionSummary}
71+
>
72+
<h3>HTML Elements</h3>
73+
</AccordionSummary>
74+
<AccordionDetails>
75+
<Grid container justifyContent="center">
76+
{htmlTypesToRender.map((option) => {
77+
if (
78+
!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
79+
option.name
80+
)
81+
) {
82+
return (
83+
<HTMLItem
84+
name={option.name}
85+
key={`html-${option.name}`}
86+
id={option.id}
87+
icon={option.icon}
88+
handleDelete={handleDelete}
89+
/>
90+
);
91+
}
92+
})}
93+
</Grid>
94+
</AccordionDetails>
95+
</Accordion>
96+
97+
{/* MUI Components */}
98+
<Accordion className={classes.accordion}>
99+
<AccordionSummary
100+
expandIcon={<ExpandMoreIcon />}
101+
aria-controls="panel2a-content"
102+
id="panel2a-header"
103+
className={classes.accordionSummary}
104+
>
105+
<h3>MUI Components</h3>
106+
</AccordionSummary>
107+
<AccordionDetails>
108+
<Grid container justifyContent="center">
109+
{htmlTypesToRender.map((option) => {
110+
if (option.name === 'MUI') {
111+
return (
112+
<HTMLItem
113+
name={option.name}
114+
key={`html-${option.name}`}
115+
id={option.id}
116+
icon={option.icon}
117+
handleDelete={handleDelete}
118+
/>
119+
);
120+
}
121+
})}
122+
</Grid>
123+
</AccordionDetails>
124+
</Accordion>
125+
126+
{/* React Router */}
127+
<Accordion className={classes.accordion}>
128+
<AccordionSummary
129+
expandIcon={<ExpandMoreIcon />}
130+
aria-controls="panel1a-content"
131+
id="panel1a-header"
132+
className={classes.accordionSummary}
133+
>
134+
<h3>React Router</h3>
135+
</AccordionSummary>
136+
<AccordionDetails>
137+
<Grid container justifyContent="center">
138+
{htmlTypesToRender.map((option) => {
139+
if (
140+
(option.name === 'Switch' ||
141+
option.name === 'LinkTo' ||
142+
option.name === 'Route') &&
143+
state.projectType === 'Classic React'
144+
) {
145+
return (
146+
<HTMLItem
147+
name={option.name}
148+
key={`html-${option.name}`}
149+
id={option.id}
150+
icon={option.icon}
151+
handleDelete={handleDelete}
152+
/>
153+
);
154+
}
155+
})}
156+
</Grid>
157+
</AccordionDetails>
158+
</Accordion>
159+
103160
{/* Next.js */}
104161
{state.projectType === 'Next.js' ? (
105162
<h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
@@ -126,3 +183,4 @@ const DragDropPanel = (props): JSX.Element => {
126183
};
127184

128185
export default DragDropPanel;
186+

‎app/src/components/left/ElementsContainer.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,10 @@ const ElementsContainer = (props): JSX.Element => {
5555
>
5656
{' '}
5757
<DragDropPanel />
58-
<div id={'CompBottomHalf'}>
58+
{ // moved ComponentDrag to DragDropPanel
59+
/* <div id={'CompBottomHalf'}>
5960
<ComponentDrag isThemeLight={props.isThemeLight} />
60-
</div>
61+
</div> */}
6162
</Box>
6263
);
6364
};

‎app/src/components/left/HTMLItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const useStyles = makeStyles({
1717
HTMLPanelItem: {
1818
height: 'auto',
1919
width: 'auto',
20-
fontSize: 'medium',
20+
fontSize: 'small',
2121
display: 'flex',
2222
flexDirection: 'row',
2323
justifyContent: 'space-evenly',

0 commit comments

Comments
 (0)