Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jun 4, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
49ea366
minor
odeimaiz Jun 3, 2025
a9b0c8a
portsCompatibilityPromisesCached
odeimaiz Jun 3, 2025
fd16c2d
minor
odeimaiz Jun 3, 2025
d813333
hypertool icon
odeimaiz Jun 3, 2025
159a235
PIPELINE_ICON
odeimaiz Jun 3, 2025
1d8697b
Merge branch 'master' into enh/new-icons
odeimaiz Jun 4, 2025
0dcf3e6
all icons in place
odeimaiz Jun 4, 2025
def03fc
hypertool icon
odeimaiz Jun 4, 2025
852d4dc
Merge branch 'master' into enh/new-icons
mergify[bot] Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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"]);
Expand All @@ -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")) {
Expand Down Expand Up @@ -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"]);
},

Expand Down
8 changes: 7 additions & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
7 changes: 5 additions & 2 deletions services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
Expand Down
3 changes: 2 additions & 1 deletion services/static-webserver/client/source/class/osparc/data/model/StudyUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions services/static-webserver/client/source/class/osparc/study/Utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
}
}
});
Expand Down
Binary file removed services/static-webserver/client/source/resource/osparc/icons/diagram.png
View file
Open in desktop
Binary file not shown.
Loading