Borealis/Borealis-Legacy
Borealis/Borealis-Legacy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fixed Blue Gradient and Status Bar Offsets

Browse Source
This commit is contained in:
Nicole Rappe 2025-03-26 04:15:55 -06:00
parent 7a267b5198
commit 12dbffa6d4
1 changed files with 118 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
Data/WebUI/src/App.js
View File

@ -1,118 +1,139 @@
import React from "react"; import React from "react";
import FlowEditor from "./components/FlowEditor"; import FlowEditor from "./components/FlowEditor";
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { import {
AppBar, AppBar,
Toolbar, Toolbar,
Typography, Typography,
Box, Box,
Menu, Menu,
MenuItem, MenuItem,
Button, Button,
CssBaseline, CssBaseline,
ThemeProvider, ThemeProvider,
createTheme createTheme
} from "@mui/material"; } from "@mui/material";
const darkTheme = createTheme({ const darkTheme = createTheme({
palette: { palette: {
mode: "dark", mode: "dark",
background: { background: {
default: "#121212", default: "#121212",
paper: "#1e1e1e" paper: "#1e1e1e"
}, },
text: { text: {
primary: "#ffffff" primary: "#ffffff"
}
} }
}
}); });
export default function App() { export default function App() {
// Separate menu state for each dropdown const [workflowsAnchorEl, setWorkflowsAnchorEl] = React.useState(null);
const [workflowsAnchorEl, setWorkflowsAnchorEl] = React.useState(null); const [aboutAnchorEl, setAboutAnchorEl] = React.useState(null);
const [aboutAnchorEl, setAboutAnchorEl] = React.useState(null);
const handleWorkflowsMenuOpen = (event) => { const handleWorkflowsMenuOpen = (event) => {
setWorkflowsAnchorEl(event.currentTarget); setWorkflowsAnchorEl(event.currentTarget);
}; };
const handleAboutMenuOpen = (event) => { const handleAboutMenuOpen = (event) => {
setAboutAnchorEl(event.currentTarget); setAboutAnchorEl(event.currentTarget);
}; };
const handleWorkflowsMenuClose = () => { const handleWorkflowsMenuClose = () => {
setWorkflowsAnchorEl(null); setWorkflowsAnchorEl(null);
}; };
const handleAboutMenuClose = () => { const handleAboutMenuClose = () => {
setAboutAnchorEl(null); setAboutAnchorEl(null);
}; };
return ( return (
<ThemeProvider theme={darkTheme}> <ThemeProvider theme={darkTheme}>
<CssBaseline /> <CssBaseline />
<Box display="flex" flexDirection="column" height="100vh" bgcolor="#121212"> {/*
{/* Top Menu Bar */} Main container that:
<AppBar position="static" sx={{ bgcolor: "#092c44" }}> - fills 100% viewport height
<Toolbar> - organizes content with flexbox (vertical)
<Typography variant="h6" sx={{ flexGrow: 1 }}> */}
Borealis - Workflow Automation Tool <Box display="flex" flexDirection="column" height="100vh">
</Typography> {/* --- TOP BAR --- */}
<AppBar position="static" sx={{ bgcolor: "#092c44" }}>
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Borealis - Workflow Automation Tool
</Typography>
{/* Workflows Menu */} {/* Workflows Menu */}
<Button <Button
color="inherit" color="inherit"
onClick={handleWorkflowsMenuOpen} onClick={handleWorkflowsMenuOpen}
endIcon={<KeyboardArrowDownIcon />} endIcon={<KeyboardArrowDownIcon />}
> >
Workflows Workflows
</Button> </Button>
<Menu <Menu
anchorEl={workflowsAnchorEl} anchorEl={workflowsAnchorEl}
open={Boolean(workflowsAnchorEl)} open={Boolean(workflowsAnchorEl)}
onClose={handleWorkflowsMenuClose} onClose={handleWorkflowsMenuClose}
> >
<MenuItem onClick={handleWorkflowsMenuClose}>Save Workflow</MenuItem> <MenuItem onClick={handleWorkflowsMenuClose}>Save Workflow</MenuItem>
<MenuItem onClick={handleWorkflowsMenuClose}>Load Workflow</MenuItem> <MenuItem onClick={handleWorkflowsMenuClose}>Load Workflow</MenuItem>
<MenuItem onClick={handleWorkflowsMenuClose}>Close Workflow</MenuItem> <MenuItem onClick={handleWorkflowsMenuClose}>Close Workflow</MenuItem>
</Menu> </Menu>
{/* About Menu */} {/* About Menu */}
<Button <Button
color="inherit" color="inherit"
onClick={handleAboutMenuOpen} onClick={handleAboutMenuOpen}
endIcon={<KeyboardArrowDownIcon />} endIcon={<KeyboardArrowDownIcon />}
> >
About About
</Button> </Button>
<Menu <Menu
anchorEl={aboutAnchorEl} anchorEl={aboutAnchorEl}
open={Boolean(aboutAnchorEl)} open={Boolean(aboutAnchorEl)}
onClose={handleAboutMenuClose} onClose={handleAboutMenuClose}
> >
<MenuItem onClick={handleAboutMenuClose}>Gitea Project</MenuItem> <MenuItem onClick={handleAboutMenuClose}>Gitea Project</MenuItem>
<MenuItem onClick={handleAboutMenuClose}>Credits</MenuItem> <MenuItem onClick={handleAboutMenuClose}>Credits</MenuItem>
</Menu> </Menu>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
{/* Main Content - React Flow */} {/* --- REACT FLOW EDITOR --- */}
<Box flexGrow={1}> {/*
<FlowEditor updateNodeCount={(count) => { flexGrow={1} ⇒ This box expands to fill remaining vertical space
document.getElementById("nodeCount").innerText = count; overflow="hidden" ⇒ No scroll bars, so React Flow does internal panning
}} /> mt: 1 ⇒ Add top margin so the gradient starts closer to the AppBar.
</Box> */}
<Box flexGrow={1} overflow="hidden" sx={{ mt: 0 }}>
<FlowEditor
updateNodeCount={(count) => {
document.getElementById("nodeCount").innerText = count;
}}
/>
</Box>
{/* Status Bar */} {/* --- STATUS BAR at BOTTOM --- */}
<Box <Box
component="footer" component="footer"
sx={{ bgcolor: "#1e1e1e", color: "white", padding: "5px 10px", textAlign: "center" }} sx={{
> bgcolor: "#1e1e1e",
Nodes: <span id="nodeCount">0</span> | Update Rate: 500ms | Flask API Server: color: "white",
<a href="http://127.0.0.1:5000/data" style={{ color: "#3c78b4" }}> http://127.0.0.1:5000/data</a> px: 2,
</Box> py: 1,
</Box> textAlign: "left"
</ThemeProvider> }}
); >
<b>Nodes</b>: <span id="nodeCount">0</span> | <b>Update Rate</b>: 500ms | <b>Flask API Server:</b>{" "}
<a
href="http://127.0.0.1:5000/data"
style={{ color: "#3c78b4" }}
>
http://127.0.0.1:5000/data
</a>
</Box>
</Box>
</ThemeProvider>
);
} }