From 1fe8b388a31b1707f8e6ed5d960689f67aa88940 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 4 Feb 2019 17:20:13 +0000
Subject: [PATCH] Allow subflow env-var list to resize with the dialog

---
 .../@node-red/editor-client/src/js/nodes.js   | 10 ++++++++
 .../editor-client/src/js/ui/editor.js         | 23 ++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index 26549b0bc..16e25ab49 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -372,6 +372,16 @@ RED.nodes = (function() {
             paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
             inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
+            oneditresize: function(size) {
+                var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
+                var height = size.height;
+                for (var i=0; i<rows.size(); i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-input-env-container-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $("#node-input-env-container").editableList('height',height-80);
+            },
             set:{
                 module: "node-red"
             }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index 878b0d0c9..dad1722a2 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -543,20 +543,23 @@ RED.editor = (function() {
     function buildEnvForm(container, node) {
         var env_container = $('#node-input-env-container');
         env_container
-            .css('min-height','250px').css('min-width','450px')
+            .css({
+                'min-height':'150px',
+                'min-width':'450px'
+            })
             .editableList({
                 addItem: function(container, i, opt) {
                     var row = $('<div/>').appendTo(container);
                     var nameField = $('<input/>', {
                         class: "node-input-env-name",
                         type: "text",
-                        style: "margin-length: 5px; width: 32%;",
+                        style: "margin-left: 5px; width: calc(40% - 5px)",
                         placeholder: RED._("editor-tab.name")
                     }).appendTo(row);
                     var valueField = $('<input/>',{
                         class: "node-input-env-value",
                         type: "text",
-                        style: "margin-left: 5px; width: 65%;"
+                        style: "margin-left: 5px; width: calc(60% - 5px)"
                     }).appendTo(row)
                     valueField.typedInput({default:'str',
                                            types:['str','num','bool','json','bin','re','date']
@@ -2112,9 +2115,17 @@ RED.editor = (function() {
                     }
                 }
             ],
-            resize: function(dimensions) {
-                $(".editor-tray-content").height(dimensions.height - 50);
-                var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
+            resize: function(size) {
+                // $(".editor-tray-content").height(size.height - 50);
+                // var form = $(".editor-tray-content form").height(size.height - 50 - 40);
+                var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
+                var height = size.height;
+                for (var i=0; i<rows.size(); i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-input-env-container-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $("#node-input-env-container").editableList('height',height-80);
             },
             open: function(tray) {
                 var trayFooter = tray.find(".editor-tray-footer");