isClickAwayClose

Author: odeimaiz

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

@@ -22,18 +22,19 @@ qx.Class.define("osparc.store.Support", {
     addSupportConversationsToMenu: function(menu) {
       if (osparc.product.Utils.isSupportEnabled()) {
         const supportCenterButton = new qx.ui.menu.Button().set({
-          label: qx.locale.Manager.tr("Ask a Question"),
           icon: "@FontAwesome5Regular/question-circle/16",
         });
         const amISupporter = () => {
-          if (osparc.store.Products.getInstance().amIASupportUser()) {
-            supportCenterButton.set({
-              label: qx.locale.Manager.tr("Support Center"),
-            });
-          }
-        }
+          const isSupportUser = osparc.store.Products.getInstance().amIASupportUser();
+          supportCenterButton.set({
+            label: isSupportUser ? qx.locale.Manager.tr("Support Center") : qx.locale.Manager.tr("Ask a Question"),
+          });
+        };
         amISupporter();
         osparc.store.Groups.getInstance().addListener("organizationsChanged", () => amISupporter());
+        supportCenterButton.addListener("execute", () => {
+          osparc.support.SupportCenter.openWindow();
+        });
         menu.add(supportCenterButton);
       }
     },

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

@@ -19,36 +19,57 @@ qx.Class.define("osparc.support.SupportCenter", {
   extend: osparc.ui.window.SingletonWindow,
 
   construct: function() {
-    this.base(arguments);
+    this.base(arguments, "support-center");
+
+    this.getChildControl("captionbar").exclude();
 
     this.set({
-      layout: qx.ui.container.Stack,
+      layout: new qx.ui.layout.VBox(10),
+      contentPadding: 0,
+      modal: true,
+      clickAwayClose: true,
     });
 
     this.getChildControl("intro-text");
     this.getChildControl("conversations-list");
   },
 
   statics: {
+    openWindow: function() {
+      const supportCenterWindow = new osparc.support.SupportCenter();
+      supportCenterWindow.center();
+      supportCenterWindow.open();
+      return supportCenterWindow;
+    }
   },
 
   members: {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
+        case "stack-layout":
+          control = new qx.ui.container.Stack().set({
+            padding: 10,
+          });
+          this._add(control);
+          break;
         case "conversations-layout":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
-          this.add(control);
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+          this.getChildControl("stack-layout").add(control);
+          break;
         case "intro-text":
           control = new qx.ui.basic.Label(this.tr("Welcome to the Support Center"));
           this.getChildControl("conversations-layout").add(control);
           break;
-        case "conversations-list":
-          const control = new osparc.support.Conversations();
+        case "conversations-list": {
+          control = new osparc.support.Conversations().set({
+            minHeight: 300,
+          });
           const scroll = new qx.ui.container.Scroll();
           scroll.add(control);
           this.getChildControl("conversations-layout").add(scroll);
           break;
+        }
       }
       return control || this.base(arguments, id);
     },

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

@@ -36,8 +36,11 @@ qx.Class.define("osparc.ui.window.Window", {
       );
       if (modalFrame) {
         modalFrame.addEventListener("click", () => {
-          if (this.isModal() && this.isClickAwayClose() &&
-            parseInt(modalFrame.style.zIndex) === parseInt(thisDom.style.zIndex) - 1) {
+          if (
+            // this.isModal() && // OM?
+            this.isClickAwayClose() &&
+            parseInt(modalFrame.style.zIndex) === parseInt(thisDom.style.zIndex) - 1
+          ) {
             this.close();
           }
         });