From 06bf7105156687dc2956aa9f45b7efd42ed6f379 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 9 Mar 2015 20:41:57 +0000
Subject: [PATCH] Improve editor dialog auto-sizing

---
 public/red/ui/editor.js | 29 +++++++++++++++++++++++------
 public/style.css        |  5 ++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/public/red/ui/editor.js b/public/red/ui/editor.js
index 4aba110fd..7ac951a94 100644
--- a/public/red/ui/editor.js
+++ b/public/red/ui/editor.js
@@ -130,7 +130,8 @@ RED.editor = (function() {
             modal: true,
             autoOpen: false,
             closeOnEscape: false,
-            width: 500,
+            minWidth: 500,
+            width: 'auto',
             buttons: [
                 {
                     id: "node-dialog-ok",
@@ -273,6 +274,10 @@ RED.editor = (function() {
             },
             open: function(e) {
                 $(this).parent().find(".ui-dialog-titlebar-close").hide();
+                var minWidth = $(this).dialog('option','minWidth');
+                if ($(this).outerWidth() < minWidth) {
+                    $(this).dialog('option','width',minWidth);
+                }
                 RED.keyboard.disable();
                 if (editing_node) {
                     var size = $(this).dialog('option','sizeCache-'+editing_node.type);
@@ -289,7 +294,7 @@ RED.editor = (function() {
                     RED.view.state(RED.state.DEFAULT);
                 }
                 $( this ).dialog('option','height','auto');
-                $( this ).dialog('option','width','500');
+                $( this ).dialog('option','width','auto');
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
@@ -610,7 +615,8 @@ RED.editor = (function() {
     $( "#node-config-dialog" ).dialog({
             modal: true,
             autoOpen: false,
-            width: 500,
+            minWidth: 500,
+            width: 'auto',
             closeOnEscape: false,
             buttons: [
                 {
@@ -689,13 +695,19 @@ RED.editor = (function() {
             ],
             resize: function(e,ui) {
             },
-            open: function(e,ui) {
+            open: function(e) {
                 $(this).parent().find(".ui-dialog-titlebar-close").hide();
+                var minWidth = $(this).dialog('option','minWidth');
+                if ($(this).outerWidth() < minWidth) {
+                    $(this).dialog('option','width',minWidth);
+                }
                 if (RED.view.state() != RED.state.EDITING) {
                     RED.keyboard.disable();
                 }
             },
             close: function(e) {
+                $(this).dialog('option','width','auto');
+                $(this).dialog('option','height','auto');
                 $("#dialog-config-form").html("");
                 if (RED.view.state() != RED.state.EDITING) {
                     RED.keyboard.enable();
@@ -708,7 +720,8 @@ RED.editor = (function() {
         modal: true,
         autoOpen: false,
         closeOnEscape: false,
-        width: 500,
+        minWidth: 500,
+        width: 'auto',
         buttons: [
             {
                 id: "subflow-dialog-ok",
@@ -766,9 +779,13 @@ RED.editor = (function() {
                 }
             }
         ],
-        open: function(e,ui) {
+        open: function(e) {
             $(this).parent().find(".ui-dialog-titlebar-close").hide();
             RED.keyboard.disable();
+            var minWidth = $(this).dialog('option','minWidth');
+            if ($(this).outerWidth() < minWidth) {
+                $(this).dialog('option','width',minWidth);
+            }
         },
         close: function(e) {
             RED.keyboard.enable();
diff --git a/public/style.css b/public/style.css
index 131649c49..426871cc8 100644
--- a/public/style.css
+++ b/public/style.css
@@ -752,10 +752,12 @@ g.link_unknown path.link_line {
     margin-bottom: 5px;
 }
 
-#dialog-form {
+#dialog-form, #dialog-config-form {
     margin: 0;
     height: 100%;
 }
+
+
 .form-row {
     clear: both;
     margin-bottom:10px;
@@ -788,6 +790,7 @@ button.input-append-right {
     padding: 8px;
     border-radius: 5px;
     border: 1px solid #999;
+    max-width: 450px;
 }
 .form-tips code {
     border: none;