Skip to content

Commit f13d867

Browse files
AhnafKhvnAhnafKhvn
committed
Co-authored-by: raulclassico7 <[email protected]>
2 parents 225de92 + d8c48f7 commit f13d867

20 files changed

+358
-129
lines changed

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
198198
/>
199199
<TextField
200200
id="textfield-value"
201-
label="initial value:"
201+
label="initial value"
202202
variant="outlined"
203203
value={inputValue}
204204
onChange={(e) => setInputValue(e.target.value)}
@@ -218,11 +218,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
218218
>
219219
<InputLabel
220220
id="select-required-label"
221-
className={
222-
isThemeLight
223-
? classes.greyThemeFontColor
224-
: classes.darkThemeFontColor
225-
}
221+
style={{color: 'black'}}
226222
>
227223
Type
228224
</InputLabel>
@@ -509,7 +505,7 @@ const useStyles = makeStyles((theme: Theme) => ({
509505
fontSize: '90%',
510506
textAlign: 'center',
511507
margin: '-20px 0px 5px 150px',
512-
borderStyle: 'none',
508+
border: ' 1px solid #186BB4',
513509
transition: '0.3s',
514510
// borderRadius: "25px",
515511
},
@@ -524,7 +520,7 @@ const useStyles = makeStyles((theme: Theme) => ({
524520
color: '#fff'
525521
},
526522
greyThemeFontColor: {
527-
color: 'rgba(0,0,0,0.54)'
523+
color: 'white'
528524
},
529525
formControl: {
530526
margin: '8px',
@@ -538,7 +534,7 @@ const useStyles = makeStyles((theme: Theme) => ({
538534
},
539535
rootLight: {
540536
'& .MuiFormLabel-root': {
541-
color: 'rgba(0,0,0,0.54)'
537+
color: 'white'
542538
}
543539
},
544540
rootDark: {

‎app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const TableParentProps = props => {
5757
renderCell: function renderCell(params: any) {
5858
return (
5959
<Button
60-
style={{ width: `${3}px`, color: 'black'}}
60+
style={{ width: `${3}px`, color: 'white'}}
6161
onClick={() => {
6262
addProps(params.row, params.id - 1);
6363
}}

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,9 +130,9 @@ const BottomTabs = (props): JSX.Element => {
130130
{tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
131131
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
132132
{/* {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />} */}
133-
{tab === 4 && <Tree data={components} />}
134-
{tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
135-
{tab === 6 && (
133+
{tab === 3 && <Tree data={components} />}
134+
{tab === 4 && <ContextManager theme={theme} setTheme={setTheme} />}
135+
{tab === 5 && (
136136
<StateManager
137137
theme={theme}
138138
setTheme={setTheme}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import Grid from '@mui/material/Grid';
31
import ComponentPanelItem from '../right/ComponentPanelItem';
2+
import Grid from '@mui/material/Grid';
3+
import React from 'react';
4+
import { RootState } from '../../redux/store';
45
import makeStyles from '@mui/styles/makeStyles';
56
import { useSelector } from 'react-redux';
6-
import { RootState } from '../../redux/store';
77
// The component panel section of the left panel displays all components and has the ability to add new components
88
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
99
const classes = useStyles();
@@ -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
);
@@ -108,7 +108,7 @@ const useStyles = makeStyles({
108108
wordWrap: 'break-word'
109109
},
110110
lightThemeFontColor: {
111-
color: '#155084'
111+
color: '#fff'
112112
},
113113
darkThemeFontColor: {
114114
color: '#fff'

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

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,82 @@
1+
import ComponentPanelItem from '../right/ComponentPanelItem';
2+
import Grid from '@mui/material/Grid';
13
import React from 'react';
4+
import { RootState } from '../../redux/store';
5+
import makeStyles from '@mui/styles/makeStyles';
6+
import { useSelector } from 'react-redux';
27

38
const ComponentsContainer = () => {
4-
return <div>ComponentsContainer</div>;
9+
const classes = useStyles();
10+
const state = useSelector((store: RootState) => store.appState);
11+
const isDarkMode = useSelector(
12+
(store: RootState) => store.darkMode.isDarkMode
13+
);
14+
const isFocus = (targetId: Number) => {
15+
return state.canvasFocus.componentId === targetId ? true : false;
16+
};
17+
return (
18+
<div>
19+
<div className={classes.panelWrapper}>
20+
<div className={classes.panelWrapperList}>
21+
<h4
22+
className={
23+
!isDarkMode
24+
? classes.lightThemeFontColor
25+
: classes.darkThemeFontColor
26+
}
27+
>
28+
Reusable Components
29+
</h4>
30+
<Grid
31+
container
32+
direction="row"
33+
justifyContent="center"
34+
alignItems="center"
35+
>
36+
{state.components
37+
.filter((comp) => !state.rootComponents.includes(comp.id))
38+
.map((comp) => {
39+
return (
40+
<ComponentPanelItem
41+
isFocus={isFocus(comp.id)}
42+
key={`comp-${comp.id}`}
43+
name={comp.name}
44+
id={comp.id}
45+
root={false}
46+
/>
47+
);
48+
})}
49+
</Grid>
50+
</div>
51+
</div>
52+
</div>
53+
);
554
};
655

56+
const useStyles = makeStyles({
57+
panelWrapper: {
58+
display: 'flex',
59+
flexDirection: 'column',
60+
alignItems: 'center',
61+
flexGrow: 1,
62+
overflow: 'auto'
63+
},
64+
panelWrapperList: {
65+
minHeight: '120px',
66+
marginLeft: '-15px',
67+
marginRight: '-15px',
68+
width: '100%',
69+
display: 'flex',
70+
flexDirection: 'column',
71+
alignItems: 'center',
72+
wordWrap: 'break-word'
73+
},
74+
lightThemeFontColor: {
75+
color: '#fff'
76+
},
77+
darkThemeFontColor: {
78+
color: '#fff'
79+
}
80+
});
81+
782
export default ComponentsContainer;

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

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,38 @@ import React from 'react';
55
import RoomsContainer from './RoomsContainer';
66
import TreeContainer from './TreeContainer';
77

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

13-
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
14-
return <Box hidden={value !== index}>{value === index && children}</Box>;
13+
const TabPanel: React.FC<{
14+
children: React.ReactNode;
15+
activeTab: number | null;
16+
index: number;
17+
}> = ({ children, activeTab, index }) => {
18+
return (
19+
<Box hidden={activeTab !== index}>{activeTab === index && children}</Box>
20+
);
1521
};
1622

17-
const ContentArea: React.FC<{ value: number | null }> = ({ value }) => {
18-
if (value === null) {
19-
return null;
20-
}
21-
23+
const panels = [
24+
<ElementsContainer />,
25+
<ComponentsContainer />,
26+
<RoomsContainer />
27+
];
28+
const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
2229
return (
23-
<div className="left-container">
30+
<div
31+
className="left-container"
32+
style={{ display: isVisible ? 'block' : 'none' }} // Visibility based on activeTab
33+
>
2434
<div className="column left">
25-
<TabPanel value={value} index={0}>
26-
<ElementsContainer />
27-
</TabPanel>
28-
<TabPanel value={value} index={1}>
29-
<ComponentsContainer />
30-
</TabPanel>
31-
<TabPanel value={value} index={2}>
32-
<TreeContainer />
33-
</TabPanel>
34-
<TabPanel value={value} index={3}>
35-
<RoomsContainer />
36-
</TabPanel>
35+
{panels.map((panel, idx) => (
36+
<TabPanel activeTab={activeTab} index={idx}>
37+
{panel}
38+
</TabPanel>
39+
))}
3740
</div>
3841
</div>
3942
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ElementsContainer = (props): JSX.Element => {
4848
textAlign: 'center'
4949
}}
5050
>
51-
<h4>Drag and Drop</h4>
51+
{' '}
5252
<DragDropPanel />
5353
<div id={'CompBottomHalf'}>
5454
<ComponentDrag isThemeLight={props.isThemeLight} />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ const HTMLPanel = (props): JSX.Element => {
199199
style={{ margin: '10px' }}
200200
InputProps={{
201201
style: {
202-
color: !isDarkMode ? 'black' : 'white'
202+
color: !isDarkMode ? 'white' : 'white'
203203
}
204204
}}
205205
/>
@@ -247,7 +247,7 @@ const HTMLPanel = (props): JSX.Element => {
247247
style={{}}
248248
InputProps={{
249249
style: {
250-
color: !isDarkMode ? 'black' : 'white'
250+
color: !isDarkMode ? 'white' : 'white'
251251
}
252252
}}
253253
/>

0 commit comments

Comments
 (0)