✨ [Frontend] Keep View Mode in localStorage

services/static-webserver/client/source/class/osparc/Application.js

@@ -301,7 +301,7 @@ qx.Class.define("osparc.Application", {
 
     __setDefaultIcons: function() {
       const {productName} = this.__getProductMetaData()
-      const resourcePath = `../resource/osparc/${productName}/icons`;
+      const resourcePath = `../resource/osparc/${productName}/icons/`;
       const favIconUrls = [
         "favicon-16x16.png",
         "favicon-32x32.png",

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

@@ -425,7 +425,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
           break;
         case "service":
           uuid = resourceData.key ? resourceData.key : null;
-          owner = resourceData.owner ? resourceData.owner : "";
+          owner = resourceData.owner ? resourceData.owner : resourceData.contact;
           defaultHits = 0;
           break;
       }
@@ -730,7 +730,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       }
 
       this._getChildren().forEach(item => {
-        if (item) {
+        if (item && "setOpacity" in item) {
           item.setOpacity(enabled ? 1.0 : 0.7);
         }
       });

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

@@ -224,7 +224,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
       }
     },
 
-    createOwner: function(label) {
+    __createOwner: function(label) {
       if (label === osparc.auth.Data.getInstance().getEmail()) {
         const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType());
         return qx.locale.Manager.tr(`My ${resourceAlias}`);
@@ -235,7 +235,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     // overridden
     _applyOwner: function(value, old) {
       const label = this.getChildControl("subtitle-text");
-      const user = this.createOwner(value);
+      const user = this.__createOwner(value);
       label.setValue(user);
       label.setVisibility(value ? "visible" : "excluded");
     },

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

@@ -28,50 +28,46 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
   construct: function() {
     this.base(arguments);
     this.set({
-      width: osparc.dashboard.ListButtonBase.ITEM_WIDTH,
       minHeight: osparc.dashboard.ListButtonBase.ITEM_HEIGHT,
       allowGrowX: true
     });
 
     const layout = new qx.ui.layout.Grid();
     layout.setSpacing(10);
-    layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.DESCRIPTION, 1);
+    layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.SPACER, 1);
     this._setLayout(layout);
+
+    this.getChildControl("spacer");
   },
 
   statics: {
-    ITEM_WIDTH: 600,
-    ITEM_HEIGHT: 40,
+    ITEM_HEIGHT: 35,
     SPACING: 5,
     POS: {
       THUMBNAIL: 0,
       LOCK_STATUS: 1,
       TITLE: 2,
-      PROGRESS: 3,
-      DESCRIPTION: 4,
+      SPACER: 3,
+      PROGRESS: 4,
       TAGS: 5,
-      UPDATES: 6,
-      UI_MODE: 7,
-      STATUS: 8,
-      PERMISSION: 9,
+      ICONS_LAYOUT: 6,
+      SHARED: 7,
+      OWNER: 8,
+      LAST_CHANGE: 9,
       TSR: 10,
-      OWNER: 11,
-      SHARED: 12,
-      LAST_CHANGE: 13,
-      HITS: 14,
-      OPTIONS: 15
+      HITS: 11,
+      OPTIONS: 12
     }
   },
 
   members: {
     _createChildControlImpl: function(id) {
       let control;
-      let titleRow;
       switch (id) {
         case "icon": {
-          control = new osparc.ui.basic.Thumbnail(null, 40, this.self().ITEM_HEIGHT-2*5).set({
-            minHeight: 40,
-            minWidth: 40
+          control = new osparc.ui.basic.Thumbnail(null, this.self().ITEM_HEIGHT, this.self().ITEM_HEIGHT-2*5).set({
+            minHeight: this.self().ITEM_HEIGHT,
+            minWidth: this.self().ITEM_HEIGHT
           });
           control.getChildControl("image").set({
             anonymous: true,
@@ -83,43 +79,24 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
           });
           break;
         }
-        case "title-row":
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
-            anonymous: true,
-            allowGrowX: true
-          });
-          this._add(control, {
-            row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.TITLE
-          });
-          break;
         case "title":
           control = new qx.ui.basic.Label().set({
             textColor: "contrasted-text-light",
             font: "text-14",
             alignY: "middle",
             maxWidth: 300,
-            allowGrowX: true,
             rich: true,
           });
-          titleRow = this.getChildControl("title-row");
-          titleRow.addAt(control, 0, {
-            flex: 1
+          this._add(control, {
+            row: 0,
+            column: osparc.dashboard.ListButtonBase.POS.TITLE
           });
           break;
-        case "description":
-          control = new qx.ui.basic.Label().set({
-            textColor: "contrasted-text-dark",
-            rich: true,
-            maxHeight: 16,
-            minWidth: 100,
-            font: "text-14",
-            alignY: "middle",
-            allowGrowX: true
-          });
+        case "spacer":
+          control = new qx.ui.core.Spacer();
           this._add(control, {
             row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.DESCRIPTION
+            column: osparc.dashboard.ListButtonBase.POS.SPACER
           });
           break;
         case "owner":
@@ -134,17 +111,23 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
             column: osparc.dashboard.ListButtonBase.POS.OWNER
           });
           break;
+        case "icons-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
+            alignY: "middle"
+          }))
+          this._add(control, {
+            row: 0,
+            column: osparc.dashboard.ListButtonBase.POS.ICONS_LAYOUT
+          });
+          break;
         case "project-status":
           control = new qx.ui.basic.Image().set({
             alignY: "middle",
             textColor: "status_icon",
             height: 12,
             width: 12
           });
-          this._add(control, {
-            row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.STATUS
-          });
+          this.getChildControl("icons-layout").add(control);
           break;
       }
       return control || this.base(arguments, id);

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

@@ -49,15 +49,6 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             column: osparc.dashboard.ListButtonBase.POS.LOCK_STATUS
           });
           break;
-        case "permission-icon":
-          control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({
-            minWidth: 50
-          });
-          this._add(control, {
-            row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.PERMISSION
-          });
-          break;
         case "tags":
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
             alignY: "middle"
@@ -71,7 +62,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           break;
         case "shared-icon":
           control = new qx.ui.basic.Image().set({
-            minWidth: 50,
+            minWidth: 30,
             alignY: "middle"
           });
           this._add(control, {
@@ -94,40 +85,31 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           break;
         case "tsr-rating":
           control = osparc.dashboard.CardBase.createTSRLayout();
+          this.__makeItemResponsive(control);
           this._add(control, {
             row: 0,
             column: osparc.dashboard.ListButtonBase.POS.TSR
           });
           break;
+        case "permission-icon":
+          control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({
+            alignY: "middle",
+          });
+          this.getChildControl("icons-layout").add(control);
+          break;
         case "workbench-mode":
           control = new qx.ui.basic.Image().set({
             alignY: "middle"
           });
-          this._add(control, {
-            row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.UI_MODE
-          });
+          this.getChildControl("icons-layout").add(control);
           break;
         case "empty-workbench":
           control = this._getEmptyWorkbenchIcon();
           control.set({
             alignY: "middle",
             alignX: "center"
           });
-          this._add(control, {
-            row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.UPDATES
-          });
-          break;
-        case "hits-service":
-          control = new qx.ui.basic.Label().set({
-            alignY: "middle",
-            toolTipText: this.tr("Number of times you instantiated it")
-          });
-          this._add(control, {
-            row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.HITS
-          });
+          this.getChildControl("icons-layout").add(control);
           break;
         case "update-study":
           control = new qx.ui.basic.Image().set({
@@ -136,9 +118,16 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             visibility: "excluded"
           });
           osparc.utils.Utils.setIdToWidget(control, "updateStudyBtn");
+          this.getChildControl("icons-layout").add(control);
+          break;
+        case "hits-service":
+          control = new qx.ui.basic.Label().set({
+            alignY: "middle",
+            toolTipText: this.tr("Number of times you instantiated it")
+          });
           this._add(control, {
             row: 0,
-            column: osparc.dashboard.ListButtonBase.POS.UPDATES
+            column: osparc.dashboard.ListButtonBase.POS.HITS
           });
           break;
         case "menu-selection-stack":
@@ -211,7 +200,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
       }
     },
 
-    createOwner: function(label) {
+    __createOwner: function(label) {
       if (label === osparc.auth.Data.getInstance().getEmail()) {
         const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType());
         return qx.locale.Manager.tr(`My ${resourceAlias}`);
@@ -221,9 +210,9 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
 
     _applyOwner: function(value, old) {
       const label = this.getChildControl("owner");
-      const user = this.createOwner(value);
+      const user = this.__createOwner(value);
       label.setValue(user);
-      label.setVisibility(value ? "visible" : "excluded");
+      this.__makeItemResponsive(label);
       return;
     },
 
@@ -257,9 +246,22 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag));
           tagsContainer.add(tagUI);
         });
+        this.__makeItemResponsive(tagsContainer);
       }
     },
 
+    __makeItemResponsive: function(item) {
+      [
+        "appear",
+        "resize",
+      ].forEach(ev => {
+        this.addListener(ev, () => {
+          const bounds = this.getBounds() || this.getSizeHint();
+          item.setVisibility(bounds.width > 700 ? "visible" : "excluded");
+        });
+      });
+    },
+
     // overridden
     _applyMultiSelectionMode: function(value) {
       if (value) {

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

@@ -35,16 +35,13 @@ qx.Class.define("osparc.dashboard.ListButtonLoadMore", {
   members: {
     _applyFetching: function(value) {
       const title = this.getChildControl("title");
-      const desc = this.getChildControl("description");
       if (value) {
         title.setValue(this.tr("Loading..."));
-        desc.setValue("");
         this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
         this.getChildControl("icon").getChildControl("image").getContentElement()
           .addClass("rotate");
       } else {
         title.setValue(this.tr("Load More"));
-        desc.setValue(this.tr("Click to load more").toString());
         this.setIcon("@FontAwesome5Solid/paw/");
         this.getChildControl("icon").getChildControl("image").getContentElement()
           .removeClass("rotate");

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

@@ -24,7 +24,7 @@
 qx.Class.define("osparc.dashboard.ListButtonNew", {
   extend: osparc.dashboard.ListButtonBase,
 
-  construct: function(title, description) {
+  construct: function(title) {
     this.base(arguments);
 
     this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);
@@ -41,11 +41,6 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
       });
     }
 
-    if (description) {
-      const descLabel = this.getChildControl("description");
-      descLabel.setValue(description);
-    }
-
     this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
   },
 

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

@@ -251,6 +251,12 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       this.__viewModeLayout = new qx.ui.toolbar.Part();
 
       const resourcesContainer = this._resourcesContainer = new osparc.dashboard.ResourceContainerManager();
+      if (this._resourceType === "study") {
+        const viewMode = osparc.utils.Utils.localCache.getLocalStorageItem("studiesViewMode");
+        if (viewMode) {
+          this._resourcesContainer.setMode(viewMode);
+        }
+      }
       resourcesContainer.addListener("updateStudy", e => this._updateStudyData(e.getData()));
       resourcesContainer.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
       resourcesContainer.addListener("updateService", e => this._updateServiceData(e.getData()));
@@ -288,6 +294,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
     _viewByChanged: function(viewMode) {
       this._resourcesContainer.setMode(viewMode);
       this._reloadCards();
+
+      if (this._resourceType === "study") {
+        osparc.utils.Utils.localCache.setLocalStorageItem("studiesViewMode", viewMode);
+      }
     },
 
     _addGroupByButton: function() {