More UI refresh

editor/js/ui/editor.js

@@ -362,7 +362,7 @@ RED.editor = (function() {
         input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>');
         updateConfigNodeSelect(property,type,node[property]);
         var select = $("#node-input-"+property);
-        select.after(' <a id="node-input-lookup-'+property+'" class="btn"><i class="fa fa-pencil"></i></a>');
+        select.after(' <a id="node-input-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>');
         $('#node-input-lookup-'+property).click(function(e) {
             showEditConfigNodeDialog(property,type,select.find(":selected").val());
             e.preventDefault();
@@ -390,7 +390,7 @@ RED.editor = (function() {
         input.val(node[property]);
         input.attr("type","hidden");
 
-        var button = $("<a>",{id:"node-input-edit-"+property, class:"btn"});
+        var button = $("<a>",{id:"node-input-edit-"+property, class:"editor-button"});
         input.after(button);
 
         if (node[property]) {

editor/js/ui/library.js

@@ -142,9 +142,9 @@ RED.library = (function() {
             return ul;
         }
 
-        $('#node-input-name').addClass('input-append-left').css("width","65%").after(
+        $('#node-input-name').css("width","60%").after(
-            '<div class="btn-group" style="margin-left: 0px;">'+
+            '<div class="btn-group" style="margin-left: 5px;">'+
-            '<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></button>'+
+            '<a id="node-input-'+options.type+'-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
             '<ul class="dropdown-menu pull-right" role="menu">'+
             '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
             '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+

editor/js/ui/notifications.js

@@ -30,10 +30,10 @@ RED.notify = (function() {
         }
         var n = document.createElement("div");
         n.id="red-notification-"+c;
-        n.className = "alert";
+        n.className = "notification";
         n.fixed = fixed;
         if (type) {
-            n.className = "alert alert-"+type;
+            n.className = "notification notification-"+type;
         }
         n.style.display = "none";
         n.innerHTML = msg;
@@ -44,7 +44,7 @@ RED.notify = (function() {
             return function() {
                 currentNotifications.splice(currentNotifications.indexOf(nn),1);
                 $(nn).slideUp(300, function() {
-                        nn.parentNode.removeChild(nn);
+                    nn.parentNode.removeChild(nn);
                 });
             };
         })();
@@ -56,4 +56,3 @@ RED.notify = (function() {
         return n;
     }
 })();
-

editor/js/ui/sidebar.js

@@ -97,7 +97,7 @@ RED.sidebar = (function() {
 
                 if (!RED.menu.isSelected("menu-item-sidebar")) {
                     sidebarSeparator.opening = true;
-                    var newChartRight = 10;
+                    var newChartRight = 7;
                     $("#sidebar").addClass("closing");
                     $("#workspace").css("right",newChartRight);
                     $("#chart-zoom-controls").css("right",newChartRight+20);
@@ -151,12 +151,12 @@ RED.sidebar = (function() {
                     RED.menu.setSelected("menu-item-sidebar",false);
                     if ($("#sidebar").width() < 180) {
                         $("#sidebar").width(180);
-                        $("#workspace").css("right",191);
+                        $("#workspace").css("right",187);
-                        $("#chart-zoom-controls").css("right",211);
+                        $("#chart-zoom-controls").css("right",210);
                     }
                 }
                 $("#sidebar-separator").css("left","auto");
-                $("#sidebar-separator").css("right",($("#sidebar").width()+3)+"px");
+                $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
                 RED.events.emit("sidebar:resize");
             }
     });

editor/js/ui/tab-info.js

@@ -30,6 +30,7 @@ RED.sidebar.info = (function() {
     content.style.paddingTop = "4px";
     content.style.paddingLeft = "4px";
     content.style.paddingRight = "4px";
+    content.className = "sidebar-node-info"
 
     var propertiesExpanded = false;
 

editor/js/ui/view.js

@@ -1322,7 +1322,7 @@ RED.view = (function() {
                             .attr("class","node_icon_shade_border")
                             .attr("stroke-opacity","0.1")
                             .attr("stroke","#000")
-                            .attr("stroke-width","2");
+                            .attr("stroke-width","1");
 
                         if ("right" == d._def.align) {
                             icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align);

editor/js/ui/workspaces.js

@@ -206,6 +206,10 @@ RED.workspaces = (function() {
         RED.menu.setAction('menu-item-workspace-delete',function() {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
         });
+
+        $(window).resize(function() {
+            workspace_tabs.resize();
+        });
     }
 
     function removeWorkspace(ws) {

editor/sass/colors.scss

@@ -19,13 +19,24 @@ $form-text-color: #444;
 $form-input-focus-color:  rgba(85,150,230,0.8);
 $form-input-border-color:  #ccc;
 
-$node-selected-color: #5596E6; // #ff7f0e
+
+$node-selected-color: #ff7f0e;
+$port-selected-color: #ff7f0e;
+$link-color: #888;
+$link-subflow-color: #bbb;
+$link-unknown-color: #f00;
 
 $primary-border-color: #bbbbbb;
 $secondary-border-color: #dddddd;
 
+$tab-background-active: #fff;
+$tab-background-inactive: #f0f0f0;
+$tab-background-hover: #ddd;
+
+$palette-header-background: #f3f3f3;
+
 $workspace-button-background: #fff;
-$workspace-button-background-hover: #f3f3f3;
+$workspace-button-background-hover: #ddd;
 $workspace-button-background-active: #efefef;
 $workspace-button-color: #999;
 $workspace-button-color-disabled: #ccc;

editor/sass/editor.scss

@@ -30,7 +30,7 @@
 .form-row {
     clear: both;
     color: $form-text-color;
-    margin-bottom:10px;
+    margin-bottom:12px;
 }
 .form-row label {
     display: inline-block;
@@ -40,32 +40,21 @@
     width:70%;
 }
 
-input.input-append-left {
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-button.input-append-right {
-    border-top-left-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-top-right-radius: 4px !important;
-    border-bottom-right-radius: 4px !important;
-    margin-left: -1px !important;
-    padding-left: 4px !important;
-    padding-right: 4px !important;
-}
-
 .form-tips {
-    background: lightgoldenrodyellow;
+    background: #ffe;
     font-size: 12px;
     padding: 8px;
-    border-radius: 5px;
+    border-radius: 2px;
-    border: 1px solid #999;
+    border: 1px solid $secondary-border-color;
     max-width: 450px;
 }
 .form-tips code {
     border: none;
     padding: auto;
 }
+.form-tips a {
+    text-decoration: underline;
+}
 
 .node-text-editor {
     border:1px solid #ccc;
@@ -74,3 +63,12 @@ button.input-append-right {
     font-size: 14px !important;
     font-family: monospace !important;
 }
+
+.editor-button {
+    @include workspace-button;
+    height: 30px;
+    line-height: 28px;
+    font-size: 12px;
+    border-radius: 3px;
+    padding: 0 10px;
+}

editor/sass/flow.scss

@@ -166,8 +166,8 @@
 }
 
 .port_hovered {
-    stroke: #ff7f0e;
+    stroke: $port-selected-color;
-    fill:  #ff7f0e;
+    fill:  $port-selected-color;
 }
 .subflowport {
     stroke-dasharray: 5,5;
@@ -190,14 +190,14 @@
 }
 
 .link_line {
-    stroke: #7f7f7f;
+    stroke: $link-color;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
 .link_subflow {
-    stroke: #bbb;
+    stroke: $link-subflow-color;
     stroke-dasharray: 10,5;
     stroke-width: 2;
 }
@@ -221,7 +221,7 @@ g.link_selected path.link_line {
     stroke: $node-selected-color;
 }
 g.link_unknown path.link_line {
-    stroke: #f00;
+    stroke: $link-unknown-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }

editor/sass/library.scss

@@ -31,17 +31,3 @@
 #node-select-library li.list-hover {
     background: #ffffd0;
 }
-
-.library-button {
-    box-sizing: border-box;
-    height: 28px;
-    line-height: 28px;
-    display: inline-block;
-    font-size: 12px;
-    padding: 0px 8px;
-    text-decoration: none;
-    border-radius: 0px;
-    color: #666;
-    background: #f6f6f6;
-    margin: 0 5px;
-}

editor/sass/mixins.scss

@@ -29,6 +29,7 @@
 }
 
 @mixin workspace-button {
+    @include disable-selection;
     color: $workspace-button-color;
     box-sizing: border-box;
     display: inline-block;
@@ -37,11 +38,13 @@
     text-align: center;
     margin:0;
     text-decoration: none;
+    cursor:pointer;
     &.disabled {
         cursor: default;
         color: $workspace-button-color-disabled;
     }
     &:not(.disabled):hover {
+        text-decoration: none;
         color: $workspace-button-color-hover;
         background: $workspace-button-background-hover;
     }

editor/sass/notifications.scss

@@ -14,19 +14,87 @@
  * limitations under the License.
  **/
 
+ #notifications {
+     z-index: 10000;
+     width: 500px;
+     margin-left: -250px;
+     left: 50%;
+     position: absolute;
+     top: 1px;
+ }
+ .notification {
+     box-sizing: border-box;
+     position: relative;
+     padding: 14px 18px;
+     margin-bottom: 4px;
+     box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
+     background-color: #fff;
+     color: #666;
+     border: 1px solid #325C80;
+     border-left-width: 16px;
+ }
 
+ .notification-success {
+     border-color: #4B8400;
+ }
+ .notification-warning {
+     border-color: #D74108;
+ }
+ .notification-error {
+     border-color: #AD1625;
+ }
+ /*
+ .notification {
+     box-sizing: border-box;
+     position: relative;
+     padding: 12px 20px;
+     margin-bottom: 4px;
+     box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
+     color: #f0f0f0;
+     background-color: #5AAAFA;
+     border: 1px solid #325C80;
+     border-left-width: 16px;
+ }
+
+ .notification-success {
+     background: #5AA700;
+     border-color: #4B8400;
+ }
+ .notification-warning {
+     background:#FF7832;
+     border-color: #D74108;
+ }
+ .notification-error {
+     background: #FF5050;
+     border-color: #AD1625;
+ }
+
+*/
+
+/*
 .notification {
-    position: absolute;
+    position: relative;
+    padding: 12px 20px;
+    margin-bottom: 4px;
+    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
+    color: #325C80;
+    background-color: #C0E6FF;
+    border: 1px solid #325C80;
 }
-#notifications {
+
-    z-index: 10000;
+.notification-success {
-    width: 500px;
+  color: #4B8400;
-    margin-left: -250px;
+  background-color: #C8F08F;
-    left: 50%;
+  border-color: #4B8400;
-    position: absolute;
-    top: 1px;
 }
-#notifications .alert {
+.notification-warning {
-    box-shadow: 0 0 1px 1px;
+    color:#D74108;
-    margin-bottom: 5px;
+    border-color: #D74108;
+    background-color:#FFD791;
 }
+.notification-error {
+  color: #AD1625;
+  background-color: #FFD2DD;
+  border-color: #AD1625;
+}
+*/

editor/sass/palette.scss

@@ -102,7 +102,7 @@
 }
 
 .palette-header {
-    background: #f3f3f3;
+    background: $palette-header-background;
     cursor: pointer;
     text-align: left;
     padding: 9px;

editor/sass/sidebar.scss

@@ -45,14 +45,22 @@
 #sidebar-separator {
     position: absolute;
     top: 5px;
-    right: 316px;
+    right: 315px;
     bottom:10px;
-    width: 10px;
+    width: 7px;
     background: url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
 }
 
 .sidebar-closed > #sidebar { display: none; }
 .sidebar-closed > #sidebar-separator { right: 0px !important; }
-.sidebar-closed > #workspace { right: 10px !important; }
+.sidebar-closed > #workspace { right: 7px !important; }
 .sidebar-closed > #chart-zoom-controls { right: 30px !important; }
+
+#sidebar .button {
+    @include workspace-button;
+    line-height: 18px;
+    font-size: 12px;
+    margin-right: 5px;
+    padding: 2px 8px;
+}

editor/sass/tab-info.scss

@@ -14,6 +14,10 @@
  * limitations under the License.
  **/
 
+.sidebar-node-info  hr {
+    margin: 10px 0;
+}
+
 table.node-info {
     font-size: 14px;
     margin: 5px;
@@ -64,11 +68,15 @@ div.node-info {
         margin: 8px auto;
     }
     h2 {
+        font-weight: normal;
+        font-size: 18px;
+        margin: 8px auto;
+    }
+    h3 {
         font-weight: normal;
         font-size: 16px;
         margin: 8px auto;
     }
-    h3,
     h4,
     h5 {
         font-weight: normal;

editor/sass/tabs.scss

@@ -37,7 +37,7 @@ ul.red-ui-tabs li {
     border-top: 1px solid  $primary-border-color;
     border-right: 1px solid $primary-border-color;
     border-bottom: 1px solid $primary-border-color;
-    background: #f3f3f3;
+    background: $tab-background-inactive;
     margin: 3px 3px 0 3px;
     height: 32px;
     line-height: 29px;
@@ -77,14 +77,14 @@ ul.red-ui-tabs li a.red-ui-tab-close:hover {
 }
 ul.red-ui-tabs li a:hover {
     text-decoration: none;
-    background: #ddd;
+    background: $tab-background-hover;
 }
 ul.red-ui-tabs li a:focus {
     text-decoration: none;
 }
 
 ul.red-ui-tabs li.active {
-    background: #fff;
+    background: $tab-background-active;
     font-weight: bold;
     border-bottom: 1px solid #fff;
 }

editor/sass/workspace.scss

@@ -35,7 +35,7 @@
     top:0px;
     left:179px;
     bottom: 10px;
-    right: 326px;
+    right: 322px;
     overflow: hidden;
     @include component-border;
 }

nodes/core/core/58-debug.html

@@ -133,7 +133,7 @@
             toolbar.id = "debug-toolbar";
             content.appendChild(toolbar);
 
-            toolbar.innerHTML = '<div class="btn-group pull-right"><a id="debug-tab-clear" title="clear log" class="btn btn-mini" href="#"><i class="fa fa-trash"></i></a></div> ';
+            toolbar.innerHTML = '<div class="pull-right"><a id="debug-tab-clear" title="clear log" class="button" href="#"><i class="fa fa-trash"></i></a></div> ';
 
             var messages = document.createElement("div");
             messages.id = "debug-content";

nodes/core/core/90-comment.html

@@ -51,9 +51,7 @@
             return this.name?"node_label_italic":"";
         },
         info: function() {
-            var t = this.name || this._("comment.defaulttitle");
+            return (this.name?"# "+this.name+"\n":"")+(this.info||"");
-            var b = this.info || this._("comment.defaultinfo");
-            return "### "+t+"\n"+b;
         },
         oneditprepare: function() {
             var that = this;

nodes/core/io/21-httpin.html

@@ -33,7 +33,7 @@
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
     <div class="form-row row-swagger-doc">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="httpin.label.doc"></span></label>
+        <label for="node-input-swaggerDoc"><i class="fa fa-tag"></i> <span data-i18n="httpin.label.doc"></span></label>
         <input type="text" id="node-input-swaggerDoc">
     </div>
     <div id="node-input-tip" class="form-tips"><span data-i18n="httpin.tip.in"></span><code><span id="node-input-path"></span></code>.</div>

nodes/core/locales/en-US/messages.json

@@ -172,9 +172,7 @@
             "title": "Title",
             "body": "Body"
         },
-        "tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>",
+        "tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>"
-        "defaulttitle": "Comment node",
-        "defaultinfo": "Use this node to add simple documentation.\n\nAnything you add will be rendered in this info panel.\n\nYou may use Markdown syntax to **enhance** the *presentation*."
     },
     "unknown": {
         "label": {

nodes/core/logic/10-switch.html

@@ -28,7 +28,7 @@
         </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> <span data-i18n="switch.label.rule"></span></a>
+        <a href="#" class="editor-button" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
     </div>
     <div class="form-row">
         <select id="node-input-checkall" style="width:100%; margin-right:5px;">
@@ -99,10 +99,10 @@
                 btwnField.append(" and ");
                 var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 50px;margin-left:2px;"}).appendTo(btwnField);
 
-                var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row);
+                var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
                 finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
 
-                var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan);
+                var deleteButton = $('<a/>',{href:"#",class:"editor-button", style:"margin-left: 5px;"}).appendTo(finalspan);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
 
                 selectField.change(function() {
@@ -171,7 +171,7 @@
                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
                 $("#node-input-rule-container-div").css("height",height+"px");
             };
-            
+
             $( "#node-input-rule-container" ).sortable({
                 axis: "y",
                 update: function( event, ui ) {

nodes/core/logic/15-change.html

@@ -28,7 +28,7 @@
         </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> <span data-i18n="change.label.rule"></span></a>
+        <a href="#" class="editor-button" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
     </div>
 </script>
 
@@ -101,12 +101,12 @@
             var regex = this._("change.label.regex");
             if (this.reg === null) { $("#node-input-reg").prop('checked', true); }
             $("#node-input-action").change();
-            
+
             function generateRule(rule) {
                 var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
-                
+
                 var row1 = $('<div/>').appendTo(container);
-                
+
                 var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
                 var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
 
@@ -115,36 +115,36 @@
                 for (var i=0;i<3;i++) {
                     selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
                 }
-                
+
                 $('<div/>',{style:"display:inline-block; width: 50px; text-align: right;"}).text("msg.").appendTo(row1);
                 var propertyName = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-name",type:"text"}).appendTo(row1);
 
-                
+
-                var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row1);
+                var finalspan = $('<span/>',{style:"float: right; margin-right: 10px;"}).appendTo(row1);
-                var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan);
+                var deleteButton = $('<a/>',{href:"#",class:"editor-button", style:"margin-left: 5px;"}).appendTo(finalspan);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
 
-                
+
                 $('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(to).appendTo(row2);
                 var propertyValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-value",type:"text"}).appendTo(row2);
-                
+
                 var row3_1 = $('<div/>').appendTo(row3);
                 $('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(search).appendTo(row3_1);
                 var fromValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-search-value",type:"text"}).appendTo(row3_1);
-                
+
                 var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
                 $('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(replace).appendTo(row3_2);
                 var toValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-replace-value",type:"text"}).appendTo(row3_2);
-                
+
                 var row3_3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
                 var id = "node-input-rule-property-regex-"+Math.floor(Math.random()*10000);
                 var useRegExp = $('<input/>',{id:id,class:"node-input-rule-property-re",type:"checkbox", style:"margin-left: 150px; margin-right: 10px; display: inline-block; width: auto; vertical-align: top;"}).appendTo(row3_3);
                 $('<label/>',{for:id,style:"width: auto;"}).text(regex).appendTo(row3_3);
-                
+
 
                 selectField.change(function() {
                     var type = $(this).val();
-                    
+
                     if (type == "set") {
                         row2.show();
                         row3.hide();
@@ -162,7 +162,7 @@
                         $(this).remove();
                     });
                 });
-                
+
                 selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
                 propertyName.val(rule.p);
                 propertyValue.val(rule.to);
@@ -170,19 +170,19 @@
                 toValue.val(rule.to);
                 useRegExp.prop('checked', rule.re);
                 selectField.change();
-                
+
                 $("#node-input-rule-container").append(container);
             }
             $("#node-input-add-rule").click(function() {
                 generateRule({t:"replace",p:"payload"});
             });
-            
+
             if (!this.rules) {
                 var rule = {
                     t:(this.action=="replace"?"set":this.action),
                     p:this.property
                 }
-                
+
                 if (rule.t === "set") {
                     rule.to = this.to;
                 } else if (rule.t === "change") {
@@ -190,20 +190,20 @@
                     rule.to = this.to;
                     rule.re = this.reg;
                 }
-                
+
                 delete this.to;
                 delete this.from;
                 delete this.reg;
                 delete this.action;
                 delete this.property;
-                
+
                 this.rules = [rule];
             }
-            
+
             for (var i=0;i<this.rules.length;i++) {
                 generateRule(this.rules[i]);
             }
-            
+
             function changeDialogResize() {
                 var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
                 var height = $("#dialog-form").height();