✨ Frontend: Branding (ITISFoundation#3159)

Author: odeimaiz

services/web/client/source/class/osparc/auth/LoginPage.js

@@ -45,21 +45,12 @@ qx.Class.define("osparc.auth.LoginPage", {
       layout.setRowFlex(1, 1);
       layout.setColumnFlex(0, 1);
       this._setLayout(layout);
-      osparc.utils.LibVersions.getPlatformName()
-        .then(platformName => {
-          let image = null;
-          const now = new Date().getTime();
-          const afterKZ = new Date("2022-07-01").getTime();
-          if ((now < afterKZ) && platformName === "master") {
-            image = this._getLogoWPlatform2();
-          } else {
-            image = this._getLogoWPlatform();
-          }
-          this._add(image, {
-            row: 0,
-            column: 0
-          });
-        });
+
+      const image = this._getLogoWPlatform();
+      this._add(image, {
+        row: 0,
+        column: 0
+      });
 
       const pages = this._getLoginStack();
       this._add(pages, {

services/web/client/source/class/osparc/auth/LoginPageTI.js

@@ -45,7 +45,7 @@ qx.Class.define("osparc.auth.LoginPageTI", {
       this.getContentElement().setStyles({
         "background-image": "url(resource/osparc/ti_splitimage.png)",
         "background-repeat": "no-repeat",
-        "background-size": "auto 100%"
+        "background-size": "contain"
       });
 
       this._add(new qx.ui.core.Spacer(), {

services/web/client/source/class/osparc/component/metadata/ServicesInStudy.js

@@ -142,7 +142,10 @@ qx.Class.define("osparc.component.metadata.ServicesInStudy", {
         const infoButton = new qx.ui.form.Button(null, "@MaterialIcons/info_outline/14");
         infoButton.addListener("execute", () => {
           const metadata = osparc.utils.Services.getMetaData(node["key"], node["version"]);
-          const serviceDetails = new osparc.servicecard.Large(metadata, nodeId);
+          const serviceDetails = new osparc.servicecard.Large(metadata, {
+            nodeId,
+            label: node["label"]
+          });
           const title = this.tr("Service information");
           const width = 600;
           const height = 700;

services/web/client/source/class/osparc/component/node/BaseNodeView.js

@@ -192,7 +192,11 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
 
     __openServiceDetails: function() {
       const node = this.getNode();
-      const serviceDetails = new osparc.servicecard.Large(node.getMetaData(), node.getNodeId(), node.getStudy());
+      const serviceDetails = new osparc.servicecard.Large(node.getMetaData(), {
+        nodeId: node.getNodeId(),
+        label: node.getLabel(),
+        study: node.getStudy()
+      });
       const title = this.tr("Service information");
       const width = 600;
       const height = 700;

services/web/client/source/class/osparc/component/widget/NodesTree.js

@@ -244,7 +244,11 @@ qx.Class.define("osparc.component.widget.NodesTree", {
           osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height);
         } else {
           const node = study.getWorkbench().getNode(nodeId);
-          const serviceDetails = new osparc.servicecard.Large(node.getMetaData(), nodeId, study);
+          const serviceDetails = new osparc.servicecard.Large(node.getMetaData(), {
+            nodeId,
+            label: node.getLabel(),
+            study
+          });
           const title = this.tr("Service information");
           const width = 600;
           const height = 700;

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

@@ -1497,7 +1497,11 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
     __openNodeInfo: function(nodeId) {
       if (nodeId) {
         const node = this.getStudy().getWorkbench().getNode(nodeId);
-        const serviceDetails = new osparc.servicecard.Large(node.getMetaData(), nodeId, this.getStudy());
+        const serviceDetails = new osparc.servicecard.Large(node.getMetaData(), {
+          nodeId,
+          label: node.getLabel(),
+          study: this.getStudy()
+        });
         const title = this.tr("Service information");
         const width = 600;
         const height = 700;

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

@@ -200,7 +200,7 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
       const title = this.tr("Information");
       const icon = "@FontAwesome5Solid/info";
       const resourceData = this.__resourceData;
-      const infoCard = osparc.utils.Resources.isService(resourceData) ? new osparc.servicecard.Large(resourceData, null, null, false) : new osparc.studycard.Large(resourceData, false);
+      const infoCard = osparc.utils.Resources.isService(resourceData) ? new osparc.servicecard.Large(resourceData, null, false) : new osparc.studycard.Large(resourceData, false);
       infoCard.addListener("openAccessRights", () => this.openAccessRights());
       infoCard.addListener("openClassifiers", () => this.openClassfiers());
       infoCard.addListener("openQuality", () => this.openQuality());

services/web/client/source/class/osparc/servicecard/Large.js

@@ -21,10 +21,10 @@ qx.Class.define("osparc.servicecard.Large", {
 
   /**
     * @param serviceData {Object} Serialized Service Object
-    * @param instanceUuid {String} uuid of the service instance
+    * @param instance {Object} instance related data
     * @param openOptions {Boolean} open edit options in new window or fire event
     */
-  construct: function(serviceData, instanceUuid = null, study = null, openOptions = true) {
+  construct: function(serviceData, instance = null, openOptions = true) {
     this.base(arguments);
 
     this.set({
@@ -35,24 +35,24 @@ qx.Class.define("osparc.servicecard.Large", {
 
     this.setService(serviceData);
 
-    if (instanceUuid) {
-      this.setInstanceUuid(instanceUuid);
-    }
-
-    if (study) {
-      this.setStudy(study);
+    if (instance) {
+      if ("nodeId" in instance) {
+        this.setNodeId(instance["nodeId"]);
+      }
+      if ("label" in instance) {
+        this.setInstanceLabel(instance["label"]);
+      }
+      if ("study" in instance) {
+        this.setStudy(instance["study"]);
+      }
     }
 
     if (openOptions !== undefined) {
       this.setOpenOptions(openOptions);
     }
 
-    this.addListenerOnce("appear", () => {
-      this.__rebuildLayout();
-    }, this);
-    this.addListener("resize", () => {
-      this.__rebuildLayout();
-    }, this);
+    this.addListenerOnce("appear", () => this.__rebuildLayout(), this);
+    this.addListener("resize", () => this.__rebuildLayout(), this);
   },
 
   events: {
@@ -70,7 +70,13 @@ qx.Class.define("osparc.servicecard.Large", {
       apply: "__rebuildLayout"
     },
 
-    instanceUuid: {
+    nodeId: {
+      check: "String",
+      init: null,
+      nullable: true
+    },
+
+    instanceLabel: {
       check: "String",
       init: null,
       nullable: true
@@ -169,7 +175,14 @@ qx.Class.define("osparc.servicecard.Large", {
     },
 
     __createTitle: function() {
-      const title = osparc.servicecard.Utils.createTitle(this.getService()).set({
+      const serviceName = this.getService()["name"];
+      let text = "";
+      if (this.getInstanceLabel()) {
+        text = `${this.getInstanceLabel()} [${serviceName}]`;
+      } else {
+        text = serviceName;
+      }
+      const title = osparc.servicecard.Utils.createTitle(text).set({
         font: "title-16"
       });
       return title;
@@ -233,13 +246,13 @@ qx.Class.define("osparc.servicecard.Large", {
           }
         });
 
-        if (this.getInstanceUuid()) {
+        if (this.getNodeId()) {
           extraInfo.unshift({
             label: this.tr("UUID"),
-            view: this.__createInstaceUuid(),
+            view: this.__createNodeId(),
             action: {
               button: osparc.utils.Utils.getCopyButton(),
-              callback: this.__copyUuidToClipboard,
+              callback: this.__copyNodeIdToClipboard,
               ctx: this
             }
           });
@@ -257,8 +270,8 @@ qx.Class.define("osparc.servicecard.Large", {
       return moreInfo;
     },
 
-    __createInstaceUuid: function() {
-      return osparc.servicecard.Utils.createInstaceUuid(this.getInstanceUuid());
+    __createNodeId: function() {
+      return osparc.servicecard.Utils.createNodeId(this.getNodeId());
     },
 
     __createKey: function() {
@@ -302,11 +315,11 @@ qx.Class.define("osparc.servicecard.Large", {
       const resourcesLayout = osparc.servicecard.Utils.createResourcesInfo();
       resourcesLayout.exclude();
       let promise = null;
-      if (this.getInstanceUuid()) {
+      if (this.getNodeId()) {
         const params = {
           url: {
             studyId: this.getStudy().getUuid(),
-            nodeId: this.getInstanceUuid()
+            nodeId: this.getNodeId()
           }
         };
         promise = osparc.data.Resources.fetch("nodesInStudyResources", "getResources", params);
@@ -348,8 +361,8 @@ qx.Class.define("osparc.servicecard.Large", {
       titleEditor.open();
     },
 
-    __copyUuidToClipboard: function() {
-      osparc.utils.Utils.copyTextToClipboard(this.getInstanceUuid());
+    __copyNodeIdToClipboard: function() {
+      osparc.utils.Utils.copyTextToClipboard(this.getNodeId());
     },
 
     __copyKeyToClipboard: function() {

services/web/client/source/class/osparc/servicecard/Utils.js

@@ -21,22 +21,21 @@ qx.Class.define("osparc.servicecard.Utils", {
 
   statics: {
     /**
-      * @param serviceData {Object} Serialized Service Object
+      * @param label {String} label
       */
-    createTitle: function(serviceData) {
-      const title = new qx.ui.basic.Label().set({
+    createTitle: function(label) {
+      const title = new qx.ui.basic.Label(label).set({
         font: "title-14",
         allowStretchX: true,
         rich: true
       });
-      title.setValue(serviceData["name"]);
       return title;
     },
 
     /**
       * @param serviceData {Object} Serialized Service Object
       */
-    createInstaceUuid: function(instaceUuid) {
+    createNodeId: function(instaceUuid) {
       const label = new qx.ui.basic.Label().set({
         maxWidth: 220
       });

services/web/client/source/class/osparc/utils/Utils.js

@@ -268,7 +268,7 @@ qx.Class.define("osparc.utils.Utils", {
       const product = qx.core.Environment.get("product.name");
       switch (product) {
         case "s4l":
-          logosPath = lightLogo ? "osparc/s4l_zmt-white.png" : "osparc/s4l_zmt-black.png";
+          logosPath = lightLogo ? "osparc/s4l_zmt-white.svg" : "osparc/s4l_zmt-black.svg";
           break;
         case "tis": {
           logosPath = lightLogo ? "osparc/tip_itis-white.svg" : "osparc/tip_itis-black.svg";