Add button tooltips to sidebar (#1375)

swisstopo · Jul 29, 2024 · f8bfc28 · f8bfc28
2 parents c4a77e1 + 40a508a
commit f8bfc28
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - Added borehole geometry panel.
 - Added secondary header to borehole detail view.
 - Added new codelist entries for `casing_type` and `backfill_material`.
+- Added tooltips to main side navigation.
 
 ### Changed
 

diff --git a/src/client/public/icons/help.svg b/src/client/public/icons/help.svg
diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
@@ -43,7 +43,7 @@ export const theme = createTheme({
       lightgrey: "#f1f3f5",
       darkgrey: "#787878",
       dark: "rgba(0, 0, 0, 0.5)",
-      menuItemActive: "#D92B04",
+      menuItemActive: "#A65462",
       filterItemActive: "#1C2834",
     },
 
@@ -135,5 +135,13 @@ export const theme = createTheme({
         },
       },
     },
+    MuiBadge: {
+      styleOverrides: {
+        badge: {
+          backgroundColor: "#FF0000",
+          color: "#FFFFFF",
+        },
+      },
+    },
   },
 });
diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
-import { Badge, IconButton, Stack } from "@mui/material";
+import { Badge, Stack } from "@mui/material";
 import { ImportErrorModal } from "./menuComponents/importErrorModal";
 import FilterIcon from "../../../../public/icons/filter.svg?react";
 import AddIcon from "../../../../public/icons/add.svg?react";
@@ -10,27 +10,13 @@ import SettingsIcon from "../../../../public/icons/settings.svg?react";
 import HelpIcon from "../../../../public/icons/help.svg?react";
 import LayersIcon from "../../../../public/icons/layers.svg?react";
 import { theme } from "../../../AppTheme";
-import { styled } from "@mui/system";
 import ImportModal from "./actions/importModal";
 import { DrawerContentTypes } from "../../../pages/editor/editorComponentInterfaces";
 import { ErrorResponse, MainSideNavProps } from "./menuComponents/menuComponentInterfaces";
 import { ReduxRootState, User } from "../../../ReduxStateInterfaces";
 import { FilterContext } from "../../../components/filter/filterContext";
-
-const StyledIconButton = styled(IconButton)({
-  padding: "10px",
-  marginBottom: "25px",
-  color: theme.palette.neutral.contrastText,
-  "&:hover": {
-    backgroundColor: theme.palette.background.lightgrey,
-  },
-  borderRadius: "10px",
-});
-
-const selectedButtonStyle = {
-  color: theme.palette.primary.contrastText,
-  backgroundColor: theme.palette.background.menuItemActive + " !important",
-};
+import { useTranslation } from "react-i18next";
+import { NavButton } from "../../../components/buttons/navButton";
 
 const MainSideNav = ({
   toggleDrawer,
@@ -44,6 +30,7 @@ const MainSideNav = ({
 }: MainSideNavProps) => {
   const history = useHistory();
   const menuRef = useRef(null);
+  const { t } = useTranslation();
   const [creating, setCreating] = useState<boolean>(false);
   const [modal, setModal] = useState<boolean>(false);
   const [upload, setUpload] = useState<boolean>(false);
@@ -112,47 +99,58 @@ const MainSideNav = ({
           padding: "1em",
           flex: "1 1 100%",
         }}>
-        {activeFilterCount > 0 && <Badge color="error" sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
-        <StyledIconButton
+        {activeFilterCount > 0 && <Badge sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
+        <NavButton
           data-cy="show-filter-button"
+          icon={<FilterIcon />}
+          label={t("searchfilters")}
+          selected={isFilterPanelVisible}
           onClick={handleToggleFilter}
-          sx={isFilterPanelVisible ? selectedButtonStyle : {}}>
-          <FilterIcon />
-        </StyledIconButton>
-        <StyledIconButton
+        />
+        <NavButton
           data-cy="new-borehole-button"
-          onClick={handleToggleAdd}
+          icon={<AddIcon />}
+          label={t("add")}
+          selected={isAddPanelVisible}
           disabled={user.data.roles.indexOf("EDIT") === -1}
-          sx={isAddPanelVisible ? selectedButtonStyle : {}}>
-          <AddIcon />
-        </StyledIconButton>
-        <StyledIconButton
+          onClick={handleToggleAdd}
+        />
+        <NavButton
           data-cy="import-borehole-button"
+          icon={<UploadIcon />}
+          label={t("upload")}
+          disabled={user.data.roles.indexOf("EDIT") === -1}
           onClick={() => {
+            toggleDrawer(false);
             setModal(true);
             setUpload(true);
           }}
-          disabled={user.data.roles.indexOf("EDIT") === -1}>
-          <UploadIcon />
-        </StyledIconButton>
-        <StyledIconButton
+        />
+        <NavButton
           data-cy="layers-button"
+          icon={<LayersIcon />}
+          label={t("usersMap")}
+          selected={isLayersPanelVisible}
           onClick={handleToggleLayers}
-          sx={isLayersPanelVisible ? selectedButtonStyle : {}}>
-          <LayersIcon />
-        </StyledIconButton>
+        />
       </Stack>
       <Stack
         direction="column"
         sx={{
           padding: "1em",
         }}>
-        <StyledIconButton data-cy="settings-button" onClick={() => history.push(`/setting`)}>
-          <SettingsIcon />
-        </StyledIconButton>
-        <StyledIconButton>
-          <HelpIcon onClick={() => window.open(`/help`)} />
-        </StyledIconButton>
+        <NavButton
+          data-cy="settings-button"
+          icon={<SettingsIcon />}
+          label={t("header_settings")}
+          onClick={() => history.push(`/setting`)}
+        />
+        <NavButton
+          data-cy="help-button"
+          icon={<HelpIcon />}
+          label={t("header_help")}
+          onClick={() => window.open(`/help`)}
+        />
       </Stack>
       <ImportModal
         creating={creating}

diff --git a/src/client/src/commons/search/editor/filterComponent.jsx b/src/client/src/commons/search/editor/filterComponent.jsx
@@ -24,6 +24,7 @@ import { FilterContext } from "../../../components/filter/filterContext.tsx";
 
 class FilterComponent extends React.Component {
   static contextType = FilterContext;
+
   constructor(props) {
     super(props);
     this.handleFilterReset = this.handleFilterReset.bind(this);
@@ -226,7 +227,7 @@ class FilterComponent extends React.Component {
               {t("polygon_selection")}
             </Typography>
             {filterPolygon !== null && (
-              <Badge data-cy="polygon-filter-badge" color="error" badgeContent={1} sx={{ marginLeft: "18px" }}></Badge>
+              <Badge data-cy="polygon-filter-badge" badgeContent={1} sx={{ marginLeft: "18px" }} />
             )}
           </Button>
           {this.state?.searchList?.map((filter, idx) => {
@@ -246,10 +247,8 @@ class FilterComponent extends React.Component {
                       ),
                     }));
                   }}>
-                  <Typography variant="h6">
-                    {t(filter?.translationId)}{" "}
-                    <Badge color="error" badgeContent={activeFilterLength} sx={{ marginLeft: "12px" }}></Badge>
-                  </Typography>
+                  <Typography variant="h6">{t(filter?.translationId)} </Typography>
+                  <Badge badgeContent={activeFilterLength} sx={{ marginLeft: "18px", marginTop: "10px" }} />
                 </AccordionSummary>
                 {filter?.name === "workgroup" && filter?.isSelected && (
                   <this.StyledAccordionDetails>

diff --git a/src/client/src/components/buttons/navButton.tsx b/src/client/src/components/buttons/navButton.tsx
@@ -0,0 +1,51 @@
+import { forwardRef, useState } from "react";
+import { ButtonProps } from "./buttonsInterface";
+import { IconButton, Stack, Typography } from "@mui/material";
+import { theme } from "../../AppTheme";
+
+export interface NavButtonProps extends ButtonProps {
+  label: string;
+  icon: JSX.Element;
+  selected?: boolean;
+}
+
+export const NavButton = forwardRef<HTMLButtonElement, NavButtonProps>((props, ref) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
+
+  const defaultContent = props.icon;
+  const hoverContent = (
+    <>
+      {props.icon} <Typography>{props.label}</Typography>
+    </>
+  );
+  return (
+    <IconButton
+      ref={ref}
+      {...props}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      sx={{
+        marginBottom: "25px",
+        padding: "10px 16px",
+        color: props.selected ? theme.palette.primary.contrastText : theme.palette.neutral.contrastText,
+        backgroundColor: props.selected ? theme.palette.background.menuItemActive + " !important" : undefined,
+        borderRadius: "10px",
+        width: "fit-content",
+        transition: "background-color 0.3s ease, color 0.3s ease, width 0.3s ease",
+        "&:hover": {
+          backgroundColor: `${theme.palette.secondary.main} !important`,
+          color: `${theme.palette.secondary.contrastText} !important`,
+          width: "fit-content",
+          whiteSpace: "nowrap",
+          zIndex: 6000,
+        },
+      }}>
+      <Stack direction="row" justifyContent={"space-between"} spacing={1} sx={{ margin: 0 }}>
+        {isHovered ? hoverContent : defaultContent}
+      </Stack>
+    </IconButton>
+  );
+});