🎨 [Frontend] New icons: Hypertools, More, New Folder (#7805)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: odeimaiz

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

@@ -91,6 +91,9 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
   },
 
   statics: {
+    MORE_ICON: "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/refs/heads/main/app/icons/arrows.png",
+    FOLDER_ICON: "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/refs/heads/main/app/icons/folder.png",
+
     createMenuButton: function(icon, title, infoText) {
       title = osparc.utils.Utils.replaceTokens(
         title,
@@ -153,10 +156,8 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       switch (id) {
         case "new-folder":
           this.addSeparator();
-          control = this.self().createMenuButton(
-            "@FontAwesome5Solid/folder/16",
-            this.tr("New Folder"),
-          );
+          control = this.self().createMenuButton(null, this.tr("New Folder"));
+          this.self().setIcon(control, this.self().FOLDER_ICON);
           osparc.utils.Utils.setIdToWidget(control, "newFolderButton");
           control.addListener("tap", () => this.__createNewFolder());
           this.add(control);
@@ -206,7 +207,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
               appearance: "menu-wider",
             });
             hypertoolsMenuButton.setMenu(hypertoolsMenu);
-            this.self().setIcon(hypertoolsMenuButton, osparc.data.model.StudyUI.HYPERTOOL_ICON(16));
+            this.self().setIcon(hypertoolsMenuButton, osparc.data.model.StudyUI.HYPERTOOL_ICON);
 
             hypertools.forEach(templateData => {
               const hypertoolButton = this.self().createMenuButton(null, templateData["name"]);
@@ -231,17 +232,15 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
     },
 
     __addMoreMenu: function() {
-      const moreMenuButton = this.self().createMenuButton("@FontAwesome5Solid/angle-double-right/16", this.tr("More"));
-      moreMenuButton.getChildControl("icon").set({
-        marginLeft: 6, // center it
-      });
+      const moreMenuButton = this.self().createMenuButton(null, this.tr("More"));
       this.addAt(moreMenuButton, this.__itemIdx);
       this.__itemIdx++;
 
       const moreMenu = new qx.ui.menu.Menu().set({
         appearance: "menu-wider",
       });
       moreMenuButton.setMenu(moreMenu);
+      this.self().setIcon(moreMenuButton, this.self().MORE_ICON);
 
       const permissions = osparc.data.Permissions.getInstance();
       if (permissions.canDo("dashboard.templates.read")) {
@@ -319,7 +318,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
         });
       });
 
-      this.self().setIcon(menuButton, buttonConfig["icon"] || "osparc/icons/diagram.png");
+      this.self().setIcon(menuButton, buttonConfig["icon"] || osparc.data.model.StudyUI.PIPELINE_ICON);
       this.__addFromResourceButton(menuButton, buttonConfig["category"]);
     },
 

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

@@ -421,7 +421,13 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
 
       // hypertools filter
       const button = new qx.ui.toolbar.RadioButton("Hypertools", null);
-      osparc.utils.Utils.replaceIconWithThumbnail(button, osparc.data.model.StudyUI.HYPERTOOL_ICON(18), 20);
+      osparc.utils.Utils.replaceIconWithThumbnail(button, osparc.data.model.StudyUI.HYPERTOOL_ICON, 26);
+      // align it with the rest of icons
+      button.set({
+        paddingLeft: 5,
+        paddingTop: 0,
+        paddingBottom: 0,
+      });
       button.appType = "hypertool";
       this.__appTypeButtons.push(button);
 

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

@@ -261,21 +261,24 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       const serviceTypeMenu = new qx.ui.menu.Menu();
       menuButton.setMenu(serviceTypeMenu);
 
-      const iconSize = 12;
+      const iconSize = 14;
       const serviceTypes = osparc.service.Utils.TYPES;
       Object.keys(serviceTypes).forEach(serviceId => {
         if (!["computational", "dynamic"].includes(serviceId)) {
           return;
         }
         const serviceType = serviceTypes[serviceId];
         const serviceTypeButton = new qx.ui.menu.Button(serviceType.label, serviceType.icon+iconSize);
+        serviceTypeButton.getChildControl("icon").set({
+          alignX: "center",
+        });
         serviceTypeMenu.add(serviceTypeButton);
         serviceTypeButton.addListener("execute", () => this.__addChip("app-type", serviceId, serviceType.label), this);
       });
 
       // hypertools filter
       const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", null);
-      osparc.utils.Utils.replaceIconWithThumbnail(hypertoolTypeButton, osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize), iconSize);
+      osparc.utils.Utils.replaceIconWithThumbnail(hypertoolTypeButton, osparc.data.model.StudyUI.HYPERTOOL_ICON, 18);
       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: "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/refs/heads/main/app/icons/hypertool.png",
+    PIPELINE_ICON: "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/refs/heads/main/app/icons/diagram.png",
   },
 
   members: {

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

@@ -439,7 +439,7 @@ qx.Class.define("osparc.study.Utils", {
     __guessIcon: function(studyData) {
       return new Promise(resolve => {
         if (studyData["ui"]["mode"] === "pipeline") {
-          resolve("osparc/icons/diagram.png");
+          resolve(osparc.data.model.StudyUI.PIPELINE_ICON);
         } else {
           const defaultIcon = osparc.dashboard.CardBase.PRODUCT_ICON;
           // the was to guess the TI type is to check the boot mode of the ti-postpro in the pipeline
@@ -454,7 +454,7 @@ qx.Class.define("osparc.study.Utils", {
                 resolve(defaultIcon);
               });
           } else {
-            resolve("osparc/icons/diagram.png");
+            resolve(osparc.data.model.StudyUI.PIPELINE_ICON);
           }
         }
       });