Skip to content

Commit fb59853

Browse files
ZackVandiverInvectivusTaco
ZackVandiver
and
InvectivusTaco
committed
Zack 4/30 created MUITab in MUIDragDrop.ts
> > Co-authored-by: Heather Pfeiffer <[email protected]> Co-authored-by: Jesse Wowczuk <[email protected]> Co-authored-by: Zack Vandiver <ZackVandiver> Co-authored-by: Sean Ryan <[email protected]> Co-authored-by: Austin Alvarez <[email protected]>
1 parent 2e4028a commit fb59853

File tree

4 files changed

+149
-22
lines changed

4 files changed

+149
-22
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const DragDropPanel = (props): JSX.Element => {
102102
</Accordion>
103103

104104
{/* MUI Components */}
105-
<Accordion className={classes.accordion}>
105+
{/* <Accordion className={classes.accordion}>
106106
<AccordionSummary
107107
expandIcon={<ExpandMoreIcon />}
108108
aria-controls="panel2a-content"
@@ -126,7 +126,7 @@ const DragDropPanel = (props): JSX.Element => {
126126
})}
127127
</Grid>
128128
</AccordionDetails>
129-
</Accordion>
129+
</Accordion> */}
130130

131131
{/* React Router */}
132132
<Accordion className={classes.accordion}>

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { useDispatch, useSelector } from 'react-redux';
2+
import Grid from '@mui/material/Grid';
3+
import MUIItem from './MUIItem';
4+
import React from 'react';
5+
import { RootState } from '../../redux/store';
6+
import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
7+
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';
14+
15+
const useStyles = makeStyles({
16+
accordion: {
17+
backgroundColor: '#000000', // Set the background color to gray
18+
color: '#ffffff' // Set the text color to white
19+
},
20+
accordionSummary: {
21+
backgroundColor: '#000000', // Set the background color of the summary to gray
22+
color: '#ffffff' // Set the text color of the summary to white
23+
}
24+
});
25+
26+
const MUIDragDropPanel = (props): JSX.Element => {
27+
const classes = useStyles();
28+
const dispatch = useDispatch();
29+
30+
const state = useSelector((store: RootState) => store.appState);
31+
const contextParam = useSelector((store: RootState) => store.contextSlice);
32+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
33+
34+
const handleDelete = (id: number): void => {
35+
dispatch(deleteElement({ id: id, contextParam: contextParam }));
36+
if (roomCode) {
37+
emitEvent('deleteElementAction', roomCode, {
38+
id,
39+
contextParam
40+
});
41+
}
42+
};
43+
44+
const htmlTypesToRender = state.HTMLTypes.filter(
45+
(type) => type.name !== 'separator'
46+
);
47+
48+
const muiTypesToRender = state.MUITypes.filter(
49+
(type) => type.name !== 'separator'
50+
);
51+
52+
return (
53+
<div className={'HTMLItems'}>
54+
<div id="HTMLItemsTopHalf">
55+
{/* Root Components */}
56+
<Accordion className={classes.accordion}>
57+
<AccordionSummary
58+
expandIcon={<ExpandMoreIcon />}
59+
aria-controls="panel1a-content"
60+
id="panel1a-header"
61+
className={classes.accordionSummary}
62+
>
63+
<h3>Root Components</h3>
64+
</AccordionSummary>
65+
<AccordionDetails>
66+
<ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
67+
</AccordionDetails>
68+
</Accordion>
69+
70+
{/* MUI Components */}
71+
<Accordion className={classes.accordion}>
72+
<AccordionSummary
73+
expandIcon={<ExpandMoreIcon />}
74+
aria-controls="panel2a-content"
75+
id="panel2a-header"
76+
className={classes.accordionSummary}
77+
>
78+
<h3>MUI Components</h3>
79+
</AccordionSummary>
80+
<AccordionDetails>
81+
<Grid container justifyContent="center">
82+
{muiTypesToRender.map((option) => {
83+
return (
84+
<MUIItem
85+
name={option.name}
86+
key={`mui-${option.name}`}
87+
id={option.id}
88+
icon={option.icon}
89+
handleDelete={handleDelete}
90+
/>
91+
);
92+
})}
93+
</Grid>
94+
</AccordionDetails>
95+
</Accordion>
96+
97+
{/* Next.js */}
98+
{state.projectType === 'Next.js' ? (
99+
<h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
100+
) : null}
101+
{htmlTypesToRender.map((option) => {
102+
if (
103+
option.framework === 'nextjs' &&
104+
state.projectType === 'Next.js'
105+
) {
106+
return (
107+
<HTMLItem
108+
name={option.name}
109+
key={`html-${option.name}`}
110+
id={option.id}
111+
icon={option.icon}
112+
handleDelete={handleDelete}
113+
/>
114+
);
115+
}
116+
})}
117+
</div>
118+
</div>
119+
);
120+
};
121+
122+
export default MUIDragDropPanel;

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@ import React from 'react';
22
import { RootState } from '../../redux/store';
33
import makeStyles from '@mui/styles/makeStyles';
44
import { useSelector } from 'react-redux';
5+
import MUIDragDropPanel from './MUIDragDropPanel';
56

67
const ProfilePage = () => {
78
const classes = useStyles();
89

910
return (
1011
<div>
11-
<div className={classes.panelWrapper}>
12-
<div className={classes.panelWrapperList}>
13-
<h4 className={classes.darkThemeFontColor}>Settings</h4>
14-
</div>
12+
<MUIDragDropPanel />
1513
</div>
16-
</div>
1714
);
1815
};
1916

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

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import { Tab, Tabs } from '@mui/material';
22

3-
import { AddBox, Groups2, AccountBox, Settings } from '@mui/icons-material';
3+
import {
4+
AddBox,
5+
Groups2,
6+
AccountBox,
7+
Settings,
8+
Menu,
9+
Memory,
10+
TabOutlined
11+
} from '@mui/icons-material';
412
import { IoMdCube } from 'react-icons/io';
513
import React from 'react';
614

@@ -23,7 +31,7 @@ const Sidebar: React.FC<SidebarProps> = ({
2331
oldValue = newValue;
2432
};
2533

26-
//the following allows users to click on the left panel to expand and collapse.
34+
//the following allows users to click on the left panel to expand and collapse.
2735
// We decided to freeze so we've commented this and line 41 out
2836

2937
// const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
@@ -72,6 +80,19 @@ const Sidebar: React.FC<SidebarProps> = ({
7280
value={0}
7381
label="Canvas"
7482
/>
83+
<Tab
84+
sx={{
85+
color: activeTab === 4 ? '#E4E4E5' : '#9C9D9F',
86+
backgroundColor: activeTab === 4 && '#2D313A',
87+
'&.Mui-selected': { color: '#E4E4E5' },
88+
'&:hover': { color: '#e9e9e9' },
89+
fontSize: '11px',
90+
textTransform: 'none'
91+
}}
92+
icon={<TabOutlined sx={{ fontSize: '26px' }} />}
93+
value={4}
94+
label="Material UI"
95+
/>
7596
<Tab
7697
sx={{
7798
color: activeTab === 1 ? '#E4E4E5' : '#9C9D9F',
@@ -111,19 +132,6 @@ const Sidebar: React.FC<SidebarProps> = ({
111132
value={3}
112133
label="Profile"
113134
/>
114-
<Tab
115-
sx={{
116-
color: activeTab === 4 ? '#E4E4E5' : '#9C9D9F',
117-
backgroundColor: activeTab === 4 && '#2D313A',
118-
'&.Mui-selected': { color: '#E4E4E5' },
119-
'&:hover': { color: '#e9e9e9' },
120-
fontSize: '11px',
121-
textTransform: 'none'
122-
}}
123-
icon={<Settings sx={{ fontSize: '26px' }} />}
124-
value={4}
125-
label="Settings"
126-
/>
127135
</Tabs>
128136
);
129137
};

0 commit comments

Comments
 (0)