New spool icon updates

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>

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

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;
+}

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}