diff --git a/services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js b/services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js index 8eb59c65393f..f4bb854b35a4 100644 --- a/services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js +++ b/services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js @@ -269,7 +269,7 @@ qx.Class.define("osparc.file.FileLabelWithActions", { ); if (task.getAbortHref()) { const cancelButton = progressWindow.addCancelButton(); - cancelButton.setLabel(this.tr("Ignore")); + cancelButton.setLabel(this.tr("Hide")); const abortButton = new qx.ui.form.Button().set({ label: this.tr("Cancel"), center: true, diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index 32b15b48a3b6..851abdeeafdc 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/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); diff --git a/services/static-webserver/client/source/class/osparc/task/ExportData.js b/services/static-webserver/client/source/class/osparc/task/ExportData.js index 307def02f023..fb0ab956f548 100644 --- a/services/static-webserver/client/source/class/osparc/task/ExportData.js +++ b/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, diff --git a/services/static-webserver/client/source/class/osparc/task/TaskUI.js b/services/static-webserver/client/source/class/osparc/task/TaskUI.js index f19322c17864..7e6559f54310 100644 --- a/services/static-webserver/client/source/class/osparc/task/TaskUI.js +++ b/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(); @@ -146,7 +147,7 @@ qx.Class.define("osparc.task.TaskUI", { confirmText: this.tr("Cancel"), confirmAction: "delete" }); - win.getCancelButton().setLabel(this.tr("Ignore")); + win.getCancelButton().setLabel(this.tr("Hide")); win.center(); win.open(); win.addListener("close", () => { diff --git a/services/static-webserver/client/source/class/osparc/task/TasksButton.js b/services/static-webserver/client/source/class/osparc/task/TasksButton.js index 64393192e9d7..51fbe001997d 100644 --- a/services/static-webserver/client/source/class/osparc/task/TasksButton.js +++ b/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); } } }); diff --git a/services/static-webserver/client/source/class/osparc/task/TasksContainer.js b/services/static-webserver/client/source/class/osparc/task/TasksContainer.js index 99a5962b7d75..68b1cce03b91 100644 --- a/services/static-webserver/client/source/class/osparc/task/TasksContainer.js +++ b/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" });