feat: Update logic graph styling (#2912)

theopensystemslab · Apr 26, 2024 · 60818b4 · 60818b4
1 parent 1edc84c
commit 60818b4
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 60 deletions.
diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx
@@ -7,6 +7,7 @@ import ContactPage from "@mui/icons-material/ContactPage";
 import CopyAll from "@mui/icons-material/CopyAll";
 import Create from "@mui/icons-material/Create";
 import Event from "@mui/icons-material/Event";
+import FilterAltOutlined from "@mui/icons-material/FilterAltOutlined";
 import FunctionsIcon from "@mui/icons-material/Functions";
 import Home from "@mui/icons-material/Home";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
@@ -17,13 +18,12 @@ import PaymentOutlined from "@mui/icons-material/PaymentOutlined";
 import Pin from "@mui/icons-material/Pin";
 import PlaylistAdd from "@mui/icons-material/PlaylistAdd";
 import PlaylistAddCheck from "@mui/icons-material/PlaylistAddCheck";
-import RateReview from "@mui/icons-material/RateReview";
+import RateReviewOutlined from "@mui/icons-material/RateReviewOutlined";
 import ReportProblemOutlined from "@mui/icons-material/ReportProblemOutlined";
 import SearchOutlined from "@mui/icons-material/SearchOutlined";
 import Send from "@mui/icons-material/Send";
 import SquareFoot from "@mui/icons-material/SquareFoot";
 import TextFields from "@mui/icons-material/TextFields";
-import ViewAgenda from "@mui/icons-material/ViewAgenda";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { Store } from "pages/FlowEditor/lib/store";
 import type { handleSubmit } from "pages/Preview/Node";
@@ -68,7 +68,7 @@ export const ICONS: {
   [TYPES.ExternalPortal]: CopyAll,
   [TYPES.FileUpload]: CloudUpload,
   [TYPES.FileUploadAndLabel]: CloudUpload,
-  [TYPES.Filter]: undefined,
+  [TYPES.Filter]: FilterAltOutlined,
   [TYPES.FindProperty]: SearchOutlined,
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
@@ -80,8 +80,8 @@ export const ICONS: {
   [TYPES.PropertyInformation]: LocationOnOutlined,
   [TYPES.Answer]: undefined,
   [TYPES.Result]: PlaylistAddCheck,
-  [TYPES.Review]: RateReview,
-  [TYPES.Section]: ViewAgenda,
+  [TYPES.Review]: RateReviewOutlined,
+  [TYPES.Section]: List,
   [TYPES.Send]: Send,
   [TYPES.SetValue]: PlaylistAdd,
   [TYPES.Question]: CallSplit,

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
@@ -73,7 +73,7 @@ const Checklist: React.FC<Props> = React.memo((props) => {
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
       <li
-        className={classNames("card", "decision", {
+        className={classNames("card", "decision", "question", {
           isDragging,
           isClone: isClone(props.id),
           isNote: childNodes.length === 0,

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
@@ -12,7 +12,7 @@ const Option: React.FC<any> = (props) => {
 
   const href = "";
 
-  let background = "#AEAEAE"; // no flag color
+  let background = "#666"; // no flag color
   let color = "#000";
   try {
     const flag = flatFlags.find(({ value }) =>
@@ -26,13 +26,9 @@ const Option: React.FC<any> = (props) => {
     <li
       className={classNames("card", "option", { wasVisited: props.wasVisited })}
     >
-      <Link
-        href={href}
-        prefetch={false}
-        onClick={(e) => e.preventDefault()}
-        style={{ background, color }}
-      >
-        <span>{props.data.text}</span>
+      <Link href={href} prefetch={false} onClick={(e) => e.preventDefault()}>
+        <div className="band" style={{ background, color }}></div>
+        <div className="text">{props.data.text}</div>
       </Link>
       <ol className="decisions">
         {childNodes.map((child: any) => (

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@apollo/client";
+import DoorFrontOutlined from "@mui/icons-material/DoorFrontOutlined";
 import MoreVert from "@mui/icons-material/MoreVert";
 import classNames from "classnames";
 import gql from "graphql-tag";
@@ -84,7 +85,7 @@ const ExternalPortal: React.FC<any> = (props) => {
         <Link href={`/${href}`} prefetch={false} ref={drag}>
           <span>{href}</span>
         </Link>
-        <Link href={editHref} prefetch={false}>
+        <Link href={editHref} prefetch={false} className="portalMenu">
           <MoreVert titleAccess="Edit Portal" />
         </Link>
       </li>
@@ -132,9 +133,10 @@ const InternalPortal: React.FC<any> = (props) => {
           ref={drag}
           onContextMenu={handleContext}
         >
+          <DoorFrontOutlined />
           <span>{props.data.text}</span>
         </Link>
-        <Link href={editHref} prefetch={false}>
+        <Link href={editHref} prefetch={false} className="portalMenu">
           <MoreVert titleAccess="Edit Portal" />
         </Link>
       </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
@@ -57,13 +57,18 @@ const Question: React.FC<Props> = React.memo((props) => {
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
       <li
-        className={classNames("card", "decision", {
-          isDragging,
-          isClone: isClone(props.id),
-          isNote: childNodes.length === 0,
-          wasVisited: props.wasVisited,
-          hasFailed: props.hasFailed,
-        })}
+        className={classNames(
+          "card",
+          "decision",
+          "type-" + TYPES[props.type as TYPES],
+          {
+            isDragging,
+            isClone: isClone(props.id),
+            isNote: childNodes.length === 0,
+            wasVisited: props.wasVisited,
+            hasFailed: props.hasFailed,
+          },
+        )}
       >
         <Link
           href={href}