rearrange contents of subflow template settings tab

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -953,8 +953,70 @@ RED.editor = (function() {
 
         var i,row;
 
+        if (node.type === "subflow") {
+            var categoryRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<i/>", {
+                class: "fa fa-folder-o"
+            }).appendTo(categoryRow);
+            $("<span/>").text(" ").appendTo(categoryRow);
+            $("<label/>", {
+                for: "subflow-appearance-input-category",
+                "data-i18n": "editor:subflow.category"
+            }).appendTo(categoryRow);
+            var categorySelector = $("<select/>", {
+                id: "subflow-appearance-input-category"
+            }).css({
+                width: "250px"
+            }).appendTo(categoryRow);
+            $("<input/>", {
+                type: "text",
+                id: "subflow-appearance-input-custom-category"
+            }).css({
+                display: "none",
+                "margin-left": "10px",
+                width: "calc(100% - 250px)"
+            }).appendTo(categoryRow);
+
+            var categories = RED.palette.getCategories();
+            categories.sort(function(A,B) {
+                return A.label.localeCompare(B.label);
+            })
+            categories.forEach(function(cat) {
+                categorySelector.append($("<option/>").val(cat.id).text(cat.label));
+            })
+            categorySelector.append($("<option/>").attr('disabled',true).text("---"));
+            categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
+
+            $("#subflow-appearance-input-category").on("change", function() {
+                var val = $(this).val();
+                if (val === "_custom_") {
+                    $("#subflow-appearance-input-category").width(120);
+                    $("#subflow-appearance-input-custom-category").show();
+                } else {
+                    $("#subflow-appearance-input-category").width(250);
+                    $("#subflow-appearance-input-custom-category").hide();
+                }
+            })
+
+            $("#subflow-appearance-input-category").val(node.category||"subflows");
+            var userCount = 0;
+            var subflowType = "subflow:"+node.id;
+
+            RED.nodes.eachNode(function(n) {
+                if (n.type === subflowType) {
+                    userCount++;
+                }
+            });
+            $("#red-ui-editor-subflow-user-count")
+                .text(RED._("subflow.subflowInstances", {count:userCount})).show();
+        }        
+        
         $('<div class="form-row">'+
+            '<i class="fa fa-tag"> '+
             '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
+            '<span style="margin-right: 2px;"/>'+
             '<input type="checkbox" id="node-input-show-label"/>'+
         '</div>').appendTo(dialogForm);
 
@@ -972,6 +1034,11 @@ RED.editor = (function() {
         // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
         if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
             var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
+            $("<i/>", {
+                class: "fa fa-picture-o"
+            }).appendTo(iconRow);
+            $("<span/>").text(" ").appendTo(iconRow);
+            
             $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
 
             var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
@@ -1001,7 +1068,7 @@ RED.editor = (function() {
             $('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton);
         }
 
-        $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
+        $('<div class="form-row"><i class="fa fa-external-link"/> <span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
 
         var inputCount = node.inputs || node._def.inputs || 0;
         var outputCount = node.outputs || node._def.outputs || 0;
@@ -2162,9 +2229,9 @@ RED.editor = (function() {
                             editing_node.icon = icon;
                             changed = true;
                         }
-                        var newCategory = $("#subflow-input-category").val().trim();
+                        var newCategory = $("#subflow-appearance-input-category").val().trim();
                         if (newCategory === "_custom_") {
-                            newCategory = $("#subflow-input-custom-category").val().trim();
+                            newCategory = $("#subflow-appearance-input-custom-category").val().trim();
                             if (newCategory === "") {
                                 newCategory = editing_node.category;
                             }
@@ -2177,15 +2244,6 @@ RED.editor = (function() {
                             editing_node.category = newCategory;
                             changed = true;
                         }
-
-                        var old_env = editing_node.env;
-                        var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
-                        if (!isSameEnv(old_env, new_env)) {
-                            editing_node.env = new_env;
-                            changes.env = editing_node.env;
-                            changed = true;
-                        }
-
                         RED.palette.refresh();
 
                         if (changed) {
@@ -2234,13 +2292,28 @@ RED.editor = (function() {
                 }
                 var editorRow = $("#dialog-form>div.node-input-env-container-row");
                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("#node-input-env-container").editableList('height',height-80);
+                $("#node-input-env-container").editableList('height',height-60);
             },
             open: function(tray) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
+                var trayFooterLeft = $("<div/>", {
+                    class: "red-ui-tray-footer-left"
+                }).appendTo(trayFooter)
                 var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
+                if (editing_node.type === "subflow") {
+                    var span = $("<span/>").css({
+                        "margin-left": "10px"
+                    }).appendTo(trayFooterLeft);
+                    $("<i/>", {
+                        class: "fa fa-info-circle"
+                    }).appendTo(span);
+                    $("<span/>").text(" ").appendTo(span);
+                    $("<i/>", {
+                        id: "red-ui-editor-subflow-user-count"
+                    }).appendTo(span);
+                }
 
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
@@ -2300,46 +2373,9 @@ RED.editor = (function() {
                 buildAppearanceForm(appearanceTab.content,editing_node);
                 editorTabs.addTab(appearanceTab);
 
-
-
-
                 $("#subflow-input-name").val(subflow.name);
                 RED.text.bidi.prepareInput($("#subflow-input-name"));
 
-                $("#subflow-input-category").empty();
-                var categories = RED.palette.getCategories();
-                categories.sort(function(A,B) {
-                    return A.label.localeCompare(B.label);
-                })
-                categories.forEach(function(cat) {
-                    $("#subflow-input-category").append($("<option></option>").val(cat.id).text(cat.label));
-                })
-                $("#subflow-input-category").append($("<option></option>").attr('disabled',true).text("---"));
-                $("#subflow-input-category").append($("<option></option>").val("_custom_").text(RED._("palette.addCategory")));
-
-
-                $("#subflow-input-category").on("change", function() {
-                    var val = $(this).val();
-                    if (val === "_custom_") {
-                        $("#subflow-input-category").width(120);
-                        $("#subflow-input-custom-category").show();
-                    } else {
-                        $("#subflow-input-category").width(250);
-                        $("#subflow-input-custom-category").hide();
-                    }
-                })
-
-                $("#subflow-input-category").val(subflow.category||"subflows");
-                var userCount = 0;
-                var subflowType = "subflow:"+editing_node.id;
-
-                RED.nodes.eachNode(function(n) {
-                    if (n.type === subflowType) {
-                        userCount++;
-                    }
-                });
-                $("#subflow-dialog-user-count").text(RED._("subflow.subflowInstances", {count:userCount})).show();
-
                 trayBody.i18n();
                 finishedBuilding = true;
             },

packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js

@@ -24,10 +24,8 @@ RED.subflow = (function() {
 
     var _subflowTemplateEditTemplate = '<script type="text/x-red" data-template-name="subflow-template">'+
         '<div class="form-row"><i class="fa fa-tag"></i> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"></div>'+
-        '<div class="form-row"><i class="fa fa-folder-o"></i> <label for="subflow-input-category" data-i18n="editor:subflow.category"></label><select style="width: 250px;" id="subflow-input-category"></select><input style="display:none; margin-left: 10px; width:calc(100% - 250px)" type="text" id="subflow-input-custom-category"></div>'+
         '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
         '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
-        '<div class="form-row form-tips" id="subflow-dialog-user-count"></div>'+
         '</script>';
 
     function findAvailableSubflowIOPosition(subflow,isInput) {