mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add node-select to typedInput
This commit is contained in:
parent
20cba6411b
commit
a71d4223ff
@ -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
BIN
packages/node_modules/@node-red/editor-client/src/images/typedInput/target.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 944 B |
@ -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) {
|
||||
|
@ -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
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
@ -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
|
||||
|
@ -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();
|
||||
|
@ -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();
|
||||
|
@ -18,7 +18,6 @@
|
||||
"ok": "OK"
|
||||
},
|
||||
"notification": {
|
||||
"selectNodesTarget": "Click nodes to select",
|
||||
"error": "<strong>Error</strong>: __message__",
|
||||
"errors": {
|
||||
"not-deployed": "node not deployed",
|
||||
|
Loading…
Reference in New Issue
Block a user