[skip ci] categories

Author: odeimaiz

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

@@ -27,6 +27,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       position: "bottom-left",
       padding: 10,
       allowGrowX: true,
+      minWidth: 300,
     });
 
     this.__addItems();
@@ -39,7 +40,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
   },
 
   statics: {
-    createMenuButton: function(label, icon) {
+    createMenuButton: function(label, icon, description) {
       const menuButton = new qx.ui.menu.Button().set({
         label,
         icon: icon || null,
@@ -48,16 +49,35 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       });
       menuButton.getChildControl("label").set({
         rich: true,
+        allowGrowX: true,
+        minWidth: 300,
+        wrap: false,
       });
       menuButton.getChildControl("icon").set({
         scale: true,
         maxHeight: 20,
         maxWidth: 20,
-        allowShrinkX: true,
-        allowShrinkY: true,
       });
+      if (description) {
+        const infoHint = new osparc.ui.hint.InfoHint(description).set({
+          source: osparc.ui.hint.InfoHint.INFO_ICON + "/16",
+          alignY: "middle",
+        });
+        // where the shortcut is supposed to go
+        // eslint-disable-next-line no-underscore-dangle
+        menuButton._add(infoHint, {column:2});
+      }
       return menuButton;
     },
+
+    createHeader: function(label, icon, description) {
+      const headerLabel = `--- ${label} ---`;
+      return this.createMenuButton(headerLabel, icon, description).set({
+        anonymous: true,
+        cursor: "default",
+        font: "text-16",
+      });
+    },
   },
 
   members: {
@@ -122,7 +142,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
         const newStudiesData = values[0];
         const templates = values[1];
         if (newStudiesData["categories"]) {
-          // this.__addCategories(newStudiesData["categories"]);
+          this.__addCategories(newStudiesData["categories"]);
         }
         if (newStudiesData["linkedResource"] === "templates") {
           newStudiesData["resources"].forEach(templateData => {
@@ -134,13 +154,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
 
     __addCategories: function(categories) {
       categories.forEach(category => {
-        const categoryHeader = new qx.ui.basic.Label().set({
-          value: category["label"],
-          font: "text-16",
-          rich: true,
-          wrap: true,
-        });
-        categoryHeader.id = category["id"];
+        const categoryHeader = this.self().createHeader(category["title"], null, category["description"]);
         this.add(categoryHeader);
       });
     },

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

@@ -82,7 +82,7 @@ qx.Class.define("osparc.dashboard.NewStudies", {
         this._add(noGroupContainer);
 
         Array.from(this.__groups).forEach(group => {
-          const groupContainer = this.__createGroupContainer(group.id, group.label, "transparent");
+          const groupContainer = this.__createGroupContainer(group.id, group.title, "transparent");
           this._add(groupContainer);
         });
       } else {

services/static-webserver/client/source/class/osparc/form/PortInfoHint.js

@@ -40,7 +40,7 @@ qx.Class.define("osparc.form.PortInfoHint", {
       }
       this.setHintText(text);
       this.set({
-        source: errorMsg ? this.self().ERROR_ICON : osparc.ui.hint.InfoHint.INFO_ICON,
+        source: errorMsg ? this.self().ERROR_ICON : osparc.ui.hint.InfoHint.INFO_ICON + "/14",
         textColor: errorMsg ? "failed-red" : "text"
       });
     }

services/static-webserver/client/source/class/osparc/ui/hint/InfoHint.js

@@ -25,7 +25,7 @@ qx.Class.define("osparc.ui.hint.InfoHint", {
    * @extends osparc.ui.basic.IconButton
    */
   construct: function(hintText) {
-    this.base(arguments, this.self().INFO_ICON);
+    this.base(arguments, this.self().INFO_ICON + "/14");
 
     this.__createHint();
 
@@ -39,7 +39,7 @@ qx.Class.define("osparc.ui.hint.InfoHint", {
   },
 
   statics: {
-    INFO_ICON: "@MaterialIcons/info_outline/14"
+    INFO_ICON: "@MaterialIcons/info_outline"
   },
 
   properties: {

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -89,7 +89,7 @@ qx.Class.define("osparc.utils.Utils", {
       }
     },
 
-    FLOATING_Z_INDEX: 110000,
+    FLOATING_Z_INDEX: 1000001 + 1,
 
     updateTabName: function(name) {
       document.title = name;
@@ -958,10 +958,10 @@ qx.Class.define("osparc.utils.Utils", {
     },
 
     cookie: {
-      setCookie: (cname, cvalue, exdays) => {
-        if (exdays) {
+      setCookie: (cname, cvalue, expDays) => {
+        if (expDays) {
           const d = new Date();
-          d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+          d.setTime(d.getTime() + (expDays * 24 * 60 * 60 * 1000));
           document.cookie = cname + "=" + cvalue + ";Expires=" + d.toUTCString() + ";path=/";
         } else {
           document.cookie = cname + "=" + cvalue + ";path=/";

services/static-webserver/client/source/resource/osparc/new_studies.json

@@ -49,10 +49,11 @@
     }],
     "categories": [{
       "id": "precomputed",
-      "label": "Precomputed"
+      "title": "Precomputed"
     }, {
       "id": "personalized",
-      "label": "Personalized: In the process, TIP will launch simulations on AWS.<br>The associated resource costs will be deduced from your Credits."
+      "title": "Personalized",
+      "description": "In the process, TIP will launch simulations on AWS.<br>The associated resource costs will be deduced from your Credits."
     }]
   },
   "tiplite": {
@@ -110,10 +111,11 @@
     }],
     "categories": [{
       "id": "precomputed",
-      "label": "Precomputed"
+      "title": "Precomputed"
     }, {
       "id": "personalized",
-      "label": "Personalized: In the process, TIP will launch simulations on AWS.<br>The associated resource costs will be deduced from your Credits."
+      "title": "Personalized",
+      "description": "In the process, TIP will launch simulations on AWS.<br>The associated resource costs will be deduced from your Credits."
     }]
   },
   "s4l": {