Skip to content

Commit 8c3f691

Browse files
martins5225martins5225
committed
refactor sidebar and UI fixes
1 parent 6b63156 commit 8c3f691

File tree

8 files changed

+115
-73
lines changed

8 files changed

+115
-73
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
5454
})}
5555
</Grid>
5656
{/* Display all reusable components */}
57-
<h4
57+
{/* <h4
5858
className={
5959
!isDarkMode
6060
? classes.lightThemeFontColor
@@ -83,7 +83,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
8383
/>
8484
);
8585
})}
86-
</Grid>
86+
</Grid> */}
8787
</div>
8888
</div>
8989
);

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ import React from 'react';
55
import RoomsContainer from './RoomsContainer';
66
import TreeContainer from './TreeContainer';
77

8-
interface TabPanelProps {
9-
activeTab: number;
10-
index: number;
8+
interface ContentAreaProps {
9+
activeTab: number | null;
10+
isVisible: boolean;
1111
}
1212

13-
const TabPanel: React.FC<TabPanelProps> = ({ children, activeTab, index }) => {
13+
const TabPanel: React.FC<{
14+
children: React.ReactNode;
15+
activeTab: number | null;
16+
index: number;
17+
}> = ({ children, activeTab, index }) => {
1418
return (
1519
<Box hidden={activeTab !== index}>{activeTab === index && children}</Box>
1620
);
@@ -19,16 +23,17 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, activeTab, index }) => {
1923
const panels = [
2024
<ElementsContainer />,
2125
<ComponentsContainer />,
22-
<TreeContainer />,
2326
<RoomsContainer />
2427
];
25-
26-
const ContentArea: React.FC<{ activeTab: number | null }> = ({ activeTab }) => {
28+
const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
2729
return (
28-
<div className="left-container">
30+
<div
31+
className="left-container"
32+
style={{ display: isVisible ? 'block' : 'none' }} // Visibility based on activeTab
33+
>
2934
<div className="column left">
3035
{panels.map((panel, idx) => (
31-
<TabPanel key={idx} activeTab={activeTab} index={idx}>
36+
<TabPanel activeTab={activeTab} index={idx}>
3237
{panel}
3338
</TabPanel>
3439
))}

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

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Stack, Typography } from '@mui/material';
12
import { useDispatch, useSelector } from 'react-redux';
23

34
import Button from '@mui/material/Button';
@@ -92,16 +93,24 @@ const RoomsContainer = () => {
9293
}
9394
return (
9495
<div>
95-
{' '}
96-
<TextField
97-
hiddenLabel
98-
id="filled-hidden-label-small"
99-
defaultValue="0"
100-
variant="filled"
101-
size="small"
102-
onChange={(e) => setRoomCode(e.target.value)}
103-
/>
104-
{/* <input
96+
<Stack
97+
spacing={2}
98+
sx={{
99+
paddingTop: '20px',
100+
maxWidth: '230px',
101+
alignItems: 'center',
102+
margin: '0 auto 0 auto'
103+
}}
104+
>
105+
{' '}
106+
<TextField
107+
hiddenLabel
108+
id="filled-hidden-label-small"
109+
variant="filled"
110+
size="small"
111+
onChange={(e) => setRoomCode(e.target.value)}
112+
/>
113+
{/* <input
105114
type="text"
106115
style={{
107116
margin: '3px 5%',
@@ -112,23 +121,26 @@ const RoomsContainer = () => {
112121
placeholder="Room Code"
113122
onChange={(e) => setRoomCode(e.target.value)}
114123
></input> */}
115-
<Button
116-
variant="contained"
117-
onClick={() => joinRoom()}
118-
sx={{
119-
backgroundColor: '#ffffff',
120-
color: '#000000',
121-
'&:hover': {
122-
backgroundColor: '#0069d9',
123-
borderColor: '#0062cc',
124-
boxShadow: 'none'
125-
}
126-
}}
127-
>
128-
Join Room
129-
</Button>
124+
<Button
125+
variant="contained"
126+
onClick={() => joinRoom()}
127+
sx={{
128+
backgroundColor: '#ffffff',
129+
color: '#000000',
130+
'&:hover': {
131+
backgroundColor: '#C6C6C6',
132+
borderColor: '#0062cc',
133+
boxShadow: 'none'
134+
}
135+
}}
136+
>
137+
Join Room
138+
</Button>
139+
<Typography variant="h6" color={'white'}>
140+
In Room: {joinedRoom}
141+
</Typography>
142+
</Stack>
130143
{/* <button onClick={() => joinRoom()}>Join Room</button> */}
131-
<p>In Room: {joinedRoom}</p>
132144
</div>
133145
);
134146
};

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

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,33 @@ import { Tab, Tabs } from '@mui/material';
22

33
import AddBoxIcon from '@mui/icons-material/AddBox';
44
import { IoMdCube } from 'react-icons/io';
5-
import LanIcon from '@mui/icons-material/Lan';
65
import PeopleIcon from '@mui/icons-material/People';
76
import React from 'react';
87

98
interface SidebarProps {
109
activeTab: number | null;
1110
setActiveTab: (value: number | null) => void;
11+
toggleVisibility: (state: boolean) => void;
1212
}
13-
const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
13+
14+
const Sidebar: React.FC<SidebarProps> = ({
15+
activeTab,
16+
setActiveTab,
17+
toggleVisibility
18+
}) => {
1419
const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
1520
if (activeTab === newValue) {
1621
setActiveTab(null);
22+
toggleVisibility(false); // Hide the left-container when the same tab is clicked again
1723
} else {
1824
setActiveTab(newValue);
25+
toggleVisibility(true); // Show the left-container when another tab is activated
1926
}
2027
};
2128

2229
return (
2330
<Tabs
31+
key={activeTab}
2432
orientation="vertical"
2533
variant="scrollable"
2634
value={activeTab}
@@ -43,25 +51,29 @@ const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
4351
}}
4452
>
4553
<Tab
46-
sx={{ '&.Mui-selected': { color: 'red' } }}
47-
icon={<AddBoxIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
54+
sx={{
55+
color: activeTab === 0 ? '#C6C6C6' : '#4A4A4A',
56+
'&.Mui-selected': { color: '#C6C6C6' }
57+
}}
58+
icon={<AddBoxIcon sx={{ fontSize: '36px' }} />}
4859
value={0}
4960
/>
5061
<Tab
51-
sx={{ '&.Mui-selected': { color: 'red' } }}
52-
icon={<IoMdCube style={{ color: '#C6C6C6', fontSize: '33px' }} />}
62+
sx={{
63+
color: activeTab === 1 ? '#C6C6C6' : '#4A4A4A',
64+
'&.Mui-selected': { color: '#C6C6C6' }
65+
}}
66+
icon={<IoMdCube style={{ fontSize: '33px' }} />}
5367
value={1}
5468
/>
5569
<Tab
56-
sx={{ '&.Mui-selected': { color: 'red' } }}
57-
icon={<LanIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
70+
sx={{
71+
color: activeTab === 2 ? '#C6C6C6' : '#4A4A4A',
72+
'&.Mui-selected': { color: '#C6C6C6' }
73+
}}
74+
icon={<PeopleIcon sx={{ fontSize: '36px' }} />}
5875
value={2}
5976
/>
60-
<Tab
61-
sx={{ '&.Mui-selected': { color: 'red' } }}
62-
icon={<PeopleIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
63-
value={3}
64-
/>
6577
</Tabs>
6678
);
6779
};

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

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
1-
import React, { useEffect, useState } from 'react';
2-
import { useDrop, DropTargetMonitor } from 'react-dnd';
3-
import { ItemTypes } from '../../constants/ItemTypes';
41
import { Component, DragItem } from '../../interfaces/Interfaces';
5-
import { combineStyles } from '../../helperFunctions/combineStyles';
6-
import renderChildren from '../../helperFunctions/renderChildren';
7-
import Arrow from './Arrow';
8-
import { useDispatch, useSelector } from 'react-redux';
2+
import { DropTargetMonitor, useDrop } from 'react-dnd';
3+
import React, { useEffect, useState } from 'react';
94
import {
10-
changeFocus,
115
addChild,
6+
changeFocus,
127
snapShotAction,
138
toggleCodePreview
149
} from '../../redux/reducers/slice/appStateSlice';
10+
import { useDispatch, useSelector } from 'react-redux';
11+
12+
import Arrow from './Arrow';
13+
import { ItemTypes } from '../../constants/ItemTypes';
1514
import { RootState } from '../../redux/store';
15+
import { combineStyles } from '../../helperFunctions/combineStyles';
16+
import renderChildren from '../../helperFunctions/renderChildren';
1617

1718
function Canvas(props): JSX.Element {
1819
const { state, contextParam, isDarkMode } = useSelector(
1920
(store: RootState) => ({
2021
state: store.appState,
2122
contextParam: store.contextSlice,
22-
isDarkMode: store.darkMode.isDarkMode,
23+
isDarkMode: store.darkMode.isDarkMode
2324
})
2425
);
2526
const dispatch = useDispatch();
@@ -128,7 +129,7 @@ function Canvas(props): JSX.Element {
128129
width: '100%',
129130
minHeight: '100%',
130131
backgroundColor: isOver ? '#191919' : '#191919',
131-
border: '1px solid #FBFBF2',
132+
// border: '1px solid #FBFBF2',
132133
borderStyle: isOver ? 'dotted' : 'solid',
133134
aspectRatio: 'auto 774 / 1200',
134135
boxSizing: 'border-box'
@@ -151,15 +152,15 @@ function Canvas(props): JSX.Element {
151152
currentComponent.style
152153
);
153154
return (
154-
<div
155-
className={'componentContainer'}
156-
ref={drop}
157-
data-testid="drop"
158-
style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
159-
onClick={onClickHandler}
160-
>
161-
{renderChildren(currentComponent.children)}
162-
</div>
155+
<div
156+
className={'componentContainer'}
157+
ref={drop}
158+
data-testid="drop"
159+
style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
160+
onClick={onClickHandler}
161+
>
162+
{renderChildren(currentComponent.children)}
163+
</div>
163164
);
164165
}
165166

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const DemoRender = (): JSX.Element => {
2222
const demoContainerStyle = {
2323
width: '100%',
2424
backgroundColor: '#FBFBFB',
25-
border: '2px Solid grey',
2625
borderBottom: 'none',
2726
overflow: 'auto'
2827
};

‎app/src/containers/LeftContainer.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,20 @@ import Sidebar from '../components/left/Sidebar';
66

77
function App() {
88
const [activeTab, setActiveTab] = useState<number | null>(null);
9+
const [isVisible, setIsVisible] = useState(false); // State to manage visibility
10+
11+
const toggleVisibility = (state: boolean) => {
12+
setIsVisible(state);
13+
};
914

1015
return (
1116
<div style={{ display: 'flex' }}>
12-
<Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
13-
<ContentArea activeTab={activeTab} />
17+
<Sidebar
18+
activeTab={activeTab}
19+
setActiveTab={setActiveTab}
20+
toggleVisibility={toggleVisibility}
21+
/>
22+
<ContentArea activeTab={activeTab} isVisible={isVisible} />
1423
</div>
1524
);
1625
}

‎app/src/public/styles/style.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,10 @@ span.material-symbols-outlined {
321321
z-index: 1;
322322
}
323323

324+
.hidden {
325+
display: none;
326+
}
327+
324328
/*
325329
/////////////////////////////////////////////////
326330
MAIN COLUMN
@@ -543,7 +547,7 @@ BOTTOM PANEL
543547
background-color: #003366;
544548
width: 100%;
545549
height: 100%;
546-
display:flex;
550+
display: flex;
547551
flex-direction: column;
548552

549553
}

0 commit comments

Comments
 (0)