1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Rework function module screen

This commit is contained in:
Nick O'Leary 2021-07-14 20:23:01 +01:00
parent 7fd17b4ec0
commit cce6a47f11
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 65 additions and 49 deletions

View File

@ -7,36 +7,53 @@
padding: 0px; padding: 0px;
} }
#node-input-libs-container-row .red-ui-editableList-container li { #node-input-libs-container-row .red-ui-editableList-container li {
padding:5px; padding:0px;
} }
#node-input-libs-container-row .red-ui-editableList-item-remove { #node-input-libs-container-row .red-ui-editableList-item-remove {
right: 5px; right: 5px;
} }
#node-input-libs-container-row .red-ui-editableList-header {
display: flex;
background: var(--red-ui-tertiary-background);
padding-right: 75px;
}
#node-input-libs-container-row .red-ui-editableList-header > div {
flex-grow: 1;
}
.node-libs-entry { .node-libs-entry {
display: flex; display: flex;
} }
.node-libs-entry .node-input-libs-var, .node-libs-entry .red-ui-typedInput-container {
flex-grow: 1;
}
.node-libs-entry > code,.node-libs-entry > span {
line-height: 30px;
}
.node-libs-entry > input[type=text] {
border-radius: 0;
border-left: none;
border-top: none;
border-right: none;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 4px;
margin-bottom: 2px;
height: 26px;
}
.node-libs-entry > span > i { .node-libs-entry .red-ui-typedInput-container {
border-radius: 0;
border: none;
}
.node-libs-entry .red-ui-typedInput-type-select {
border-radius: 0 !important;
height: 34px;
}
.node-libs-entry > span > input[type=text] {
border-radius: 0;
border-top-color: var(--red-ui-form-background);
border-bottom-color: var(--red-ui-form-background);
border-right-color: var(--red-ui-form-background);
}
.node-libs-entry > span > input[type=text].input-error {
}
.node-libs-entry > span {
flex-grow: 1;
width: 50%;
position: relative;
}
.node-libs-entry span .node-input-libs-var, .node-libs-entry span .red-ui-typedInput-container {
width: 100%;
}
.node-libs-entry > span > span > i {
display: none; display: none;
} }
.node-libs-entry > span.input-error > i { .node-libs-entry > span > span.input-error > i {
display: inline; display: inline;
} }
@ -209,47 +226,24 @@
}) })
var libList = $("#node-input-libs-container").css('min-height','100px').css('min-width','450px').editableList({ var libList = $("#node-input-libs-container").css('min-height','100px').css('min-width','450px').editableList({
header: $('<div><div data-i18n="node-red:function.require.moduleName"></div><div data-i18n="node-red:function.require.importAs"></div></div>'),
addItem: function(container,i,opt) { addItem: function(container,i,opt) {
var parent = container.parent(); var parent = container.parent();
var row0 = $("<div/>").addClass("node-libs-entry").appendTo(container); var row0 = $("<div/>").addClass("node-libs-entry").appendTo(container);
var fieldWidth = "260px"; var fmoduleSpan = $("<span>").appendTo(row0);
$('<code>const </code>').appendTo(row0);
var fvar = $("<input/>", {
class: "node-input-libs-var red-ui-font-code",
placeholder: RED._("node-red:function.require.var"),
type: "text"
}).css({
width: "120px",
"margin-left": "5px"
}).appendTo(row0).val(opt.var);
var vnameWarning = $('<span style="display:inline-block; width: 16px;"><i class="fa fa-warning"></i></span>').appendTo(row0);
RED.popover.tooltip(vnameWarning.find("i"),function() {
var val = fvar.val();
if (invalidModuleVNames.indexOf(val) !== -1) {
return RED._("node-red:function.error.moduleNameReserved",{name:val})
} else {
return RED._("node-red:function.error.moduleNameError",{name:val})
}
})
$('<code> = require(</code>').appendTo(row0);
var fmodule = $("<input/>", { var fmodule = $("<input/>", {
class: "node-input-libs-val", class: "node-input-libs-val",
placeholder: RED._("node-red:function.require.module"), placeholder: RED._("node-red:function.require.module"),
type: "text" type: "text"
}).css({ }).css({
width: "180px", }).appendTo(fmoduleSpan).typedInput({
}).appendTo(row0).typedInput({
types: typedModules, types: typedModules,
default: usedModules.indexOf(opt.module) > -1 ? opt.module : "_custom_" default: usedModules.indexOf(opt.module) > -1 ? opt.module : "_custom_"
}); });
if (usedModules.indexOf(opt.module) === -1) { if (usedModules.indexOf(opt.module) === -1) {
fmodule.typedInput('value', opt.module); fmodule.typedInput('value', opt.module);
} }
var moduleWarning = $('<span style="position: absolute;right:2px;top:7px; display:inline-block; width: 16px;"><i class="fa fa-warning"></i></span>').appendTo(fmoduleSpan);
$('<code>)</code>').appendTo(row0);
var moduleWarning = $('<span style="display:inline-block; width: 16px;"><i class="fa fa-warning"></i></span>').appendTo(row0);
RED.popover.tooltip(moduleWarning.find("i"),function() { RED.popover.tooltip(moduleWarning.find("i"),function() {
var val = fmodule.typedInput("type"); var val = fmodule.typedInput("type");
if (val === "_custom_") { if (val === "_custom_") {
@ -264,6 +258,26 @@
} }
}) })
var fvarSpan = $("<span>").appendTo(row0);
var fvar = $("<input/>", {
class: "node-input-libs-var red-ui-font-code",
placeholder: RED._("node-red:function.require.var"),
type: "text"
}).css({
}).appendTo(fvarSpan).val(opt.var);
var vnameWarning = $('<span style="position: absolute; right:2px;top:7px;display:inline-block; width: 16px;"><i class="fa fa-warning"></i></span>').appendTo(fvarSpan);
RED.popover.tooltip(vnameWarning.find("i"),function() {
var val = fvar.val();
if (invalidModuleVNames.indexOf(val) !== -1) {
return RED._("node-red:function.error.moduleNameReserved",{name:val})
} else {
return RED._("node-red:function.error.moduleNameError",{name:val})
}
})
fvar.on("change keyup paste", function (e) { fvar.on("change keyup paste", function (e) {
var v = $(this).val().trim(); var v = $(this).val().trim();
if (v === "" || / /.test(v) || invalidModuleVNames.indexOf(v) !== -1) { if (v === "" || / /.test(v) || invalidModuleVNames.indexOf(v) !== -1) {
@ -280,7 +294,7 @@
if (val === "_custom_") { if (val === "_custom_") {
val = $(this).val(); val = $(this).val();
} }
var varName = val.trim().replace(/^@/,"").replace(/@.*$/,"").replace(/[-_/]./g, function(v) { return v[1].toUpperCase() }); var varName = val.trim().replace(/^@/,"").replace(/@.*$/,"").replace(/[-_/].?/g, function(v) { return v[1]?v[1].toUpperCase():"" });
fvar.val(varName); fvar.val(varName);
fvar.trigger("change"); fvar.trigger("change");

View File

@ -226,7 +226,9 @@
}, },
"require": { "require": {
"var": "variable", "var": "variable",
"module": "module" "module": "module",
"moduleName": "Module name",
"importAs": "Import as"
}, },
"error": { "error": {
"externalModuleNotAllowed": "Function node not allowed to load external modules", "externalModuleNotAllowed": "Function node not allowed to load external modules",