Quick fixes (#742)

A couple of iframe bugs fixed:

Maximizing an iframe now works.
We can now resize a SidePanel over an iframe
Other bugs:

File picker bug fixed. #741

Author: ignapas

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

@@ -49,7 +49,7 @@ qx.Class.define("qxapp.component.widget.NodeView", {
     });
     inputNodesLayout.add(inputLabel);
 
-    const scroll = new qx.ui.container.Scroll().set({
+    const scroll = this.__scrollContainer = new qx.ui.container.Scroll().set({
       minWidth: 300
     });
     scroll.add(inputNodesLayout);
@@ -82,6 +82,7 @@ qx.Class.define("qxapp.component.widget.NodeView", {
 
   members: {
     __mainLayout: null,
+    __scrollContainer: null,
     __inputNodesLayout: null,
     __settingsLayout: null,
     __mapperLayout: null,
@@ -273,6 +274,21 @@ qx.Class.define("qxapp.component.widget.NodeView", {
 
     __attachEventHandlers: function() {
       this.__blocker.addListener("tap", this.__inputNodesLayout.toggleCollapsed.bind(this.__inputNodesLayout));
+
+      const maximizeIframeCb = msg => {
+        this.__blocker.setStyles({
+          display: msg.getData() ? "none" : "block"
+        });
+        this.__scrollContainer.setVisibility(msg.getData() ? "excluded" : "visible");
+      };
+
+      this.addListener("appear", () => {
+        qx.event.message.Bus.getInstance().subscribe("maximizeIframe", maximizeIframeCb, this);
+      }, this);
+
+      this.addListener("disappear", () => {
+        qx.event.message.Bus.getInstance().unsubscribe("maximizeIframe", maximizeIframeCb, this);
+      }, this);
     }
   }
 });

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

@@ -50,9 +50,7 @@ qx.Class.define("qxapp.component.widget.PersistentIframe", {
     __actionButton: null,
     // override
     _createContentElement : function() {
-      let iframe = this.__iframe = new qx.ui.embed.Iframe(this.getSource()).set({
-        zIndex: 1000
-      });
+      let iframe = this.__iframe = new qx.ui.embed.Iframe(this.getSource());
       iframe.addListener("load", e => {
         this.fireEvent("load");
       });
@@ -66,7 +64,7 @@ qx.Class.define("qxapp.component.widget.PersistentIframe", {
         top:-10000
       });
       let actionButton = this.__actionButton = new qx.ui.form.Button(null, osparc.theme.osparcdark.Image.URLS["window-maximize"]+"/20").set({
-        zIndex: 1001,
+        zIndex: 20,
         backgroundColor: "transparent",
         decorator: null
       });
@@ -75,6 +73,7 @@ qx.Class.define("qxapp.component.widget.PersistentIframe", {
       });
       actionButton.addListener("execute", e => {
         this.maximizeIFrame(!this.hasState("maximized"));
+        qx.event.message.Bus.getInstance().dispatchByName("maximizeIframe", this.hasState("maximized"));
       }, this);
       appRoot.add(actionButton);
       standin.addListener("appear", e => {

services/web/client/source/class/qxapp/component/widget/inputs/NodeOutputTreeItem.js

@@ -78,12 +78,13 @@ qx.Class.define("qxapp.component.widget.inputs.NodeOutputTreeItem", {
 
     value: {
       nullable: true,
-      apply: "_applyValue"
+      apply: "_applyValue",
+      transform: "_transformValue"
     }
   },
 
   members : {
-    __value: null,
+    __valueLabel: null,
     _addWidgets : function() {
       // Here's our indentation and tree-lines
       this.addSpacer();
@@ -107,6 +108,15 @@ qx.Class.define("qxapp.component.widget.inputs.NodeOutputTreeItem", {
 
     _applyValue: function(value) {
       this.__valueLabel.setValue(value);
+    },
+    _transformValue: function(value) {
+      if (value.getPath) {
+        const fileName = value.getPath().split("/");
+        if (fileName.length) {
+          return fileName[fileName.length-1];
+        }
+      }
+      return value;
     }
   }
 });

services/web/client/source/class/qxapp/component/widget/logger/LoggerView.js

@@ -162,11 +162,14 @@ qx.Class.define("qxapp.component.widget.logger.LoggerView", {
       // table
       let table = this.__logView = new qx.ui.table.Table(tableModel, custom).set({
         selectable: true,
-        statusBarVisible: false
+        statusBarVisible: false,
+        showCellFocusIndicator: false
       });
       var colModel = table.getTableColumnModel();
       colModel.setDataCellRenderer(0, new qx.ui.table.cellrenderer.Html());
-      colModel.setDataCellRenderer(1, new qx.ui.table.cellrenderer.Html());
+      colModel.setDataCellRenderer(1, new qxapp.ui.table.cellrenderer.Html().set({
+        defaultCellStyle: "user-select: text"
+      }));
       let resizeBehavior = colModel.getBehavior();
       resizeBehavior.setWidth(0, "15%");
       resizeBehavior.setWidth(1, "85%");

services/web/client/source/class/qxapp/component/workbench/WorkbenchUI.js

@@ -848,10 +848,14 @@ qx.Class.define("qxapp.component.workbench.WorkbenchUI", {
 
     __addEventListeners: function() {
       this.addListener("appear", () => {
+        // Reset filters and sidebars
         qxapp.component.filter.UIFilterController.getInstance().resetGroup("workbench");
         qxapp.component.filter.UIFilterController.getInstance().setContainerVisibility("workbench", "visible");
+
+        qx.event.message.Bus.getInstance().dispatchByName("maximizeIframe", false);
       });
       this.addListener("disappear", () => {
+        // Reset filters
         qxapp.component.filter.UIFilterController.getInstance().resetGroup("workbench");
         qxapp.component.filter.UIFilterController.getInstance().setContainerVisibility("workbench", "excluded");
       });

services/web/client/source/class/qxapp/desktop/SidePanel.js

@@ -82,16 +82,21 @@ qx.Class.define("qxapp.desktop.SidePanel", {
     _applyCollapsed: function(collapsed) {
       this.__setDecorators("sidepanel");
       this.getChildren().forEach(child => child.setVisibility(collapsed ? "excluded" : "visible"));
+      const splitpaneContainer = this.__getSplitpaneContainer();
       if (collapsed) {
         // Save widths
         this.__savedWidth = this.__getCssWidth();
-        this.__savedMinWidth = this.__getSplitpaneContainer().getMinWidth();
-        this.__getSplitpaneContainer().setMinWidth(0);
-        this.__getSplitpaneContainer().setWidth(20);
+        this.__savedMinWidth = splitpaneContainer.getMinWidth();
+        splitpaneContainer.set({
+          minWidth: 0,
+          width: 20
+        });
       } else {
         // Restore widths
-        this.__getSplitpaneContainer().setMinWidth(this.__savedMinWidth);
-        this.__getSplitpaneContainer().setWidth(this.__savedWidth);
+        splitpaneContainer.set({
+          minWidth: this.__savedMinWidth,
+          width: this.__savedWidth
+        });
       }
       // Workaround: have to update splitpane's prop
       const splitpane = this.__getParentSplitpane();

services/web/client/source/class/qxapp/desktop/StudyEditor.js

@@ -38,7 +38,7 @@ qx.Class.define("qxapp.desktop.StudyEditor", {
       width: 500
     });
 
-    const scroll = new qx.ui.container.Scroll().set({
+    const scroll = this.__scrollContainer = new qx.ui.container.Scroll().set({
       minWidth: 0
     });
     scroll.add(sidePanel);
@@ -75,6 +75,7 @@ qx.Class.define("qxapp.desktop.StudyEditor", {
     __pipelineId: null,
     __mainPanel: null,
     __sidePanel: null,
+    __scrollContainer: null,
     __workbenchUI: null,
     __treeView: null,
     __extraView: null,
@@ -602,6 +603,21 @@ qx.Class.define("qxapp.desktop.StudyEditor", {
 
     __attachEventHandlers: function() {
       this.__blocker.addListener("tap", this.__sidePanel.toggleCollapsed.bind(this.__sidePanel));
+
+      const maximizeIframeCb = msg => {
+        this.__blocker.setStyles({
+          display: msg.getData() ? "none" : "block"
+        });
+        this.__scrollContainer.setVisibility(msg.getData() ? "excluded" : "visible");
+      };
+
+      this.addListener("appear", () => {
+        qx.event.message.Bus.getInstance().subscribe("maximizeIframe", maximizeIframeCb, this);
+      }, this);
+
+      this.addListener("disappear", () => {
+        qx.event.message.Bus.getInstance().unsubscribe("maximizeIframe", maximizeIframeCb, this);
+      }, this);
     }
   }
 });

services/web/client/source/class/qxapp/ui/table/cellrenderer/Html.js

@@ -0,0 +1,34 @@
+/* ************************************************************************
+
+   qxapp - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2019 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Ignacio Pascual (ignapas)
+
+************************************************************************ */
+
+/**
+ * Html cell renderer that does not override the cell styles.
+ */
+qx.Class.define("qxapp.ui.table.cellrenderer.Html", {
+  extend: qx.ui.table.cellrenderer.Html,
+  construct: function() {
+    this.base(arguments);
+  },
+  members: {
+    // Override
+    _getCellStyle: function(cellInfo) {
+      const baseStyle = this.base(arguments, cellInfo) || "";
+      const cellStyle = cellInfo.style || "";
+      return baseStyle + cellStyle;
+    }
+  }
+});