mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Port label editor starting point
This commit is contained in:
Nick O'Leary
parent
50838970ec
commit
d7c516ab00
@ -518,9 +518,8 @@ RED.editor = (function() {
|
||||
return title;
|
||||
}
|
||||
|
||||
function buildEditForm(tray,formId,type,ns) {
|
||||
var trayBody = tray.find('.editor-tray-body');
|
||||
var dialogForm = $('<form id="'+formId+'" class="form-horizontal" autocomplete="off"></form>').appendTo(trayBody);
|
||||
function buildEditForm(container,formId,type,ns) {
|
||||
var dialogForm = $('<form id="'+formId+'" class="form-horizontal" autocomplete="off"></form>').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($('<div class="palette-category">'+
|
||||
'<div class="palette-header"><i class="fa fa-angle-down expanded"></i><span>node properties</span></div>'+
|
||||
'<div class="editor-tray-content"></div>'+
|
||||
'</div>').appendTo(trayBody));
|
||||
|
||||
var portLabelsSection = buildThing($('<div class="palette-category">'+
|
||||
'<div class="palette-header"><i class="fa fa-angle-down"></i><span>port labels</span></div>'+
|
||||
'<div class="editor-tray-content hide"></div>'+
|
||||
'</div>').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('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
|
||||
|
||||
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($("<option></option>").val(f).text(f));
|
||||
|
||||
@ -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});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user