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 c01e4ddfdd08..6167e92acb9a 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js +++ b/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,7 +198,7 @@ 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++; @@ -199,9 +206,10 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", { 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, @@ -209,6 +217,14 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", { }); }); hypertoolsMenu.add(hypertoolButton); + osparc.study.Utils.guessIcon(templateData) + .then(iconSource => { + if (iconSource) { + const iconSize = 22; + hypertoolButton.getChildControl("icon").set({ minWidth: iconSize+2 }); + osparc.utils.Utils.replaceIconWithThumbnail(hypertoolButton, iconSource, iconSize); + } + }); }); } }); @@ -262,22 +278,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 +298,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 +316,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 +337,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 +386,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 +409,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); } 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 020f61c64f56..21bc6a52c466 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js +++ b/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); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js index 5d6223588761..fb7a71901cc0 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js +++ b/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({ 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 0e8da9404c46..dc00400c562a 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js +++ b/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); }, diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index 9d57a035e29c..e2b4bce2a3c6 100644 --- a/services/static-webserver/client/source/class/osparc/utils/Utils.js +++ b/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");