Skip to content

Commit e2be9b3

Browse files
KenSuenobuKenSuenobu
committed
fix: lots of new updates
1 parent e6a39ff commit e2be9b3

8 files changed

Lines changed: 336 additions & 96 deletions

File tree

‎objectified-nextgen/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13+
"@emotion/react": "^11.14.0",
14+
"@emotion/styled": "^11.14.0",
15+
"@mui/icons-material": "^7.0.2",
16+
"@mui/lab": "^7.0.0-beta.11",
17+
"@mui/material": "^7.0.2",
1318
"next": "15.3.1",
1419
"next-auth": "^4.24.11",
1520
"react": "^19.0.0",

‎objectified-nextgen/public/Objectified-02.png‎

155 KB
Loading

‎objectified-nextgen/src/app/components/ContentArea.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
'use client';
2+
3+
import {
4+
Button,
5+
Checkbox,
6+
DialogTitle, FormControl, FormControlLabel, IconButton,
7+
InputLabel, MenuItem,
8+
Select,
9+
Stack,
10+
Box,
11+
TextField,
12+
LinearProgress,
13+
ToggleButtonGroup,
14+
ToggleButton,
15+
} from '@mui/material';
16+
import Tab from '@mui/material/Tab';
17+
import TabContext from '@mui/lab/TabContext';
18+
import TabList from '@mui/lab/TabList';
19+
import TabPanel from '@mui/lab/TabPanel';
20+
import * as React from 'react';
21+
import SideBar from "@/app/components/SideBar";
22+
import VersionSelector from "@/app/components/common/VersionSelector";
23+
24+
const ContentArea = () => {
25+
const [currentTab, setCurrentTab] = React.useState('1');
26+
27+
const handleTabChanged = (event: React.SyntheticEvent, newValue: string) => {
28+
setCurrentTab(newValue);
29+
};
30+
31+
return (
32+
<>
33+
<Box style={{ position: 'fixed',
34+
width: '100%',
35+
borderRight: '1px solid #ccc',
36+
height: 'calc(100% - 32px)',
37+
top: '32px',
38+
left: 0 }}
39+
className={'bg-white'}>
40+
<TabContext value={currentTab}>
41+
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
42+
<TabList onChange={handleTabChanged} style={{ minHeight: 40, height: 40, borderBottom: '1px solid #ccc', paddingBottom: '2px' }}>
43+
<Tab disableRipple style={{ textTransform: 'none', padding: '8px', fontSize: '12px', fontWeight: 300, minHeight: 40, height: 40 }}
44+
label={'Visual Editor'} value={'1'}/>
45+
<Tab disableRipple style={{ textTransform: 'none', padding: '8px', fontSize: '12px', fontWeight: 300, minHeight: 40, height: 40 }}
46+
label={'API Editor'} value={'2'}/>
47+
<Tab disableRipple style={{ textTransform: 'none', padding: '8px', fontSize: '12px', fontWeight: 300, minHeight: 40, height: 40 }}
48+
label={'Code Editor'} value={'3'}/>
49+
<Tab disableRipple style={{ textTransform: 'none', padding: '8px', fontSize: '12px', fontWeight: 300, minHeight: 40, height: 40 }}
50+
label={'Documentation'} value={'4'}/>
51+
</TabList>
52+
</Box>
53+
54+
<VersionSelector onVersionChanged={() => {}}/>
55+
</TabContext>
56+
57+
{(currentTab === '1') && (
58+
<Box style={{ position: 'fixed',
59+
width: '100%',
60+
height: 'calc(100% - 72px)',
61+
top: '72px',
62+
left: '0',
63+
backgroundColor: '#3ff'
64+
}}>
65+
<SideBar/>
66+
</Box>
67+
)}
68+
69+
{(currentTab === '2') && (
70+
<Box style={{ position: 'fixed',
71+
width: '100%',
72+
height: 'calc(100% - 72px)',
73+
top: '72px',
74+
left: '0',
75+
backgroundColor: '#f3f'
76+
}}>
77+
</Box>
78+
)}
79+
80+
{(currentTab === '3') && (
81+
<Box style={{ position: 'fixed',
82+
width: '100%',
83+
height: 'calc(100% - 72px)',
84+
top: '72px',
85+
left: '0',
86+
backgroundColor: '#ff3'
87+
}}>
88+
</Box>
89+
)}
90+
91+
{(currentTab === '4') && (
92+
<Box style={{ position: 'fixed',
93+
width: '100%',
94+
height: 'calc(100% - 72px)',
95+
top: '72px',
96+
left: '0',
97+
backgroundColor: '#aaf'
98+
}}>
99+
</Box>
100+
)}
101+
</Box>
102+
</>
103+
);
104+
}
105+
106+
export default ContentArea;

‎objectified-nextgen/src/app/components/SideBar.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client';
2+
3+
import {
4+
Button,
5+
Checkbox,
6+
DialogTitle, FormControl, FormControlLabel, IconButton,
7+
InputLabel, MenuItem,
8+
Select,
9+
Stack,
10+
Box,
11+
TextField,
12+
LinearProgress,
13+
ToggleButtonGroup,
14+
ToggleButton,
15+
} from '@mui/material';
16+
import ProjectSelector from "@/app/components/common/ProjectSelector";
17+
import * as React from 'react';
18+
19+
const SideBar = () => {
20+
const [selectedSection, setSelectedSection] = React.useState('classes');
21+
22+
const handleChange = (e, newAlignment: string,) => {
23+
24+
}
25+
26+
return (
27+
<>
28+
<Box style={{ position: 'fixed', width: '300px', borderRight: '1px solid #ccc', height: 'calc(100% - 72px)',
29+
top: '72px', left: 0}}
30+
className={'bg-white'}>
31+
<Stack direction={'column'}>
32+
<Box style={{ width: '100%' }}>
33+
<ToggleButtonGroup value={selectedSection}
34+
exclusive
35+
onChange={handleChange}>
36+
<ToggleButton value={'classes'}>Classes</ToggleButton>
37+
<ToggleButton value={'properties'}>Properties</ToggleButton>
38+
</ToggleButtonGroup>
39+
</Box>
40+
</Stack>
41+
</Box>
42+
</>
43+
);
44+
}
45+
46+
export default SideBar;

‎objectified-nextgen/src/app/components/TopHeader.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use client';
2+
3+
import { Box, Typography, Stack } from '@mui/material';
4+
import ProjectSelector from "@/app/components/common/ProjectSelector";
5+
6+
const VERSION = "0.2.0";
7+
8+
const TopHeader = () => {
9+
return (
10+
<Box style={{ position: 'fixed', width: '100%', height: '32px', fontSize: 13, borderBottom: '1px solid #ccc', }}
11+
className={'bg-white text-black font-light'}>
12+
<Stack direction={'row'}>
13+
<Box component={'img'} src={'/Objectified-02.png'} style={{ height: 32 }}/>
14+
15+
<Typography style={{ fontWeight: 200, fontSize: 14, padding: '5px' }}>
16+
ADE v{VERSION}
17+
</Typography>
18+
19+
<Box style={{ padding: '4px' }}>
20+
<ProjectSelector onTenantChanged={() => {}}/>
21+
</Box>
22+
</Stack>
23+
</Box>
24+
)
25+
}
26+
27+
export default TopHeader;

‎objectified-nextgen/src/app/components/common/ProjectSelector.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client';
2+
3+
import {
4+
Button,
5+
Checkbox,
6+
DialogTitle, FormControl, FormControlLabel, IconButton,
7+
InputLabel, MenuItem,
8+
Select,
9+
Stack,
10+
Box,
11+
TextField,
12+
LinearProgress,
13+
} from '@mui/material';
14+
import AddIcon from '@mui/icons-material/Add';
15+
16+
export interface IProjectSelector {
17+
onTenantChanged: (tenantId: string) => any;
18+
}
19+
20+
const ProjectSelector = (props: IProjectSelector) => {
21+
const projects = [
22+
{
23+
id: '1',
24+
name: 'Default Project',
25+
},
26+
{
27+
id: '2',
28+
name: 'Objectified Project'
29+
},
30+
{
31+
id: '3',
32+
name: 'Cleanmail',
33+
}
34+
];
35+
36+
if (projects.length > 0) {
37+
return (
38+
<Stack direction={'row'}>
39+
<Box style={{ color: '#fff', paddingTop: '0px', width: '100%', }}
40+
className={'bg-white font-thin text-black'}>
41+
<FormControl style={{ width: '100%' }}>
42+
<Select labelId={'tenant-selector'}
43+
label={''}
44+
className={'font-thin text-black text-sm'}
45+
name={'tenantSelector'}
46+
// value={(session as any).currentTenant ?? ''}
47+
value={projects[0].name}
48+
onChange={(e: any) => props.onTenantChanged(e.target.value)}
49+
sx={{
50+
textAlign: 'left', width: '100%', height: '26px', borderRadius: 0,
51+
color: 'black',
52+
'& .MuiSvgIcon-root': {
53+
color: '#555'
54+
}
55+
}}
56+
fullWidth>
57+
{projects.map((x: any, counter: number) => (
58+
<MenuItem className={'font-thin text-sm'}
59+
value={x.id}
60+
key={`tenant-selector-${counter}`}>{x.name}</MenuItem>
61+
))}
62+
</Select>
63+
</FormControl>
64+
</Box>
65+
66+
<Box style={{ padding: '0px', textAlign: 'right', paddingRight: '8px' }}
67+
className={'bg-white text-black'}>
68+
<IconButton style={{
69+
height: '26px', borderRadius: 0,
70+
paddingLeft: '4px', paddingRight: '4px' }}
71+
className={'border-1 border-black'}
72+
variant={'contained'}>
73+
<AddIcon style={{ width: '16px', height: '16px' }}/>
74+
</IconButton>
75+
</Box>
76+
</Stack>
77+
);
78+
} else {
79+
return <LinearProgress />;
80+
}
81+
}
82+
83+
export default ProjectSelector;

‎objectified-nextgen/src/app/components/common/VersionSelector.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
'use client';
2+
3+
import {
4+
Button,
5+
Checkbox,
6+
DialogTitle, FormControl, FormControlLabel, IconButton,
7+
InputLabel, MenuItem,
8+
Select,
9+
Stack,
10+
Box,
11+
TextField,
12+
LinearProgress,
13+
Typography,
14+
} from '@mui/material';
15+
import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
16+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
17+
import AddIcon from '@mui/icons-material/Add';
18+
19+
export interface IProjectSelector {
20+
onVersionChanged: (versionId: string) => any;
21+
}
22+
23+
const VersionSelector = (props: IProjectSelector) => {
24+
return (
25+
<Button style={{ top: 38,
26+
right: 10,
27+
position: 'fixed',
28+
height: '28px',
29+
zIndex: 999,
30+
textTransform: 'none',
31+
paddingLeft: '8px',
32+
paddingRight: '6px',
33+
}}
34+
disableRipple
35+
variant={'outlined'}>
36+
<Stack direction={'row'}>
37+
<Box style={{ paddingTop: '0px', textAlign: 'left' }}
38+
className={'text-black'}>
39+
<LocalOfferOutlinedIcon style={{ height: 16, paddingRight: '6px' }}/> Version v1 <ExpandMoreIcon style={{ paddingLeft: '4px'}}/>
40+
</Box>
41+
42+
<Box style={{ textAlign: 'right' }}
43+
className={'bg-white text-black'}>
44+
</Box>
45+
</Stack>
46+
</Button>
47+
);
48+
}
49+
50+
export default VersionSelector;

0 commit comments

Comments
 (0)