From b6111040c54f0cb04504069fd6fbe1bdff63f4ff Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Wed, 9 Oct 2024 20:06:55 +0200 Subject: [PATCH] toggle images on graph first go --- .../components/Flow/components/Checklist.tsx | 7 +++ .../components/Flow/components/Option.tsx | 7 +++ .../components/Flow/components/Question.tsx | 7 +++ .../components/Flow/components/Thumbnail.tsx | 23 ++++++++++ .../FlowEditor/ToggleImagesButton.tsx | 45 +++++++++++++++++++ .../FlowEditor/ToggleTagsButton.tsx | 2 +- .../src/pages/FlowEditor/index.tsx | 6 ++- .../src/pages/FlowEditor/lib/store/editor.ts | 8 +++- 8 files changed, 102 insertions(+), 3 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx 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 index 3c2214f2be..ea99191d6c 100644 --- 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 = React.memo((props) => { {props.text} {props.tags?.map((tag) => )} + {props.data?.img && ( + + )} {groupedOptions ? (
    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 index 8a48609f6e..6c1934cd03 100644 --- 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 = (props) => { const childNodes = useStore((state) => state.childNodesOf(props.id)); @@ -34,6 +35,12 @@ const Option: React.FC = (props) => { {childNodes.map((child: any) => ( ))} + {props.data?.img && ( + + )}
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 index a63d20827c..bc0a295f6a 100644 --- 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 = React.memo((props) => { {props.text} {props.tags?.map((tag) => )} + {props.data?.img && ( + + )}
    {childNodes.map((child: any) => ( 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 new file mode 100644 index 0000000000..3fa0be0ea1 --- /dev/null +++ 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 ( + + ); +}; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx new file mode 100644 index 0000000000..68add76f4a --- /dev/null +++ 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 ( + ({ + 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, + })} + > + + ({ + padding: theme.spacing(1), + color: showImages + ? theme.palette.text.primary + : theme.palette.text.disabled, + })} + > + {showImages ? : } + + + + ); +}; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx index 93e5bf4991..108f47ea0f 100644 --- 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) => ( ))(() => ({ [`& .${tooltipClasses.arrow}`]: { diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx index 167b517006..66b5df591c 100644 --- 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 = () => { > - + + + + diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts index 02db9a6b77..871200e661 100644 --- 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, }), }, );