UI/UX: Dashboard Cleanup, Follow-Up I

services/web/client/source/class/osparc/component/filter/TagsFilter.js

@@ -99,8 +99,11 @@ qx.Class.define("osparc.component.filter.TagsFilter", {
     },
 
     _getMenuButtons: function() {
-      return this._dropdown.getMenu().getChildren()
-        .filter(child => child instanceof qx.ui.menu.Button);
+      const menu = this._dropdown.getMenu();
+      if (menu) {
+        return menu.getChildren().filter(child => child instanceof qx.ui.menu.Button);
+      }
+      return [];
     },
 
     _getActiveMenuButtons: function() {

services/web/client/source/class/osparc/dashboard/Dashboard.js

@@ -37,7 +37,10 @@ qx.Class.define("osparc.dashboard.Dashboard", {
   construct: function() {
     this.base(arguments);
 
-    this.setBarPosition("top");
+    this.set({
+      contentPaddingLeft: 0,
+      barPosition: "top"
+    });
 
     osparc.wrapper.JsonDiffPatch.getInstance().init();
     osparc.wrapper.JsonTreeViewer.getInstance().init();

services/web/client/source/class/osparc/dashboard/ServiceBrowser.js

@@ -81,8 +81,6 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
       const store = osparc.store.Store.getInstance();
       store.getServicesDAGs(true)
         .then(services => {
-          // Do not validate if are not taking actions
-          // this.__nodeCheck(services);
           this._removeAll();
           this.__createServicesLayout();
           this.__populateList(false);
@@ -416,25 +414,6 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
         .finally(() => {
           this.__deleteServiceBtn.setFetching(false);
         });
-    },
-
-    __nodeCheck: function(services) {
-      /** a little ajv test */
-      let nodeCheck = new qx.io.request.Xhr("/resource/osparc/node-meta-v0.0.1.json");
-      nodeCheck.addListener("success", e => {
-        let data = e.getTarget().getResponse();
-        try {
-          let ajv = new osparc.wrapper.Ajv(data);
-          for (const srvId in services) {
-            const service = services[srvId];
-            let check = ajv.validate(service);
-            console.log("services validation result " + service.key + ":", check);
-          }
-        } catch (err) {
-          console.error(err);
-        }
-      }, this);
-      nodeCheck.send();
     }
   }
 });

services/web/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -442,7 +442,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         creator: study.prjOwner ? study.prjOwner : null,
         accessRights: study.accessRights ? study.accessRights : null,
         lastChangeDate: study.lastChangeDate ? new Date(study.lastChangeDate) : null,
-        icon: study.thumbnail || "@FontAwesome5Solid/flask/50",
+        icon: study.thumbnail || isTemplate ? "@FontAwesome5Solid/copy/50" : "@FontAwesome5Solid/file-alt/50",
         tags
       });
       const menu = this.__getStudyItemMenu(item, study, isTemplate);

services/web/client/source/class/osparc/dashboard/StudyBrowserButtonBase.js

@@ -52,9 +52,9 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
   },
 
   statics: {
-    ITEM_WIDTH: 200,
-    ITEM_HEIGHT: 200,
-    PADDING: 8,
+    ITEM_WIDTH: 190,
+    ITEM_HEIGHT: 220,
+    PADDING: 10,
     SPACING: 12
   },
 
@@ -87,34 +87,45 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
           control = new qx.ui.basic.Label().set({
             margin: [5, 0],
             font: "title-14",
-            maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING - 30,
+            maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING - osparc.dashboard.StudyBrowserButtonItem.MENU_BTN_WIDTH,
             breakWithinWords: true
           });
           this._mainLayout.addAt(control, 0);
           break;
-        case "desc1":
+        case "description":
           control = new osparc.ui.markdown.Markdown().set({
             font: "text-13",
-            maxHeight: 32,
-            anonymous: true
+            maxHeight: 30
           });
           this._mainLayout.addAt(control, 1);
           break;
-        case "desc2":
+        case "shared-creator":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6));
+          this._mainLayout.addAt(control, 2);
+          break;
+        case "shared": {
+          control = new qx.ui.basic.Image();
+          const sharedCreatorLayout = this.getChildControl("shared-creator");
+          sharedCreatorLayout.addAt(control, 0);
+          break;
+        }
+        case "creator": {
           control = new qx.ui.basic.Label().set({
             font: "text-13",
-            allowGrowY: false,
-            anonymous: true
+            allowGrowY: false
+          });
+          const sharedCreatorLayout = this.getChildControl("shared-creator");
+          sharedCreatorLayout.addAt(control, 1, {
+            flex: 1
           });
-          this._mainLayout.addAt(control, 2);
           break;
-        case "shared":
-          control = new qx.ui.basic.Image();
+        }
+        case "tags":
+          control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3));
           this._mainLayout.addAt(control, 3);
           break;
         case "icon": {
           control = new qx.ui.basic.Image().set({
-            anonymous: true,
             scale: true,
             allowStretchX: true,
             allowStretchY: true,
@@ -123,7 +134,9 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
             allowGrowX: true,
             allowGrowY: true
           });
-          const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+          const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
+            anonymous: true
+          });
           iconContainer.add(new qx.ui.core.Spacer(), {
             flex: 2
           });
@@ -139,6 +152,9 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
           break;
         }
       }
+      control.set({
+        anonymous: true
+      });
       return control || this.base(arguments, id);
     },
 

services/web/client/source/class/osparc/dashboard/StudyBrowserButtonItem.js

@@ -107,6 +107,7 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
 
   statics: {
     MENU_BTN_Z: 20,
+    MENU_BTN_WIDTH: 25,
     SHARED_ME: "@FontAwesome5Solid/user/14",
     SHARED_ORGS: "@FontAwesome5Solid/users/14",
     SHARED_ALL: "@FontAwesome5Solid/globe/14"
@@ -127,16 +128,16 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
       switch (id) {
         case "menu-button":
           control = new qx.ui.form.MenuButton().set({
-            width: 30,
-            height: 30,
-            icon: "@FontAwesome5Solid/ellipsis-v/16",
+            width: this.self().MENU_BTN_WIDTH,
+            height: this.self().MENU_BTN_WIDTH,
+            icon: "@FontAwesome5Solid/ellipsis-v/14",
             zIndex: this.self().MENU_BTN_Z,
             focusable: false
           });
           osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
           this._add(control, {
-            top: 0,
-            right: 0
+            top: -2,
+            right: -2
           });
           break;
         case "tick-unselected":
@@ -157,10 +158,6 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
             right: 4
           });
           break;
-        case "tags":
-          control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3));
-          this._mainLayout.addAt(control, 4);
-          break;
       }
 
       return control || this.base(arguments, id);
@@ -193,14 +190,14 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
 
     _applyStudyDescription: function(value, old) {
       if (value !== "" && this.getIsTemplate()) {
-        const label = this.getChildControl("desc1");
+        const label = this.getChildControl("description");
         label.setValue(value);
       }
     },
 
     _applyLastChangeDate: function(value, old) {
       if (value && !this.getIsTemplate()) {
-        const label = this.getChildControl("desc1");
+        const label = this.getChildControl("description");
         let dateStr = null;
         if (value.getDate() === (new Date()).getDate()) {
           dateStr = this.tr("Today");
@@ -216,7 +213,7 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
 
     _applyCreator: function(value, old) {
       if (this.getIsTemplate()) {
-        const label = this.getChildControl("desc2");
+        const label = this.getChildControl("creator");
         label.setValue(value);
       }
     },

services/web/client/source/class/osparc/dashboard/StudyBrowserButtonNew.js

@@ -36,12 +36,12 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonNew", {
   members: {
     __buildLayout: function() {
       const title = this.getChildControl("title");
-      title.setValue(this.tr("Create New Study"));
+      title.setValue(this.tr("Empty Study"));
 
-      const desc1 = this.getChildControl("desc1");
+      const desc1 = this.getChildControl("description");
       desc1.setValue(this.tr("Start with a empty study").toString());
 
-      this.setIcon("@FontAwesome5Solid/plus-circle/64");
+      this.setIcon("@FontAwesome5Solid/file/50");
     },
 
     _onToggleChange: function(e) {
@@ -52,7 +52,7 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonNew", {
       if (data.text) {
         const checks = [
           this.getChildControl("title").getValue().toString(),
-          this.getChildControl("desc1").getValue().toString()
+          this.getChildControl("description").getValue().toString()
         ];
         if (checks.filter(label => label.toLowerCase().trim().includes(data.text)).length == 0) {
           return true;