Skip to content

Commit baa09e7

Browse files
AceTheCreatorAceTheCreator
committed
restructured menu UI
1 parent 9606e18 commit baa09e7

File tree

7 files changed

+354
-214
lines changed

7 files changed

+354
-214
lines changed

‎src/frontend/components/IconMenu/file.tsx‎

Lines changed: 83 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,94 @@
1-
import * as React from 'react';
2-
import { useDispatch } from "react-redux";
3-
import { setDirectories } from "../../lib/state/reducer";
4-
import Divider from '@mui/material/Divider';
5-
import Paper from '@mui/material/Paper';
6-
import MenuList from '@mui/material/MenuList';
7-
import MenuItem from '@mui/material/MenuItem';
8-
import ListItemText from '@mui/material/ListItemText';
9-
import ListItemIcon from '@mui/material/ListItemIcon';
10-
import Typography from '@mui/material/Typography';
11-
import ContentCut from '@mui/icons-material/ContentCut';
12-
import ContentCopy from '@mui/icons-material/ContentCopy';
13-
import ContentPaste from '@mui/icons-material/ContentPaste';
14-
import Cloud from '@mui/icons-material/Cloud';
15-
import { openFile, openFolder } from "../../lib/utils/fileSystem";
1+
import React, { useState } from "react";
2+
import Paper from "@mui/material/Paper";
3+
import MenuList from "@mui/material/MenuList";
4+
import Menu from "@mui/material/Menu";
5+
import MenuItem from "@mui/material/MenuItem";
6+
import ListItemText from "@mui/material/ListItemText";
7+
import ListItemIcon from "@mui/material/ListItemIcon";
8+
import Typography from "@mui/material/Typography";
9+
import ContentCopy from "@mui/icons-material/ContentCopy";
10+
import ContentPaste from "@mui/icons-material/ContentPaste";
11+
import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded";
12+
import Cloud from "@mui/icons-material/Cloud";
13+
import FileList from "./fileList";
1614

1715
export default function FileMenu() {
18-
const dispatch = useDispatch();
19-
async function onFolderSelect() {
20-
const folders = await openFolder();
21-
console.log(folders);
22-
dispatch(setDirectories(folders))
23-
}
16+
const [activeMenuOption, setActiveMenuOptions] = useState({
17+
"file-menu": false,
18+
"edit-menu": false,
19+
});
20+
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
21+
const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
22+
const id = event.currentTarget.id;
23+
setAnchorEl(event.currentTarget);
24+
//@ts-ignore */
25+
const selectedMenuOptionState = activeMenuOption[id];
26+
const newActiveMenuOption: any = {};
27+
28+
Object.keys(activeMenuOption).forEach((key) => {
29+
newActiveMenuOption[key] = false;
30+
});
31+
newActiveMenuOption[id] = !selectedMenuOptionState;
32+
setActiveMenuOptions(newActiveMenuOption);
33+
};
34+
const listStyle = {
35+
display: "flex",
36+
justifyContent: "space-between",
37+
};
38+
const fontSize = {
39+
fontSize: "13px",
40+
width: "70px",
41+
};
42+
const arrowStyle = {
43+
width: "15px",
44+
marginLeft: "20px",
45+
};
2446
return (
25-
<Paper sx={{ width: 320, maxWidth: "100%" }}>
47+
<div>
2648
<MenuList>
27-
<MenuItem onClick={() => openFile()}>
28-
<ListItemIcon>
29-
<ContentCut fontSize="small" />
30-
</ListItemIcon>
31-
<ListItemText>Open File</ListItemText>
32-
<Typography variant="body2" color="text.secondary">
33-
⌘X
34-
</Typography>
35-
</MenuItem>
36-
<MenuItem onClick={() => onFolderSelect()}>
37-
<ListItemIcon>
38-
<ContentCopy fontSize="small" />
39-
</ListItemIcon>
40-
<ListItemText>Open Folder</ListItemText>
41-
<Typography variant="body2" color="text.secondary">
42-
⌘C
43-
</Typography>
49+
<div>
50+
<MenuItem
51+
style={listStyle}
52+
id="file-menu"
53+
variant={activeMenuOption["file-menu"] ? "outlined" : "text"}
54+
onMouseEnter={handleMenuClick}
55+
>
56+
<div style={fontSize}>File</div>
57+
<ArrowForwardIosRoundedIcon style={arrowStyle} />
58+
</MenuItem>
59+
<Menu
60+
anchorEl={anchorEl}
61+
open={activeMenuOption["file-menu"]}
62+
onClose={handleMenuClick}
63+
anchorOrigin={{
64+
vertical: "top",
65+
horizontal: "right",
66+
}}
67+
transformOrigin={{
68+
vertical: "top",
69+
horizontal: "left",
70+
}}
71+
style={{
72+
marginTop: "-15px",
73+
borderRadius: "0px",
74+
}}
75+
>
76+
<FileList />
77+
</Menu>
78+
</div>
79+
<MenuItem>
80+
<div style={fontSize}>Edit</div>
81+
<ArrowForwardIosRoundedIcon style={arrowStyle} />
4482
</MenuItem>
4583
<MenuItem>
46-
<ListItemIcon>
47-
<ContentPaste fontSize="small" />
48-
</ListItemIcon>
49-
<ListItemText>Paste</ListItemText>
50-
<Typography variant="body2" color="text.secondary">
51-
⌘V
52-
</Typography>
84+
<div style={fontSize}>Selection</div>
85+
<ArrowForwardIosRoundedIcon style={arrowStyle} />
5386
</MenuItem>
54-
<Divider />
5587
<MenuItem>
56-
<ListItemIcon>
57-
<Cloud fontSize="small" />
58-
</ListItemIcon>
59-
<ListItemText>Web Clipboard</ListItemText>
88+
<div style={fontSize}>Help</div>
89+
<ArrowForwardIosRoundedIcon style={arrowStyle} />
6090
</MenuItem>
6191
</MenuList>
62-
</Paper>
92+
</div>
6393
);
64-
}
94+
};

‎src/frontend/components/IconMenu/fileList.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import MenuList from "@mui/material/MenuList";
2+
import { useDispatch } from "react-redux";
3+
import { setDirectories } from "../../lib/state/reducer";
4+
import MenuItem from "@mui/material/MenuItem";
5+
import { openFile, openFolder } from "../../lib/utils/fileSystem";
6+
import { Divider } from "@mui/material";
7+
8+
export default function FileList() {
9+
const dispatch = useDispatch();
10+
async function onFolderSelect() {
11+
const folders = await openFolder();
12+
dispatch(setDirectories(folders));
13+
}
14+
const listStyle = {
15+
display: "flex",
16+
justifyContent: "space-between",
17+
};
18+
const fontSize = {
19+
fontSize: "13px",
20+
minWidth: "180px",
21+
};
22+
const arrowStyle = {
23+
width: "15px",
24+
marginLeft: "20px",
25+
};
26+
return (
27+
<div>
28+
<MenuList>
29+
<MenuItem style={listStyle}>
30+
<div style={fontSize}>New File</div>
31+
</MenuItem>
32+
<MenuItem style={listStyle}>
33+
<div style={fontSize}>New Window</div>
34+
</MenuItem>
35+
<Divider />
36+
<MenuItem onClick={() => openFile()}>
37+
<div style={fontSize}>Open File</div>
38+
</MenuItem>
39+
<MenuItem onClick={() => onFolderSelect()}>
40+
<div style={fontSize}>Open Folder</div>
41+
</MenuItem>
42+
<Divider />
43+
<MenuItem>
44+
<div style={fontSize}>Save</div>
45+
</MenuItem>
46+
<MenuItem>
47+
<div style={fontSize}>Save As</div>
48+
</MenuItem>
49+
<Divider />
50+
<MenuItem>
51+
<div style={fontSize}>Close Editor</div>
52+
</MenuItem>
53+
</MenuList>
54+
</div>
55+
);
56+
}

0 commit comments

Comments
 (0)