From f1b27b441df4fa672fae98969f32d9d6c7637b65 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 11 Jun 2024 17:09:54 +0200
Subject: [PATCH] New spool icon updates

---
 client/src/components/column.tsx           |  8 ++++----
 client/src/components/multiColorPicker.tsx |  2 +-
 client/src/components/spoolIcon.css        | 24 +++++++++++++++++++---
 client/src/components/spoolIcon.tsx        | 20 +++++++++++++++---
 client/src/icon_spool.svg                  |  1 -
 client/src/pages/filaments/list.tsx        |  7 ++++++-
 client/src/pages/filaments/show.tsx        | 10 ++++++++-
 client/src/pages/spools/list.tsx           |  5 ++++-
 client/src/pages/spools/show.tsx           | 10 ++++++++-
 9 files changed, 71 insertions(+), 16 deletions(-)
 delete mode 100644 client/src/icon_spool.svg

diff --git a/client/src/components/column.tsx b/client/src/components/column.tsx
index 8f9e437..b671018 100644
--- a/client/src/components/column.tsx
+++ b/client/src/components/column.tsx
@@ -295,7 +295,7 @@ export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Ac
 }
 
 interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
-  color: (record: Obj) => string | string[] | undefined;
+  color: (record: Obj) => string | { colors: string[]; vertical: boolean } | undefined;
 }
 
 export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
@@ -342,12 +342,12 @@ export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<
     },
     render: (rawValue, record: Obj) => {
       const value = props.transform ? props.transform(rawValue) : rawValue;
-      const colorStr = props.color(record);
+      const colorObj = props.color(record);
       return (
         <Row wrap={false} justify="space-around" align="middle">
-          {colorStr && (
+          {colorObj && (
             <Col flex="none">
-              <SpoolIcon color={colorStr} />
+              <SpoolIcon color={colorObj} />
             </Col>
           )}
           <Col flex="auto">{value}</Col>
diff --git a/client/src/components/multiColorPicker.tsx b/client/src/components/multiColorPicker.tsx
index 64581b8..3ac6a1e 100644
--- a/client/src/components/multiColorPicker.tsx
+++ b/client/src/components/multiColorPicker.tsx
@@ -67,7 +67,7 @@ export function MultiColorPicker(props: {
 
   return (
     <>
-      <Space direction="horizontal" size="middle">
+      <Space direction="horizontal" size="middle" style={{ marginTop: "1em" }}>
         {pickers}
         {values.length < (props.max ?? Infinity) && (
           <Button
diff --git a/client/src/components/spoolIcon.css b/client/src/components/spoolIcon.css
index 7dc205a..d0b0f6d 100644
--- a/client/src/components/spoolIcon.css
+++ b/client/src/components/spoolIcon.css
@@ -1,23 +1,41 @@
 .spool-icon {
   display: flex;
-  flex-direction: column;
   width: 1.5em;
   height: 2.5em;
   gap: 2px;
   margin: 0 0.5em;
 }
 
+.spool-icon.vertical {
+  flex-direction: column;
+}
+
+.spool-icon.large {
+  width: 4em;
+  height: 4em;
+}
+
 .spool-icon * {
   flex: 1 1 0px;
   border-radius: 2px;
 }
 
-.spool-icon *:first-child {
+.spool-icon.vertical *:first-child {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
-.spool-icon *:last-child {
+.spool-icon.vertical *:last-child {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
+
+.spool-icon.horizontal *:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.spool-icon.horizontal *:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
diff --git a/client/src/components/spoolIcon.tsx b/client/src/components/spoolIcon.tsx
index f9a5324..355f792 100644
--- a/client/src/components/spoolIcon.tsx
+++ b/client/src/components/spoolIcon.tsx
@@ -1,10 +1,24 @@
 import "./spoolIcon.css";
 
-export default function SpoolIcon(props: { color: string | string[] }) {
-  const cols = Array.isArray(props.color) ? props.color : [props.color];
+interface Props {
+  color: string | { colors: string[]; vertical: boolean };
+  size?: "small" | "large";
+}
+
+export default function SpoolIcon(props: Props) {
+  let dirClass = "vertical";
+  let cols = [];
+  let size = props.size ? props.size : "small";
+
+  if (typeof props.color === "string") {
+    cols = [props.color];
+  } else {
+    dirClass = props.color.vertical ? "vertical" : "horizontal";
+    cols = props.color.colors;
+  }
 
   return (
-    <div className="spool-icon">
+    <div className={"spool-icon " + dirClass + " " + size}>
       {cols.map((col) => (
         <div
           key={col}
diff --git a/client/src/icon_spool.svg b/client/src/icon_spool.svg
deleted file mode 100644
index 784b290..0000000
--- a/client/src/icon_spool.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="0 0 235 500" xml:space="preserve"><desc>Created with Fabric.js 5.3.0</desc><g id="z-gD78pOtWjQii31Q-6Ze"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="qCAOML5j7kpAVIP3Df73i"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="DwEIaQUSPW4DgKfkdPWoC"><path style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227) translate(-0.000005, 0)" vector-effect="non-scaling-stroke"/></g><g id="OvgM38-6CZm9R47a1TDIX" transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)"><filter id="SVGID_90" width="181.094%" height="149.483%" x="-40.547%" y="-24.742%"><feGaussianBlur in="SourceAlpha" stdDeviation="20"/><feOffset dx="30" dy="0" result="oBlur"/><feFlood flood-color="#000" flood-opacity=".8"/><feComposite in2="oBlur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1;filter:url(#SVGID_90)" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="woBV3Wt7ijQ6puNeMgAQD"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#111;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227) translate(0, 0)" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index cd944a5..c90850a 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -241,7 +241,12 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             id: "name",
             i18ncat: "filament",
             color: (record: IFilamentCollapsed) =>
-              record.multi_color_hexes ? record.multi_color_hexes.split(",") : record.color_hex,
+              record.multi_color_hexes
+                ? {
+                    colors: record.multi_color_hexes.split(","),
+                    vertical: record.multi_color_direction === "longitudinal",
+                  }
+                : record.color_hex,
             filterValueQuery: useSpoolmanFilamentNames(),
           }),
           FilteredQueryColumn({
diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index 2640094..b82314b 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { useCurrency } from "../../utils/settings";
+import SpoolIcon from "../../components/spoolIcon";
 dayjs.extend(utc);
 
 const { Title } = Typography;
@@ -49,6 +50,13 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
     navigate(URL);
   };
 
+  const colorObj = record?.multi_color_hexes
+    ? {
+        colors: record.multi_color_hexes.split(","),
+        vertical: record.multi_color_direction === "longitudinal",
+      }
+    : record?.color_hex;
+
   return (
     <Show
       isLoading={isLoading}
@@ -80,7 +88,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>{t("filament.fields.name")}</Title>
       <TextField value={record?.name} />
       <Title level={5}>{t("filament.fields.color_hex")}</Title>
-      <TextField value={record?.color_hex} />
+      {colorObj && <SpoolIcon color={colorObj} size="large" />}
       <Title level={5}>{t("filament.fields.material")}</Title>
       <TextField value={record?.material} />
       <Title level={5}>{t("filament.fields.price")}</Title>
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 35a8570..2046368 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -344,7 +344,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             i18nkey: "spool.fields.filament_name",
             color: (record: ISpoolCollapsed) =>
               record.filament.multi_color_hexes
-                ? record.filament.multi_color_hexes.split(",")
+                ? {
+                    colors: record.filament.multi_color_hexes.split(","),
+                    vertical: record.filament.multi_color_direction === "longitudinal",
+                  }
                 : record.filament.color_hex,
             dataId: "filament.combined_name",
             filterValueQuery: useSpoolmanFilamentFilter(),
diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
index 6cc2a8a..714ee09 100644
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -11,6 +11,7 @@ import { IFilament } from "../filaments/model";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { useCurrency } from "../../utils/settings";
+import SpoolIcon from "../../components/spoolIcon";
 
 dayjs.extend(utc);
 
@@ -66,12 +67,19 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
     });
   };
 
+  const colorObj = record?.filament.multi_color_hexes
+    ? {
+        colors: record.filament.multi_color_hexes.split(","),
+        vertical: record.filament.multi_color_direction === "longitudinal",
+      }
+    : record?.filament.color_hex;
+
   return (
     <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
       <Title level={5}>{t("spool.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("spool.fields.filament")}</Title>
-      <TextField value={record ? filamentURL(record?.filament) : ""} />
+      {colorObj && <SpoolIcon color={colorObj} />} <TextField value={record ? filamentURL(record?.filament) : ""} />
       <Title level={5}>{t("spool.fields.price")}</Title>
       <NumberField
         value={record ? spoolPrice(record) : ""}