Skip to content

Commit 8250913

Browse files
author
Tamoor Shahid
committed
Temp
1 parent 2e776d0 commit 8250913

File tree

1 file changed

+171
-81
lines changed

1 file changed

+171
-81
lines changed

‎src/screens/OavMover/OavSideBar.tsx‎

Lines changed: 171 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,189 @@
11
import {
2-
ArrowUpwardRounded,
3-
ArrowBackRounded,
4-
ArrowForwardRounded,
5-
ArrowDownwardRounded,
2+
KeyboardDoubleArrowLeft,
3+
KeyboardArrowLeft,
4+
KeyboardDoubleArrowUp,
5+
KeyboardArrowUp,
6+
KeyboardArrowRight,
7+
KeyboardArrowDown,
8+
KeyboardDoubleArrowDown,
9+
KeyboardDoubleArrowRight,
610
} from "@mui/icons-material";
7-
import { Box, Grid2, Button, useTheme } from "@mui/material";
11+
import { Box, Grid2, Button, useTheme, Tab, Tabs } from "@mui/material";
812
import { SelectionWithPlanRunner } from "../../components/SelectionControl";
913
import { BacklightPositions, ZoomLevels } from "../../pv/enumPvValues";
1014
import { PvDescription } from "../../pv/types";
15+
import { useState } from "react";
16+
17+
interface TabPanelProps {
18+
children?: React.ReactNode;
19+
index: number;
20+
value: number;
21+
}
22+
23+
const buttonStyle = {
24+
color: "white",
25+
border: "2px solid #423a3aff",
26+
};
27+
28+
function BlockMove(props: TabPanelProps) {
29+
if (props.value !== props.index) return null;
30+
31+
return (
32+
<Grid2 container spacing={0} columns={5}>
33+
<Grid2 size={1} offset={2}>
34+
<Button sx={buttonStyle}>Y-Y</Button>
35+
</Grid2>
36+
<Grid2 size={2} />
37+
<Grid2 size={1} offset={1}>
38+
<Button sx={buttonStyle}>X-X</Button>
39+
</Grid2>
40+
<Grid2 size={1} offset={1}>
41+
<Button sx={buttonStyle}>X+X</Button>
42+
</Grid2>
43+
<Grid2 size={1} offset={2}>
44+
<Button sx={buttonStyle}>Y+Y</Button>
45+
</Grid2>
46+
</Grid2>
47+
);
48+
}
49+
50+
function NudgeMove(props: TabPanelProps) {
51+
if (props.value !== props.index) return null;
52+
53+
return (
54+
<Grid2 container spacing={0} columns={5}>
55+
<Grid2 size={1} offset={2}>
56+
<Button sx={buttonStyle}>
57+
<KeyboardDoubleArrowUp />
58+
</Button>
59+
</Grid2>
60+
<Grid2 size={1} offset={2}>
61+
<Button sx={buttonStyle}>
62+
<KeyboardArrowUp />
63+
</Button>
64+
</Grid2>
65+
<Grid2 size={2} />
66+
<Grid2 size={1}>
67+
<Button sx={buttonStyle}>
68+
<KeyboardDoubleArrowLeft />
69+
</Button>
70+
</Grid2>
71+
<Grid2 size={1}>
72+
<Button sx={buttonStyle}>
73+
<KeyboardArrowLeft />
74+
</Button>
75+
</Grid2>
76+
<Grid2 size={1} offset={1}>
77+
<Button sx={buttonStyle}>
78+
<KeyboardArrowRight />
79+
</Button>
80+
</Grid2>
81+
<Grid2 size={1}>
82+
<Button sx={buttonStyle}>
83+
<KeyboardDoubleArrowRight />
84+
</Button>
85+
</Grid2>
86+
<Grid2 size={1} offset={2}>
87+
<Button sx={buttonStyle}>
88+
<KeyboardArrowDown />
89+
</Button>
90+
</Grid2>
91+
<Grid2 size={1} offset={2}>
92+
<Button sx={buttonStyle}>
93+
<KeyboardDoubleArrowDown />
94+
</Button>
95+
</Grid2>
96+
</Grid2>
97+
);
98+
}
99+
100+
function WindowMove(props: TabPanelProps) {
101+
if (props.value !== props.index) return null;
102+
103+
return (
104+
<Grid2 container spacing={0} columns={5}>
105+
<Grid2 size={1} offset={2}>
106+
<Button sx={buttonStyle}>
107+
<KeyboardDoubleArrowUp />
108+
</Button>
109+
</Grid2>
110+
<Grid2 size={1} offset={2}>
111+
<Button sx={buttonStyle}>
112+
<KeyboardArrowUp />
113+
</Button>
114+
</Grid2>
115+
<Grid2 size={2} />
116+
<Grid2 size={1}>
117+
<Button sx={buttonStyle}>
118+
<KeyboardDoubleArrowLeft />
119+
</Button>
120+
</Grid2>
121+
<Grid2 size={1}>
122+
<Button sx={buttonStyle}>
123+
<KeyboardArrowLeft />
124+
</Button>
125+
</Grid2>
126+
<Grid2 size={1} offset={1}>
127+
<Button sx={buttonStyle}>
128+
<KeyboardArrowRight />
129+
</Button>
130+
</Grid2>
131+
<Grid2 size={1}>
132+
<Button sx={buttonStyle}>
133+
<KeyboardDoubleArrowRight />
134+
</Button>
135+
</Grid2>
136+
<Grid2 size={1} offset={2}>
137+
<Button sx={buttonStyle}>
138+
<KeyboardArrowDown />
139+
</Button>
140+
</Grid2>
141+
<Grid2 size={1} offset={2}>
142+
<Button sx={buttonStyle}>
143+
<KeyboardDoubleArrowDown />
144+
</Button>
145+
</Grid2>
146+
</Grid2>
147+
);
148+
}
11149

12150
export function MoveArrows() {
13151
const theme = useTheme();
152+
153+
const [value, setValue] = useState(0);
154+
155+
const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
156+
console.log("Value changed to", newValue);
157+
158+
setValue(newValue);
159+
};
160+
14161
return (
15162
<Box
16163
bgcolor={theme.palette.background.paper}
17164
borderRadius={5}
18165
paddingTop={1}
19166
paddingBottom={1}
20167
>
21-
Movement
22-
<Grid2 container spacing={0} columns={3}>
23-
<Grid2 size={3}>
24-
<b>Block Move</b>
25-
</Grid2>
26-
<Grid2 size={1} />{" "}
27-
<Grid2 size={1}>
28-
<Button style={{ backgroundColor: "red" }}>Y-Y</Button>
29-
</Grid2>{" "}
30-
<Grid2 size={1} />
31-
<Grid2 size={1}>
32-
<Button style={{ backgroundColor: "red" }}>X-X</Button>
33-
</Grid2>{" "}
34-
<Grid2 size={1} />
35-
<Grid2 size={1}>
36-
<Button style={{ backgroundColor: "red" }}>X+X</Button>
37-
</Grid2>{" "}
38-
<Grid2 size={1} />{" "}
39-
<Grid2 size={1}>
40-
<Button style={{ backgroundColor: "red" }}>Y+Y</Button>
41-
</Grid2>{" "}
42-
<Grid2 size={3}>
43-
<b>Window Move</b>
44-
</Grid2>
45-
<Grid2 size={1} />{" "}
46-
<Grid2 size={1}>
47-
<Button>
48-
<ArrowUpwardRounded />
49-
</Button>
50-
</Grid2>{" "}
51-
<Grid2 size={1} />
52-
<Grid2 size={1}>
53-
<Button>
54-
<ArrowBackRounded />
55-
</Button>
56-
</Grid2>{" "}
57-
<Grid2 size={1} />
58-
<Grid2 size={1}>
59-
<Button>
60-
<ArrowForwardRounded />
61-
</Button>
62-
</Grid2>{" "}
63-
<Grid2 size={1} />{" "}
64-
<Grid2 size={1}>
65-
<Button>
66-
<ArrowDownwardRounded />
67-
</Button>
68-
</Grid2>{" "}
69-
<Grid2 size={3}>
70-
<b>Nudge Move</b>
71-
</Grid2>
72-
<Grid2 size={1} />{" "}
73-
<Grid2 size={1}>
74-
<Button>
75-
<ArrowUpwardRounded />
76-
</Button>
77-
</Grid2>{" "}
78-
<Grid2 size={1} />
79-
<Grid2 size={1}>
80-
<Button>
81-
<ArrowBackRounded />
82-
</Button>
83-
</Grid2>{" "}
84-
<Grid2 size={1} />
85-
<Grid2 size={1}>
86-
<Button>
87-
<ArrowForwardRounded />
88-
</Button>
89-
</Grid2>{" "}
90-
<Grid2 size={1} />{" "}
91-
<Grid2 size={1}>
92-
<Button>
93-
<ArrowDownwardRounded />
94-
</Button>
95-
</Grid2>{" "}
96-
</Grid2>
168+
<Box sx={{ borderBottom: 1, borderColor: "divider", mb: 2 }}>
169+
<Tabs
170+
value={value}
171+
onChange={handleChange}
172+
sx={{
173+
"& .Mui-selected": {
174+
color: theme.palette.secondary.main,
175+
},
176+
}}
177+
centered
178+
>
179+
<Tab label="Nudge" />
180+
<Tab label="Window" />
181+
<Tab label="Block" />
182+
</Tabs>
183+
</Box>
184+
<NudgeMove value={value} index={0} />
185+
<WindowMove value={value} index={1} />
186+
<BlockMove value={value} index={2} />
97187
</Box>
98188
);
99189
}

0 commit comments

Comments
 (0)