update Test icon

smeup · May 22, 2024 · 8375b5c · 8375b5c
1 parent ad2ebe7
commit 8375b5c
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 2 deletions.
diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.scss b/packages/ketchup/src/f-components/f-cell/f-cell.scss
@@ -72,6 +72,43 @@
     .f-cell__content {
       min-height: 18px;
       min-width: 18px;
+      .imageWrapIcon {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .f-image {
+          position: absolute;
+          padding-bottom: 0px;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          .f-image__icon {
+            height: 100% !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.image-cell {
+    .f-cell__content .imageWrapIcon {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .f-image {
+        position: absolute;
+        padding-bottom: 0px;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        .f-image__icon {
+          height: 100% !important;
+        }
+      }
     }
   }
 
@@ -226,7 +263,7 @@
   }
 
   &.success-bg {
-    background: var(--kup-success-color) !important;
+    background: var(--kup-success-color-40) !important;
     color: white !important;
   }
 

diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -220,6 +220,30 @@ function setCellSize(
             }
             break;
         case FCellTypes.IMAGE:
+            const hasExternalResource =
+                props.cell.value.indexOf('.') > -1 ||
+                props.cell.value.indexOf('/') > -1 ||
+                props.cell.value.indexOf('\\') > -1;
+            if (
+                (props.component as KupComponent).rootElement.tagName ===
+                    KupTagNames.DATA_TABLE ||
+                !hasExternalResource
+            ) {
+                if (
+                    !(subcomponentProps as FImageProps).sizeX &&
+                    !(subcomponentProps as FImageProps).sizeY
+                ) {
+                    (subcomponentProps as FImageProps).sizeX = '100%';
+                    (subcomponentProps as FImageProps).sizeY = '64px';
+                } else {
+                    if (!(subcomponentProps as FImageProps).sizeX) {
+                        (subcomponentProps as FImageProps).sizeX = '100%';
+                    }
+                    if (!(subcomponentProps as FImageProps).sizeY) {
+                        (subcomponentProps as FImageProps).sizeY = 'auto';
+                    }
+                }
+            }
             if (
                 (props.component as KupComponent).rootElement.tagName ===
                 KupTagNames.BOX
@@ -628,14 +652,44 @@ function setCell(
         case FCellTypes.EDITOR:
             return <div innerHTML={cell.value}></div>;
         case FCellTypes.ICON:
-        case FCellTypes.IMAGE:
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
             }
             if ((subcomponentProps as FImageProps).badgeData) {
                 classObj[FCellClasses.C_PADDED] = true;
             }
             return <FImage {...subcomponentProps} />;
+        case FCellTypes.IMAGE:
+            const hasExternalResource =
+                props.cell.value.indexOf('.') > -1 ||
+                props.cell.value.indexOf('/') > -1 ||
+                props.cell.value.indexOf('\\') > -1;
+            if (isAutoCentered(props)) {
+                classObj[FCellClasses.C_CENTERED] = true;
+            }
+            if ((subcomponentProps as FImageProps).badgeData) {
+                classObj[FCellClasses.C_PADDED] = true;
+            }
+            if (hasExternalResource) {
+                return <FImage {...subcomponentProps} />;
+            } else {
+                return (
+                    <div
+                        class={`imageWrapIcon`}
+                        style={{
+                            width: subcomponentProps.sizeX,
+                            height: subcomponentProps.sizeY,
+                        }}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            version="1.1"
+                            viewBox="0 0 24 24"
+                        ></svg>
+                        <FImage {...subcomponentProps} />
+                    </div>
+                );
+            }
         case FCellTypes.LINK:
             return (
                 <a href={content as string} target="_blank">