✨ [Frontend] Enh: Adapt to paginated navigation and to new model

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

@@ -530,22 +530,20 @@ qx.Class.define("osparc.dashboard.CardBase", {
 
     __evalSelectedButton: function() {
       if (
+        this.hasChildControl("menu-selection-stack") &&
         this.hasChildControl("menu-button") &&
         this.hasChildControl("tick-selected") &&
         this.hasChildControl("tick-unselected")
       ) {
-        const menuButton = this.getChildControl("menu-button");
-        const tick = this.getChildControl("tick-selected");
-        const untick = this.getChildControl("tick-unselected");
+        const menuButtonStack = this.getChildControl("menu-selection-stack");
         if (this.isResourceType("study") && this.isMultiSelectionMode()) {
+          const tick = this.getChildControl("tick-selected");
+          const untick = this.getChildControl("tick-unselected");
           const selected = this.getSelected();
-          menuButton.setVisibility("excluded");
-          tick.setVisibility(selected ? "visible" : "excluded");
-          untick.setVisibility(selected ? "excluded" : "visible");
+          menuButtonStack.setSelection(selected ? [tick] : [untick]);
         } else {
-          menuButton.setVisibility("visible");
-          tick.setVisibility("excluded");
-          untick.setVisibility("excluded");
+          const menuButton = this.getChildControl("menu-button");
+          menuButtonStack.setSelection([menuButton]);
         }
       }
     },

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

@@ -60,7 +60,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
 
       this.addListener("appear", () => {
         const treeFolderView = this.getChildControl("tree-folder-view");
-        treeFolderView.getChildControl("folder-tree").populateTree();
+        treeFolderView.getChildControl("folder-tree").populateLocations();
         treeFolderView.getChildControl("folder-viewer").setFolder(treeFolderView.getChildControl("folder-tree").getModel());
       }, this);
     },
@@ -84,7 +84,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
 
       const foldersTree = treeFolderView.getChildControl("folder-tree");
       foldersTree.resetCache();
-      foldersTree.populateTree();
+      foldersTree.populateLocations();
 
       const folderViewer = treeFolderView.getChildControl("folder-viewer");
       folderViewer.resetFolder();
@@ -94,26 +94,26 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
       // After deleting a file, try to keep the user in the same folder.
       // If the folder doesn't longer exist, open the closest available parent
 
-      const path = fileMetadata["fileUuid"].split("/");
+      const pathParts = fileMetadata["fileUuid"].split("/");
 
       const treeFolderView = this.getChildControl("tree-folder-view");
       const foldersTree = treeFolderView.getChildControl("folder-tree");
       const folderViewer = treeFolderView.getChildControl("folder-viewer");
 
       const openSameFolder = () => {
         // drop last, which is the file
-        path.pop();
-        treeFolderView.openPath(path);
+        pathParts.pop();
+        treeFolderView.openPath(pathParts);
       };
 
       folderViewer.resetFolder();
       const locationId = fileMetadata["locationId"];
-      const datasetId = path[0];
+      const path = pathParts[0];
       foldersTree.resetCache();
-      foldersTree.populateTree()
+      foldersTree.populateLocations()
         .then(datasetPromises => {
           Promise.all(datasetPromises)
-            .then(() => foldersTree.requestDatasetFiles(locationId, datasetId))
+            .then(() => foldersTree.requestPathItems(locationId, path))
             .then(() => openSameFolder());
         })
         .catch(err => console.error(err));

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

@@ -138,13 +138,16 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
         }
         case "header": {
           const hGrid = new qx.ui.layout.Grid().set({
-            spacing: 0, // the sub-elements will take care of the padding
+            spacing: 6,
           });
           hGrid.setColumnFlex(1, 1);
-          hGrid.setRowAlign(0, "left", "middle");
+          hGrid.setColumnAlign(0, "right", "middle");
+          hGrid.setColumnAlign(1, "left", "middle");
+          hGrid.setColumnAlign(2, "center", "middle");
           control = new qx.ui.container.Composite().set({
             backgroundColor: "background-card-overlay",
-            padding: 0,
+            paddingBottom: 6,
+            paddingRight: 4,
             maxWidth: this.self().ITEM_WIDTH,
             maxHeight: this.self().ITEM_HEIGHT
           });
@@ -189,37 +192,23 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           control = new qx.ui.basic.Label().set({
             textColor: "contrasted-text-light",
             font: "text-14",
-            padding: this.self().TITLE_PADDING,
-            maxWidth: this.self().ITEM_WIDTH,
           });
           layout = this.getChildControl("header");
-          layout.addAt(control, 0, {
+          layout.add(control, {
             column: 1,
             row: 0,
           });
           break;
-        case "subtitle":
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
-            anonymous: true,
-            height: 20,
-            padding: 6,
-            paddingLeft: 20, // align with icon
+        case "subtitle-icon": {
+          control = new qx.ui.basic.Image().set({
+            allowGrowX: false,
+            allowShrinkX: false,
           });
           layout = this.getChildControl("header");
-          layout.addAt(control, 0, {
+          layout.add(control, {
             column: 0,
             row: 1,
-            colSpan: 2,
-          });
-          break;
-        case "subtitle-icon": {
-          control = new qx.ui.basic.Image().set({
-            alignY: "middle",
-            allowGrowX: false,
-            allowShrinkX: false
           });
-          const subtitleLayout = this.getChildControl("subtitle");
-          subtitleLayout.addAt(control, 0);
           break;
         }
         case "subtitle-text": {
@@ -233,9 +222,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
             font: "text-12",
             allowGrowY: false
           });
-          const subtitleLayout = this.getChildControl("subtitle");
-          subtitleLayout.addAt(control, 1, {
-            flex: 1
+          layout = this.getChildControl("header");
+          layout.add(control, {
+            column: 1,
+            row: 1,
           });
           break;
         }
@@ -269,9 +259,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
             width: 13,
             margin: [0, 1]
           });
-          layout = this.getChildControl("subtitle");
-          layout.set({
-            visibility: "visible"
+          layout = this.getChildControl("header");
+          layout.add(control, {
+            column: 2,
+            row: 1,
           });
           layout.addAt(control, 2);
           break;

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

@@ -91,7 +91,18 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           layout = this.getChildControl("main-layout");
           layout.add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
           break;
-        case "menu-button":
+        case "menu-selection-stack":
+          control = new qx.ui.container.Stack();
+          control.set({
+            alignX: "center",
+            alignY: "middle"
+          });
+          this.getChildControl("header").add(control, {
+            column: 2,
+            row: 0,
+          });
+          break;
+        case "menu-button": {
           this.getChildControl("title").set({
             maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.CardBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 2,
           });
@@ -110,12 +121,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
             "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
           });
           osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
-          this._add(control, {
-            top: 6,
-            right: 6,
-          });
+          const menuSelectionStack = this.getChildControl("menu-selection-stack");
+          menuSelectionStack.addAt(control, 0);
           break;
-        case "tick-unselected":
+        }
+        case "tick-unselected": {
           control = new qx.ui.basic.Atom().set({
             appearance: "form-button-outlined",
             width: this.self().MENU_BTN_DIMENSIONS,
@@ -126,12 +136,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           control.getContentElement().setStyles({
             "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
           });
-          this._add(control, {
-            top: 8,
-            right: 8
-          });
+          const menuSelectionStack = this.getChildControl("menu-selection-stack");
+          menuSelectionStack.addAt(control, 1);
           break;
-        case "tick-selected":
+        }
+        case "tick-selected": {
           control = new qx.ui.basic.Image().set({
             appearance: "form-button",
             width: this.self().MENU_BTN_DIMENSIONS,
@@ -146,11 +155,10 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           control.getContentElement().setStyles({
             "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
           });
-          this._add(control, {
-            top: 8,
-            right: 8
-          });
+          const menuSelectionStack = this.getChildControl("menu-selection-stack");
+          menuSelectionStack.addAt(control, 2);
           break;
+        }
         case "lock-status":
           control = new osparc.ui.basic.Thumbnail();
           this._add(control, {

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

@@ -132,8 +132,25 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             column: osparc.dashboard.ListButtonBase.POS.OPTIONS
           });
           break;
-        case "tick-unselected": {
+        case "menu-button": {
+          control = new qx.ui.form.MenuButton().set({
+            appearance: "form-button-outlined",
+            padding: [0, 8],
+            maxWidth: this.self().MENU_BTN_DIMENSIONS,
+            maxHeight: this.self().MENU_BTN_DIMENSIONS,
+            icon: "@FontAwesome5Solid/ellipsis-v/14",
+            focusable: false
+          });
+          // make it circular
+          control.getContentElement().setStyles({
+            "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
+          });
+          osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
           const menuSelectionStack = this.getChildControl("menu-selection-stack");
+          menuSelectionStack.addAt(control, 0);
+          break;
+        }
+        case "tick-unselected": {
           control = new qx.ui.basic.Atom().set({
             appearance: "form-button-outlined",
             width: this.self().MENU_BTN_DIMENSIONS,
@@ -143,11 +160,11 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           control.getContentElement().setStyles({
             "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
           });
+          const menuSelectionStack = this.getChildControl("menu-selection-stack");
           menuSelectionStack.addAt(control, 1);
           break;
         }
         case "tick-selected": {
-          const menuSelectionStack = this.getChildControl("menu-selection-stack");
           control = new qx.ui.basic.Image("@FontAwesome5Solid/check/12").set({
             appearance: "form-button-outlined",
             width: this.self().MENU_BTN_DIMENSIONS,
@@ -158,25 +175,8 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           control.getContentElement().setStyles({
             "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
           });
-          menuSelectionStack.addAt(control, 2);
-          break;
-        }
-        case "menu-button": {
           const menuSelectionStack = this.getChildControl("menu-selection-stack");
-          control = new qx.ui.form.MenuButton().set({
-            appearance: "form-button-outlined",
-            padding: [0, 8],
-            maxWidth: this.self().MENU_BTN_DIMENSIONS,
-            maxHeight: this.self().MENU_BTN_DIMENSIONS,
-            icon: "@FontAwesome5Solid/ellipsis-v/14",
-            focusable: false
-          });
-          // make it circular
-          control.getContentElement().setStyles({
-            "border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
-          });
-          osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
-          menuSelectionStack.addAt(control, 0);
+          menuSelectionStack.addAt(control, 2);
           break;
         }
       }