diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index 1310f6cbb..fb39ee2e3 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -518,9 +518,8 @@ RED.editor = (function() { return title; } - function buildEditForm(tray,formId,type,ns) { - var trayBody = tray.find('.editor-tray-body'); - var dialogForm = $('
').appendTo(trayBody); + function buildEditForm(container,formId,type,ns) { + var dialogForm = $('
').appendTo(container); dialogForm.html($("script[data-template-name='"+type+"']").html()); ns = ns||"node-red"; dialogForm.find('[data-i18n]').each(function() { @@ -773,6 +772,7 @@ RED.editor = (function() { ], resize: function(dimensions) { editTrayWidthCache[type] = dimensions.width; + $(".editor-tray-content").height(dimensions.height - 78); if (editing_node && editing_node._def.oneditresize) { var form = $("#dialog-form"); try { @@ -783,6 +783,64 @@ RED.editor = (function() { } }, open: function(tray) { + var trayFooter = tray.find(".editor-tray-footer"); + var trayBody = tray.find('.editor-tray-body'); + var editFormBody = tray.find('.editor-tray-body'); + + var buildThing = function(el) { + var icon = el.find(".palette-header > i"); + var body = el.find(".editor-tray-content"); + var result = { + el:el, + body:body, + expand: function() { + icon.addClass("expanded"); + body.slideDown(); + }, + collapse: function() { + icon.removeClass("expanded"); + body.slideUp(); + }, + toggle: function() { + if (icon.hasClass("expanded")) { + result.collapse(); + return false; + } else { + result.expand(); + return true; + } + } + } + return result; + } + + var nodePropertiesSection = buildThing($('
'+ + '
node properties
'+ + '
'+ + '
').appendTo(trayBody)); + + var portLabelsSection = buildThing($('
'+ + '
port labels
'+ + '
'+ + '
').appendTo(trayBody)); + + portLabelsSection.el.find(".palette-header").click(function(el) { + var res = portLabelsSection.toggle(); + if (res) { + nodePropertiesSection.collapse(); + } else { + nodePropertiesSection.expand(); + } + }); + nodePropertiesSection.el.find(".palette-header").click(function(el) { + var res = nodePropertiesSection.toggle(); + if (res) { + portLabelsSection.collapse(); + } else { + portLabelsSection.expand(); + } + }); + if (editing_node) { RED.sidebar.info.refresh(editing_node); } @@ -792,7 +850,7 @@ RED.editor = (function() { } else { ns = node._def.set.id; } - var dialogForm = buildEditForm(tray,"dialog-form",type,ns); + var dialogForm = buildEditForm(nodePropertiesSection.body,"dialog-form",type,ns); prepareEditDialog(node,node._def,"node-input"); dialogForm.i18n(); }, @@ -892,7 +950,7 @@ RED.editor = (function() { } trayFooter.append(''); - var dialogForm = buildEditForm(tray,"node-config-dialog-edit-form",type,ns); + var dialogForm = buildEditForm(tray.find('.editor-tray-body'),"node-config-dialog-edit-form",type,ns); prepareEditDialog(editing_config_node,node_def,"node-config-input"); if (editing_config_node._def.exclusive) { @@ -1317,7 +1375,7 @@ RED.editor = (function() { if (editing_node) { RED.sidebar.info.refresh(editing_node); } - var dialogForm = buildEditForm(tray,"dialog-form","subflow-template"); + var dialogForm = buildEditForm(tray.find('.editor-tray-body'),"dialog-form","subflow-template"); subflowEditor = RED.editor.createEditor({ id: 'subflow-input-info-editor', mode: 'ace/mode/markdown', @@ -1398,7 +1456,7 @@ RED.editor = (function() { }, open: function(tray) { var trayBody = tray.find('.editor-tray-body'); - var dialogForm = buildEditForm(tray,'dialog-form','_expression','editor'); + var dialogForm = buildEditForm(tray.find('.editor-tray-body'),'dialog-form','_expression','editor'); var funcSelect = $("#node-input-expression-func"); Object.keys(jsonata.functions).forEach(function(f) { funcSelect.append($("").val(f).text(f)); diff --git a/editor/js/ui/tray.js b/editor/js/ui/tray.js index 8ba3d4e97..38760ef7c 100644 --- a/editor/js/ui/tray.js +++ b/editor/js/ui/tray.js @@ -189,7 +189,7 @@ RED.tray = (function() { if (stack.length > 0) { var tray = stack[stack.length-1]; var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight(); - tray.body.height(trayHeight-40); + tray.body.height(trayHeight); if (tray.width > $("#editor-stack").position().left-8) { tray.width = $("#editor-stack").position().left-8; tray.tray.width(tray.width); @@ -200,7 +200,7 @@ RED.tray = (function() { // tray.body.parent().width(tray.width); } if (tray.options.resize) { - tray.options.resize({width:tray.width}); + tray.options.resize({width:tray.width, height:trayHeight}); } } } diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss index 404c3c832..3ed342195 100644 --- a/editor/sass/editor.scss +++ b/editor/sass/editor.scss @@ -46,7 +46,12 @@ overflow: auto; } .editor-tray-body { - margin: 20px; + form { + margin: 20px; + } +} +.editor-tray-content { + overflow: auto; } .editor-tray-header { @include disable-selection; @@ -65,6 +70,13 @@ .editor-tray-footer { @include component-footer; height: 35px; + + button { + @include editor-button; + padding: 3px 7px; + font-size: 11px; + } + } .editor-tray-toolbar { @@ -72,48 +84,9 @@ padding: 6px; button { - @include workspace-button; - font-size: 14px; - padding: 6px 14px; - margin-right: 8px; - color: $editor-button-color !important; - background: $editor-button-background; - - &.primary { - border-color: $editor-button-background-primary; - color: $editor-button-color-primary !important; - background: $editor-button-background-primary; - &.disabled, &.ui-state-disabled { - background: none; - color: $editor-button-color !important; - border-color: $form-input-border-color; - } - &:not(.disabled):not(.ui-button-disabled):hover { - border-color: $editor-button-background-primary-hover; - background: $editor-button-background-primary-hover; - color: $editor-button-color-primary !important; - } - } - &:not(.disabled):hover { - //color: $editor-button-color; - } - &.disabled { - background: none; - } - &.disabled:focus { - outline: none; - } - - - &.leftButton { - float: left; - margin-top: 1px; - } - &:not(.leftButton):not(:last-child) { - margin-right: 16px; - } - &.ui-state-disabled { - opacity: 1; + @include editor-button; + &.toggle { + @include workspace-button-toggle; } } } @@ -179,7 +152,6 @@ .dialog-form,#dialog-form, #dialog-config-form { - margin: 0; height: 100%; } diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss index 1e303e0c2..9896cb102 100644 --- a/editor/sass/mixins.scss +++ b/editor/sass/mixins.scss @@ -108,7 +108,51 @@ color: $workspace-button-toggle-color-disabled !important; } } +@mixin editor-button { + @include workspace-button; + font-size: 14px; + padding: 6px 14px; + margin-right: 8px; + color: $editor-button-color !important; + background: $editor-button-background; + &.primary { + border-color: $editor-button-background-primary; + color: $editor-button-color-primary !important; + background: $editor-button-background-primary; + &.disabled, &.ui-state-disabled { + background: none; + color: $editor-button-color !important; + border-color: $form-input-border-color; + } + &:not(.disabled):not(.ui-button-disabled):hover { + border-color: $editor-button-background-primary-hover; + background: $editor-button-background-primary-hover; + color: $editor-button-color-primary !important; + } + } + &:not(.disabled):hover { + //color: $editor-button-color; + } + &.disabled { + background: none; + } + &.disabled:focus { + outline: none; + } + + + &.leftButton { + float: left; + margin-top: 1px; + } + &:not(.leftButton):not(:last-child) { + margin-right: 16px; + } + &.ui-state-disabled { + opacity: 1; + } +} @mixin component-footer { border-top: 1px solid $primary-border-color; diff --git a/nodes/core/core/80-function.html b/nodes/core/core/80-function.html index ac997fe3d..c44e68a5a 100644 --- a/nodes/core/core/80-function.html +++ b/nodes/core/core/80-function.html @@ -77,7 +77,9 @@ noerr: {value:0,required:true,validate:function(v){ return ((!v) || (v === 0)) ? true : false; }} }, inputs:1, + inputLabels: [], outputs:1, + outputLabels: [], icon: "function.png", label: function() { return this.name;