frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add node-select to typedInput

This commit is contained in:
Nick O'Leary 2019-05-23 23:38:42 +01:00
parent 20cba6411b
commit a71d4223ff
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
8 changed files with 113 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -29,7 +29,7 @@
"enabled": "Enabled",
"disabled":"Disabled",
"info": "Description",
"selectNodes": "Select nodes"
"selectNodes": "Click nodes to select"
},
"menu": {
"label": {

BIN
packages/node_modules/@node-red/editor-client/src/images/typedInput/target.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 944 B

70
packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js vendored
View File

@ -109,6 +109,55 @@
value: "env",
label: "env variable",
icon: "red/images/typedInput/env.png"
},
node: {
value: "node",
label: "node",
icon: "red/images/typedInput/target.png",
valueLabel: function(container,value) {
var node = RED.nodes.node(value);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).css({
"margin-top": "2px",
"margin-left": "3px"
}).appendTo(container);
var nodeLabel = $('<span>').css({
"line-height": "32px",
"margin-left": "6px"
}).appendTo(container);
if (node) {
var colour = RED.utils.getNodeColor(node.type,node._def);
var icon_url = RED.utils.getNodeIcon(node._def,node);
if (node.type === 'tab') {
colour = "#C0DEED";
}
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
var l = RED.utils.getNodeLabel(node,node.id);
nodeLabel.text(l);
} else {
nodeDiv.css({
'backgroundColor': '#eee',
'border-style' : 'dashed'
});
}
},
expand: function() {
var that = this;
RED.tray.hide();
RED.view.selectNodes({
single: true,
selected: [that.value()],
onselect: function(selection) {
that.value(selection.id);
RED.tray.show();
},
oncancel: function() {
RED.tray.show();
}
})
}
}
};
var nlsd = false;
@ -212,6 +261,8 @@
that.uiSelect.addClass('red-ui-typedInput-focus');
})
this.valueLabelContainer = $('<div class="red-ui-typedInput-value-label">').appendTo(this.uiSelect)
// explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
@ -394,10 +445,13 @@
this.selectTrigger.removeClass("red-ui-typedInput-full-width");
var labelWidth = this._getLabelWidth(this.selectTrigger);
this.elementDiv.css('left',labelWidth+"px");
this.valueLabelContainer.css('left',labelWidth+"px");
if (this.optionExpandButton.is(":visible")) {
this.elementDiv.css('right',"22px");
this.valueLabelContainer.css('right',"22px");
} else {
this.elementDiv.css('right','0');
this.valueLabelContainer.css('right','0');
this.input.css({
'border-top-right-radius': '4px',
'border-bottom-right-radius': '4px'
@ -520,8 +574,13 @@
selectedOption = {value:""}
}
this._updateOptionSelectLabel(selectedOption)
} else {
this.input.val(value);
}
if (this.typeMap[this.propertyType].valueLabel) {
this.valueLabelContainer.empty();
this.typeMap[this.propertyType].valueLabel.call(this,this.valueLabelContainer,value);
}
this.input.val(value);
this.input.trigger('change',this.type(),value);
}
},
@ -566,8 +625,10 @@
this.optionSelectTrigger.show();
if (!opt.hasValue) {
this.elementDiv.hide();
this.valueLabelContainer.hide();
} else {
this.elementDiv.show();
this.valueLabelContainer.hide();
}
this.activeOptions = {};
opt.options.forEach(function(o) {
@ -655,11 +716,18 @@
this.oldValue = this.input.val();
this.input.val("");
this.elementDiv.hide();
this.valueLabelContainer.hide();
} else if (opt.valueLabel) {
this.valueLabelContainer.show();
this.valueLabelContainer.empty();
opt.valueLabel.call(this,this.valueLabelContainer,this.input.val());
this.elementDiv.hide();
} else {
if (this.oldValue !== undefined) {
this.input.val(this.oldValue);
delete this.oldValue;
}
this.valueLabelContainer.hide();
this.elementDiv.show();
}
if (this.optionExpandButton) {

59
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -1386,6 +1386,9 @@ RED.view = (function() {
}
function selectAll() {
if (mouse_mode === RED.state.SELECTING_NODE && selectNodesOptions.single) {
return;
}
RED.nodes.eachNode(function(n) {
if (n.z == RED.workspaces.active()) {
if (mouse_mode === RED.state.SELECTING_NODE) {
@ -2269,6 +2272,10 @@ RED.view = (function() {
return;
} else if (mouse_mode === RED.state.SELECTING_NODE) {
d3.event.stopPropagation();
if (selectNodesOptions.single) {
selectNodesOptions.done(d);
return;
}
if (d.selected) {
d.selected = false;
for (i=0;i<moving_set.length;i+=1) {
@ -3677,10 +3684,10 @@ RED.view = (function() {
$("#red-ui-header-shade").show();
$("#red-ui-workspace").addClass("red-ui-workspace-select-mode");
mouse_mode = RED.state.SELECTING_NODE;
clearSelection();
if (options.selected) {
console.log(options.selected);
options.selected.forEach(function(id) {
var n = RED.nodes.node(id);
if (n) {
@ -3702,35 +3709,37 @@ RED.view = (function() {
resetMouseVars();
notification.close();
}
selectNodesOptions.done = function(selection) {
closeNotification();
if (selectNodesOptions.onselect) {
selectNodesOptions.onselect(selection);
}
}
var buttons = [{
text: RED._("common.label.cancel"),
click: function(e) {
closeNotification();
if (selectNodesOptions.oncancel) {
selectNodesOptions.oncancel();
}
}
}];
if (!selectNodesOptions.single) {
buttons.push({
text: RED._("common.label.done"),
class: "primary",
click: function(e) {
var selection = moving_set.map(function(n) { return n.n;});
selectNodesOptions(selection);
}
});
}
var notification = RED.notify(selectNodesOptions.prompt || RED._("workspace.selectNodes"),{
modal: false,
fixed: true,
type: "compact",
buttons: [
{
text: RED._("common.label.cancel"),
click: function(e) {
closeNotification();
if (selectNodesOptions.oncancel) {
selectNodesOptions.oncancel();
}
}
},
{
text: RED._("common.label.done"),
class: "primary",
click: function(e) {
var selection = moving_set.map(function(n) { return n.n;});
closeNotification();
if (selectNodesOptions.onselect) {
selectNodesOptions.onselect(selection);
}
}
}
]
buttons: buttons
})
}
};
})();

9
packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss vendored
View File

@ -48,7 +48,16 @@
&.red-ui-typedInput-focus:not(.input-error) {
border-color: $form-input-focus-color !important;
}
.red-ui-typedInput-value-label {
position: absolute;
display: inline-block;
height: 32px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button.red-ui-typedInput-type-select,
button.red-ui-typedInput-option-expand,
button.red-ui-typedInput-option-trigger

1
packages/node_modules/@node-red/nodes/core/core/25-catch.html vendored
View File

@ -115,7 +115,6 @@
var preselected = dirList.treeList('selected').map(function(n) {return n.node.id});
RED.tray.hide();
RED.view.selectNodes({
prompt: RED._("node-red:common.notification.selectNodesTarget"),
selected: preselected,
onselect: function(selection) {
RED.tray.show();

1
packages/node_modules/@node-red/nodes/core/core/25-status.html vendored
View File

@ -103,7 +103,6 @@
var preselected = dirList.treeList('selected').map(function(n) {return n.node.id});
RED.tray.hide();
RED.view.selectNodes({
prompt: RED._("node-red:common.notification.selectNodesTarget"),
selected: preselected,
onselect: function(selection) {
RED.tray.show();

1
packages/node_modules/@node-red/nodes/locales/en-US/messages.json vendored
View File

@ -18,7 +18,6 @@
"ok": "OK"
},
"notification": {
"selectNodesTarget": "Click nodes to select",
"error": "<strong>Error</strong>: __message__",
"errors": {
"not-deployed": "node not deployed",