setDropAllowed

Author: odeimaiz

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

@@ -16,26 +16,65 @@
 ************************************************************************ */
 
 qx.Class.define("osparc.dashboard.DragWidget", {
-  extend: qx.ui.basic.Atom,
+  extend: qx.ui.core.Widget,
+  type: "singleton",
 
   construct: function() {
     this.base(arguments);
 
+    this._setLayout(new qx.ui.layout.HBox(10).set({
+      alignY: "middle",
+    }));
+
     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);
+
+    this.initDropAllowed();
+  },
+
+  properties: {
+    dropAllowed: {
+      check: "Boolean",
+      nullable: false,
+      init: null,
+      apply: "__dropAllowed",
+    },
   },
 
   members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "allowed-icon":
+          control = new qx.ui.basic.Image();
+          this._add(control);
+          break;
+        case "dragged-resource":
+          control = new qx.ui.basic.Atom().set({
+            font: "text-14",
+          });
+          this._add(control);
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __dropAllowed: function(allowed) {
+      this.getChildControl("allowed-icon").set({
+        source: allowed ? "@FontAwesome5Solid/check/14" : "@FontAwesome5Solid/times/14",
+        textColor: allowed ? "text" : "danger-red",
+      });
+    },
+
     __onMouseMoveDragging: function(e) {
       if (this.getContentElement()) {
         // place it next to the "dragdrop-own-cursor" indicator
@@ -50,7 +89,7 @@ qx.Class.define("osparc.dashboard.DragWidget", {
       document.addEventListener("mousemove", this.__onMouseMoveDragging.bind(this), false);
 
       const cursor = qx.ui.core.DragDropCursor.getInstance();
-      cursor.setAppearance("dragdrop-own-cursor");
+      cursor.setAppearance("dragdrop-no-cursor");
     },
 
     end: function() {

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

@@ -172,21 +172,20 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         // make it semi transparent while being dragged
         this.setOpacity(0.2);
         // init drag indicator
-        this.__dragWidget = new osparc.dashboard.DragWidget();
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.getChildControl("dragged-resource").set({
           label: this.getTitle(),
           icon: "@FontAwesome5Solid/folder/16",
         });
-        this.__dragWidget.start();
+        dragWidget.start();
       });
 
       this.addListener("dragend", () => {
         // bring back opacity after drag
         this.setOpacity(1);
         // hide drag indicator
-        this.__dragWidget.end();
-        // dispose drag indicator
-        this.__dragWidget.dispose();
-        this.__dragWidget = null;
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.end();
       });
     },
 
@@ -239,13 +238,19 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
           // do not allow
           e.preventDefault();
         }
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.setDropAllowed(compatible);
       });
 
       this.addListener("dragleave", () => {
         this.getChildControl("icon").resetTextColor();
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.setDropAllowed(false);
       });
       this.addListener("dragend", () => {
         this.getChildControl("icon").resetTextColor();
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.setDropAllowed(false);
       });
 
       this.addListener("drop", e => {

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

@@ -669,21 +669,20 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         // make it semi transparent while being dragged
         card.setOpacity(0.2);
         // init drag indicator
-        this.__dragWidget = new osparc.dashboard.DragWidget();
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.getChildControl("dragged-resource").set({
           label: card.getTitle(),
           icon: "@FontAwesome5Solid/file/16",
         });
-        this.__dragWidget.start();
+        dragWidget.start();
       });
 
       card.addListener("dragend", () => {
         // bring back opacity after drag
         card.setOpacity(1);
         // hide drag indicator
-        this.__dragWidget.end();
-        // dispose drag indicator
-        this.__dragWidget.dispose();
-        this.__dragWidget = null;
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.end();
       });
     },
 

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

@@ -19,6 +19,14 @@ qx.Theme.define("osparc.theme.Appearance", {
   extend: osparc.theme.common.Appearance,
 
   appearances: {
+    "dragdrop-no-cursor": {
+      style: () => {
+        return {
+          source: "",
+        }
+      }
+    },
+
     "dragdrop-own-cursor": {
       style: states => {
         let icon = "";