feat(redmine 1305754): correction github comments (hover elements)

Smile-SA · Aug 5, 2024 · ab219f1 · ab219f1
1 parent e7e5b69
commit ab219f1
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 52 deletions.
diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css
@@ -1,7 +1,32 @@
+.isOpened {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: var(--mantine-color-cyan-9);
+
+  .floatingMenuLabel {
+    display: block;
+    color: #fff;
+  }
+
+  .floatingMenuButton {
+    color: #fff;
+  }
+  /* noinspection CssInvalidAtRule    */
+  @mixin larger-than $mantine-breakpoint-xs {
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+
+    svg {
+      flex: 1 0 25px;
+    }
+  }
+}
 .floatingMenuContainer {
   position: fixed;
   bottom: 0;
-  justify-content: center;
+  justify-content: space-around;
   align-items: self-start;
   flex-direction: row;
   background-color: white;
@@ -32,13 +57,24 @@
     .floatingMenuItem {
       justify-content: flex-end;
       align-items: center;
-    }
 
-    .isOpened {
-      justify-content: flex-start;
-      border-radius: 0px 28px 28px 0px;
-      left: 0;
+      &:hover,
+      &.isOpened {
+        justify-content: flex-start;
+        border-radius: 0px 28px 28px 0px;
+        left: 0;
+
+        .floatingMenuLabel {
+          display: block;
+          color: #fff;
+        }
+
+        .floatingMenuButton {
+          color: #fff;
+        }
+      }
     }
+
     .floatingMenuButton {
       span {
         justify-content: flex-start;
@@ -54,12 +90,22 @@
     .floatingMenuItem {
       right: 0;
       transition: right 0.3s ease;
-    }
 
-    .isOpened {
-      flex-direction: column;
-      border-radius: 28px 0px 0px 28px;
-      right: calc(138px - 56px);
+      &:hover,
+      &.isOpened {
+        flex-direction: column;
+        border-radius: 28px 0px 0px 28px;
+        right: calc(138px - 56px);
+
+        .floatingMenuLabel {
+          display: block;
+          color: #fff;
+        }
+
+        .floatingMenuButton {
+          color: #fff;
+        }
+      }
     }
   }
 }
@@ -78,6 +124,23 @@
     gap: 5px;
   }
 
+  &:hover {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    background-color: var(--mantine-color-cyan-9);
+
+    /*noinspection CssInvalidAtRule*/
+    @mixin larger-than $mantine-breakpoint-xs {
+      align-items: flex-start;
+      border-radius: 28px 0px 0px 28px;
+
+      svg {
+        flex: 1 0 25px;
+      }
+    }
+  }
   /*noinspection CssInvalidAtRule*/
   @mixin larger-than $mantine-breakpoint-xs {
     width: 138px;
@@ -92,28 +155,11 @@
   }
 }
 
-.isOpened {
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  background-color: var(--mantine-color-cyan-9);
-
-  /*noinspection CssInvalidAtRule*/
-  @mixin larger-than $mantine-breakpoint-xs {
-    align-items: flex-start;
-    border-radius: 28px 0px 0px 28px;
-
-    svg {
-      flex: 1 0 25px;
-    }
-  }
-}
-
 .floatingMenuButton {
   width: 100%;
   height: 100%;
   border-radius: 0;
+  color: var(--mantine-color-dark-6);
 
   @mixin larger-than $mantine-breakpoint-xs {
     height: 59px;
@@ -125,9 +171,5 @@
 .floatingMenuLabel {
   @mixin larger-than $mantine-breakpoint-xs {
     display: none;
-
-    &.show {
-      display: block;
-    }
   }
 }
diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx
@@ -33,19 +33,13 @@ export function FloatingMenu(props: IFloatingMenuProps): ReactElement {
   const { position = 'right', items } = props;
 
   const [openedItem, setOpenedItem] = useState<number | null>(null);
-  const [hoveredItem, setHoveredItem] = useState<number | null>(null);
 
   const handleOpen = (index: number) => () => {
     setOpenedItem(openedItem === index ? null : index);
   };
 
-  const handleMouseEnter = (index: number) => () => {
-    setHoveredItem(index);
-  };
-
   const handleClose: () => void = () => {
     setOpenedItem(null);
-    setHoveredItem(null);
   };
 
   const positionClass = position === 'right' ? classes.right : classes.left;
@@ -63,33 +57,23 @@ export function FloatingMenu(props: IFloatingMenuProps): ReactElement {
           <Group
             key={`${index + index}`}
             className={`${classes.floatingMenuItem} ${
-              openedItem === index || hoveredItem === index
-                ? classes.isOpened
-                : ''
+              openedItem === index ? classes.isOpened : ''
             }`}
             justify="center"
             onClick={item.hasModal ? handleOpen(index) : undefined}
-            onMouseEnter={handleMouseEnter(index)}
-            onMouseLeave={() => setHoveredItem(null)}
           >
             <ActionIcon
               aria-label={item.text}
               className={classes.floatingMenuButton}
-              color={
-                openedItem === index || hoveredItem === index
-                  ? 'white'
-                  : 'black'
-              }
+              color={openedItem === index ? 'white' : 'black'}
               component={item.hasModal ? 'button' : 'a'}
               display="flex"
               href={!item.hasModal ? item.href : ''}
               variant="transparent"
             >
               <Icon size={24} />
               <Text
-                className={`${classes.floatingMenuLabel} ${
-                  hoveredItem === index ? classes.show : ''
-                }`}
+                className={classes.floatingMenuLabel}
                 size="12px"
                 style={{ width: '100%' }}
                 truncate="end"