Skip to content

Commit 61760c6

Browse files
Spencer-LauSpencer-Lau
committed
Fixed MUI/div errors in sidebar and tooltip. WIP regarding migrating clearcanvas from navbarbuttons to canvascontainer
1 parent 0c719a7 commit 61760c6

File tree

4 files changed

+111
-106
lines changed

4 files changed

+111
-106
lines changed

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

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
/* eslint-disable max-len */
2-
import { Tab, Tabs, Tooltip } from '@mui/material';
3-
4-
import { AddBox, Groups2, Folder } from '@mui/icons-material';
2+
import { Tab, Tabs } from '@mui/material';
53
import React from 'react';
64
import TabWithTooltip from './TabWithTooltip';
75

@@ -11,7 +9,7 @@ interface SidebarProps {
119
toggleVisibility: (state: boolean) => void;
1210
}
1311

14-
let oldValue = 0;
12+
// let oldValue = 0;
1513

1614
/**
1715
* Renders a vertical sidebar with navigational tabs. Each tab can activate a different view in the application.
@@ -45,9 +43,8 @@ const Sidebar: React.FC<SidebarProps> = ({
4543
const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
4644
setActiveTab(activeTab === newValue ? null : newValue);
4745
toggleVisibility(true);
48-
oldValue = newValue;
46+
// oldValue = newValue;
4947
};
50-
5148
// the following allows users to click on the left panel to expand and collapse.
5249
// We decided to freeze so we've commented this and line 41 out
5350

@@ -63,9 +60,8 @@ const Sidebar: React.FC<SidebarProps> = ({
6360
key={activeTab}
6461
orientation="vertical"
6562
variant="scrollable"
66-
value={activeTab}
63+
value={activeTab ?? 0} // default to 0 if activeTab is null
6764
onChange={handleTabChange}
68-
// onClick={(e: React.MouseEvent) => handleTabClick(e, oldValue)}
6965
TabIndicatorProps={{
7066
style: {
7167
backgroundColor: '#4A4A4A',
@@ -85,26 +81,9 @@ const Sidebar: React.FC<SidebarProps> = ({
8581
}}
8682
>
8783
<Tab sx={{ position: 'absolute', visibility: 'hidden' }} value={null} />
88-
<div>
89-
<TabWithTooltip
90-
label="Modules"
91-
value={0}
92-
activeTab={activeTab}
93-
handleTabChange={handleTabChange}
94-
/>
95-
<TabWithTooltip
96-
label="Create"
97-
value={1}
98-
activeTab={activeTab}
99-
handleTabChange={handleTabChange}
100-
/>
101-
<TabWithTooltip
102-
label="Collab"
103-
value={2}
104-
activeTab={activeTab}
105-
handleTabChange={handleTabChange}
106-
/>
107-
</div>
84+
<TabWithTooltip label="Modules" value={0} activeTab={activeTab} handleTabChange={handleTabChange} />
85+
<TabWithTooltip label="Create" value={1} activeTab={activeTab} handleTabChange={handleTabChange} />
86+
<TabWithTooltip label="Collab" value={2} activeTab={activeTab} handleTabChange={handleTabChange} />
10887
</Tabs>
10988
);
11089
};

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

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { Tab } from '@mui/material';
33
import { AddBox, Folder, Groups2 } from '@mui/icons-material';
44
import Tooltip from '../Tooltip';
@@ -28,26 +28,24 @@ const TabWithTooltip: React.FC<TabWithTooltipProps> = ({
2828
const isCollabTab = label === 'Collab';
2929

3030
return (
31-
<div>
32-
<Tooltip label={label} isCollabTab={isCollabTab}>
33-
<Tab
34-
sx={{
35-
color: activeTab === value ? '#f88e16' : '#9C9D9F',
36-
backgroundColor: activeTab === value && '#2D313A',
37-
'&.Mui-selected': { color: '#f88e16' },
38-
'&:hover': { color: '#f88e16' },
39-
fontSize: '11px',
40-
textTransform: 'none',
41-
position: isCollabTab ? 'absolute' : 'relative',
42-
bottom: isCollabTab ? '80px' : 'auto',
43-
opacity: 1,
44-
}}
45-
icon={iconType}
46-
value={value}
47-
onClick={(event) => handleTabChange(event, value)}
48-
/>
49-
</Tooltip>
50-
</div>
31+
<Tooltip label={label} isCollabTab={isCollabTab}>
32+
<Tab
33+
sx={{
34+
color: activeTab === value ? '#f88e16' : '#9C9D9F',
35+
backgroundColor: activeTab === value && '#2D313A',
36+
'&.Mui-selected': { color: '#f88e16' },
37+
'&:hover': { color: '#f88e16' },
38+
fontSize: '11px',
39+
textTransform: 'none',
40+
position: isCollabTab ? 'absolute' : 'relative',
41+
bottom: isCollabTab ? '80px' : 'auto',
42+
opacity: 1,
43+
}}
44+
icon={iconType}
45+
value={value}
46+
onClick={(event) => handleTabChange(event, value)}
47+
/>
48+
</Tooltip>
5149
);
5250
};
5351

‎app/src/components/main/CanvasContainer.tsx

Lines changed: 74 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
/* eslint-disable max-len */
2-
import React, { useState, useEffect, useRef } from 'react';
2+
import React, { useState, useRef } from 'react';
33
import { Button } from '@mui/material';
4+
import ListItem from '@mui/material/ListItem';
5+
import List from '@mui/material/List';
6+
import ListItemText from '@mui/material/ListItemText';
47
import { useDispatch, useSelector } from 'react-redux';
5-
import {
6-
DeveloperMode,
7-
VerticalAlignBottom,
8-
VerticalAlignTop,
9-
ZoomIn,
10-
ZoomOut,
11-
} from '@mui/icons-material';
8+
import { DeveloperMode, ZoomIn, ZoomOut } from '@mui/icons-material';
129
import Canvas from './Canvas';
1310
import { RootState } from '../../redux/store';
1411
import CodePreview from '../bottom/CodePreview';
1512
import { toggleCodePreview } from '../../redux/reducers/slice/appStateSlice';
13+
import createModal from '../right/createModal';
14+
import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
15+
import { emitEvent } from '../../helperFunctions/socket';
1616

1717
interface CanvasContainerProps {
1818
zoom: number;
@@ -55,8 +55,8 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
5555
// containerRef references the container that will ultimately have the scroll functionality
5656
const containerRef = useRef<HTMLDivElement>(null);
5757

58-
const container = document.getElementById('canvasContainer');
59-
const components = document.querySelector('.componentContainer');
58+
// const container = document.getElementById('canvasContainer');
59+
// const components = document.querySelector('.componentContainer');
6060

6161
const [zoom, setZoom] = useState(1);
6262

@@ -68,19 +68,54 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
6868
setZoom(Math.max(zoom - 0.1, 0.1));
6969
};
7070

71-
// useEffect dependency is the length of the parent components. No changes in children will scroll to the bottom. Once elements surpass the view of the canvas, scroll to bottom, else, keep scroll bar to the top.
72-
useEffect(() => {
73-
if (
74-
container &&
75-
components &&
76-
state.components[0].children.length > 0 &&
77-
components.scrollHeight === components.clientHeight
78-
) {
79-
container.scrollTop = 0;
80-
} else if (container && components) {
81-
container.scrollTop = container.scrollHeight;
82-
}
83-
}, [state.components[0].children.length, zoom]);
71+
const [modal, setModal] = React.useState(null);
72+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
73+
const userName = useSelector((store: RootState) => store.roomSlice.userName);
74+
75+
const closeModal = () => setModal('');
76+
const clearWorkspace = () => {
77+
// Reset state for project to initial state
78+
const resetState = () => {
79+
if (roomCode) emitEvent('clearCanvasAction', roomCode, userName);
80+
else dispatch(resetAllState());
81+
};
82+
// Set modal options
83+
const children = (
84+
<List className="export-preference" style={{ zIndex: '12' }}>
85+
<ListItem
86+
key={'clear'}
87+
button
88+
onClick={resetState}
89+
style={{
90+
backgroundColor: '#E12D39',
91+
borderRadius: '50px',
92+
marginBottom: '2%',
93+
marginTop: '5%',
94+
}}
95+
>
96+
<ListItemText
97+
primary={'Yes, delete all project data'}
98+
style={{ textAlign: 'center' }}
99+
onClick={closeModal}
100+
/>
101+
</ListItem>
102+
</List>
103+
);
104+
105+
// Create modal
106+
setModal(
107+
createModal({
108+
closeModal,
109+
children,
110+
message: 'Are you sure you want to delete all data?',
111+
primBtnLabel: null,
112+
primBtnAction: null,
113+
secBtnAction: null,
114+
secBtnLabel: null,
115+
open: true,
116+
}),
117+
);
118+
};
84119

85120
const buttonStyle: React.CSSProperties = {
86121
textAlign: 'center',
@@ -97,11 +132,11 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
97132
borderRadius: '10px',
98133
} as const;
99134

100-
const upArrowStyle: React.CSSProperties = {
135+
const firstButtonStyle: React.CSSProperties = {
101136
borderRadius: '10px 0 0 10px',
102137
} as const;
103138

104-
const zoomOutStyle: React.CSSProperties = {
139+
const lastButtonStyle: React.CSSProperties = {
105140
borderRadius: '0 10px 10px 0',
106141
} as const;
107142

@@ -125,31 +160,24 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
125160
</Button>
126161
{!state.codePreview && (
127162
<div>
128-
<Button
129-
style={{ ...buttonStyle, ...upArrowStyle }}
130-
onClick={() => {
131-
container.scrollTop = 0;
132-
}}
133-
>
134-
<VerticalAlignTop />
135-
</Button>
136-
<Button
137-
style={buttonStyle}
138-
onClick={() => {
139-
container.scrollTop = container.clientHeight;
140-
}}
141-
>
142-
<VerticalAlignBottom />
143-
</Button>
144-
<Button style={buttonStyle} onClick={zoomIn}>
163+
<Button style={{ ...buttonStyle, ...firstButtonStyle }} onClick={zoomIn}>
145164
<ZoomIn />
146165
</Button>
147-
<Button
148-
style={{ ...buttonStyle, ...zoomOutStyle }}
149-
onClick={zoomOut}
150-
>
166+
<Button style={buttonStyle} onClick={zoomOut}>
151167
<ZoomOut />
152168
</Button>
169+
<Button style={{ ...buttonStyle, ...lastButtonStyle }} onClick={() => clearWorkspace()}>
170+
<svg
171+
xmlns="http://www.w3.org/2000/svg"
172+
width="16"
173+
height="16"
174+
fill="currentColor"
175+
className="bi bi-trash3"
176+
viewBox="0 0 16 16"
177+
>
178+
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
179+
</svg>
180+
</Button>
153181
</div>
154182
)}
155183
</div>

‎app/src/components/top/NavBarButtons.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
/* eslint-disable max-len */
22
import React, { Ref, useEffect, useRef } from 'react';
33
import { useDispatch, useSelector } from 'react-redux';
4-
import { Button } from '@mui/material';
5-
import ListItem from '@mui/material/ListItem';
6-
import List from '@mui/material/List';
7-
import ListItemText from '@mui/material/ListItemText';
4+
// import { Button } from '@mui/material';
5+
// import ListItem from '@mui/material/ListItem';
6+
// import List from '@mui/material/List';
7+
// import ListItemText from '@mui/material/ListItemText';
88
import Menu from '@mui/material/Menu';
99
import MenuItem from '@mui/material/MenuItem';
1010
import { Link } from 'react-router-dom';
1111
import createStyles from '@mui/styles/createStyles';
1212
import makeStyles from '@mui/styles/makeStyles';
1313
import withStyles from '@mui/styles/withStyles';
1414
import DeleteProjects from '../right/DeleteProjects';
15-
import ExportButton from '../right/ExportButton';
15+
// import ExportButton from '../right/ExportButton';
1616
import LoginButton from '../right/LoginButton';
1717
import ProjectsFolder from '../right/OpenProjects';
1818
import store, { RootState } from '../../redux/store';
1919
import SaveProjectButton from '../right/SaveProjectButton';
2020
import serverConfig from '../../serverConfig.js';
21-
import createModal from '../right/createModal';
22-
import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
23-
import { setStyle } from '../../redux/reducers/slice/styleSlice';
24-
import { emitEvent } from '../../helperFunctions/socket';
21+
// import createModal from '../right/createModal';
22+
// import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
23+
// import { setStyle } from '../../redux/reducers/slice/styleSlice';
24+
// import { emitEvent } from '../../helperFunctions/socket';
2525

2626
// added imports for publish logic
2727
import { publishProject } from '../../helperFunctions/projectGetSaveDel';
@@ -120,8 +120,8 @@ const navbarDropDown = (props): JSX.Element => {
120120
// state: store.appState
121121
// }));
122122
const state = useSelector((store: RootState) => store.appState);
123-
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
124-
const userName = useSelector((store: RootState) => store.roomSlice.userName);
123+
// const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
124+
// const userName = useSelector((store: RootState) => store.roomSlice.userName);
125125

126126
const closeModal = () => setModal('');
127127
const handleClick = (event) => {

0 commit comments

Comments
 (0)