From 46566131d494176b0b247f119c0582690ac779bd Mon Sep 17 00:00:00 2001
From: Luis-Hebendanz <luis.nixos@gmail.com>
Date: Tue, 15 Aug 2023 20:06:55 +0200
Subject: [PATCH 1/2] Added fixed speed dial

---
 pkgs/ui/src/app/nodes/NodeList.tsx | 36 ++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/pkgs/ui/src/app/nodes/NodeList.tsx b/pkgs/ui/src/app/nodes/NodeList.tsx
index 978a3b135..496277f64 100644
--- a/pkgs/ui/src/app/nodes/NodeList.tsx
+++ b/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,22 @@ function BasicSpeedDial() {
     }
   }
 
+ const isSomethingSelected = selected != undefined;
+
   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 +158,30 @@ 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">
+              <AddIcon color="action" />
+            </Link>
+          }
+          tooltipTitle="Add"
+        />
+
         <SpeedDialAction
           key="Delete"
-          icon={<DeleteIcon />}
+          icon={<DeleteIcon color={isSomethingSelected ? "action" : "disabled"} />}
           tooltipTitle="Delete"
         />
+        <SpeedDialAction
+          key="Edit"
+          icon={
+          <Link href="/nodes/edit">
+            <EditIcon color={isSomethingSelected ? "action" : "disabled"} />
+          </Link>
+          }
+          tooltipTitle="Edit"
+        />
       </SpeedDial>
     </Box>
   );
@@ -267,7 +289,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 }}

From 96bf33a76d52a9b28de22fddc7d70aeb435a0005 Mon Sep 17 00:00:00 2001
From: Luis-Hebendanz <luis.nixos@gmail.com>
Date: Tue, 15 Aug 2023 20:37:34 +0200
Subject: [PATCH 2/2] Fixed jumping icon on selected

---
 pkgs/ui/src/app/nodes/NodeList.tsx | 34 ++++++++++++++++++------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/pkgs/ui/src/app/nodes/NodeList.tsx b/pkgs/ui/src/app/nodes/NodeList.tsx
index 496277f64..f53d3757a 100644
--- a/pkgs/ui/src/app/nodes/NodeList.tsx
+++ b/pkgs/ui/src/app/nodes/NodeList.tsx
@@ -119,7 +119,7 @@ function stableSort<T>(
   return stabilizedThis.map((el) => el[0]);
 }
 
-function CrudSpeedDial(props: {selected: string | undefined}) {
+function CrudSpeedDial(props: { selected: string | undefined }) {
   const { selected } = props;
   const [open, setOpen] = React.useState(false);
 
@@ -135,7 +135,19 @@ function CrudSpeedDial(props: {selected: string | undefined}) {
     }
   }
 
- const isSomethingSelected = selected != undefined;
+  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
@@ -161,7 +173,7 @@ function CrudSpeedDial(props: {selected: string | undefined}) {
         <SpeedDialAction
           key="Add"
           icon={
-            <Link href="/nodes/add">
+            <Link href="/nodes/add" style={{marginTop: 7.5}}>
               <AddIcon color="action" />
             </Link>
           }
@@ -170,18 +182,12 @@ function CrudSpeedDial(props: {selected: string | undefined}) {
 
         <SpeedDialAction
           key="Delete"
-          icon={<DeleteIcon color={isSomethingSelected ? "action" : "disabled"} />}
+          icon={
+            <DeleteIcon color={isSomethingSelected ? "action" : "disabled"} />
+          }
           tooltipTitle="Delete"
         />
-        <SpeedDialAction
-          key="Edit"
-          icon={
-          <Link href="/nodes/edit">
-            <EditIcon color={isSomethingSelected ? "action" : "disabled"} />
-          </Link>
-          }
-          tooltipTitle="Edit"
-        />
+        <SpeedDialAction key="Edit" icon={editDial()} tooltipTitle="Edit" />
       </SpeedDial>
     </Box>
   );
@@ -289,7 +295,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
 
   return (
     <Grid2 container spacing={1} sx={debugSx}>
-      <CrudSpeedDial selected={selected}/>
+      <CrudSpeedDial selected={selected} />
       <Grid2 key="Header" xs={6}>
         <Typography
           sx={{ marginLeft: 3, marginTop: 1 }}