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
No known key found for this signature in database
GPG Key ID: E1E048B63AC5AC2B
3 changed files with 41 additions and 15 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

@ -442,7 +442,7 @@
"addNewConfig": "Add new __type__ config node", "addNewConfig": "Add new __type__ config node",
"editNode": "Edit __type__ node", "editNode": "Edit __type__ node",
"editConfig": "Edit __type__ config node", "editConfig": "Edit __type__ config node",
"addNewType": "Add new __type__...", "addNewType": "Please add new __type__...",
"nodeProperties": "node properties", "nodeProperties": "node properties",
"label": "Label", "label": "Label",
"color": "Color", "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__", "addNewConfig": "Ajouter un nouveau noeud de configuration __type__",
"editNode": "Modifier le noeud __type__", "editNode": "Modifier le noeud __type__",
"editConfig": "Modifier le noeud de configuration __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", "nodeProperties": "Propriétés du noeud",
"label": "Étiquette", "label": "Étiquette",
"color": "Couleur", "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] nodeValue = node[property]
} }
const buttonId = `${prefix}-lookup-${property}` const addBtnId = `${prefix}-add-${property}`;
const selectId = prefix + '-' + property const editBtnId = `${prefix}-lookup-${property}`;
const selectId = prefix + '-' + property;
const input = $(`#${selectId}`); const input = $(`#${selectId}`);
if (input.length === 0) { if (input.length === 0) {
return; return;
@ -365,40 +366,62 @@ RED.editor = (function() {
select.css({ select.css({
'flex-grow': 1 'flex-grow': 1
}); });
updateConfigNodeSelect(property, type, nodeValue, prefix, filter); updateConfigNodeSelect(property, type, nodeValue, prefix, filter);
const disableButton = function(disabled) {
btn.prop( "disabled", !!disabled)
btn.toggleClass("disabled", !!disabled)
}
// create the edit button // 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" }) .css({ "margin-left": "10px" })
.appendTo(outerWrap); .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 // 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") 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 (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); showEditConfigNodeDialog(property, type, selectedOpt.val(), prefix, node);
e.preventDefault(); e.preventDefault();
}); });
// dont permit the user to click the button if the selected option is an env var // dont permit the user to click the button if the selected option is an env var
select.on("change", function () { select.on("change", function () {
const selectedOpt = select.find(":selected") const selectedOpt = select.find(":selected");
const optionsLength = select.find("option").length;
if (selectedOpt?.data('env')) { 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 { } else {
disableButton(false) disableButton(addButton, false);
disableButton(editButton, false);
} }
}); });
var label = ""; var label = "";
var configNode = RED.nodes.node(nodeValue); var configNode = RED.nodes.node(nodeValue);
if (configNode) { if (configNode) {
label = RED.utils.getNodeLabel(configNode, configNode.id); label = RED.utils.getNodeLabel(configNode, configNode.id);
} }
input.val(label); 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); window.setTimeout(function() { select.trigger("change");},50);
} }
} }