🐛 [Frontend] Fix: Crop long parameter values (#8393)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js

@@ -18,6 +18,12 @@
 qx.Class.define("osparc.ui.list.CollaboratorListItem", {
   extend: osparc.ui.list.ListItem,
 
+  construct: function() {
+    this.base(arguments);
+
+    this.setCursor("default");
+  },
+
   properties: {
     collabType: {
       check: [
@@ -169,7 +175,9 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
       // highlight me
       const email = osparc.auth.Data.getInstance().getEmail();
       if (value && value.includes(email)) {
-        this.addState("selected");
+        this.setBackgroundColor("background-selected");
+      } else {
+        this.setBackgroundColor("background-main-2");
       }
     },
 

services/static-webserver/client/source/class/osparc/ui/list/ListItem.js

@@ -151,7 +151,9 @@ qx.Class.define("osparc.ui.list.ListItem", {
           break;
         case "title":
           control = new qx.ui.basic.Label().set({
-            font: "text-14"
+            font: "text-14",
+            selectable: true,
+            rich: true,
           });
           this._add(control, {
             row: 0,
@@ -161,7 +163,8 @@ qx.Class.define("osparc.ui.list.ListItem", {
         case "subtitle":
           control = new qx.ui.basic.Label().set({
             font: "text-13",
-            rich: true
+            selectable: true,
+            rich: true,
           });
           this._add(control, {
             row: 1,

services/static-webserver/client/source/class/osparc/ui/toolbar/ProgressBar.js

@@ -40,13 +40,11 @@ qx.Class.define("osparc.ui.window.Progress", {
             allowGrowY: false,
             allowGrowX: true,
             margin: 0,
+            decorator: "rounded",
           });
           control.getChildControl("progress").set({
             backgroundColor: "strong-main"
           });
-          control.getContentElement().setStyles({
-            "border-radius": "4px"
-          });
           this.addAt(control, 1);
           break;
       }

services/static-webserver/client/source/class/osparc/ui/window/Progress.js

@@ -82,7 +82,7 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", {
           const indicator = this.getChildControl("disk-indicator")
           control = new qx.ui.basic.Label().set({
             value: "",
-            font: "text-13",
+            font: "text-12",
             textColor: "contrasted-text-light",
             alignX: "center",
             alignY: "middle",

services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js

@@ -40,11 +40,12 @@ qx.Class.define("osparc.workbench.NodeUI", {
   construct: function(node) {
     this.base(arguments);
 
-    const grid = new qx.ui.layout.Grid(4, 1);
+    const grid = new qx.ui.layout.Grid(2, 1);
     grid.setColumnFlex(1, 1);
 
     this.set({
       appearance: "node-ui-cap",
+      decorator: "rounded",
       layout: grid,
       showMinimize: false,
       showMaximize: false,
@@ -55,10 +56,6 @@ qx.Class.define("osparc.workbench.NodeUI", {
       contentPadding: this.self().CONTENT_PADDING
     });
 
-    this.getContentElement().setStyles({
-      "border-radius": "4px"
-    });
-
     const captionBar = this.getChildControl("captionbar");
     captionBar.set({
       cursor: "move",
@@ -222,10 +219,10 @@ qx.Class.define("osparc.workbench.NodeUI", {
           });
           break;
         case "middle-container":
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(2).set({
             alignY: "middle"
           })).set({
-            padding: [3, 4]
+            padding: 4
           });
           this.add(control, {
             row: 0,
@@ -245,7 +242,7 @@ qx.Class.define("osparc.workbench.NodeUI", {
           const type = osparc.service.Utils.getType(nodeType);
           if (type) {
             control.set({
-              icon: type.icon + "14",
+              icon: type.icon + "13",
               toolTipText: type.label
             });
           } else if (this.getNode().isUnknown()) {
@@ -282,7 +279,8 @@ qx.Class.define("osparc.workbench.NodeUI", {
         case "progress":
           control = new qx.ui.indicator.ProgressBar().set({
             height: 10,
-            margin: 4
+            margin: 4,
+            decorator: "rounded",
           });
           this.add(control, {
             row: 1,
@@ -595,14 +593,11 @@ qx.Class.define("osparc.workbench.NodeUI", {
       const width = 120;
       this.__setNodeUIWidth(width);
 
-      const label = new qx.ui.basic.Label().set({
-        font: "text-18"
+      const valueLabel = new qx.ui.basic.Label().set({
+        paddingLeft: 4,
+        font: "text-14"
       });
-      const middleContainer = this.getChildControl("middle-container");
-      middleContainer.add(label);
-
-      this.getNode().bind("outputs", label, "value", {
-        converter: outputs => {
+      const outputToValue = outputs => {
           if ("out_1" in outputs && "value" in outputs["out_1"]) {
             const val = outputs["out_1"]["value"];
             if (Array.isArray(val)) {
@@ -611,8 +606,18 @@ qx.Class.define("osparc.workbench.NodeUI", {
             return String(val);
           }
           return "";
-        }
+      }
+      this.getNode().bind("outputs", valueLabel, "value", {
+        converter: outputs => outputToValue(outputs)
       });
+      this.getNode().bind("outputs", valueLabel, "toolTipText", {
+        converter: outputs => outputToValue(outputs)
+      });
+      const middleContainer = this.getChildControl("middle-container");
+      middleContainer.add(valueLabel, {
+        flex: 1
+      });
+
       this.fireEvent("updateNodeDecorator");
     },
 
@@ -642,15 +647,18 @@ qx.Class.define("osparc.workbench.NodeUI", {
     },
 
     __turnIntoProbeUI: function() {
-      const width = 150;
+      const width = 120;
       this.__setNodeUIWidth(width);
 
       const linkLabel = new osparc.ui.basic.LinkLabel().set({
-        paddingLeft: 5,
-        font: "text-12"
+        paddingLeft: 4,
+        font: "text-14",
+        rich: false, // this will make the ellipsis work
       });
       const middleContainer = this.getChildControl("middle-container");
-      middleContainer.add(linkLabel);
+      middleContainer.add(linkLabel, {
+        flex: 1
+      });
 
       this.getNode().getPropsForm().addListener("linkFieldModified", () => this.__setProbeValue(linkLabel), this);
       this.__setProbeValue(linkLabel);