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