positionWindow

Author: odeimaiz

services/static-webserver/client/source/class/osparc/support/SupportCenter.js

@@ -19,26 +19,50 @@ qx.Class.define("osparc.support.SupportCenter", {
   extend: osparc.ui.window.SingletonWindow,
 
   construct: function() {
-    this.base(arguments, "support-center");
-
-    this.getChildControl("captionbar").exclude();
+    this.base(arguments, "support-center", "Support Center");
 
     this.set({
       layout: new qx.ui.layout.VBox(10),
-      contentPadding: 0,
-      modal: true,
-      clickAwayClose: true,
+      width: osparc.support.SupportCenter.WINDOW_WIDTH,
+      height: osparc.support.SupportCenter.getMaxHeight(),
+      modal: false,
+      showMaximize: false,
+      showMinimize: false,
+      showClose: true,
     });
 
     this.getChildControl("intro-text");
     this.getChildControl("conversations-list");
   },
 
   statics: {
+    WINDOW_WIDTH: 400,
+
+    getMaxHeight: function() {
+      // height: max 80% of screen, min 600
+      const clientHeight = document.documentElement.clientHeight;
+      return Math.max(600, parseInt(clientHeight * 0.8));
+    },
+
     openWindow: function() {
       const supportCenterWindow = new osparc.support.SupportCenter();
-      supportCenterWindow.center();
+
+      const positionWindow = () => {
+        supportCenterWindow.set({
+          height: osparc.support.SupportCenter.getMaxHeight(),
+        });
+        // bottom right
+        const clientWidth = document.documentElement.clientWidth;
+        const clientHeight = document.documentElement.clientHeight;
+        const posX = clientWidth - osparc.support.SupportCenter.WINDOW_WIDTH;
+        const posY = clientHeight - supportCenterWindow.getHeight();
+        supportCenterWindow.moveTo(posX, posY);
+      };
       supportCenterWindow.open();
+
+      positionWindow();
+      window.addEventListener("resize", positionWindow);
+
       return supportCenterWindow;
     }
   },
@@ -48,10 +72,10 @@ qx.Class.define("osparc.support.SupportCenter", {
       let control;
       switch (id) {
         case "stack-layout":
-          control = new qx.ui.container.Stack().set({
-            padding: 10,
+          control = new qx.ui.container.Stack();
+          this._add(control, {
+            flex: 1
           });
-          this._add(control);
           break;
         case "conversations-layout":
           control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
@@ -67,7 +91,9 @@ qx.Class.define("osparc.support.SupportCenter", {
           });
           const scroll = new qx.ui.container.Scroll();
           scroll.add(control);
-          this.getChildControl("conversations-layout").add(scroll);
+          this.getChildControl("conversations-layout").add(scroll, {
+            flex: 1,
+          });
           break;
         }
       }