🎨 [Frontend] Enh: Tasks UI

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -263,7 +263,6 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         }
         case "tasks-button":
           control = new osparc.task.TasksButton().set({
-            visibility: "excluded",
             ...this.self().RIGHT_BUTTON_OPTS
           });
           this.getChildControl("right-items").add(control);

services/static-webserver/client/source/class/osparc/task/ExportData.js

@@ -22,7 +22,7 @@ qx.Class.define("osparc.task.ExportData", {
     this.base(arguments);
 
     this.setIcon(this.self().ICON+"/14");
-    this.setTitle(this.tr("Downloading files:"));
+    this.setTitle(this.tr("Preparing files:"));
   },
 
   statics: {
@@ -42,7 +42,7 @@ qx.Class.define("osparc.task.ExportData", {
 
         if (task.getAbortHref()) {
           const cancelButton = progressWindow.addCancelButton();
-          cancelButton.setLabel(qx.locale.Manager.tr("Ignore"));
+          cancelButton.setLabel(qx.locale.Manager.tr("Hide"));
           const abortButton = new qx.ui.form.Button().set({
             label: qx.locale.Manager.tr("Cancel"),
             center: true,

services/static-webserver/client/source/class/osparc/task/TaskUI.js

@@ -21,14 +21,15 @@ qx.Class.define("osparc.task.TaskUI", {
   construct: function() {
     this.base(arguments);
 
-    const grid = new qx.ui.layout.Grid(5, 5);
+    const grid = new qx.ui.layout.Grid(4, 4);
     grid.setColumnFlex(1, 1);
     this._setLayout(grid);
 
     this.set({
-      padding: 5,
+      padding: 4,
       maxWidth: this.self().MAX_WIDTH,
-      backgroundColor: "background-main-3"
+      backgroundColor: "background-main-3",
+      decorator: "rounded",
     });
 
     this._buildLayout();

services/static-webserver/client/source/class/osparc/task/TasksButton.js

@@ -28,8 +28,10 @@ qx.Class.define("osparc.task.TasksButton", {
     });
 
     const tasks = osparc.task.TasksContainer.getInstance();
-    tasks.getTasks().addListener("change", e => this.__updateTasksButton(), this);
-    this.addListener("tap", () => this.__showTasks(), this);
+    tasks.getTasks().addListener("change", () => this.__updateTasksButton(), this);
+    this.__updateTasksButton();
+
+    this.addListener("tap", this.__buttonTapped, this);
   },
 
   members: {
@@ -60,8 +62,8 @@ qx.Class.define("osparc.task.TasksButton", {
             "border-radius": "8px"
           });
           this._add(control, {
-            bottom: 8,
-            right: 4
+            bottom: -6,
+            right: -4
           });
           break;
       }
@@ -74,36 +76,62 @@ qx.Class.define("osparc.task.TasksButton", {
 
       const tasks = osparc.task.TasksContainer.getInstance();
       const nTasks = tasks.getTasks().length;
-      number.setValue(nTasks.toString());
+      if (nTasks > 9) {
+        number.setValue("9+");
+      } else {
+        number.setValue(nTasks.toString());
+      }
       nTasks ? this.show() : this.exclude();
     },
 
+    __buttonTapped: function() {
+      const tasks = osparc.task.TasksContainer.getInstance();
+      const tasksContainer = tasks.getTasksContainer();
+      if (tasksContainer && tasksContainer.isVisible()) {
+        this.__hideTasks();
+      } else {
+        this.__showTasks();
+      }
+    },
+
     __showTasks: function() {
-      const that = this;
-      const tapListener = event => {
-        const tasks = osparc.task.TasksContainer.getInstance();
-        const tasksContainer = tasks.getTasksContainer();
-        if (osparc.utils.Utils.isMouseOnElement(tasksContainer, event)) {
-          return;
-        }
-        // eslint-disable-next-line no-underscore-dangle
-        that.__hideTasks();
-        document.removeEventListener("mousedown", tapListener);
-      };
+      this.__positionTasksContainer();
+
+      const tasks = osparc.task.TasksContainer.getInstance();
+      tasks.getTasksContainer().show();
 
+      // Add listeners for taps outside the container to hide it
+      document.addEventListener("mousedown", this.__onTapOutsideMouse.bind(this), true);
+    },
+
+    __positionTasksContainer: function() {
       const bounds = osparc.utils.Utils.getBounds(this);
       const tasks = osparc.task.TasksContainer.getInstance();
       tasks.setTasksContainerPosition(
-        bounds.left + bounds.width - osparc.task.TaskUI.MAX_WIDTH,
-        osparc.navigation.NavigationBar.HEIGHT + 14
+        bounds.left + bounds.width - osparc.task.TaskUI.MAX_WIDTH - 2*8,
+        osparc.navigation.NavigationBar.HEIGHT - 8
       );
-      tasks.getTasksContainer().show();
-      document.addEventListener("mousedown", tapListener);
+    },
+
+    __onTapOutsideMouse: function(event) {
+      this.__handleOutsideEvent(event);
+    },
+
+    __handleOutsideEvent: function(event) {
+      const tasks = osparc.task.TasksContainer.getInstance();
+      const onContainer = osparc.utils.Utils.isMouseOnElement(tasks.getTasksContainer(), event);
+      const onButton = osparc.utils.Utils.isMouseOnElement(this, event);
+      if (!onContainer && !onButton) {
+        this.__hideTasks();
+      }
     },
 
     __hideTasks: function() {
       const tasks = osparc.task.TasksContainer.getInstance();
       tasks.getTasksContainer().exclude();
+
+      // Remove listeners for outside clicks/taps
+      document.removeEventListener("mousedown", this.__onTapOutsideMouse.bind(this), true);
     }
   }
 });

services/static-webserver/client/source/class/osparc/task/TasksContainer.js

@@ -24,6 +24,9 @@ qx.Class.define("osparc.task.TasksContainer", {
     this.__tasks = new qx.data.Array();
 
     const tasksContainer = this.__tasksContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(3)).set({
+      appearance: "floating-menu",
+      padding: 8,
+      maxWidth: osparc.task.TaskUI.MAX_WIDTH + 2*8,
       zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,
       visibility: "excluded"
     });