Merge remote-tracking branch 'upstream/master'

Author: Pedro Crespo

services/web/client/compile.json

@@ -50,6 +50,9 @@
       },
       {
         "uri" : "resource/qxapp/*.png"
+      },
+      {
+        "uri" : "resource/qxapp/loading/*"
       }
     ]
   },

services/web/client/source/class/qxapp/auth/core/BaseAuthPage.js

@@ -23,7 +23,17 @@ qx.Class.define("qxapp.auth.core.BaseAuthPage", {
       width: 300,
       height: 250
     });
-
+    // at least chrome hates it when a password input field exists
+    // outside a form, so lets accomodate him
+    this.addListenerOnce("appear", e => {
+      let el = this.getContentElement();
+      let form = this._form = new qx.html.Element("form", null, {
+        name: "fakeLoginform",
+        autocomplete: "on"
+      });
+      form.insertBefore(el);
+      el.insertInto(form);
+    });
     this._buildPage();
   },
 
@@ -44,7 +54,11 @@ qx.Class.define("qxapp.auth.core.BaseAuthPage", {
   */
 
   members: {
-
+    /**
+     * when all is said and done we should remove the form so that the password manager
+     * knows to save the content of the form. so we save it here.
+     */
+    _form: null,
     /**
      * This method gets called upon construction and
      * must be overriden in a subclass

services/web/client/source/class/qxapp/auth/ui/LoginPage.js

@@ -47,11 +47,13 @@ qx.Class.define("qxapp.auth.ui.LoginPage", {
       email.setPlaceholder(this.tr("Your email address"));
       email.setRequired(true);
       this.add(email);
+      email.getContentElement().setAttribute("autocomplete", "username");
       this.__form.add(email, "", qx.util.Validate.email(), "email", null);
 
       let pass = new qx.ui.form.PasswordField();
       pass.setPlaceholder(this.tr("Your password"));
       pass.setRequired(true);
+      pass.getContentElement().setAttribute("autocomplete", "current-password");
       this.add(pass);
       this.__form.add(pass, "", null, "password", null);
 
@@ -130,6 +132,9 @@ qx.Class.define("qxapp.auth.ui.LoginPage", {
 
       let successFun = function(log) {
         this.fireDataEvent("done", log.message);
+        // we don't need the form any more, so remove it
+        // and thus tell the password manager to save the content
+        this._form.dispose();
       };
 
       let failFun = function(msg) {

services/web/client/source/class/qxapp/component/widget/NodeView.js

@@ -43,19 +43,15 @@ qx.Class.define("qxapp.component.widget.NodeView", {
     let mainLayout = this.__mainLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
     mainLayout.set({
       alignX: "center",
-      paddingTop: 20,
-      paddingRight: 30,
-      paddingBottom: 20,
-      paddingLeft: 30
+      padding: 5
     });
     this.add(mainLayout, {
       flex: 1
     });
 
-    this.__nodesUI = [];
-
-    this.__initTitle();
-    this.__initSettings();
+    this.__settingsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+    this.__mapperLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+    this.__iFrameLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
     this.__initButtons();
   },
 
@@ -76,40 +72,14 @@ qx.Class.define("qxapp.component.widget.NodeView", {
   },
 
   members: {
-    __settingsBox: null,
-    __inputNodesLayout: null,
     __mainLayout: null,
-    __nodesUI: null,
+    __inputNodesLayout: null,
+    __settingsLayout: null,
+    __mapperLayout: null,
+    __iFrameLayout: null,
     __buttonsLayout: null,
     __openFolder: null,
 
-    __initTitle: function() {
-      let box = new qx.ui.layout.HBox();
-      box.set({
-        spacing: 10,
-        alignX: "right"
-      });
-      let titleBox = new qx.ui.container.Composite(box);
-
-      let settLabel = new qx.ui.basic.Label(this.tr("Settings"));
-      settLabel.set({
-        alignX: "center",
-        alignY: "middle"
-      });
-
-      titleBox.add(settLabel, {
-        width: "75%"
-      });
-      this.__mainLayout.add(titleBox);
-    },
-
-    __initSettings: function() {
-      this.__settingsBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
-      this.__mainLayout.add(this.__settingsBox, {
-        flex: 1
-      });
-    },
-
     __initButtons: function() {
       let box = new qx.ui.layout.HBox();
       box.set({
@@ -144,16 +114,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
       }, this);
 
       buttonsLayout.add(openFolder);
-      this.__mainLayout.add(buttonsLayout);
-    },
-
-    __getNodeUI: function(id) {
-      for (let i = 0; i < this.__nodesUI.length; i++) {
-        if (this.__nodesUI[i].getNodeUI() === id) {
-          return this.__nodesUI[i];
-        }
-      }
-      return null;
     },
 
     __arePortsCompatible: function(node1, port1, node2, port2) {
@@ -228,7 +188,9 @@ qx.Class.define("qxapp.component.widget.NodeView", {
       return nodePorts;
     },
 
-    __createInputPortsUIs: function(nodeModel) {
+    __addInputPortsUIs: function(nodeModel) {
+      this.__clearInputPortsUIs();
+
       // Add the default inputs if any
       if (Object.keys(this.getNodeModel().getInputsDefault()).length > 0) {
         this.__createInputPortsUI(this.getNodeModel(), false);
@@ -244,8 +206,7 @@ qx.Class.define("qxapp.component.widget.NodeView", {
             this.__createInputPortsUI(exposedInnerNode);
           }
         } else {
-          let inputLabel = this.__createInputPortsUI(inputNodeModel);
-          this.__nodesUI.push(inputLabel);
+          this.__createInputPortsUI(inputNodeModel);
         }
       }
     },
@@ -257,33 +218,92 @@ qx.Class.define("qxapp.component.widget.NodeView", {
       }
     },
 
-    __applyNode: function(nodeModel, oldNode, propertyName) {
-      this.__settingsBox.removeAll();
-      this.__settingsBox.add(nodeModel.getPropsWidget());
-      this.__createDragDropMechanism(nodeModel.getPropsWidget());
+    __addSettings: function(propsWidget) {
+      this.__settingsLayout.removeAll();
+      if (propsWidget) {
+        let box = new qx.ui.layout.HBox();
+        box.set({
+          spacing: 10,
+          alignX: "right"
+        });
+        let titleBox = new qx.ui.container.Composite(box);
+        let settLabel = new qx.ui.basic.Label(this.tr("Settings"));
+        settLabel.set({
+          alignX: "center"
+        });
+        titleBox.add(settLabel, {
+          width: "75%"
+        });
+
+        this.__settingsLayout.add(titleBox);
+        this.__settingsLayout.add(propsWidget);
+        this.__createDragDropMechanism(propsWidget);
+
+        this.__mainLayout.add(this.__settingsLayout);
+      } else if (qx.ui.core.Widget.contains(this.__mainLayout, this.__settingsLayout)) {
+        this.__mainLayout.remove(this.__settingsLayout);
+      }
+    },
 
-      if (nodeModel.getInputsMapper()) {
-        this.__settingsBox.add(nodeModel.getInputsMapper(), {
+    __addMapper: function(mapper) {
+      this.__mapperLayout.removeAll();
+      if (mapper) {
+        this.__mapperLayout.add(mapper, {
           flex: 1
         });
+        this.__mainLayout.add(this.__mapperLayout, {
+          flex: 1
+        });
+      } else if (qx.ui.core.Widget.contains(this.__mainLayout, this.__mapperLayout)) {
+        this.__mainLayout.remove(this.__mapperLayout);
       }
+    },
 
-      this.__clearInputPortsUIs();
-      this.__createInputPortsUIs(nodeModel);
+    __addIFrame: function(iFrame) {
+      this.__iFrameLayout.removeAll();
+      if (iFrame) {
+        iFrame.addListenerOnce("maximize", e => {
+          this.__maximizeIFrame(true);
+        }, this);
+        iFrame.addListenerOnce("restore", e => {
+          this.__maximizeIFrame(false);
+        }, this);
+        this.__maximizeIFrame(iFrame.hasState("maximized"));
+        this.__iFrameLayout.add(iFrame, {
+          flex: 1
+        });
+        this.__mainLayout.add(this.__iFrameLayout, {
+          flex: 1
+        });
+      } else if (qx.ui.core.Widget.contains(this.__mainLayout, this.__iFrameLayout)) {
+        this.__mainLayout.remove(this.__iFrameLayout);
+      }
+    },
 
+    __maximizeIFrame: function(maximize) {
+      const othersStatus = maximize ? "excluded" : "visible";
+      this.__inputNodesLayout.setVisibility(othersStatus);
+      this.__settingsLayout.setVisibility(othersStatus);
+      this.__mapperLayout.setVisibility(othersStatus);
+      this.__buttonsLayout.setVisibility(othersStatus);
+    },
+
+    __addButtons: function(nodeModel) {
       this.__buttonsLayout.removeAll();
-      let iFrameButton = nodeModel.getIFrameButton();
-      if (iFrameButton) {
-        iFrameButton.addListener("execute", e => {
-          this.fireDataEvent("ShowViewer", {
-            url: nodeModel.getServiceUrl(),
-            name: nodeModel.getLabel(),
-            nodeId: nodeModel.getNodeId()
-          });
-        }, this);
-        this.__buttonsLayout.add(iFrameButton);
+      let restartIFrameButton = nodeModel.getRestartIFrameButton();
+      if (restartIFrameButton) {
+        this.__buttonsLayout.add(restartIFrameButton);
       }
       this.__buttonsLayout.add(this.__openFolder);
+      this.__mainLayout.add(this.__buttonsLayout);
+    },
+
+    __applyNode: function(nodeModel, oldNode, propertyName) {
+      this.__addInputPortsUIs(nodeModel);
+      this.__addSettings(nodeModel.getPropsWidget());
+      this.__addMapper(nodeModel.getInputsMapper());
+      this.__addIFrame(nodeModel.getIFrame());
+      this.__addButtons(nodeModel);
     }
   }
 });