Merge branch 'feature/daraga-doropa' of github.com:odeimaiz/osparc-simcore into enh/dragging-indicator

Author: odeimaiz

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(), {

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");

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);
+    },
+  }
+});

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();

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");
     }
   }
 });

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";

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,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     // /FOLDERS
 
     __configureStudyCards: function(cards) {
+      // Create drag indicator
+      this.__dragIndicator = new osparc.dashboard.DragWidget();
+
       cards.forEach(card => {
         card.setMultiSelectionMode(this.getMultiSelection());
         card.addListener("tap", e => this.__studyCardClicked(card, e.getNativeEvent().shiftKey), this);
@@ -664,6 +668,21 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         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(),
+        });
+        this.__dragIndicator.start();
+      });
+
+      card.addListener("dragend", () => {
+        // bring back opacity after drag
+        card.setOpacity(1);
+        // hide drag indicator
+        this.__dragIndicator.end();
       });
 
       // Create drag indicator

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<items.length; i++) {
+        const item = items[i];
+        if (item.isVisible() && item.getSelected()) {
+          return item.getService();
+        }
       }
       return null;
     },
 
+    __setSelected: function(selectedItem) {
+      this._getChildren().forEach(item => 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<buttons.length && !current.isVisible()) {
-          current = buttons[i++];
-        }
-        if (current.isVisible()) {
-          this.__buttonGroup.setSelection([this._getChildren()[i-1]]);
+      const items = this._getChildren();
+      for (let i=0; i<items.length; i++) {
+        const item = items[i];
+        if (item.isVisible()) {
+          this.__setSelected(item);
+          return;
         }
       }
     }

services/static-webserver/client/source/class/osparc/service/ServiceListItem.js

@@ -36,13 +36,9 @@ 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()));
+    this.bind("selected", this, "backgroundColor", {
+      converter: selected => selected ? "strong-main" : "info"
+    });
   },
 
   properties: {

services/static-webserver/client/source/class/osparc/workbench/ServiceCatalog.js

@@ -136,7 +136,7 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
       });
       scrolledServices.add(serviceList);
 
-      this.__serviceList.addListener("changeValue", e => {
+      this.__serviceList.addListener("changeSelected", e => {
         if (e.getData() && e.getData().getService()) {
           const selectedService = e.getData().getService();
           this.__changedSelection(selectedService.getKey());