FrontEnd: Tooltip WIP

web/src/components/misc/quick_tooltip/Delete.js

@@ -0,0 +1,42 @@
+import {useTranslation} from "react-i18next";
+import Backdrop from "@mui/material/Backdrop";
+import {CardContent, Fade, Grid, Modal, Paper, Typography} from "@mui/material";
+import Box from "@mui/material/Box";
+import {NavLink} from "react-router-dom";
+import React, {useState} from "react";
+
+
+export const DeleteModal = ({open, setOpen}) => {
+    const { t } = useTranslation();
+
+    return(
+        <>
+        <Modal open={open}
+               onClose={()=>{setOpen(false)}}
+               closeAfterTransition
+               BackdropComponent={Backdrop}
+               BackdropProps={{
+                  timeout: 500,
+               }}>
+            <Fade in={open}>
+                <Box sx={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    width: 400,
+                    bgcolor: 'background.paper',
+                    border: '2px solid',
+                    boxShadow: 24,
+                    p: 4,
+                    maxHeight: "70vh",
+                    overflow: "auto",
+                    minWidth: "60vw"
+                }}>
+                    <Typography>löschen</Typography>
+                </Box>
+            </Fade>
+        </Modal>
+        </>
+    )
+}

web/src/components/misc/quick_tooltip/ForumActionsSD.js

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import {useTranslation} from "react-i18next";
+import {ContentCopy, ContentPaste, Delete, Edit} from "@mui/icons-material";
+import {SpeedDialIcon} from "@mui/material";
+import {DeleteModal} from "./Delete";
+
+
+const ForumActionSD = () => {
+    const { t } = useTranslation();
+
+    const [deleteOpen, setDeleteOpen] = useState(false);
+
+    const actions = [
+        { icon: <ContentPaste />, name: t("PASTE") },
+        { icon: <ContentCopy />, name: t("CUT") },
+        { icon: <Delete />, name: t("DELETE"), action: ()=>setDeleteOpen(true) },
+        { icon: <Edit />, name: t("EDIT") },
+    ];
+
+    return (
+        <>
+            <DeleteModal open={deleteOpen} setOpen={setDeleteOpen} />
+            <SpeedDial
+                sx={{ position: 'fixed', bottom: 16, right: 16 }}
+                icon={<SpeedDialIcon />}
+                ariaLabel={"forum-actions"}>
+                {actions.map((action) => (
+                    <SpeedDialAction
+                        key={action.name}
+                        icon={action.icon}
+                        tooltipTitle={action.name}
+                        onClick={action.action}
+                    />
+                ))}
+            </SpeedDial>
+        </>
+
+    );
+}
+
+export default ForumActionSD;

web/src/pages/Forum.js

@@ -10,7 +10,7 @@ import {UserContext} from "../index";
 import Login from "./Login";
 import { useParams } from "react-router-dom";
 import Box from "@mui/material/Box";
-import ForumActionSD from "../components/misc/ForumActionsSD";
+import ForumActionSD from "../components/misc/quick_tooltip/ForumActionsSD";
 
 export const LocationContext = React.createContext();