refactor: Universal toggle button (#4115)

theopensystemslab · Jan 9, 2025 · 77906d0 · 77906d0
1 parent eba45ca
commit 77906d0
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 88 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -1,9 +1,7 @@
 import DataFieldIcon from "@mui/icons-material/Code";
-import DataFieldOffIcon from "@mui/icons-material/CodeOff";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
+import ToggleIconButton from "ui/editor/ToggleIconButton";
 
 export const ToggleDataFieldsButton: React.FC = () => {
   const [showDataFields, toggleShowDataFields] = useStore((state) => [
@@ -12,24 +10,12 @@ export const ToggleDataFieldsButton: React.FC = () => {
   ]);
 
   return (
-    <Tooltip title="Toggle data fields" placement="right">
-      <IconButton
-        aria-label="Toggle data fields"
-        onClick={toggleShowDataFields}
-        size="large"
-        sx={(theme) => ({
-          background: theme.palette.background.paper,
-          padding: theme.spacing(1),
-          color: showDataFields
-            ? theme.palette.text.primary
-            : theme.palette.text.disabled,
-          "&:hover": {
-            background: theme.palette.common.white,
-          },
-        })}
-      >
-        {showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
-      </IconButton>
-    </Tooltip>
+    <ToggleIconButton
+      isToggled={showDataFields}
+      onToggle={toggleShowDataFields}
+      icon={<DataFieldIcon />}
+      tooltip="Toggle data fields"
+      ariaLabel="Toggle data fields"
+    />
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
@@ -1,9 +1,7 @@
-import HelpTextOffIcon from "@mui/icons-material/DoNotDisturbOff";
 import HelpTextIcon from "@mui/icons-material/Help";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
+import ToggleIconButton from "ui/editor/ToggleIconButton";
 
 export const ToggleHelpTextButton: React.FC = () => {
   const [showHelpText, toggleShowHelpText] = useStore((state) => [
@@ -12,24 +10,12 @@ export const ToggleHelpTextButton: React.FC = () => {
   ]);
 
   return (
-    <Tooltip title="Toggle help text" placement="right">
-      <IconButton
-        aria-label="Toggle help text"
-        onClick={toggleShowHelpText}
-        size="large"
-        sx={(theme) => ({
-          background: theme.palette.background.paper,
-          padding: theme.spacing(1),
-          color: showHelpText
-            ? theme.palette.text.primary
-            : theme.palette.text.disabled,
-          "&:hover": {
-            background: theme.palette.common.white,
-          },
-        })}
-      >
-        {showHelpText ? <HelpTextIcon /> : <HelpTextOffIcon />}
-      </IconButton>
-    </Tooltip>
+    <ToggleIconButton
+      isToggled={showHelpText}
+      onToggle={toggleShowHelpText}
+      icon={<HelpTextIcon />}
+      tooltip="Toggle help text"
+      ariaLabel="Toggle help text"
+    />
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -1,9 +1,7 @@
-import ImageOffIcon from "@mui/icons-material/HideImage";
 import ImageIcon from "@mui/icons-material/Image";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
+import ToggleIconButton from "ui/editor/ToggleIconButton";
 
 export const ToggleImagesButton: React.FC = () => {
   const [showImages, toggleShowImages] = useStore((state) => [
@@ -12,24 +10,12 @@ export const ToggleImagesButton: React.FC = () => {
   ]);
 
   return (
-    <Tooltip title="Toggle images" placement="right">
-      <IconButton
-        aria-label="Toggle images"
-        onClick={toggleShowImages}
-        size="large"
-        sx={(theme) => ({
-          background: theme.palette.background.paper,
-          padding: theme.spacing(1),
-          color: showImages
-            ? theme.palette.text.primary
-            : theme.palette.text.disabled,
-          "&:hover": {
-            background: theme.palette.common.white,
-          },
-        })}
-      >
-        {showImages ? <ImageIcon /> : <ImageOffIcon />}
-      </IconButton>
-    </Tooltip>
+    <ToggleIconButton
+      isToggled={showImages}
+      onToggle={toggleShowImages}
+      icon={<ImageIcon />}
+      tooltip="Toggle images"
+      ariaLabel="Toggle images"
+    />
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -1,9 +1,7 @@
 import LabelIcon from "@mui/icons-material/Label";
-import LabelOffIcon from "@mui/icons-material/LabelOff";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
+import ToggleIconButton from "ui/editor/ToggleIconButton";
 
 export const ToggleTagsButton: React.FC = () => {
   const [showTags, toggleShowTags] = useStore((state) => [
@@ -12,24 +10,12 @@ export const ToggleTagsButton: React.FC = () => {
   ]);
 
   return (
-    <Tooltip title="Toggle tags" placement="right">
-      <IconButton
-        aria-label="Toggle tags"
-        onClick={toggleShowTags}
-        size="large"
-        sx={(theme) => ({
-          background: theme.palette.background.paper,
-          padding: theme.spacing(1),
-          color: showTags
-            ? theme.palette.text.primary
-            : theme.palette.text.disabled,
-          "&:hover": {
-            background: theme.palette.common.white,
-          },
-        })}
-      >
-        {showTags ? <LabelIcon /> : <LabelOffIcon />}
-      </IconButton>
-    </Tooltip>
+    <ToggleIconButton
+      isToggled={showTags}
+      onToggle={toggleShowTags}
+      icon={<LabelIcon />}
+      tooltip="Toggle tags"
+      ariaLabel="Toggle tags"
+    />
   );
 };
diff --git a/editor.planx.uk/src/ui/editor/ToggleIconButton.tsx b/editor.planx.uk/src/ui/editor/ToggleIconButton.tsx
@@ -0,0 +1,59 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import React from "react";
+import ToggleOverlayIcon from "ui/icons/ToggleOverlay";
+
+interface ToggleIconButtonProps {
+  isToggled: boolean;
+  onToggle: () => void;
+  icon: React.ReactNode;
+  tooltip: string;
+  ariaLabel: string;
+}
+
+const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({
+  isToggled,
+  onToggle,
+  icon,
+  tooltip,
+  ariaLabel,
+}) => {
+  return (
+    <Tooltip title={tooltip} placement="right">
+      <IconButton
+        aria-label={ariaLabel}
+        onClick={onToggle}
+        size="large"
+        sx={(theme) => ({
+          position: "relative",
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: isToggled
+            ? theme.palette.text.disabled
+            : theme.palette.text.primary,
+
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {icon}
+        <Box
+          sx={{
+            position: "absolute",
+            top: "55%",
+            left: "48%",
+            transform: "translate(-50%, -50%)",
+            opacity: isToggled ? 1 : 0,
+            transition: "opacity 0.2s ease-in-out",
+          }}
+        >
+          <ToggleOverlayIcon />
+        </Box>
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default ToggleIconButton;
diff --git a/editor.planx.uk/src/ui/icons/ToggleOverlay.tsx b/editor.planx.uk/src/ui/icons/ToggleOverlay.tsx
@@ -0,0 +1,22 @@
+import { useTheme } from "@mui/material/styles";
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import * as React from "react";
+
+export default function EditorIcon(props: SvgIconProps) {
+  const theme = useTheme();
+  const inactiveColor = theme.palette.text.disabled;
+  const overlayColor = theme.palette.background.paper;
+
+  return (
+    <SvgIcon {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <polygon
+        points="0 0 1.45 0 24 22.5 24 24 22.46 24 0 1.52 0 0"
+        fill={inactiveColor}
+      />
+      <polygon
+        points="1.45 0 4.48 0 24 19.55 24 22.5 1.45 0"
+        fill={overlayColor}
+      />
+    </SvgIcon>
+  );
+}