frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve editor dialog auto-sizing

Browse Source
This commit is contained in:
Nick O'Leary
2015-03-09 20:41:57 +00:00
parent 0f3cc3196c
commit 06bf710515
2 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/red/ui/editor.js
View File

@@ -130,7 +130,8 @@ RED.editor = (function() {
modal: true, modal: true,
autoOpen: false, autoOpen: false,
closeOnEscape: false, closeOnEscape: false,
width: 500, minWidth: 500,
width: 'auto',
buttons: [ buttons: [
{ {
id: "node-dialog-ok", id: "node-dialog-ok",
@@ -273,6 +274,10 @@ RED.editor = (function() {
}, },
open: function(e) { open: function(e) {
$(this).parent().find(".ui-dialog-titlebar-close").hide(); $(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(); RED.keyboard.disable();
if (editing_node) { if (editing_node) {
var size = $(this).dialog('option','sizeCache-'+editing_node.type); var size = $(this).dialog('option','sizeCache-'+editing_node.type);
@@ -289,7 +294,7 @@ RED.editor = (function() {
RED.view.state(RED.state.DEFAULT); RED.view.state(RED.state.DEFAULT);
} }
$( this ).dialog('option','height','auto'); $( this ).dialog('option','height','auto');
$( this ).dialog('option','width','500'); $( this ).dialog('option','width','auto');
if (editing_node) { if (editing_node) {
RED.sidebar.info.refresh(editing_node); RED.sidebar.info.refresh(editing_node);
} }
@@ -610,7 +615,8 @@ RED.editor = (function() {
$( "#node-config-dialog" ).dialog({ $( "#node-config-dialog" ).dialog({
modal: true, modal: true,
autoOpen: false, autoOpen: false,
width: 500, minWidth: 500,
width: 'auto',
closeOnEscape: false, closeOnEscape: false,
buttons: [ buttons: [
{ {
@@ -689,13 +695,19 @@ RED.editor = (function() {
], ],
resize: function(e,ui) { resize: function(e,ui) {
}, },
open: function(e,ui) { open: function(e) {
$(this).parent().find(".ui-dialog-titlebar-close").hide(); $(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) { if (RED.view.state() != RED.state.EDITING) {
RED.keyboard.disable(); RED.keyboard.disable();
} }
}, },
close: function(e) { close: function(e) {
$(this).dialog('option','width','auto');
$(this).dialog('option','height','auto');
$("#dialog-config-form").html(""); $("#dialog-config-form").html("");
if (RED.view.state() != RED.state.EDITING) { if (RED.view.state() != RED.state.EDITING) {
RED.keyboard.enable(); RED.keyboard.enable();
@@ -708,7 +720,8 @@ RED.editor = (function() {
modal: true, modal: true,
autoOpen: false, autoOpen: false,
closeOnEscape: false, closeOnEscape: false,
width: 500, minWidth: 500,
width: 'auto',
buttons: [ buttons: [
{ {
id: "subflow-dialog-ok", 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(); $(this).parent().find(".ui-dialog-titlebar-close").hide();
RED.keyboard.disable(); RED.keyboard.disable();
var minWidth = $(this).dialog('option','minWidth');
if ($(this).outerWidth() < minWidth) {
$(this).dialog('option','width',minWidth);
}
}, },
close: function(e) { close: function(e) {
RED.keyboard.enable(); RED.keyboard.enable();

5
public/style.css
View File

@@ -752,10 +752,12 @@ g.link_unknown path.link_line {
margin-bottom: 5px; margin-bottom: 5px;
} }
#dialog-form { #dialog-form, #dialog-config-form {
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
.form-row { .form-row {
clear: both; clear: both;
margin-bottom:10px; margin-bottom:10px;
@@ -788,6 +790,7 @@ button.input-append-right {
padding: 8px; padding: 8px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #999; border: 1px solid #999;
max-width: 450px;
} }
.form-tips code { .form-tips code {
border: none; border: none;