From 137fa98903efcb8a1a55c8181c5028e384b49221 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 17 Feb 2021 12:04:38 +0000
Subject: [PATCH] Move name field above tab bar in Function node

---
 .../nodes/core/function/10-function.html      | 39 ++++++++++---------
 .../nodes/locales/en-US/messages.json         |  4 +-
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/node_modules/@node-red/nodes/core/function/10-function.html b/packages/node_modules/@node-red/nodes/core/function/10-function.html
index 27eb588b9..f107dd03f 100644
--- a/packages/node_modules/@node-red/nodes/core/function/10-function.html
+++ b/packages/node_modules/@node-red/nodes/core/function/10-function.html
@@ -1,5 +1,8 @@
 <script type="text/html" data-template-name="function">
     <style>
+        .func-tabs-row {
+            margin-bottom: 0;
+        }
         #node-input-libs-container-row .red-ui-editableList-container {
             padding: 0px;
         }
@@ -43,16 +46,18 @@
     <input type="hidden" id="node-input-finalize">
     <input type="hidden" id="node-input-initialize">
 
-    <div class="form-row" style="margin-top: -20px">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
+        <div style="display: inline-block; width: calc(100% - 105px)"><input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"></div>
+    </div>
+
+
+    <div class="form-row func-tabs-row">
         <ul style="min-width: 600px; margin-bottom: 20px;" id="func-tabs"></ul>
     </div>
     <div id="func-tabs-content" style="min-height: calc(100% - 95px);">
 
         <div id="func-tab-config" style="display:none">
-            <div class="form-row">
-                <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
-                <div style="display: inline-block; width: calc(100% - 105px)"><input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"></div>
-            </div>
             <div class="form-row">
                 <label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label>
                 <input id="node-input-outputs" style="width: 60px;" value="1">
@@ -68,22 +73,22 @@
 
         <div id="func-tab-init" style="display:none">
             <div class="form-row node-text-editor-row" style="position:relative">
-                <div style="position: absolute; right:0; bottom: calc(100% + 3px);"><button id="node-init-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
-                <div style="height: 250px; min-height:150px; margin-top: 30px;" class="node-text-editor" id="node-input-init-editor" ></div>
+                <div style="position: absolute; right:0; bottom: calc(100% - 8px);"><button id="node-init-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
+                <div style="height: 250px; min-height:150px; padding-top: 10px;" class="node-text-editor" id="node-input-init-editor" ></div>
             </div>
         </div>
 
         <div id="func-tab-body" style="display:none">
             <div class="form-row node-text-editor-row" style="position:relative">
-                <div style="position: absolute; right:0; bottom: calc(100% + 3px);"><button id="node-function-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
-                <div style="height: 220px; min-height:120px; margin-top: 30px;" class="node-text-editor" id="node-input-func-editor" ></div>
+                <div style="position: absolute; right:0; bottom: calc(100% - 8px);"><button id="node-function-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
+                <div style="height: 220px; min-height:150px; padding-top: 10px;" class="node-text-editor" id="node-input-func-editor" ></div>
             </div>
         </div>
 
         <div id="func-tab-finalize" style="display:none">
             <div class="form-row node-text-editor-row" style="position:relative">
-                <div style="position: absolute; right:0; bottom: calc(100% + 3px);"><button id="node-finalize-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
-                <div style="height: 250px; min-height:150px; margin-top: 30px;" class="node-text-editor" id="node-input-finalize-editor" ></div>
+                <div style="position: absolute; right:0; bottom: calc(100% - 8px);"><button id="node-finalize-expand-js" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button></div>
+                <div style="height: 250px; min-height:150px; padding-top: 10px;" class="node-text-editor" id="node-input-finalize-editor" ></div>
             </div>
         </div>
 
@@ -360,8 +365,7 @@
             tabs.addTab({
                 id: "func-tab-config",
                 iconClass: "fa fa-cog",
-                maximumTabWidth: 38
-
+                label: that._("function.label.setup")
             });
 
             tabs.addTab({
@@ -562,13 +566,12 @@
             }
             var editorRow = $("#dialog-form>div.node-text-editor-row");
             height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-            $(".node-text-editor").css("height",height+"px");
-            this.editor.resize();
+            $("#dialog-form .node-text-editor").css("height",height+"px");
 
             var height = size.height;
-            $("#node-input-init-editor").css("height", (height -45)+"px");
-            $("#node-input-func-editor").css("height", (height -45)+"px");
-            $("#node-input-finalize-editor").css("height", (height -45)+"px");
+            $("#node-input-init-editor").css("height", (height -45-48)+"px");
+            $("#node-input-func-editor").css("height", (height -45-48)+"px");
+            $("#node-input-finalize-editor").css("height", (height -45-48)+"px");
 
             this.initEditor.resize();
             this.editor.resize();
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
index 5dc17f76d..5166bac50 100755
--- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
@@ -209,11 +209,11 @@
     "function": {
         "function": "",
         "label": {
+            "setup": "Setup",
             "function": "On Message",
             "initialize": "On Start",
             "finalize": "On Stop",
-            "outputs": "Outputs",
-            "require": "Require"
+            "outputs": "Outputs"
         },
         "text": {
             "initialize": "// Code added here will be run once\n// whenever the node is deployed.\n",