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

Hiệu chỉnh thanh bottom bar gọn hơn

This commit is contained in:
Truong Vo 2025-12-04 08:26:13 +07:00
parent ef57da0154
commit 4d9c6abc89
2 changed files with 70 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -479,7 +479,7 @@ const BottomToolBar = ({
<motion.div
initial={false}
animate={{
height: isExpand ? "20vh" : 0,
height: isExpand ? "auto" : 0,
y: 0, // đẩy xuống khi thu nhỏ
}}
transition={{ type: "spring", stiffness: 180, damping: 20 }}
@ -489,6 +489,7 @@ const BottomToolBar = ({
bottom: 0,
left: 0,
zIndex: 1,
// overflow: "hidden",
}}
>
<Box style={{ position: "relative" }}>
@ -523,7 +524,6 @@ const BottomToolBar = ({
setActiveTabBottom(val || "command");
}}
className={classes.containerBottom}
style={{ height: "20vh" }}
>
<Tabs.List>
<Tabs.Tab
@ -564,10 +564,10 @@ const BottomToolBar = ({
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="command" p={"xs"}>
<Flex justify={"space-between"}>
<Tabs.Panel value="command" p={4}>
<Flex justify={"space-between"} align="flex-start">
<Box>
<ScrollArea h={"12vh"}>
<ScrollArea h={"8vh"}>
<Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
{selectedLines.map((el) => (
<Box
@ -615,13 +615,18 @@ const BottomToolBar = ({
</Flex>
</Box>
))}
</Flex>
</ScrollArea>
{selectedLines?.length > 0 ? (
<Button
fw={400}
className={classes.buttonControl}
variant="outline"
{selectedLines.length > 0 && (
<Box
style={{
padding: "4px 10px",
height: "26px",
backgroundColor: "#ffe3e3",
borderRadius: "999px",
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
onClick={() => {
selectedLines.forEach((line) => {
socket?.emit("close_cli", {
@ -632,11 +637,50 @@ const BottomToolBar = ({
setSelectedLines([]);
}}
>
<Text fz={"11px"} c="red">
Clear
</Button>
) : (
""
</Text>
</Box>
)}
</Flex>
</ScrollArea>
<Flex justify={"space-between"} align={"center"} mt={4}>
<Text fz={"11px"} c="dimmed">
Selected: {selectedLines.length} / {station.lines.length}
</Text>
<ButtonSelect
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
station={station}
userName={user?.userName}
onClick={() => {
const lines = station.lines.filter(
(line) =>
!line?.userOpenCLI ||
line?.userOpenCLI === user?.userName
);
if (selectedLines.length !== lines.length) {
setSelectedLines(lines);
lines.forEach((line) => {
socket?.emit("open_cli", {
lineId: line.id,
stationId: line.stationId || line.station_id,
userEmail: user?.email,
userName: user?.userName,
});
});
} else {
selectedLines.forEach((line) => {
socket?.emit("close_cli", {
lineId: line?.id,
stationId: line.stationId || line.station_id,
});
});
setSelectedLines([]);
}
}}
/>
</Flex>
</Box>
<Box pl={"md"} pr={"md"}>
<Flex justify={"space-between"} mb={"xs"}>
@ -716,46 +760,13 @@ const BottomToolBar = ({
/>
</Box>
</Box>
<Box style={{ width: "220px" }}>
<Flex align={"center"} wrap={"wrap"} gap={"xs"}>
<ButtonSelect
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
station={station}
userName={user?.userName}
onClick={() => {
const lines = station.lines.filter(
(line) =>
!line?.userOpenCLI ||
line?.userOpenCLI === user?.userName
);
if (selectedLines.length !== lines.length) {
setSelectedLines(lines);
lines.forEach((line) => {
socket?.emit("open_cli", {
lineId: line.id,
stationId: line.stationId || line.station_id,
userEmail: user?.email,
userName: user?.userName,
});
});
} else {
selectedLines.forEach((line) => {
socket?.emit("close_cli", {
lineId: line?.id,
stationId: line.stationId || line.station_id,
});
});
setSelectedLines([]);
}
}}
/>
<Box style={{ width: "260px" }}>
<Flex align={"center"} justify={"flex-end"} gap={"xs"} wrap={"wrap"}>
<ButtonDPELP
socket={socket}
selectedLines={selectedLines}
isDisable={isDisable || selectedLines.length === 0}
onClick={() => {
// setSelectedLines([]);
if (
selectedLines.length > 0 &&
selectedLines.length === station?.lines?.length

3
FRONTEND/src/components/Component.module.css
View File

@ -121,7 +121,8 @@
}
.containerBottom {
height: 22vh;
height: auto;
max-height: 20vh;
padding: 8px;
border: 1px solid #ccc;
border-radius: 8px;