Merge pull request 'Added fixed speed dial' (#147) from Qubasa-Qubasa-main into main

pkgs/ui/src/app/nodes/NodeList.tsx

@@ -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,
+        right: 20,
-        top: 10,
+        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
-        <SpeedDialAction key="Add" icon={<AddIcon />} tooltipTitle="Add" />
+          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 }}