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

Move name field above tab bar in Function node

This commit is contained in:
Nick O'Leary 2021-02-17 12:04:38 +00:00
parent ea62c1806e
commit 137fa98903
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 23 additions and 20 deletions

View File

@ -1,5 +1,8 @@
<script type="text/html" data-template-name="function"> <script type="text/html" data-template-name="function">
<style> <style>
.func-tabs-row {
margin-bottom: 0;
}
#node-input-libs-container-row .red-ui-editableList-container { #node-input-libs-container-row .red-ui-editableList-container {
padding: 0px; padding: 0px;
} }
@ -43,16 +46,18 @@
<input type="hidden" id="node-input-finalize"> <input type="hidden" id="node-input-finalize">
<input type="hidden" id="node-input-initialize"> <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> <ul style="min-width: 600px; margin-bottom: 20px;" id="func-tabs"></ul>
</div> </div>
<div id="func-tabs-content" style="min-height: calc(100% - 95px);"> <div id="func-tabs-content" style="min-height: calc(100% - 95px);">
<div id="func-tab-config" style="display:none"> <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"> <div class="form-row">
<label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label> <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"> <input id="node-input-outputs" style="width: 60px;" value="1">
@ -68,22 +73,22 @@
<div id="func-tab-init" style="display:none"> <div id="func-tab-init" style="display:none">
<div class="form-row node-text-editor-row" style="position:relative"> <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="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; margin-top: 30px;" class="node-text-editor" id="node-input-init-editor" ></div> <div style="height: 250px; min-height:150px; padding-top: 10px;" class="node-text-editor" id="node-input-init-editor" ></div>
</div> </div>
</div> </div>
<div id="func-tab-body" style="display:none"> <div id="func-tab-body" style="display:none">
<div class="form-row node-text-editor-row" style="position:relative"> <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="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:120px; margin-top: 30px;" class="node-text-editor" id="node-input-func-editor" ></div> <div style="height: 220px; min-height:150px; padding-top: 10px;" class="node-text-editor" id="node-input-func-editor" ></div>
</div> </div>
</div> </div>
<div id="func-tab-finalize" style="display:none"> <div id="func-tab-finalize" style="display:none">
<div class="form-row node-text-editor-row" style="position:relative"> <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="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; margin-top: 30px;" class="node-text-editor" id="node-input-finalize-editor" ></div> <div style="height: 250px; min-height:150px; padding-top: 10px;" class="node-text-editor" id="node-input-finalize-editor" ></div>
</div> </div>
</div> </div>
@ -360,8 +365,7 @@
tabs.addTab({ tabs.addTab({
id: "func-tab-config", id: "func-tab-config",
iconClass: "fa fa-cog", iconClass: "fa fa-cog",
maximumTabWidth: 38 label: that._("function.label.setup")
}); });
tabs.addTab({ tabs.addTab({
@ -562,13 +566,12 @@
} }
var editorRow = $("#dialog-form>div.node-text-editor-row"); var editorRow = $("#dialog-form>div.node-text-editor-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom"))); height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$(".node-text-editor").css("height",height+"px"); $("#dialog-form .node-text-editor").css("height",height+"px");
this.editor.resize();
var height = size.height; var height = size.height;
$("#node-input-init-editor").css("height", (height -45)+"px"); $("#node-input-init-editor").css("height", (height -45-48)+"px");
$("#node-input-func-editor").css("height", (height -45)+"px"); $("#node-input-func-editor").css("height", (height -45-48)+"px");
$("#node-input-finalize-editor").css("height", (height -45)+"px"); $("#node-input-finalize-editor").css("height", (height -45-48)+"px");
this.initEditor.resize(); this.initEditor.resize();
this.editor.resize(); this.editor.resize();

View File

@ -209,11 +209,11 @@
"function": { "function": {
"function": "", "function": "",
"label": { "label": {
"setup": "Setup",
"function": "On Message", "function": "On Message",
"initialize": "On Start", "initialize": "On Start",
"finalize": "On Stop", "finalize": "On Stop",
"outputs": "Outputs", "outputs": "Outputs"
"require": "Require"
}, },
"text": { "text": {
"initialize": "// Code added here will be run once\n// whenever the node is deployed.\n", "initialize": "// Code added here will be run once\n// whenever the node is deployed.\n",