is759/PO requests + Add button bug (#837)

* Equalized background colors in the study browser.
* Added double click hint in empty workbench.
Corrected but with the Add button in the Workbench.
* Small code fix.
* Removed unecessary translation.
* Reduced the number of calls to updateHint.
* Corrected bug where dynamic services are not started.

Author: ignapas

services/web/client/source/class/qxapp/component/workbench/WorkbenchUI.js

@@ -88,6 +88,13 @@ qx.Class.define("qxapp.component.workbench.WorkbenchUI", {
       bottom: 0
     });
 
+    this.__startHint = new qx.ui.basic.Label(this.tr("Double click on this area to start")).set({
+      font: "workbench-start-hint",
+      textColor: "workbench-start-hint",
+      visibility: "excluded"
+    });
+    this.__desktopCanvas.add(this.__startHint);
+
     this.__svgWidget = new qxapp.component.workbench.SvgWidget("SvgWidgetLayer");
     // this gets fired once the widget has appeared and the library has been loaded
     // due to the qx rendering, this will always happen after setup, so we are
@@ -291,6 +298,8 @@ qx.Class.define("qxapp.component.workbench.WorkbenchUI", {
       }, this);
 
       qx.ui.core.queue.Layout.flush();
+
+      this.__updateHint();
     },
 
     __createNodeUI: function(nodeId) {
@@ -719,6 +728,7 @@ qx.Class.define("qxapp.component.workbench.WorkbenchUI", {
       if (index > -1) {
         this.__nodesUI.splice(index, 1);
       }
+      this.__updateHint();
     },
 
     __clearAllNodes: function() {
@@ -876,6 +886,21 @@ qx.Class.define("qxapp.component.workbench.WorkbenchUI", {
         let srvCat = this.__createServicesCatalogue(pos);
         srvCat.open();
       }, this);
+
+      this.__desktopCanvas.addListener("resize", () => this.__updateHint(), this);
+    },
+
+    __updateHint: function() {
+      const isEmptyWorkspace = Object.keys(this.getWorkbench().getNodes()).length === 0;
+      this.__startHint.setVisibility(isEmptyWorkspace ? "visible" : "excluded");
+      if (isEmptyWorkspace) {
+        const hintBounds = this.__startHint.getBounds() || this.__startHint.getSizeHint();
+        const {height, width} = this.__desktopCanvas.getBounds();
+        this.__startHint.setLayoutProperties({
+          top: Math.round((height - hintBounds.height) / 2),
+          left: Math.round((width - hintBounds.width) / 2)
+        });
+      }
     }
   }
 });

services/web/client/source/class/qxapp/component/workbench/servicesCatalogue/ServicesCatalogue.js

@@ -173,7 +173,7 @@ qx.Class.define("qxapp.component.workbench.servicesCatalogue.ServicesCatalogue",
       const addBtn = this.__addBtn = new qx.ui.toolbar.Button("Add").set({
         enabled: false
       });
-      addBtn.addListener("execute", this.__onAddService, this);
+      addBtn.addListener("execute", () => this.__onAddService(), this);
       addBtn.setAllowGrowX(false);
       buttonsPart.add(addBtn);
       const cancelBtn = new qx.ui.toolbar.Button("Cancel");
@@ -246,7 +246,7 @@ qx.Class.define("qxapp.component.workbench.servicesCatalogue.ServicesCatalogue",
         selectBox.removeAll();
         if (serviceKey in this.__allServicesObj) {
           let versions = qxapp.utils.Services.getVersions(this.__allServicesObj, serviceKey);
-          const latest = new qx.ui.form.ListItem(this.tr(this.self(arguments).LATEST));
+          const latest = new qx.ui.form.ListItem(this.self(arguments).LATEST);
           selectBox.add(latest);
           for (let i = versions.length; i--;) {
             selectBox.add(new qx.ui.form.ListItem(versions[i]));

services/web/client/source/class/qxapp/data/model/Node.js

@@ -237,7 +237,7 @@ qx.Class.define("qxapp.data.model.Node", {
     },
 
     isRealService: function() {
-      return (this.isInKey("simcore/service/dynamic") || this.isInKey("simcore/service/comp"));
+      return (this.isInKey("simcore/services/dynamic") || this.isInKey("simcore/services/comp"));
     },
 
     getMetaData: function() {

services/web/client/source/class/qxapp/theme/Color.js

@@ -30,6 +30,8 @@ qx.Theme.define("qxapp.theme.Color", {
     "background-main-lighter": "#2D2D2D",
     "background-main-lighter+": "#373737",
     "text-placeholder": "text-disabled",
-    "text-darker": "text-disabled"
+    "text-darker": "text-disabled",
+    "tabview-pane-background": "background-main",
+    "workbench-start-hint": "#505050"
   }
 });

services/web/client/source/class/qxapp/theme/Font.js

@@ -84,6 +84,13 @@ qx.Theme.define("qxapp.theme.Font", {
       family: ["Roboto"],
       color: "text",
       italic: true
+    },
+
+    "workbench-start-hint": {
+      size: 20,
+      family: ["Roboto"],
+      color: "workbench-start-hint",
+      bold: true
     }
   }
 });