From 451f3bb58c46f5f0696c5d5b1d054e523e8d9898 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 13 Dec 2024 18:28:29 +0100 Subject: [PATCH 1/9] minor --- .../client/source/class/osparc/dashboard/CardBase.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js index d8c6d7f4d92..c9171ebc2e2 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js @@ -470,9 +470,9 @@ qx.Class.define("osparc.dashboard.CardBase", { __evalSelectedButton: function() { if ( - this.isResourceType("study") || - this.isResourceType("template") || - this.isResourceType("service") + this.hasChildControl("menu-button") && + this.hasChildControl("tick-selected") && + this.hasChildControl("tick-unselected") ) { const menuButton = this.getChildControl("menu-button"); const tick = this.getChildControl("tick-selected"); From 884f8338180d88767aa0210dc0b83c70c578e01b Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 13 Dec 2024 18:28:42 +0100 Subject: [PATCH 2/9] not needed --- .../client/source/class/osparc/service/ServiceListItem.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js b/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js index c970c2df3a9..dc239da7c93 100644 --- a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js +++ b/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js @@ -35,14 +35,6 @@ qx.Class.define("osparc.service.ServiceListItem", { } this.subscribeToFilterGroup("serviceCatalog"); - - /** - * The idea here is to show some extra options when a service is selected: - * - Version selection - * - Pricing unit selection if applies - */ - // But the toggle button consumes all the events, I believe that the trick is to use the anonymous property - // this.addListener("changeValue", e => this.__itemSelected(e.getData())); }, properties: { From afe48e5af0fd0893e39dfdd5473644c578676c4e Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 13 Dec 2024 18:30:54 +0100 Subject: [PATCH 3/9] list items are not toggle buttons --- .../class/osparc/service/ServiceList.js | 59 +++++++++---------- .../class/osparc/workbench/ServiceCatalog.js | 2 +- 2 files changed, 29 insertions(+), 32 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/service/ServiceList.js b/services/static-webserver/client/source/class/osparc/service/ServiceList.js index 06ca9bca1e7..72d1164f6dd 100644 --- a/services/static-webserver/client/source/class/osparc/service/ServiceList.js +++ b/services/static-webserver/client/source/class/osparc/service/ServiceList.js @@ -36,7 +36,7 @@ qx.Class.define("osparc.service.ServiceList", { }, events: { - "changeValue": "qx.event.type.Data", + "changeSelected": "qx.event.type.Data", "serviceAdd": "qx.event.type.Data" }, @@ -53,33 +53,26 @@ qx.Class.define("osparc.service.ServiceList", { }, members: { - __buttonGroup: null, __filterGroup: null, _applyModel: function(model) { this._removeAll(); - const group = this.__buttonGroup = new qx.ui.form.RadioGroup().set({ - allowEmptySelection: true - }); + this.__serviceListItem = []; model.toArray().forEach(service => { - const button = new osparc.service.ServiceListItem(service); + const item = new osparc.service.ServiceListItem(service); if (this.__filterGroup !== null) { - button.subscribeToFilterGroup(this.__filterGroup); + item.subscribeToFilterGroup(this.__filterGroup); } - group.add(button); - this._add(button); - button.addListener("dbltap", () => { - this.fireDataEvent("serviceAdd", button.getService()); - }, this); - button.addListener("keypress", e => { + this._add(item); + item.addListener("tap", () => this.__setSelected(item)); + item.addListener("dbltap", () => this.fireDataEvent("serviceAdd", item.getService()), this); + item.addListener("keypress", e => { if (e.getKeyIdentifier() === "Enter") { - this.fireDataEvent("serviceAdd", button.getService()); + this.fireDataEvent("serviceAdd", item.getService()); } }, this); }); - - group.addListener("changeValue", e => this.dispatchEvent(e.clone()), this); }, /** @@ -88,37 +81,41 @@ qx.Class.define("osparc.service.ServiceList", { * @return Returns the model of the selected service or null if selection is empty. */ getSelected: function() { - if (this.__buttonGroup && this.__buttonGroup.getSelection().length) { - return this.__buttonGroup.getSelection()[0].getService(); + const items = this._getChildren(); + for (let i=0; i item.setSelected(item === selectedItem)); + this.fireDataEvent("changeSelected", selectedItem); + }, + /** * Function checking if the selection is empty or not * * @return True if no item is selected, false if there one or more item selected. */ isSelectionEmpty: function() { - if (this.__buttonGroup == null) { - return true; - } - return this.__buttonGroup.getSelection().length === 0; + const selecetedItems = this._getChildren().filter(item => item.getSelected()); + selecetedItems.length === 0; }, /** * Function that selects the first visible button. */ selectFirstVisible: function() { - if (this._hasChildren()) { - const buttons = this._getChildren(); - let current = buttons[0]; - let i = 1; - while (i { + this.__serviceList.addListener("changeSelected", e => { if (e.getData() && e.getData().getService()) { const selectedService = e.getData().getService(); this.__changedSelection(selectedService.getKey()); From ed57fb4bc8aa80c956a838e1e064307cb51bb3d9 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Sun, 15 Dec 2024 10:17:53 +0100 Subject: [PATCH 4/9] smaller TIP disclaimer --- .../client/source/class/osparc/auth/ui/LoginView.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js b/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js index 56972d7eb6f..fdbcebeaec2 100644 --- a/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js +++ b/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js @@ -140,6 +140,8 @@ qx.Class.define("osparc.auth.ui.LoginView", { `; } const disclaimer = osparc.announcement.AnnouncementUIFactory.createLoginAnnouncement(this.tr("Disclaimer"), text); + disclaimer.getChildren()[0].setFont("text-14"); // title + disclaimer.getChildren()[1].setFont("text-12"); // description this.add(disclaimer); this.add(new qx.ui.core.Spacer(), { From 0513e3e09a71262716a213a3065033202718d427 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Sun, 15 Dec 2024 10:30:18 +0100 Subject: [PATCH 5/9] prettify listbuttonitem menu --- .../source/class/osparc/dashboard/GridButtonItem.js | 2 +- .../source/class/osparc/dashboard/ListButtonItem.js | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js index 5b2778349a1..003648f7629 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js @@ -236,7 +236,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", { const menuButton = this.getChildControl("menu-button"); if (menu) { menuButton.setMenu(menu); - menu.setPosition("top-left"); + menu.setPosition("bottom-left"); osparc.utils.Utils.prettifyMenu(menu); osparc.utils.Utils.setIdToWidget(menu, "studyItemMenuMenu"); this.evaluateMenuButtons(); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js index 01557d8947c..5a80947d803 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js @@ -260,13 +260,16 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { }); }, - _applyMenu: function(value, old) { + _applyMenu: function(menu, old) { const menuButton = this.getChildControl("menu-button"); - if (value) { - menuButton.setMenu(value); - osparc.utils.Utils.setIdToWidget(value, "studyItemMenuMenu"); + if (menu) { + menuButton.setMenu(menu); + menu.setPosition("bottom-left"); + osparc.utils.Utils.prettifyMenu(menu); + osparc.utils.Utils.setIdToWidget(menu, "studyItemMenuMenu"); + this.evaluateMenuButtons(); } - menuButton.setVisibility(value ? "visible" : "excluded"); + menuButton.setVisibility(menu ? "visible" : "excluded"); } } }); From 97cc262e3457571a686acdbe2bb0013330d95e66 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Sun, 15 Dec 2024 10:45:21 +0100 Subject: [PATCH 6/9] bgColor --- .../client/source/class/osparc/service/ServiceListItem.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js b/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js index dc239da7c93..9363fbb19a2 100644 --- a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js +++ b/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js @@ -35,6 +35,10 @@ qx.Class.define("osparc.service.ServiceListItem", { } this.subscribeToFilterGroup("serviceCatalog"); + + this.bind("selected", this, "backgroundColor", { + converter: selected => selected ? "strong-main" : "info" + }); }, properties: { From d61362f0d38196f42274314a1855086fcc7bc568 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Sun, 15 Dec 2024 11:07:13 +0100 Subject: [PATCH 7/9] minor --- .../client/source/class/osparc/dashboard/MoveResourceTo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/MoveResourceTo.js b/services/static-webserver/client/source/class/osparc/dashboard/MoveResourceTo.js index ecd26def377..aefa81ef810 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/MoveResourceTo.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/MoveResourceTo.js @@ -73,7 +73,7 @@ qx.Class.define("osparc.dashboard.MoveResourceTo", { switch (id) { case "current-location": { control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); - const intro = new qx.ui.basic.Label(this.tr("Current location")); + const intro = new qx.ui.basic.Label(this.tr("Current location:")); control.add(intro); const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.__currentWorkspaceId); const workspaceText = workspace ? workspace.getName() : "My Workspace"; From 60037a2906202f0c5683c2d99e981f436c6e18e5 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Sun, 15 Dec 2024 11:08:28 +0100 Subject: [PATCH 8/9] dragIndicator --- .../class/osparc/dashboard/StudyBrowser.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js index bd962e0d636..76cf5024f6b 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js @@ -100,6 +100,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { __foldersList: null, __loadingFolders: null, __loadingWorkspaces: null, + __dragIndicator: null, // overridden initResources: function() { @@ -646,6 +647,19 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { // /FOLDERS __configureStudyCards: function(cards) { + // Create drag indicator + this.__dragIndicator = new qx.ui.basic.Atom().set({ + opacity: 0.9, + padding: 10, + zIndex: 1000, + font: "text-14", + backgroundColor: "strong-main", + decorator: "rounded", + visibility: "excluded", + }); + const root = qx.core.Init.getApplication().getRoot(); + root.add(this.__dragIndicator); + cards.forEach(card => { card.setMultiSelectionMode(this.getMultiSelection()); card.addListener("tap", e => this.__studyCardClicked(card, e.getNativeEvent().shiftKey), this); @@ -656,13 +670,41 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { }, __attachDragHandlers: function(card) { + const onMouseMoveDragging = e => { + const dragWidget = this.__dragIndicator.getContentElement().getDomElement(); + dragWidget.style.left = `${e.pageX + 10}px`; // Offset for better visibility + dragWidget.style.top = `${e.pageY + 10}px`; + }; + card.setDraggable(true); + card.addListener("dragstart", e => { e.addAction("move"); e.addType("osparc-moveStudy"); e.addData("osparc-moveStudy", { "studyDataOrigin": card.getResourceData(), }); + + // make it semi transparent while being dragged + card.setOpacity(0.2); + // init drag indicator + this.__dragIndicator.set({ + label: card.getTitle(), + visibility: "visible", + }); + // listen to mousemove while dragging + document.addEventListener("mousemove", onMouseMoveDragging, false); + }); + + card.addListener("dragend", () => { + // bring back opacity after drag + card.setOpacity(1); + // hide drag indicator + this.__dragIndicator.set({ + visibility: "excluded", + }); + // remove listener + document.removeEventListener("mousemove", onMouseMoveDragging, false); }); }, From 1f8f1b938a4a9412f7b15342bd3df4edcd87c985 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Sun, 15 Dec 2024 11:39:40 +0100 Subject: [PATCH 9/9] DragWidget --- .../class/osparc/dashboard/DragWidget.js | 55 +++++++++++++++++++ .../class/osparc/dashboard/StudyBrowser.js | 28 +--------- 2 files changed, 58 insertions(+), 25 deletions(-) create mode 100644 services/static-webserver/client/source/class/osparc/dashboard/DragWidget.js diff --git a/services/static-webserver/client/source/class/osparc/dashboard/DragWidget.js b/services/static-webserver/client/source/class/osparc/dashboard/DragWidget.js new file mode 100644 index 00000000000..57cedbc5ff1 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/dashboard/DragWidget.js @@ -0,0 +1,55 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2024 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.dashboard.DragWidget", { + extend: qx.ui.basic.Atom, + + construct: function() { + this.base(arguments); + + this.set({ + opacity: 0.9, + padding: 10, + zIndex: 1000, + font: "text-14", + backgroundColor: "strong-main", + decorator: "rounded", + visibility: "excluded", + }); + + const root = qx.core.Init.getApplication().getRoot(); + root.add(this); + }, + + members: { + __onMouseMoveDragging: function(e) { + const domEl = this.getContentElement().getDomElement(); + domEl.style.left = `${e.pageX + 15}px`; // Offset for better visibility + domEl.style.top = `${e.pageY + 15}px`; + }, + + start: function() { + this.show(); + document.addEventListener("mousemove", this.__onMouseMoveDragging.bind(this), false); + }, + + end: function() { + this.exclude(); + document.removeEventListener("mousemove", this.__onMouseMoveDragging.bind(this), false); + }, + } +}); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js index 76cf5024f6b..44d784222e2 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js @@ -648,17 +648,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { __configureStudyCards: function(cards) { // Create drag indicator - this.__dragIndicator = new qx.ui.basic.Atom().set({ - opacity: 0.9, - padding: 10, - zIndex: 1000, - font: "text-14", - backgroundColor: "strong-main", - decorator: "rounded", - visibility: "excluded", - }); - const root = qx.core.Init.getApplication().getRoot(); - root.add(this.__dragIndicator); + this.__dragIndicator = new osparc.dashboard.DragWidget(); cards.forEach(card => { card.setMultiSelectionMode(this.getMultiSelection()); @@ -670,12 +660,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { }, __attachDragHandlers: function(card) { - const onMouseMoveDragging = e => { - const dragWidget = this.__dragIndicator.getContentElement().getDomElement(); - dragWidget.style.left = `${e.pageX + 10}px`; // Offset for better visibility - dragWidget.style.top = `${e.pageY + 10}px`; - }; - card.setDraggable(true); card.addListener("dragstart", e => { @@ -690,21 +674,15 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { // init drag indicator this.__dragIndicator.set({ label: card.getTitle(), - visibility: "visible", }); - // listen to mousemove while dragging - document.addEventListener("mousemove", onMouseMoveDragging, false); + this.__dragIndicator.start(); }); card.addListener("dragend", () => { // bring back opacity after drag card.setOpacity(1); // hide drag indicator - this.__dragIndicator.set({ - visibility: "excluded", - }); - // remove listener - document.removeEventListener("mousemove", onMouseMoveDragging, false); + this.__dragIndicator.end(); }); },