dragdrop-own-cursor

Author: odeimaiz

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

@@ -40,24 +40,22 @@ qx.Class.define("osparc.dashboard.DragWidget", {
       if (this.getContentElement()) {
         const domEl = this.getContentElement().getDomElement();
         domEl.style.left = `${e.pageX + 12}px`;
-        domEl.style.top = `${e.pageY + 12}px`;
+        domEl.style.top = `${e.pageY + 16}px`;
       }
     },
 
     start: function() {
       this.show();
       document.addEventListener("mousemove", this.__onMouseMoveDragging.bind(this), false);
 
-      // this widget will give the drop validity feedback
       const cursor = qx.ui.core.DragDropCursor.getInstance();
-      cursor.setAppearance("dragdrop-no-cursor");
+      cursor.setAppearance("dragdrop-own-cursor");
     },
 
     end: function() {
       this.exclude();
       document.removeEventListener("mousemove", this.__onMouseMoveDragging.bind(this), false);
 
-      // reset to default
       const cursor = qx.ui.core.DragDropCursor.getInstance();
       cursor.setAppearance("dragdrop-cursor");
     },

services/static-webserver/client/source/class/osparc/theme/Appearance.js

@@ -19,10 +19,18 @@ qx.Theme.define("osparc.theme.Appearance", {
   extend: osparc.theme.common.Appearance,
 
   appearances: {
-    "dragdrop-no-cursor": {
+    "dragdrop-own-cursor": {
       style: states => {
+        let icon = "";
+        if (states.move) {
+          icon = "@FontAwesome5Solid/check/14";
+        } else {
+          icon = "@FontAwesome5Solid/times/14";
+        }
         return {
-          source: "",
+          source: icon,
+          position: "right-top",
+          offset: [0, 0, 0, 12],
         }
       }
     },