Skip to content

Commit 1147ace

Browse files
odeimaizmatusdrobuliak66mergify[bot]
authored
🎨 [Frontend] Support any image url in the Hypertool buttons (#7720)
Co-authored-by: Matus Drobuliak <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
1 parent 066b8a2 commit 1147ace

File tree

5 files changed

+52
-32
lines changed

5 files changed

+52
-32
lines changed

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,13 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
135135
textColor: "text-darker",
136136
});
137137
},
138+
139+
setIcon: function(menuButton, icon, resourceMetadata) {
140+
const source = icon ? icon : osparc.utils.Utils.getIconFromResource(resourceMetadata);
141+
if (source) {
142+
osparc.utils.Utils.replaceIconWithThumbnail(menuButton, source, 24);
143+
}
144+
},
138145
},
139146

140147
members: {
@@ -191,24 +198,33 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
191198
osparc.store.Templates.getHypertools()
192199
.then(hypertools => {
193200
if (hypertools.length) {
194-
const hypertoolsMenuButton = this.self().createMenuButton(osparc.data.model.StudyUI.HYPERTOOL_ICON(16), this.tr("Hypertools"));
201+
const hypertoolsMenuButton = this.self().createMenuButton(null, this.tr("Hypertools"));
195202
this.addAt(hypertoolsMenuButton, this.__itemIdx);
196203
this.__itemIdx++;
197204

198205
const hypertoolsMenu = new qx.ui.menu.Menu().set({
199206
appearance: "menu-wider",
200207
});
201208
hypertoolsMenuButton.setMenu(hypertoolsMenu);
209+
this.self().setIcon(hypertoolsMenuButton, osparc.data.model.StudyUI.HYPERTOOL_ICON(16));
202210

203211
hypertools.forEach(templateData => {
204-
const hypertoolButton = this.self().createMenuButton(templateData["icon"], templateData["name"]);
212+
const hypertoolButton = this.self().createMenuButton(null, templateData["name"]);
205213
hypertoolButton.addListener("tap", () => {
206214
this.fireDataEvent("newStudyFromTemplateClicked", {
207215
templateData,
208216
newStudyLabel: templateData["name"],
209217
});
210218
});
211219
hypertoolsMenu.add(hypertoolButton);
220+
osparc.study.Utils.guessIcon(templateData)
221+
.then(iconSource => {
222+
if (iconSource) {
223+
const iconSize = 22;
224+
hypertoolButton.getChildControl("icon").set({ minWidth: iconSize+2 });
225+
osparc.utils.Utils.replaceIconWithThumbnail(hypertoolButton, iconSource, iconSize);
226+
}
227+
});
212228
});
213229
}
214230
});
@@ -262,22 +278,6 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
262278
});
263279
},
264280

265-
__addIcon: function(menuButton, icon, resourceMetadata) {
266-
const source = icon ? icon : osparc.utils.Utils.getIconFromResource(resourceMetadata);
267-
if (source) {
268-
const thumbnail = new osparc.ui.basic.Thumbnail(source, 24, 24).set({
269-
minHeight: 24,
270-
minWidth: 24,
271-
});
272-
thumbnail.getChildControl("image").set({
273-
anonymous: true,
274-
decorator: "rounded",
275-
});
276-
// eslint-disable-next-line no-underscore-dangle
277-
menuButton._add(thumbnail, {column: 0});
278-
}
279-
},
280-
281281
__addFromResourceButton: function(menuButton, category, idx = null) {
282282
if (category) {
283283
idx = this.__getLastIdxFromCategory(category);
@@ -298,7 +298,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
298298
osparc.utils.Utils.setIdToWidget(menuButton, buttonConfig["idToWidget"]);
299299
menuButton.setEnabled(false);
300300

301-
this.__addIcon(menuButton, buttonConfig["icon"]);
301+
this.self().setIcon(menuButton, buttonConfig["icon"]);
302302
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
303303
},
304304

@@ -316,7 +316,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
316316
});
317317
});
318318

319-
this.__addIcon(menuButton, buttonConfig["icon"] || "osparc/icons/diagram.png");
319+
this.self().setIcon(menuButton, buttonConfig["icon"] || "osparc/icons/diagram.png");
320320
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
321321
},
322322

@@ -337,7 +337,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
337337
newStudyLabel: buttonConfig["newStudyLabel"],
338338
});
339339
});
340-
this.__addIcon(menuButton, buttonConfig["icon"], templateMetadata);
340+
this.self().setIcon(menuButton, buttonConfig["icon"], templateMetadata);
341341
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
342342
}
343343
});
@@ -386,7 +386,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
386386
return;
387387
}
388388
menuButton.setEnabled(true);
389-
this.__addIcon(menuButton, buttonConfig["icon"], latestMetadata);
389+
this.self().setIcon(menuButton, buttonConfig["icon"], latestMetadata);
390390
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
391391
addListenerToButton(menuButton, latestMetadata);
392392
} else if ("myMostUsed" in buttonConfig) {
@@ -409,7 +409,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
409409
font: "text-16",
410410
allowGrowX: true,
411411
});
412-
this.__addIcon(menuButton, null, latestMetadata);
412+
this.self().setIcon(menuButton, null, latestMetadata);
413413
this.__addFromResourceButton(menuButton, buttonConfig["category"], old+i);
414414
addListenerToButton(menuButton, latestMetadata);
415415
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
416416
});
417417

418418
// hypertools filter
419-
const button = new qx.ui.toolbar.RadioButton("Hypertools", osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize));
419+
const button = new qx.ui.toolbar.RadioButton("Hypertools", null);
420+
osparc.utils.Utils.replaceIconWithThumbnail(button, osparc.data.model.StudyUI.HYPERTOOL_ICON(), 20);
420421
button.appType = "hypertool";
421422
this.__appTypeButtons.push(button);
422423

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
9898

9999
popUpInWindow: function(resourceDetails) {
100100
// eslint-disable-next-line no-underscore-dangle
101-
const resourceAlias = osparc.product.Utils.resourceTypeToAlias(resourceDetails.__resourceData["resourceType"], {firstUpperCase: true});
102-
// eslint-disable-next-line no-underscore-dangle
103-
const title = `${resourceAlias} ${qx.locale.Manager.tr("Details")} - ${resourceDetails.__resourceData.name}`;
101+
const title = resourceDetails.__resourceData.name;
104102
const win = osparc.ui.window.Window.popUpInWindow(resourceDetails, title, this.WIDTH, this.HEIGHT).set({
105103
layout: new qx.ui.layout.Grow(),
106104
});
@@ -891,10 +889,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
891889

892890
__getActivityOverviewPopUp: function() {
893891
const resourceData = this.__resourceData;
894-
if (
895-
osparc.desktop.credits.Utils.areWalletsEnabled() &&
896-
osparc.utils.Resources.isStudy(resourceData)
897-
) {
892+
if (osparc.utils.Resources.isStudy(resourceData)) {
898893
const title = this.tr("Activity Overview...");
899894
const iconSrc = "@FontAwesome5Solid/tasks/22";
900895
const dataAccess = new qx.ui.basic.Atom().set({

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,8 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
274274
});
275275

276276
// hypertools filter
277-
const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize));
277+
const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", null);
278+
osparc.utils.Utils.replaceIconWithThumbnail(hypertoolTypeButton, osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize), iconSize);
278279
serviceTypeMenu.add(hypertoolTypeButton);
279280
hypertoolTypeButton.addListener("execute", () => this.__addChip("app-type", "hypertool", "Hypertools"), this);
280281
},

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,29 @@ qx.Class.define("osparc.utils.Utils", {
9191

9292
FLOATING_Z_INDEX: 1000001 + 1,
9393

94+
replaceIconWithThumbnail: function(widget, thumbnailUrl, size = 24) {
95+
if (thumbnailUrl) {
96+
const thumbnail = new osparc.ui.basic.Thumbnail(thumbnailUrl, size, size).set({
97+
minHeight: size,
98+
minWidth: size,
99+
});
100+
thumbnail.getChildControl("image").set({
101+
anonymous: true,
102+
decorator: "rounded",
103+
});
104+
switch (widget.classname) {
105+
case "qx.ui.menu.Button":
106+
// eslint-disable-next-line no-underscore-dangle
107+
widget._add(thumbnail, {column: 0});
108+
break;
109+
case "qx.ui.toolbar.RadioButton":
110+
// eslint-disable-next-line no-underscore-dangle
111+
widget._addAt(thumbnail, 0);
112+
break;
113+
}
114+
}
115+
},
116+
94117
disableAutocomplete: function(control) {
95118
if (control && control.getContentElement()) {
96119
control.getContentElement().setAttribute("autocomplete", "off");

0 commit comments

Comments
 (0)