toggle images on graph first go

theopensystemslab · Oct 9, 2024 · b611104 · b611104
1 parent aad9a43
commit b611104
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 3 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -15,6 +15,7 @@ import { getParentId } from "../lib/utils";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Tag } from "./Tag";
+import { Thumbnail } from "./Thumbnail";
 
 type Props = {
   type: TYPES;
@@ -96,6 +97,12 @@ const Checklist: React.FC<Props> = React.memo((props) => {
             <span>{props.text}</span>
           </Link>
           {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
+          {props.data?.img && (
+            <Thumbnail
+              imageSource={props.data?.img}
+              imageAltText={props.data?.text}
+            />
+          )}
         </Box>
         {groupedOptions ? (
           <ol className="categories">

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -6,6 +6,7 @@ import { Link } from "react-navi";
 import { useStore } from "../../../lib/store";
 import Hanger from "./Hanger";
 import Node from "./Node";
+import { Thumbnail } from "./Thumbnail";
 
 const Option: React.FC<any> = (props) => {
   const childNodes = useStore((state) => state.childNodesOf(props.id));
@@ -34,6 +35,12 @@ const Option: React.FC<any> = (props) => {
         {childNodes.map((child: any) => (
           <Node key={child.id} parent={props.id} {...child} />
         ))}
+        {props.data?.img && (
+          <Thumbnail
+            imageSource={props.data?.img}
+            imageAltText={props.data.text}
+          />
+        )}
         <Hanger parent={props.id} />
       </ol>
     </li>

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -14,6 +14,7 @@ import { getParentId } from "../lib/utils";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Tag } from "./Tag";
+import { Thumbnail } from "./Thumbnail";
 
 type Props = {
   type: TYPES | "Error";
@@ -84,6 +85,12 @@ const Question: React.FC<Props> = React.memo((props) => {
           <span>{props.text}</span>
         </Link>
         {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
+        {props.data?.img && (
+          <Thumbnail
+            imageSource={props.data?.img}
+            imageAltText={props.data?.text}
+          />
+        )}
         <ol className="options">
           {childNodes.map((child: any) => (
             <Node key={child.id} {...child} />

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
@@ -0,0 +1,23 @@
+import Box from "@mui/material/Box";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const Thumbnail: React.FC<{
+  imageSource: string;
+  imageAltText?: string;
+}> = ({ imageSource, imageAltText }) => {
+  const showImages = useStore((state) => state.showImages);
+  if (!showImages) return null;
+
+  return (
+    <Box
+      sx={{
+        maxWidth: "180px",
+        maxHeight: "180px",
+      }}
+      component="img"
+      src={imageSource}
+      alt={imageAltText}
+    />
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -0,0 +1,45 @@
+import ImageOffIcon from "@mui/icons-material/HideImage";
+import ImageIcon from "@mui/icons-material/Image";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+import { TooltipWrap } from "./ToggleTagsButton";
+
+export const ToggleImagesButton: React.FC = () => {
+  const [showImages, toggleShowImages] = useStore((state) => [
+    state.showImages,
+    state.toggleShowImages,
+  ]);
+
+  return (
+    <Box
+      sx={(theme) => ({
+        position: "fixed",
+        bottom: theme.spacing(2),
+        left: theme.spacing(13),
+        zIndex: theme.zIndex.appBar,
+        border: `1px solid ${theme.palette.border.main}`,
+        borderRadius: "3px",
+        background: theme.palette.background.paper,
+      })}
+    >
+      <TooltipWrap title="Toggle images">
+        <IconButton
+          aria-label="Toggle images"
+          onClick={toggleShowImages}
+          size="large"
+          sx={(theme) => ({
+            padding: theme.spacing(1),
+            color: showImages
+              ? theme.palette.text.primary
+              : theme.palette.text.disabled,
+          })}
+        >
+          {showImages ? <ImageIcon /> : <ImageOffIcon />}
+        </IconButton>
+      </TooltipWrap>
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -8,7 +8,7 @@ import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
-const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
+export const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} arrow placement="right" classes={{ popper: className }} />
 ))(() => ({
   [`& .${tooltipClasses.arrow}`]: {

diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -7,6 +7,7 @@ import React, { useRef } from "react";
 import { useCurrentRoute } from "react-navi";
 
 import Flow from "./components/Flow";
+import { ToggleImagesButton } from "./components/FlowEditor/ToggleImagesButton";
 import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
 import Sidebar from "./components/Sidebar";
 import { useStore } from "./lib/store";
@@ -50,7 +51,10 @@ const FlowEditor = () => {
       >
         <Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
-          <ToggleTagsButton />
+          <Box sx={{ display: "flex", flexDirection: "row" }}>
+            <ToggleTagsButton />
+            <ToggleImagesButton />
+          </Box>
         </Box>
       </Box>
       <Sidebar />

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -3,7 +3,6 @@ import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
 import {
   ComponentType,
   FlowGraph,
-  IndexedNode,
   NodeId,
   OrderedFlow,
 } from "@opensystemslab/planx-core/types";
@@ -52,6 +51,8 @@ export interface EditorUIStore {
   hideTestEnvBanner: () => void;
   showTags: boolean;
   toggleShowTags: () => void;
+  showImages: boolean;
+  toggleShowImages: () => void;
 }
 
 export const editorUIStore: StateCreator<
@@ -76,12 +77,17 @@ export const editorUIStore: StateCreator<
     showTags: false,
 
     toggleShowTags: () => set({ showTags: !get().showTags }),
+
+    showImages: false,
+
+    toggleShowImages: () => set({ showImages: !get().showImages }),
   }),
   {
     name: "editorUIStore",
     partialize: (state) => ({
       showSidebar: state.showSidebar,
       showTags: state.showTags,
+      showImages: state.showImages,
     }),
   },
 );