Skip to content

Commit 3bf7ddb

Browse files
JesseWowczukJesseWowczuk
committed
Jesse 4/22, reworked the DragDropPanel to add arrodions for Root Components, HTML Components, MUI Components and React Reouter. also restyled the App icon. relocate the Root Components on the top of HTML Components.
> > Co-author-by: Heather Pfeiffer <[email protected]> Co-author-by: Jesse Wowczuk <JesseWowczuk> Co-author-by: Zack Vandiver <[email protected]> Co-author-by: Sean Ryan <[email protected]> Co-author-by: Austin Alvarez <[email protected]>
1 parent e4e6446 commit 3bf7ddb

File tree

8 files changed

+387
-116
lines changed

8 files changed

+387
-116
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)