Removed Configuration Button

This commit is contained in:
Nicole Rappe 2025-05-14 23:18:00 -06:00
parent 6dc4d0b7fd
commit eb43555ed6

View File

@ -1,29 +1,9 @@
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Configuration_Sidebar.jsx ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Configuration_Sidebar.jsx
import React from "react"; import { Box, Typography } from "@mui/material";
import { Box, Typography, IconButton } from "@mui/material";
import { Settings as SettingsIcon } from "@mui/icons-material";
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) { export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) {
return ( return (
<> <>
{/* Top-right gear icon */}
<IconButton
onClick={() => setDrawerOpen(true)}
size="small"
sx={{
position: "absolute",
top: 8,
right: 8,
zIndex: 1500,
bgcolor: "#2a2a2a",
color: "#58a6ff",
border: "1px solid #444",
"&:hover": { bgcolor: "#3a3a3a" }
}}
>
<SettingsIcon fontSize="small" />
</IconButton>
{/* Dim overlay when drawer is open */} {/* Dim overlay when drawer is open */}
{drawerOpen && ( {drawerOpen && (
<Box <Box
@ -65,10 +45,10 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
right: 0, right: 0,
bottom: 0, bottom: 0,
width: 400, width: 400,
bgcolor: "#121212", bgcolor: "#2C2C2C",
color: "#ccc", color: "#ccc",
borderLeft: "1px solid #333", borderLeft: "1px solid #333",
padding: 2, padding: 0,
zIndex: 11, zIndex: 11,
overflowY: "auto", overflowY: "auto",
transform: drawerOpen ? "translateX(0)" : "translateX(100%)", transform: drawerOpen ? "translateX(0)" : "translateX(100%)",
@ -76,9 +56,21 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}> {/* Title bar section */}
<Box
sx={{
backgroundColor: "#232323",
padding: "16px",
borderBottom: "1px solid #333"
}}
>
<Typography variant="h6" sx={{ color: "#0475c2" }}>
{title || "Node Configuration Panel"} {title || "Node Configuration Panel"}
</Typography> </Typography>
</Box>
{/* Content */}
<Box sx={{ padding: 2 }}>
<p style={{ fontSize: "0.85rem", color: "#aaa" }}> <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
This sidebar will be used to configure nodes in the future. This sidebar will be used to configure nodes in the future.
</p> </p>
@ -86,6 +78,7 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
The idea is that this area will allow for more node configuration controls to be dynamically-populated by the nodes to allow more complex node documentation and configuration. The idea is that this area will allow for more node configuration controls to be dynamically-populated by the nodes to allow more complex node documentation and configuration.
</p> </p>
</Box> </Box>
</Box>
</> </>
); );
} }