andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update giao diện bottom bar

This commit is contained in:
Truong Vo 2025-12-12 17:05:19 +07:00
parent ec55c169ba
commit d4ae00dc37
2 changed files with 665 additions and 756 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1360
FRONTEND/src/App.tsx
View File

File diff suppressed because it is too large Load Diff

61
FRONTEND/src/components/BottomToolBar.tsx
View File

@ -352,7 +352,7 @@ const BottomToolBar = ({
<motion.div
initial={false}
animate={{
height: isExpand ? "auto" : "auto",
height: isExpand ? "150px" : 0,
y: 0,
}}
transition={{ type: "spring", stiffness: 180, damping: 20 }}
@ -362,9 +362,10 @@ const BottomToolBar = ({
bottom: 0,
left: 0,
zIndex: 1,
overflow: "hidden",
}}
>
<Box style={{ position: "relative" }}>
<Box style={{ position: "relative", height: isExpand ? "150px" : "0px" }}>
<ActionIcon
style={{
position: "absolute",
@ -386,7 +387,7 @@ const BottomToolBar = ({
<IconCaretUp color="green" />
)}
</ActionIcon>
<Grid>
<Grid style={{ height: "100%" }}>
<Grid.Col span={isExpand ? 1 : 3.5}></Grid.Col>
<Grid.Col span={isExpand ? 10 : 5}>
{isExpand ? (
@ -398,6 +399,7 @@ const BottomToolBar = ({
setActiveTabBottom(val || "command");
}}
className={classes.containerBottom}
style={{ height: "100%" }}
>
<Tabs.List>
<Tabs.Tab
@ -438,7 +440,11 @@ const BottomToolBar = ({
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="command" p={4}>
<Tabs.Panel
value="command"
p={4}
style={{ height: "100%", overflow: "auto" }}
>
<Flex justify={"space-between"} align="flex-start">
<Box>
<ScrollArea h={"8vh"}>
@ -646,19 +652,42 @@ const BottomToolBar = ({
</Box>
</Flex>
</Tabs.Panel>
<Tabs.Panel value="apc" ps={"xs"}>
<DrawerAPCControl
socket={socket}
stationAPI={station}
stationId={stationId}
/>
<Tabs.Panel
value="apc"
p={0}
ps={"xs"}
style={{
height: "100%",
overflow: "hidden",
display: "flex",
flexDirection: "column",
}}
>
<Box style={{ overflow: "auto",height: "200px", padding: "4px 8px 0 0" ,}}>
<DrawerAPCControl
socket={socket}
stationAPI={station}
stationId={stationId}
/>
</Box>
</Tabs.Panel>
<Tabs.Panel value="switch" ps={"xs"}>
<DrawerSwitchControl
socket={socket}
stationAPI={station}
stationId={stationId}
/>
<Tabs.Panel
value="switch"
ps={"xs"}
style={{
height: "100%",
overflow: "hidden",
display: "flex",
flexDirection: "column",
}}
>
<Box style={{ height: "200px", overflow: "auto" }}>
<DrawerSwitchControl
socket={socket}
stationAPI={station}
stationId={stationId}
/>
</Box>
</Tabs.Panel>
</Tabs>
) : (