diff --git a/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js b/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js index 2cdac611102..8137aeefe2d 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js +++ b/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,10 +232,7 @@ 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++; @@ -242,6 +240,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", { 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"]); }, diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js index 21e953efe51..4b2009279e5 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js +++ b/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); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js index dc00400c562..131838fd18e 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js @@ -261,7 +261,7 @@ 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)) { @@ -269,13 +269,16 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", { } 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); }, diff --git a/services/static-webserver/client/source/class/osparc/data/model/StudyUI.js b/services/static-webserver/client/source/class/osparc/data/model/StudyUI.js index 6a377f2e555..7bf1d260e76 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/StudyUI.js +++ b/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: { diff --git a/services/static-webserver/client/source/class/osparc/study/Utils.js b/services/static-webserver/client/source/class/osparc/study/Utils.js index 05efd59edd1..f657359f613 100644 --- a/services/static-webserver/client/source/class/osparc/study/Utils.js +++ b/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); } } }); diff --git a/services/static-webserver/client/source/resource/osparc/icons/diagram.png b/services/static-webserver/client/source/resource/osparc/icons/diagram.png deleted file mode 100644 index 7ed509475bd..00000000000 Binary files a/services/static-webserver/client/source/resource/osparc/icons/diagram.png and /dev/null differ