From 3cb423a0b4d60534f1d25e5df857389aa714e79a Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 13 Nov 2014 17:21:12 +0000
Subject: [PATCH] Fix func/temp/comment editor resizing

---
 nodes/core/core/80-function.html | 19 ++++++++++++++-----
 nodes/core/core/80-template.html | 13 +++++++++++--
 nodes/core/core/90-comment.html  | 13 +++++++++++--
 nodes/core/logic/10-switch.html  | 24 ++++++++++++++++--------
 public/style.css                 |  7 ++++---
 5 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/nodes/core/core/80-function.html b/nodes/core/core/80-function.html
index 442c391dc..60169ac95 100644
--- a/nodes/core/core/80-function.html
+++ b/nodes/core/core/80-function.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright 2013 IBM Corp.
+  Copyright 2013, 2014 IBM Corp.
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -19,9 +19,11 @@
         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
-    <div class="form-row">
-        <label for="node-input-func"><i class="fa fa-wrench"></i> Function</label>
-        <input type="hidden" id="node-input-func" autofocus="autofocus">
+    <div class="form-row" style="margin-bottom: 0px;">
+            <label for="node-input-func"><i class="fa fa-wrench"></i> Function</label>
+            <input type="hidden" id="node-input-func" autofocus="autofocus">
+    </div>
+    <div class="form-row node-text-editor-row">
         <div style="height: 250px;" class="node-text-editor" id="node-input-func-editor" ></div>
     </div>
     <div class="form-row">
@@ -71,7 +73,14 @@
             });
 
             function functionDialogResize(ev,ui) {
-                $("#node-input-func-editor").css("height",(ui.size.height-275)+"px");
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
             };
 
             $( "#dialog" ).on("dialogresize", functionDialogResize);
diff --git a/nodes/core/core/80-template.html b/nodes/core/core/80-template.html
index dc014d37e..34c78f421 100644
--- a/nodes/core/core/80-template.html
+++ b/nodes/core/core/80-template.html
@@ -19,9 +19,11 @@
         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
-    <div class="form-row">
+    <div class="form-row" style="margin-bottom: 0px;">
         <label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label>
         <input type="hidden" id="node-input-template" autofocus="autofocus">
+    </div>
+    <div class="form-row node-text-editor-row">
         <div style="height: 250px;" class="node-text-editor" id="node-input-template-editor" ></div>
     </div>
     <div class="form-row">
@@ -63,7 +65,14 @@
         oneditprepare: function() {
 
             function templateDialogResize(ev,ui) {
-                $("#node-input-template-editor").css("height",(ui.size.height-200)+"px");
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
             };
 
             $( "#dialog" ).on("dialogresize", templateDialogResize);
diff --git a/nodes/core/core/90-comment.html b/nodes/core/core/90-comment.html
index 3638fdaa6..02d24ebbb 100644
--- a/nodes/core/core/90-comment.html
+++ b/nodes/core/core/90-comment.html
@@ -19,9 +19,11 @@
         <label for="node-input-name"><i class="fa fa-comment"></i> Comment</label>
         <input type="text" id="node-input-name" placeholder="Comment">
     </div>
-    <div class="form-row">
+    <div class="form-row" style="margin-bottom: 0px;">
         <label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> More</label>
         <input type="hidden" id="node-input-info" autofocus="autofocus">
+    </div>
+    <div class="form-row node-text-editor-row">
         <div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div>
     </div>
     <div class="form-tips">Tip: this isn't meant for "War and Peace" - but useful notes can be kept here.</div>
@@ -53,7 +55,14 @@
                 min:1
             });
             function functionDialogResize(ev,ui) {
-                $("#node-input-info-editor").css("height",(ui.size.height-235)+"px");
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
             };
             $( "#dialog" ).on("dialogresize", functionDialogResize);
             $( "#dialog" ).one("dialogopen", function(ev) {
diff --git a/nodes/core/logic/10-switch.html b/nodes/core/logic/10-switch.html
index 4e02f446e..09d32c659 100644
--- a/nodes/core/logic/10-switch.html
+++ b/nodes/core/logic/10-switch.html
@@ -19,17 +19,18 @@
         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
-    <div class="form-row" style="padding-top:10px;">
+    <div class="form-row">
         If msg.<input type="text" id="node-input-property" style="width: 200px;"/>
     </div>
-    <div class="form-row">
-        <div id="node-input-rule-container-div" style="border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
-        <ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;">
-        </ol>
+    <div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
+        <div id="node-input-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
+            <ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;"></ol>
         </div>
-        <a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> Add</a>
     </div>
-    <div>
+    <div class="form-row">
+        <a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> rule</a>
+    </div>
+    <div class="form-row">
         <select id="node-input-checkall" style="width:100%; margin-right:5px;">
             <option value="true">checking all rules</option>
             <option value="false">stopping after first match</option>
@@ -159,7 +160,14 @@
             }
 
             function switchDialogResize(ev,ui) {
-                $("#node-input-rule-container-div").css("height",(ui.size.height-260)+"px");
+                var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-input-rule-container-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $("#node-input-rule-container-div").css("height",height+"px");
             };
 
             $( "#dialog" ).on("dialogresize", switchDialogResize);
diff --git a/public/style.css b/public/style.css
index fe5b76b39..02f1fe2c3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -658,12 +658,13 @@ g.link_unknown path.link_line {
     margin-bottom: 5px;
 }
 
-form.dialog-form {
+#dialog-form {
     margin: 0;
+    height: 100%;
 }
 .form-row {
     clear: both;
-    margin-bottom:20px;
+    margin-bottom:10px;
 }
 .form-row label {
     display: inline-block;
@@ -1050,7 +1051,7 @@ i.spinner {
     box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
 }
 .ui-dialog .ui-dialog-content {
-    padding: 30px 30px 10px 30px;
+    padding: 25px 25px 10px 25px;
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;