make support email easier to be selected

Author: odeimaiz

services/static-webserver/client/source/class/osparc/ErrorPage.js

@@ -214,6 +214,7 @@ qx.Class.define("osparc.ErrorPage", {
       const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();
       const giveEmailFeedbackWindow = new osparc.ui.window.Dialog("Support", null, qx.locale.Manager.tr("Please send us an email to:"));
       const mailto = osparc.store.Support.getMailToLabel(supportEmail, "Access error");
+      mailto.setTextAlign("center");
       giveEmailFeedbackWindow.addWidget(mailto);
       giveEmailFeedbackWindow.open();
     },

services/static-webserver/client/source/class/osparc/product/AboutProduct.js

@@ -162,7 +162,7 @@ qx.Class.define("osparc.product.AboutProduct", {
     __getMailTo: function() {
       const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();
       const productName = osparc.store.StaticInfo.getInstance().getDisplayName();
-      return osparc.store.Support.mailToText(supportEmail, "Support " + productName, false);
+      return osparc.store.Support.mailToLink(supportEmail, "Support " + productName, false);
     },
 
     __addCopyright: function() {

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

@@ -66,6 +66,7 @@ qx.Class.define("osparc.product.quickStart.Utils", {
       const label = new qx.ui.basic.Label().set({
         rich: true,
         wrap: true,
+        selectable: true,
         font: "text-14"
       });
       if (text) {

services/static-webserver/client/source/class/osparc/store/Support.js

@@ -132,21 +132,21 @@ qx.Class.define("osparc.store.Support", {
       });
     },
 
-    mailToText: function(email, subject, centered = true) {
+    mailToLink: function(email, subject, centered = true) {
       const color = qx.theme.manager.Color.getInstance().resolve("text");
-      let textLink = `<a href="mailto:${email}?subject=${subject}" style='color: ${color}' target='_blank'>${email}</a>&nbsp&nbsp`;
+      let textLink = `<a href="mailto:${email}?subject=${subject}" style='color: ${color}' target='_blank'>${email}</a>`;
       if (centered) {
         textLink = `<center>${textLink}</center>`
       }
       return textLink;
     },
 
     getMailToLabel: function(email, subject) {
-      const mailto = new qx.ui.basic.Label(this.mailToText(email, subject)).set({
-        alignX: "center",
+      const mailto = new qx.ui.basic.Label(this.mailToLink(email, subject, false)).set({
         font: "text-14",
+        allowGrowX: true, // let it grow to make it easier to select
         selectable: true,
-        rich: true
+        rich: true,
       });
       return mailto;
     },
@@ -155,6 +155,7 @@ qx.Class.define("osparc.store.Support", {
       const productName = osparc.product.Utils.getProductName();
       const giveEmailFeedbackWindow = new osparc.ui.window.Dialog("Feedback", null, qx.locale.Manager.tr("Please send us an email to:"));
       const mailto = this.getMailToLabel(email, productName + " feedback");
+      mailto.setTextAlign("center");
       giveEmailFeedbackWindow.addWidget(mailto);
       giveEmailFeedbackWindow.open();
     },

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

@@ -81,7 +81,7 @@ qx.Class.define("osparc.ui.window.Dialog", {
       });
 
       this.__extraWidgetsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({
-        paddingTop: 15
+        paddingTop: 10
       });
       this.__extraWidgetsLayout.exclude();
       this.add(this.__extraWidgetsLayout, {

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

@@ -591,7 +591,7 @@ qx.Class.define("osparc.utils.Utils", {
       const manuals = osparc.store.Support.getManuals();
       const manualLink = (manuals && manuals.length) ? manuals[0].url : "";
       const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();
-      const mailto = osparc.store.Support.mailToText(supportEmail, "Request Account " + productName);
+      const mailto = osparc.store.Support.mailToLink(supportEmail, "Request Account " + productName);
       let msg = "";
       msg += qx.locale.Manager.tr("To use all ");
       msg += this.createHTMLLink(productName + " features", manualLink);