Merge pull request #1867 from smeup/Kup-image-list

Kup image list : Resize image and token
smeup · Apr 17, 2024 · f8018e0 · f8018e0
2 parents 1d72d38 + fe8a418
commit f8018e0
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 9 deletions.
diff --git a/packages/ketchup/src/assets/image-list.js b/packages/ketchup/src/assets/image-list.js
@@ -840,6 +840,111 @@ const data = [
         value: 'Accordion',
         visible: true,
     },
+    {
+        cells: {
+            ROUTE: {
+                value: 'accordion',
+            },
+        },
+        icon: 'view-sequential',
+        value: 'Accordion',
+        visible: true,
+    },
+    {
+        children: [
+            {
+                cells: {
+                    ROUTE: {
+                        value: 'customization',
+                    },
+                },
+                icon: 'style',
+                value: 'Style customization',
+                visible: true,
+            },
+        ],
+        expandable: true,
+        icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
+        isExpanded: false,
+        value: 'Guides',
+        visible: true,
+    },
+    {
+        children: [
+            {
+                cells: {
+                    ROUTE: {
+                        value: 'customization',
+                    },
+                },
+                icon: 'style',
+                value: 'Style customization',
+                visible: true,
+            },
+        ],
+        expandable: true,
+        icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
+        isExpanded: false,
+        value: 'Guides',
+        visible: true,
+    },
+    {
+        children: [
+            {
+                cells: {
+                    ROUTE: {
+                        value: 'customization',
+                    },
+                },
+                icon: 'style',
+                value: 'Style customization',
+                visible: true,
+            },
+        ],
+        expandable: true,
+        icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
+        isExpanded: false,
+        value: 'Guides',
+        visible: true,
+    },
+    {
+        children: [
+            {
+                cells: {
+                    ROUTE: {
+                        value: 'customization',
+                    },
+                },
+                icon: 'style',
+                value: 'Style customization',
+                visible: true,
+            },
+        ],
+        expandable: true,
+        icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
+        isExpanded: false,
+        value: 'Guides',
+        visible: true,
+    },
+    {
+        children: [
+            {
+                cells: {
+                    ROUTE: {
+                        value: 'customization',
+                    },
+                },
+                icon: 'style',
+                value: 'Style customization',
+                visible: true,
+            },
+        ],
+        expandable: true,
+        icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
+        isExpanded: false,
+        value: 'Guides',
+        visible: true,
+    },
 ];
 
 const imageList = document.querySelector('kup-image-list');

diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
@@ -259,8 +259,15 @@ export class KupImageList {
             wrapperClass: 'image-list__image',
             badgeData: node.badgeData,
         };
+
         const image = <FImage {...props}></FImage>;
         const label = <div class="image-list__label">{node.value}</div>;
+
+        const hasExternalResource =
+            props.resource.indexOf('.') > -1 ||
+            props.resource.indexOf('/') > -1 ||
+            props.resource.indexOf('\\') > -1;
+
         return (
             <FCell
                 cell={{ value: node.value, icon: node.icon, obj: node.obj }}
@@ -269,12 +276,18 @@ export class KupImageList {
                 density={FCellPadding.NONE}
                 row={{ ...node }}
             >
-                <div class="image-list__wrapper">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        version="1.1"
-                        viewBox="0 0 24 24"
-                    ></svg>
+                <div
+                    class={`image-list__wrapper${
+                        hasExternalResource ? ' images' : ''
+                    }`}
+                >
+                    {!hasExternalResource && (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            version="1.1"
+                            viewBox="0 0 24 24"
+                        ></svg>
+                    )}
                     {image}
                     {label}
                 </div>

diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
@@ -138,6 +138,17 @@
       box-sizing: border-box;
       position: relative;
     }
+    .f-cell__content .image-list__wrapper.images{
+      height: 100%;
+      justify-content: flex-end;
+
+      .f-image{
+        position: unset;
+        overflow: auto;
+        height: 100%;
+        display: flex;
+      }
+    }
   }
 
   &__item {
@@ -177,6 +188,7 @@
   }
 }
 
+
 @media screen and (min-width: 678px) {
   :host {
     --kup_imagelist_columns: var(--kup-imagelist-columns, 8);

diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -74,9 +74,7 @@ function createIcon(props: FImageProps): HTMLDivElement {
         'f-image__icon': true,
     };
     const style: GenericObject = {
-        background: props.color
-            ? props.color
-            : `var(${KupThemeColorValues.ICON})`,
+        background: props.color ? props.color : `var(--kup-gray-color-70)`,
     };
     if (props.resource.indexOf('--kup') > -1) {
         let themeIcon: string = props.resource.replace('--', '');