Merge pull request 'Added fixed speed dial' (#147) from Qubasa-Qubasa-main into main
All checks were successful
build / test (push) Successful in 19s
All checks were successful
build / test (push) Successful in 19s
This commit is contained in:
commit
4074091ca4
@ -33,6 +33,7 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
|
||||
import NodePieChart, { PieData } from "./NodePieChart";
|
||||
import Fab from "@mui/material/Fab";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import Link from "next/link";
|
||||
|
||||
import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
|
||||
import {
|
||||
@ -118,7 +119,8 @@ function stableSort<T>(
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
|
||||
function BasicSpeedDial() {
|
||||
function CrudSpeedDial(props: { selected: string | undefined }) {
|
||||
const { selected } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
function handleClose(event: any, reason: CloseReason) {
|
||||
@ -133,19 +135,34 @@ function BasicSpeedDial() {
|
||||
}
|
||||
}
|
||||
|
||||
const isSomethingSelected = selected != undefined;
|
||||
|
||||
function editDial() {
|
||||
if (isSomethingSelected) {
|
||||
return (
|
||||
<Link href="/nodes/edit" style={{marginTop: 7.5}}>
|
||||
<EditIcon color="action" />
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return <EditIcon color="disabled" />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
transform: "translateZ(0px)",
|
||||
flexGrow: 1,
|
||||
position: "fixed",
|
||||
right: 10,
|
||||
top: 10,
|
||||
right: 20,
|
||||
top: 15,
|
||||
margin: 0,
|
||||
zIndex: 9000,
|
||||
}}
|
||||
>
|
||||
<SpeedDial
|
||||
color="secondary"
|
||||
ariaLabel="SpeedDial basic example"
|
||||
icon={<SpeedDialIcon />}
|
||||
direction="down"
|
||||
@ -153,13 +170,24 @@ function BasicSpeedDial() {
|
||||
onOpen={handleOpen}
|
||||
open={open}
|
||||
>
|
||||
<SpeedDialAction key="Edit" icon={<EditIcon />} tooltipTitle="Edit" />
|
||||
<SpeedDialAction key="Add" icon={<AddIcon />} tooltipTitle="Add" />
|
||||
<SpeedDialAction
|
||||
key="Add"
|
||||
icon={
|
||||
<Link href="/nodes/add" style={{marginTop: 7.5}}>
|
||||
<AddIcon color="action" />
|
||||
</Link>
|
||||
}
|
||||
tooltipTitle="Add"
|
||||
/>
|
||||
|
||||
<SpeedDialAction
|
||||
key="Delete"
|
||||
icon={<DeleteIcon />}
|
||||
icon={
|
||||
<DeleteIcon color={isSomethingSelected ? "action" : "disabled"} />
|
||||
}
|
||||
tooltipTitle="Delete"
|
||||
/>
|
||||
<SpeedDialAction key="Edit" icon={editDial()} tooltipTitle="Edit" />
|
||||
</SpeedDial>
|
||||
</Box>
|
||||
);
|
||||
@ -267,7 +295,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
|
||||
|
||||
return (
|
||||
<Grid2 container spacing={1} sx={debugSx}>
|
||||
<BasicSpeedDial />
|
||||
<CrudSpeedDial selected={selected} />
|
||||
<Grid2 key="Header" xs={6}>
|
||||
<Typography
|
||||
sx={{ marginLeft: 3, marginTop: 1 }}
|
||||
|
Loading…
Reference in New Issue
Block a user