Skip to content

Commit d7c516a

Browse files
knollearyknolleary
committed
Port label editor starting point
1 parent 5083897 commit d7c516a

5 files changed

Lines changed: 129 additions & 53 deletions

File tree

‎editor/js/ui/editor.js‎

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -518,9 +518,8 @@ RED.editor = (function() {
518518
return title;
519519
}
520520

521-
function buildEditForm(tray,formId,type,ns) {
522-
var trayBody = tray.find('.editor-tray-body');
523-
var dialogForm = $('<form id="'+formId+'" class="form-horizontal" autocomplete="off"></form>').appendTo(trayBody);
521+
function buildEditForm(container,formId,type,ns) {
522+
var dialogForm = $('<form id="'+formId+'" class="form-horizontal" autocomplete="off"></form>').appendTo(container);
524523
dialogForm.html($("script[data-template-name='"+type+"']").html());
525524
ns = ns||"node-red";
526525
dialogForm.find('[data-i18n]').each(function() {
@@ -773,6 +772,7 @@ RED.editor = (function() {
773772
],
774773
resize: function(dimensions) {
775774
editTrayWidthCache[type] = dimensions.width;
775+
$(".editor-tray-content").height(dimensions.height - 78);
776776
if (editing_node && editing_node._def.oneditresize) {
777777
var form = $("#dialog-form");
778778
try {
@@ -783,6 +783,64 @@ RED.editor = (function() {
783783
}
784784
},
785785
open: function(tray) {
786+
var trayFooter = tray.find(".editor-tray-footer");
787+
var trayBody = tray.find('.editor-tray-body');
788+
var editFormBody = tray.find('.editor-tray-body');
789+
790+
var buildThing = function(el) {
791+
var icon = el.find(".palette-header > i");
792+
var body = el.find(".editor-tray-content");
793+
var result = {
794+
el:el,
795+
body:body,
796+
expand: function() {
797+
icon.addClass("expanded");
798+
body.slideDown();
799+
},
800+
collapse: function() {
801+
icon.removeClass("expanded");
802+
body.slideUp();
803+
},
804+
toggle: function() {
805+
if (icon.hasClass("expanded")) {
806+
result.collapse();
807+
return false;
808+
} else {
809+
result.expand();
810+
return true;
811+
}
812+
}
813+
}
814+
return result;
815+
}
816+
817+
var nodePropertiesSection = buildThing($('<div class="palette-category">'+
818+
'<div class="palette-header"><i class="fa fa-angle-down expanded"></i><span>node properties</span></div>'+
819+
'<div class="editor-tray-content"></div>'+
820+
'</div>').appendTo(trayBody));
821+
822+
var portLabelsSection = buildThing($('<div class="palette-category">'+
823+
'<div class="palette-header"><i class="fa fa-angle-down"></i><span>port labels</span></div>'+
824+
'<div class="editor-tray-content hide"></div>'+
825+
'</div>').appendTo(trayBody));
826+
827+
portLabelsSection.el.find(".palette-header").click(function(el) {
828+
var res = portLabelsSection.toggle();
829+
if (res) {
830+
nodePropertiesSection.collapse();
831+
} else {
832+
nodePropertiesSection.expand();
833+
}
834+
});
835+
nodePropertiesSection.el.find(".palette-header").click(function(el) {
836+
var res = nodePropertiesSection.toggle();
837+
if (res) {
838+
portLabelsSection.collapse();
839+
} else {
840+
portLabelsSection.expand();
841+
}
842+
});
843+
786844
if (editing_node) {
787845
RED.sidebar.info.refresh(editing_node);
788846
}
@@ -792,7 +850,7 @@ RED.editor = (function() {
792850
} else {
793851
ns = node._def.set.id;
794852
}
795-
var dialogForm = buildEditForm(tray,"dialog-form",type,ns);
853+
var dialogForm = buildEditForm(nodePropertiesSection.body,"dialog-form",type,ns);
796854
prepareEditDialog(node,node._def,"node-input");
797855
dialogForm.i18n();
798856
},
@@ -892,7 +950,7 @@ RED.editor = (function() {
892950
}
893951
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>');
894952

895-
var dialogForm = buildEditForm(tray,"node-config-dialog-edit-form",type,ns);
953+
var dialogForm = buildEditForm(tray.find('.editor-tray-body'),"node-config-dialog-edit-form",type,ns);
896954

897955
prepareEditDialog(editing_config_node,node_def,"node-config-input");
898956
if (editing_config_node._def.exclusive) {
@@ -1317,7 +1375,7 @@ RED.editor = (function() {
13171375
if (editing_node) {
13181376
RED.sidebar.info.refresh(editing_node);
13191377
}
1320-
var dialogForm = buildEditForm(tray,"dialog-form","subflow-template");
1378+
var dialogForm = buildEditForm(tray.find('.editor-tray-body'),"dialog-form","subflow-template");
13211379
subflowEditor = RED.editor.createEditor({
13221380
id: 'subflow-input-info-editor',
13231381
mode: 'ace/mode/markdown',
@@ -1398,7 +1456,7 @@ RED.editor = (function() {
13981456
},
13991457
open: function(tray) {
14001458
var trayBody = tray.find('.editor-tray-body');
1401-
var dialogForm = buildEditForm(tray,'dialog-form','_expression','editor');
1459+
var dialogForm = buildEditForm(tray.find('.editor-tray-body'),'dialog-form','_expression','editor');
14021460
var funcSelect = $("#node-input-expression-func");
14031461
Object.keys(jsonata.functions).forEach(function(f) {
14041462
funcSelect.append($("<option></option>").val(f).text(f));

‎editor/js/ui/tray.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ RED.tray = (function() {
189189
if (stack.length > 0) {
190190
var tray = stack[stack.length-1];
191191
var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
192-
tray.body.height(trayHeight-40);
192+
tray.body.height(trayHeight);
193193
if (tray.width > $("#editor-stack").position().left-8) {
194194
tray.width = $("#editor-stack").position().left-8;
195195
tray.tray.width(tray.width);
@@ -200,7 +200,7 @@ RED.tray = (function() {
200200
// tray.body.parent().width(tray.width);
201201
}
202202
if (tray.options.resize) {
203-
tray.options.resize({width:tray.width});
203+
tray.options.resize({width:tray.width, height:trayHeight});
204204
}
205205
}
206206
}

‎editor/sass/editor.scss‎

Lines changed: 16 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,12 @@
4646
overflow: auto;
4747
}
4848
.editor-tray-body {
49-
margin: 20px;
49+
form {
50+
margin: 20px;
51+
}
52+
}
53+
.editor-tray-content {
54+
overflow: auto;
5055
}
5156
.editor-tray-header {
5257
@include disable-selection;
@@ -65,55 +70,23 @@
6570
.editor-tray-footer {
6671
@include component-footer;
6772
height: 35px;
73+
74+
button {
75+
@include editor-button;
76+
padding: 3px 7px;
77+
font-size: 11px;
78+
}
79+
6880
}
6981

7082
.editor-tray-toolbar {
7183
text-align: right;
7284
padding: 6px;
7385

7486
button {
75-
@include workspace-button;
76-
font-size: 14px;
77-
padding: 6px 14px;
78-
margin-right: 8px;
79-
color: $editor-button-color !important;
80-
background: $editor-button-background;
81-
82-
&.primary {
83-
border-color: $editor-button-background-primary;
84-
color: $editor-button-color-primary !important;
85-
background: $editor-button-background-primary;
86-
&.disabled, &.ui-state-disabled {
87-
background: none;
88-
color: $editor-button-color !important;
89-
border-color: $form-input-border-color;
90-
}
91-
&:not(.disabled):not(.ui-button-disabled):hover {
92-
border-color: $editor-button-background-primary-hover;
93-
background: $editor-button-background-primary-hover;
94-
color: $editor-button-color-primary !important;
95-
}
96-
}
97-
&:not(.disabled):hover {
98-
//color: $editor-button-color;
99-
}
100-
&.disabled {
101-
background: none;
102-
}
103-
&.disabled:focus {
104-
outline: none;
105-
}
106-
107-
108-
&.leftButton {
109-
float: left;
110-
margin-top: 1px;
111-
}
112-
&:not(.leftButton):not(:last-child) {
113-
margin-right: 16px;
114-
}
115-
&.ui-state-disabled {
116-
opacity: 1;
87+
@include editor-button;
88+
&.toggle {
89+
@include workspace-button-toggle;
11790
}
11891
}
11992
}
@@ -179,7 +152,6 @@
179152

180153

181154
.dialog-form,#dialog-form, #dialog-config-form {
182-
margin: 0;
183155
height: 100%;
184156
}
185157

‎editor/sass/mixins.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,51 @@
108108
color: $workspace-button-toggle-color-disabled !important;
109109
}
110110
}
111+
@mixin editor-button {
112+
@include workspace-button;
113+
font-size: 14px;
114+
padding: 6px 14px;
115+
margin-right: 8px;
116+
color: $editor-button-color !important;
117+
background: $editor-button-background;
118+
119+
&.primary {
120+
border-color: $editor-button-background-primary;
121+
color: $editor-button-color-primary !important;
122+
background: $editor-button-background-primary;
123+
&.disabled, &.ui-state-disabled {
124+
background: none;
125+
color: $editor-button-color !important;
126+
border-color: $form-input-border-color;
127+
}
128+
&:not(.disabled):not(.ui-button-disabled):hover {
129+
border-color: $editor-button-background-primary-hover;
130+
background: $editor-button-background-primary-hover;
131+
color: $editor-button-color-primary !important;
132+
}
133+
}
134+
&:not(.disabled):hover {
135+
//color: $editor-button-color;
136+
}
137+
&.disabled {
138+
background: none;
139+
}
140+
&.disabled:focus {
141+
outline: none;
142+
}
143+
111144

145+
&.leftButton {
146+
float: left;
147+
margin-top: 1px;
148+
}
149+
&:not(.leftButton):not(:last-child) {
150+
margin-right: 16px;
151+
}
152+
&.ui-state-disabled {
153+
opacity: 1;
154+
}
155+
}
112156

113157
@mixin component-footer {
114158
border-top: 1px solid $primary-border-color;

‎nodes/core/core/80-function.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ <h4>Sending messages</h4>
7777
noerr: {value:0,required:true,validate:function(v){ return ((!v) || (v === 0)) ? true : false; }}
7878
},
7979
inputs:1,
80+
inputLabels: [],
8081
outputs:1,
82+
outputLabels: [],
8183
icon: "function.png",
8284
label: function() {
8385
return this.name;

0 commit comments

Comments
 (0)