wip

editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx

@@ -0,0 +1,35 @@
+import HelpTextIcon from "@mui/icons-material/SpeakerNotes";
+import HelpTextOffIcon from "@mui/icons-material/SpeakerNotesOff";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const ToggleHelpTextButton: React.FC = () => {
+  const [showHelpText, toggleShowHelpText] = useStore((state) => [
+    state.showHelpText,
+    state.toggleShowHelpText,
+  ]);
+
+  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>
+  );
+};

editor.planx.uk/src/pages/FlowEditor/index.tsx

@@ -9,6 +9,7 @@ import { rootFlowPath } from "routes/utils";
 
 import Flow from "./components/Flow";
 import { ToggleDataFieldsButton } from "./components/FlowEditor/ToggleDataFieldsButton";
+import { ToggleHelpTextButton } from "./components/FlowEditor/ToggleHelpTextButton";
 import { ToggleImagesButton } from "./components/FlowEditor/ToggleImagesButton";
 import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
 import Sidebar from "./components/Sidebar";
@@ -71,6 +72,7 @@ const FlowEditor = () => {
           >
             <ToggleImagesButton />
             <ToggleDataFieldsButton />
+            <ToggleHelpTextButton />
             <ToggleTagsButton />
           </EditorVisualControls>
         </Box>

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -56,6 +56,8 @@ export interface EditorUIStore {
   toggleShowImages: () => void;
   showDataFields: boolean;
   toggleShowDataFields: () => void;
+  showHelpText: boolean;
+  toggleShowHelpText: () => void;
   previousURL?: string;
   currentURL: string;
   initURLTracking: () => void;
@@ -92,6 +94,10 @@ export const editorUIStore: StateCreator<
 
     toggleShowDataFields: () => set({ showDataFields: !get().showDataFields }),
 
+    showHelpText: false,
+
+    toggleShowHelpText: () => set({ showHelpText: !get().showHelpText }),
+
     previousURL: undefined,
 
     currentURL: window.location.pathname,