🎨 [Frontend] App mode: Scrollable Instructions (ITISFoundation#6430)

Author: odeimaiz

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

@@ -66,7 +66,7 @@ qx.Class.define("osparc.CookiePolicy", {
       return link;
     },
 
-    getZMTEULALink: function(linkText = "end users license agreement (EULA)") {
+    getZMTEULALink: function(linkText = "end-users license agreement (EULA)") {
       const color = qx.theme.manager.Color.getInstance().resolve("text");
       const link = `<a href='https://zurichmedtech.github.io/s4l-manual/#/docs/licensing/copyright_Sim4Life?id=zurich-medtech-ag-zmt' style='color: ${color}' target='_blank''>${linkText}</a>`;
       return link;

services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js

@@ -129,14 +129,21 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
           rich: true
         });
         country.add(cItem);
-      })
+      });
+      // preselect
       fetch("https://ipapi.co/json")
         .then(res => res.json())
         .then(data => {
           const countryFound = country.getSelectables().find(c => c.getModel().toUpperCase() === data.country_code.toUpperCase());
           if (countryFound) {
             country.setSelection([countryFound])
           }
+        })
+        .catch(err => {
+          console.error(err);
+          const emptyItem = new qx.ui.form.ListItem("", null, "");
+          country.add(emptyItem);
+          country.setSelection([emptyItem]);
         });
       this._form.add(country, this.tr("Country"), null, "country");
 
@@ -321,7 +328,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
 
       // Eula link
       if (osparc.product.Utils.getProductName() !== "osparc") {
-        const eulaLink = osparc.CookiePolicy.getZMTEULALink("end users license agreement (EULA)");
+        const eulaLink = osparc.CookiePolicy.getZMTEULALink("end-users license agreement (EULA)");
         const eulaText = "I accept the " + eulaLink + " and I will use the product in accordance with it";
         const eula = new qx.ui.form.CheckBox().set({
           required: true,

services/static-webserver/client/source/class/osparc/node/slideshow/BaseNodeView.js

@@ -235,20 +235,20 @@ qx.Class.define("osparc.node.slideshow.BaseNodeView", {
       }
       const desc = this.getNode().getSlideshowInstructions();
       if (desc) {
-        const descView = new osparc.ui.markdown.Markdown().set({
+        const markdownInstructions = new osparc.ui.markdown.Markdown().set({
           value: desc,
           padding: 3,
           font: "text-14"
         });
-        const scrollContainer = new qx.ui.container.Scroll();
-        scrollContainer.add(descView);
         const title = this.tr("Instructions") + " - " + this.getNode().getLabel();
-        const width = 500;
-        const height = 500;
-        const win = this.__instructionsWindow = osparc.ui.window.Window.popUpInWindow(scrollContainer, title, width, height).set({
+        const width = 600;
+        const minHeight = 200;
+        const win = this.__instructionsWindow = osparc.ui.window.Window.popUpInWindow(markdownInstructions, title, width, minHeight).set({
           modal: false,
           clickAwayClose: false
         });
+        markdownInstructions.addListener("resized", () => win.center());
+
         win.getContentElement().setStyles({
           "border-color": qx.theme.manager.Color.getInstance().resolve("strong-main")
         });

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

@@ -26,7 +26,7 @@ qx.Class.define("osparc.product.quickStart.tis.Slides", {
     footerLinks: function() {
       const footerLinks = [];
 
-      const videoText = osparc.utils.Utils.createHTMLLink("TIP video", "https://youtu.be/-ZE6yOJ3ipw");
+      const videoText = osparc.utils.Utils.createHTMLLink("TIP videos", "https://www.youtube.com/playlist?list=PLcJQYcVCSqDu5gXnJj-_vS_spGhZOe-jF");
       const videoLabel = new qx.ui.basic.Label(videoText).set({
         textAlign: "center",
         rich : true

services/static-webserver/client/source/class/osparc/ui/markdown/Markdown.js

@@ -71,6 +71,10 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
     }
   },
 
+  events: {
+    "resized": "qx.event.type.Event",
+  },
+
   members: {
     __loadMarked: null,
     /**
@@ -138,7 +142,26 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
         } else {
           this.setMinHeight(elemHeight);
         }
+
+        const elemMaxWidth = this.__getChildrenElementMaxWidth(domElement.children);
+        if (this.getMaxWidth() && elemMaxWidth > this.getMaxWidth()) {
+          this.setWidth(elemMaxWidth);
+        } else {
+          this.setMinWidth(elemMaxWidth);
+        }
       }
+      this.fireEvent("resized");
+    },
+
+    __getDomElement: function() {
+      if (!this.getContentElement || this.getContentElement() === null) {
+        return null;
+      }
+      const domElement = this.getContentElement().getDomElement();
+      if (domElement) {
+        return domElement;
+      }
+      return null;
     },
 
     __getChildrenElementHeight: function(children) {
@@ -155,23 +178,37 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
       if (this.getNoMargin()) {
         element.style.marginTop = 0;
         element.style.marginBottom = 0;
-        const size = qx.bom.element.Dimension.getSize(element);
+        const size = this.__getElementSize(element);
         return size.height;
       }
-      const size = qx.bom.element.Dimension.getSize(element);
+      const size = this.__getElementSize(element);
       // add padding
-      return size.height + 15;
+      return size.height + 20;
     },
 
-    __getDomElement: function() {
-      if (!this.getContentElement || this.getContentElement() === null) {
-        return null;
+    __getChildrenElementMaxWidth: function(children) {
+      let maxWidth = 0;
+      for (let i=0; i < children.length; i++) {
+        maxWidth = Math.max(this.__getElementWidth(children[i]), maxWidth);
       }
-      const domElement = this.getContentElement().getDomElement();
-      if (domElement) {
-        return domElement;
+      return maxWidth;
+    },
+
+    __getElementWidth: function(element) {
+      const size = this.__getElementSize(element);
+      return size.width;
+    },
+
+    __getElementSize: function(element) {
+      if (
+        element &&
+        element.children &&
+        element.children.length &&
+        element.children[0].localName === "img"
+      ) {
+        return qx.bom.element.Dimension.getSize(element.children[0]);
       }
-      return null;
-    }
+      return qx.bom.element.Dimension.getSize(element);
+    },
   }
 });