frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Separate the "add new config-node" option into a button

Browse Source
This commit is contained in:
GogoVega
2024-03-27 14:59:49 +01:00
parent 50baad9624
commit 65d8872cea
3 changed files with 41 additions and 15 deletions
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

@@ -442,7 +442,7 @@
"addNewConfig": "Add new __type__ config node",
"editNode": "Edit __type__ node",
"editConfig": "Edit __type__ config node",
"addNewType": "Add new __type__...",
"addNewType": "Please add new __type__...",
"nodeProperties": "node properties",
"label": "Label",
"color": "Color",

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

@@ -442,7 +442,7 @@
"addNewConfig": "Ajouter un nouveau noeud de configuration __type__",
"editNode": "Modifier le noeud __type__",
"editConfig": "Modifier le noeud de configuration __type__",
"addNewType": "Ajouter un nouveau __type__...",
"addNewType": "Veuillez ajouter un nouveau __type__...",
"nodeProperties": "Propriétés du noeud",
"label": "Étiquette",
"color": "Couleur",

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

@@ -341,8 +341,9 @@ RED.editor = (function() {
nodeValue = node[property]
}
const buttonId = `${prefix}-lookup-${property}`
const selectId = prefix + '-' + property
const addBtnId = `${prefix}-add-${property}`;
const editBtnId = `${prefix}-lookup-${property}`;
const selectId = prefix + '-' + property;
const input = $(`#${selectId}`);
if (input.length === 0) {
return;
@@ -365,40 +366,62 @@ RED.editor = (function() {
select.css({
'flex-grow': 1
});
updateConfigNodeSelect(property, type, nodeValue, prefix, filter);
const disableButton = function(disabled) {
btn.prop( "disabled", !!disabled)
btn.toggleClass("disabled", !!disabled)
}
// create the edit button
const btn = $('<a id="' + buttonId + '" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
const editButton = $('<a id="' + editBtnId + '" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
.css({ "margin-left": "10px" })
.appendTo(outerWrap);
// create the add button
const addButton = $('<a id="' + addBtnId + '-add" class="red-ui-button"><i class="fa fa-plus"></i></a>')
.css({ "margin-left": "10px" })
.appendTo(outerWrap);
const disableButton = function(button, disabled) {
$(button).prop("disabled", !!disabled)
$(button).toggleClass("disabled", !!disabled)
};
// add the click handler
btn.on("click", function (e) {
addButton.on("click", function (e) {
if (addButton.prop("disabled")) { return }
showEditConfigNodeDialog(property, type, "_ADD_", prefix, node);
e.preventDefault();
});
editButton.on("click", function (e) {
const selectedOpt = select.find(":selected")
if (selectedOpt.data('env')) { return } // don't show the dialog for env vars items (MVP. Future enhancement: lookup the env, if present, show the associated edit dialog)
if (btn.prop("disabled")) { return }
if (editButton.prop("disabled")) { return }
showEditConfigNodeDialog(property, type, selectedOpt.val(), prefix, node);
e.preventDefault();
});
// dont permit the user to click the button if the selected option is an env var
select.on("change", function () {
const selectedOpt = select.find(":selected")
const selectedOpt = select.find(":selected");
const optionsLength = select.find("option").length;
if (selectedOpt?.data('env')) {
disableButton(true)
disableButton(addButton, true);
disableButton(editButton, true);
// disable the edit button if no options available
} else if (optionsLength === 1 && selectedOpt.val() === "_ADD_") {
disableButton(addButton, false);
disableButton(editButton, true);
} else {
disableButton(false)
disableButton(addButton, false);
disableButton(editButton, false);
}
});
var label = "";
var configNode = RED.nodes.node(nodeValue);
if (configNode) {
label = RED.utils.getNodeLabel(configNode, configNode.id);
}
input.val(label);
}
@@ -892,7 +915,10 @@ RED.editor = (function() {
}
}
select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:label})+'</option>');
if (!configNodes.length) {
select.append('<option value="_ADD_" selected>' + RED._("editor.addNewType", { type: label }) + '</option>');
}
window.setTimeout(function() { select.trigger("change");},50);
}
}