🎨 [Frontend] Support any image url in the Hypertool buttons

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

@@ -135,6 +135,13 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
         textColor: "text-darker",
       });
     },
+
+    setIcon: function(menuButton, icon, resourceMetadata) {
+      const source = icon ? icon : osparc.utils.Utils.getIconFromResource(resourceMetadata);
+      if (source) {
+        osparc.utils.Utils.replaceIconWithThumbnail(menuButton, source, 24);
+      }
+    },
   },
 
   members: {
@@ -191,24 +198,27 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       osparc.store.Templates.getHypertools()
         .then(hypertools => {
           if (hypertools.length) {
-            const hypertoolsMenuButton = this.self().createMenuButton(osparc.data.model.StudyUI.HYPERTOOL_ICON(16), this.tr("Hypertools"));
+            const hypertoolsMenuButton = this.self().createMenuButton(null, this.tr("Hypertools"));
             this.addAt(hypertoolsMenuButton, this.__itemIdx);
             this.__itemIdx++;
 
             const hypertoolsMenu = new qx.ui.menu.Menu().set({
               appearance: "menu-wider",
             });
             hypertoolsMenuButton.setMenu(hypertoolsMenu);
+            this.self().setIcon(hypertoolsMenuButton, osparc.data.model.StudyUI.HYPERTOOL_ICON(16));
 
             hypertools.forEach(templateData => {
-              const hypertoolButton = this.self().createMenuButton(templateData["icon"], templateData["name"]);
+              const hypertoolButton = this.self().createMenuButton(null, templateData["name"]);
               hypertoolButton.addListener("tap", () => {
                 this.fireDataEvent("newStudyFromTemplateClicked", {
                   templateData,
                   newStudyLabel: templateData["name"],
                 });
               });
               hypertoolsMenu.add(hypertoolButton);
+              osparc.study.Utils.guessIcon(templateData)
+                .then(iconSource => osparc.utils.Utils.replaceIconWithThumbnail(hypertoolButton, iconSource, 22));
             });
           }
         });
@@ -262,22 +272,6 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       });
     },
 
-    __addIcon: function(menuButton, icon, resourceMetadata) {
-      const source = icon ? icon : osparc.utils.Utils.getIconFromResource(resourceMetadata);
-      if (source) {
-        const thumbnail = new osparc.ui.basic.Thumbnail(source, 24, 24).set({
-          minHeight: 24,
-          minWidth: 24,
-        });
-        thumbnail.getChildControl("image").set({
-          anonymous: true,
-          decorator: "rounded",
-        });
-        // eslint-disable-next-line no-underscore-dangle
-        menuButton._add(thumbnail, {column: 0});
-      }
-    },
-
     __addFromResourceButton: function(menuButton, category, idx = null) {
       if (category) {
         idx = this.__getLastIdxFromCategory(category);
@@ -298,7 +292,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       osparc.utils.Utils.setIdToWidget(menuButton, buttonConfig["idToWidget"]);
       menuButton.setEnabled(false);
 
-      this.__addIcon(menuButton, buttonConfig["icon"]);
+      this.self().setIcon(menuButton, buttonConfig["icon"]);
       this.__addFromResourceButton(menuButton, buttonConfig["category"]);
     },
 
@@ -316,7 +310,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
         });
       });
 
-      this.__addIcon(menuButton, buttonConfig["icon"] || "osparc/icons/diagram.png");
+      this.self().setIcon(menuButton, buttonConfig["icon"] || "osparc/icons/diagram.png");
       this.__addFromResourceButton(menuButton, buttonConfig["category"]);
     },
 
@@ -337,7 +331,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
                 newStudyLabel: buttonConfig["newStudyLabel"],
               });
             });
-            this.__addIcon(menuButton, buttonConfig["icon"], templateMetadata);
+            this.self().setIcon(menuButton, buttonConfig["icon"], templateMetadata);
             this.__addFromResourceButton(menuButton, buttonConfig["category"]);
           }
         });
@@ -386,7 +380,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
           return;
         }
         menuButton.setEnabled(true);
-        this.__addIcon(menuButton, buttonConfig["icon"], latestMetadata);
+        this.self().setIcon(menuButton, buttonConfig["icon"], latestMetadata);
         this.__addFromResourceButton(menuButton, buttonConfig["category"]);
         addListenerToButton(menuButton, latestMetadata);
       } else if ("myMostUsed" in buttonConfig) {
@@ -409,7 +403,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
                   font: "text-16",
                   allowGrowX: true,
                 });
-                this.__addIcon(menuButton, null, latestMetadata);
+                this.self().setIcon(menuButton, null, latestMetadata);
                 this.__addFromResourceButton(menuButton, buttonConfig["category"], old+i);
                 addListenerToButton(menuButton, latestMetadata);
               }

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

@@ -416,7 +416,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
       });
 
       // hypertools filter
-      const button = new qx.ui.toolbar.RadioButton("Hypertools", osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize));
+      const button = new qx.ui.toolbar.RadioButton("Hypertools", null);
+      osparc.utils.Utils.replaceIconWithThumbnail(button, osparc.data.model.StudyUI.HYPERTOOL_ICON(), 20);
       button.appType = "hypertool";
       this.__appTypeButtons.push(button);
 

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

@@ -98,9 +98,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
 
     popUpInWindow: function(resourceDetails) {
       // eslint-disable-next-line no-underscore-dangle
-      const resourceAlias = osparc.product.Utils.resourceTypeToAlias(resourceDetails.__resourceData["resourceType"], {firstUpperCase: true});
-      // eslint-disable-next-line no-underscore-dangle
-      const title = `${resourceAlias} ${qx.locale.Manager.tr("Details")} - ${resourceDetails.__resourceData.name}`;
+      const title = resourceDetails.__resourceData.name;
       const win = osparc.ui.window.Window.popUpInWindow(resourceDetails, title, this.WIDTH, this.HEIGHT).set({
         layout: new qx.ui.layout.Grow(),
       });
@@ -891,10 +889,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
 
     __getActivityOverviewPopUp: function() {
       const resourceData = this.__resourceData;
-      if (
-        osparc.desktop.credits.Utils.areWalletsEnabled() &&
-        osparc.utils.Resources.isStudy(resourceData)
-      ) {
+      if (osparc.utils.Resources.isStudy(resourceData)) {
         const title = this.tr("Activity Overview...");
         const iconSrc = "@FontAwesome5Solid/tasks/22";
         const dataAccess = new qx.ui.basic.Atom().set({

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

@@ -274,7 +274,8 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       });
 
       // hypertools filter
-      const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize));
+      const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", null);
+      osparc.utils.Utils.replaceIconWithThumbnail(hypertoolTypeButton, osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize), iconSize);
       serviceTypeMenu.add(hypertoolTypeButton);
       hypertoolTypeButton.addListener("execute", () => this.__addChip("app-type", "hypertool", "Hypertools"), this);
     },

services/static-webserver/client/source/class/osparc/data/model/StudyUI.js

@@ -94,7 +94,8 @@ qx.Class.define("osparc.data.model.StudyUI", {
     TEMPLATE_TYPE: "TEMPLATE",
     TUTORIAL_TYPE: "TUTORIAL",
     HYPERTOOL_TYPE: "HYPERTOOL",
-    HYPERTOOL_ICON: (iconSize = 22) => ("@FontAwesome5Solid/wrench/" + iconSize),
+    // HYPERTOOL_ICON: (iconSize = 22) => ("@FontAwesome5Solid/wrench/" + iconSize),
+    HYPERTOOL_ICON: (iconSize = 22) => "https://reserve.freesvg.org/img/cat_line_art_pitr_Kitty_icon.png",
   },
 
   members: {

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

@@ -91,6 +91,29 @@ qx.Class.define("osparc.utils.Utils", {
 
     FLOATING_Z_INDEX: 1000001 + 1,
 
+    replaceIconWithThumbnail: function(widget, thumbnailUrl, size = 24) {
+      if (thumbnailUrl) {
+        const thumbnail = new osparc.ui.basic.Thumbnail(thumbnailUrl, size, size).set({
+          minHeight: size,
+          minWidth: size,
+        });
+        thumbnail.getChildControl("image").set({
+          anonymous: true,
+          decorator: "rounded",
+        });
+        switch (widget.classname) {
+          case "qx.ui.menu.Button":
+            // eslint-disable-next-line no-underscore-dangle
+            widget._add(thumbnail, {column: 0});
+            break;
+          case "qx.ui.toolbar.RadioButton":
+            // eslint-disable-next-line no-underscore-dangle
+            widget._addAt(thumbnail, 0);
+            break;
+        }
+      }
+    },
+
     disableAutocomplete: function(control) {
       if (control && control.getContentElement()) {
         control.getContentElement().setAttribute("autocomplete", "off");