Rework function module screen

packages/node_modules/@node-red/nodes/core/function/10-function.html

@@ -7,36 +7,53 @@
             padding: 0px;
         }
         #node-input-libs-container-row .red-ui-editableList-container li {
-            padding:5px;
+            padding:0px;
         }
         #node-input-libs-container-row .red-ui-editableList-item-remove {
             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 {
             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;
         }
-        .node-libs-entry > span.input-error > i {
+        .node-libs-entry > span > span.input-error > i {
             display: inline;
         }
 
@@ -209,47 +226,24 @@
         })
 
         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) {
                 var parent = container.parent();
                 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/>", {
                     class: "node-input-libs-val",
                     placeholder: RED._("node-red:function.require.module"),
                     type: "text"
                 }).css({
-                    width: "180px",
+                }).appendTo(fmoduleSpan).typedInput({
-                }).appendTo(row0).typedInput({
                     types: typedModules,
                     default: usedModules.indexOf(opt.module) > -1 ? opt.module : "_custom_"
                 });
                 if (usedModules.indexOf(opt.module) === -1) {
                     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() {
                     var val = fmodule.typedInput("type");
                     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) {
                     var v = $(this).val().trim();
                     if (v === "" || / /.test(v) || invalidModuleVNames.indexOf(v) !== -1) {
@@ -280,7 +294,7 @@
                     if (val === "_custom_") {
                         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.trigger("change");
 

packages/node_modules/@node-red/nodes/locales/en-US/messages.json

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