[skip ci] Distinguish between thumbnail and icon

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -269,6 +269,13 @@ qx.Class.define("osparc.dashboard.CardBase", {
       apply: "_applyIcon",
     },
 
+    thumbnail: {
+      check: "String",
+      init: null,
+      nullable: true,
+      apply: "_applyThumbnail",
+    },
+
     resourceData: {
       check: "Object",
       nullable: false,
@@ -482,6 +489,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
         trashedAt: resourceData.trashedAt ? new Date(resourceData.trashedAt) : null,
         trashedBy: resourceData.trashedBy || null,
         icon: resourceData.thumbnail || this.self().PRODUCT_ICON,
+        thumbnail: resourceData.thumbnail || this.self().PRODUCT_ICON,
         state: resourceData.state ? resourceData.state : {},
         classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],
         quality: resourceData.quality ? resourceData.quality : null,
@@ -531,6 +539,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
       throw new Error("Abstract method called!");
     },
 
+    _applyThumbnail: function(value, old) {
+      throw new Error("Abstract method called!");
+    },
+
     _applyTitle: function(value, old) {
       throw new Error("Abstract method called!");
     },

services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js

@@ -251,6 +251,23 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           layout.add(control, {flex: 1});
           break;
         }
+        case "thumbnail": {
+          layout = this.getChildControl("body");
+          const maxWidth = this.self().ITEM_WIDTH;
+          control = new osparc.ui.basic.Thumbnail(null, maxWidth, 124);
+          control.getChildControl("image").set({
+            anonymous: true,
+            alignY: "middle",
+            alignX: "center",
+            allowGrowX: true,
+            allowGrowY: true
+          });
+          layout.getContentElement().setStyles({
+            "border-width": "0px"
+          });
+          layout.add(control, {flex: 1});
+          break;
+        }
         case "date-by":
           control = new osparc.ui.basic.DateAndBy();
           layout = this.getChildControl("footer");
@@ -276,9 +293,14 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
 
     // overridden
     _applyIcon: function(value, old) {
+      console.log("show icon", value);
+    },
+
+    // overridden
+    _applyThumbnail: function(value, old) {
       if (value.includes("@FontAwesome5Solid/")) {
         value += this.self().ICON_SIZE;
-        const image = this.getChildControl("icon").getChildControl("image");
+        const image = this.getChildControl("thumbnail").getChildControl("image");
         image.set({
           source: value
         });

services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js

@@ -144,13 +144,18 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
       });
     },
 
+    _applyThumbnail: function(value, old) {
+      // do not shot thumbnail in list button, icon takes over
+      return;
+    },
+
     _applyTitle: function(value, old) {
       const label = this.getChildControl("title");
       label.setValue(value);
     },
 
     _applyDescription: function(value, old) {
-      return
+      return;
     }
   },
 

services/static-webserver/client/source/class/osparc/study/Utils.js

@@ -353,5 +353,16 @@ qx.Class.define("osparc.study.Utils", {
       const blocked = this.__getBlockedState(studyData);
       return ["UNKNOWN_SERVICES", false].includes(blocked);
     },
+
+    suggestIcon: function(studyData) {
+      if (osparc.product.Utils.isProduct("tis") || osparc.product.Utils.isProduct("tiplite")) {
+        return "https://images.seeklogo.com/logo-png/35/1/jupyter-logo-png_seeklogo-354673.png";
+      }
+      const uiMode = this.self().getUiMode(studyData);
+      if (uiMode === "standalone") {
+        return "https://raw.githubusercontent.com/ITISFoundation/osparc-iseg/master/iSeg/images/isegicon.png";
+      }
+      return osparc.dashboard.CardBase.PRODUCT_ICON;
+    },
   }
 });