Redesign node edit dialog to tabbed style

editor/js/nodes.js

@@ -509,9 +509,9 @@ RED.nodes = (function() {
                     node.icon = n.icon;
                 }
             }
-            if (n.info) {
+        }
-                node.info = n.info;
+        if (n.info) {
-            }
+            node.info = n.info;
         }
         return node;
     }
@@ -907,7 +907,14 @@ RED.nodes = (function() {
                 }
 
                 if (!existingConfigNode || existingConfigNode._def.exclusive) { //} || !compareNodes(existingConfigNode,n,true) || existingConfigNode.z !== n.z) {
-                    configNode = {id:n.id, z:n.z, type:n.type, users:[], _config:{}};
+                    configNode = {
+                        id:n.id,
+                        z:n.z,
+                        type:n.type,
+                        info: n.info,
+                        users:[],
+                        _config:{}
+                    };
                     for (d in def.defaults) {
                         if (def.defaults.hasOwnProperty(d)) {
                             configNode[d] = n[d];

editor/js/ui/editor.js

@@ -20,7 +20,6 @@ RED.editor = (function() {
     var editing_node = null;
     var editing_config_node = null;
     var subflowEditor;
-    var nodeInfoEditor;
 
     var editTrayWidthCache = {};
 
@@ -773,7 +772,7 @@ RED.editor = (function() {
         searchInput.focus();
     }
 
-    function buildLabelForm(container,node) {
+    function buildAppearanceForm(container,node) {
         var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
 
         var inputCount = node.inputs || node._def.inputs || 0;
@@ -840,20 +839,6 @@ RED.editor = (function() {
             })
             $('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
         }
-
-        if (node.type.indexOf("subflow") != 0 && node.type !== "comment") {
-            $('<hr>').appendTo(dialogForm);
-            $('<div class="form-row"><span data-i18n="editor.description"></span><div id="node-label-form-info"></div></div>').appendTo(dialogForm);
-            $('<div style="height: 150px;" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(dialogForm);
-            nodeInfoEditor = RED.editor.createEditor({
-                id: 'node-info-input-info-editor',
-                mode: 'ace/mode/markdown',
-                value: ""
-            });
-            if (node.info) {
-                nodeInfoEditor.getSession().setValue(node.info, -1);
-            }
-        }
     }
 
     function updateLabels(editing_node, changes, outputMap) {
@@ -897,10 +882,27 @@ RED.editor = (function() {
         return changed;
     }
 
+    function buildDescriptionForm(container,node) {
+        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
+        $('<div style="height: 100%;" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(dialogForm);
+        var nodeInfoEditor = RED.editor.createEditor({
+            id: "node-info-input-info-editor",
+            mode: 'ace/mode/markdown',
+            value: ""
+        });
+        if (node.info) {
+            nodeInfoEditor.getSession().setValue(node.info, -1);
+        }
+        return nodeInfoEditor;
+    }
+
     function showEditDialog(node) {
         var editing_node = node;
         var isDefaultIcon;
         var defaultIcon;
+        var nodeInfoEditor;
+        var finishedBuilding = false;
+
         editStack.push(node);
         RED.view.state(RED.state.EDITING);
         var type = node.type;
@@ -1141,8 +1143,31 @@ RED.editor = (function() {
                             }
                         }
 
-                        if (node.type.indexOf("subflow") != 0 && node.type !== "comment") {
+                        var oldInfo = node.info;
-                            node.info = nodeInfoEditor.getValue();
+                        if (nodeInfoEditor) {
+                            var newInfo = nodeInfoEditor.getValue();
+                            if (!!oldInfo) {
+                                // Has existing info property
+                                if (newInfo.trim() === "") {
+                                    // New value is blank - remove the property
+                                    changed = true;
+                                    changes.info = oldInfo;
+                                    delete node.info;
+                                } else if (newInfo !== oldInfo) {
+                                    // New value is different
+                                    changed = true;
+                                    changes.info = oldInfo;
+                                    node.info = newInfo;
+                                }
+                            } else {
+                                // No existing info
+                                if (newInfo.trim() !== "") {
+                                    // New value is not blank
+                                    changed = true;
+                                    changes.info = undefined;
+                                    node.info = newInfo;
+                                }
+                            }
                         }
 
                         if (changed) {
@@ -1193,8 +1218,8 @@ RED.editor = (function() {
             ],
             resize: function(dimensions) {
                 editTrayWidthCache[type] = dimensions.width;
-                $(".editor-tray-content").height(dimensions.height - 78);
+                $(".editor-tray-content").height(dimensions.height - 50);
-                var form = $(".editor-tray-content form").height(dimensions.height - 78 - 40);
+                var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
                 if (editing_node && editing_node._def.oneditresize) {
                     try {
                         editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@@ -1208,25 +1233,23 @@ RED.editor = (function() {
                 var trayBody = tray.find('.editor-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
-                var stack = RED.stack.create({
+                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                    container: trayBody,
+                var editorContent = $('<div></div>').appendTo(trayBody);
-                    singleExpanded: true
-                });
-                var nodeProperties = stack.add({
-                    title: RED._("editor.nodeProperties"),
-                    expanded: true
-                });
-                nodeProperties.content.addClass("editor-tray-content");
 
-                var portLabels = stack.add({
+                var editorTabs = RED.tabs.create({
-                    title: RED._("editor.portLabels"),
+                    element:editorTabEl,
-                    onexpand: function() {
+                    onchange:function(tab) {
-                        refreshLabelForm(this.content,node);
+                        editorContent.children().hide();
-                    }
+                        if (tab.onchange) {
+                            tab.onchange.call(tab);
+                        }
+                        tab.content.show();
+                        if (finishedBuilding) {
+                            RED.tray.resize();
+                        }
+                    },
+                    collapsible: true
                 });
-                portLabels.content.addClass("editor-tray-content");
-
-
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
@@ -1243,11 +1266,48 @@ RED.editor = (function() {
                 } else {
                     isDefaultIcon = true;
                 }
-                buildEditForm(nodeProperties.content,"dialog-form",type,ns);
+
-                buildLabelForm(portLabels.content,node);
+                var nodePropertiesTab = {
+                    id: "editor-tab-properties",
+                    label: "Properties",
+                    name: "Properties",
+                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-cog"
+                };
+                buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns);
+                editorTabs.addTab(nodePropertiesTab);
+
+                if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info'))  {
+                    var descriptionTab = {
+                        id: "editor-tab-description",
+                        label: "Description",
+                        name: "Description",
+                        content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                        iconClass: "fa fa-file-text-o",
+                        onchange: function() {
+                            nodeInfoEditor.focus();
+                        }
+                    };
+                    editorTabs.addTab(descriptionTab);
+                    nodeInfoEditor = buildDescriptionForm(descriptionTab.content,node);
+                }
+
+                var appearanceTab = {
+                    id: "editor-tab-appearance",
+                    label: "Appearance",
+                    name: "Appearance",
+                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-object-group",
+                    onchange: function() {
+                        refreshLabelForm(this.content,node);
+                    }
+                };
+                buildAppearanceForm(appearanceTab.content,node);
+                editorTabs.addTab(appearanceTab);
 
                 prepareEditDialog(node,node._def,"node-input", function() {
                     trayBody.i18n();
+                    finishedBuilding = true;
                     done();
                 });
             },
@@ -1259,8 +1319,9 @@ RED.editor = (function() {
                     RED.sidebar.info.refresh(editing_node);
                 }
                 RED.workspaces.refresh();
-                if (node.type.indexOf("subflow") != 0 && node.type !== "comment") {
+                if (nodeInfoEditor) {
                     nodeInfoEditor.destroy();
+                    nodeInfoEditor = null;
                 }
                 RED.view.redraw(true);
                 editStack.pop();
@@ -1299,6 +1360,8 @@ RED.editor = (function() {
         var adding = (id == "_ADD_");
         var node_def = RED.nodes.getType(type);
         var editing_config_node = RED.nodes.node(id);
+        var nodeInfoEditor;
+        var finishedBuilding = false;
 
         var ns;
         if (node_def.set.module === "node-red") {
@@ -1331,7 +1394,8 @@ RED.editor = (function() {
         RED.view.state(RED.state.EDITING);
         var trayOptions = {
             title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
-            resize: function() {
+            resize: function(dimensions) {
+                $(".editor-tray-content").height(dimensions.height - 50);
                 if (editing_config_node && editing_config_node._def.oneditresize) {
                     var form = $("#node-config-dialog-edit-form");
                     try {
@@ -1343,6 +1407,7 @@ RED.editor = (function() {
             },
             open: function(tray, done) {
                 var trayHeader = tray.find(".editor-tray-header");
+                var trayBody = tray.find('.editor-tray-body');
                 var trayFooter = tray.find(".editor-tray-footer");
 
                 if (node_def.hasUsers !== false) {
@@ -1350,7 +1415,49 @@ RED.editor = (function() {
                 }
                 trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
 
-                var dialogForm = buildEditForm(tray.find('.editor-tray-body'),"node-config-dialog-edit-form",type,ns);
+                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
+                var editorContent = $('<div></div>').appendTo(trayBody);
+
+                var editorTabs = RED.tabs.create({
+                    element:editorTabEl,
+                    onchange:function(tab) {
+                        editorContent.children().hide();
+                        if (tab.onchange) {
+                            tab.onchange.call(tab);
+                        }
+                        tab.content.show();
+                        if (finishedBuilding) {
+                            RED.tray.resize();
+                        }
+                    },
+                    collapsible: true
+                });
+
+                var nodePropertiesTab = {
+                    id: "editor-tab-cproperties",
+                    label: "Properties",
+                    name: "Properties",
+                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-cog"
+                };
+                editorTabs.addTab(nodePropertiesTab);
+                buildEditForm(nodePropertiesTab.content,"node-config-dialog-edit-form",type,ns);
+
+                if (!node_def.defaults || !node_def.defaults.hasOwnProperty('info'))  {
+                    var descriptionTab = {
+                        id: "editor-tab-description",
+                        label: "Description",
+                        name: "Description",
+                        content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                        iconClass: "fa fa-file-text-o",
+                        onchange: function() {
+                            nodeInfoEditor.focus();
+                        }
+                    };
+                    editorTabs.addTab(descriptionTab);
+                    nodeInfoEditor = buildDescriptionForm(descriptionTab.content,editing_config_node);
+                }
+
 
                 prepareEditDialog(editing_config_node,node_def,"node-config-input", function() {
                     if (editing_config_node._def.exclusive) {
@@ -1398,17 +1505,20 @@ RED.editor = (function() {
                             }
                         });
                     }
-                    tabSelect.i18n();
-
-                    dialogForm.i18n();
                     if (node_def.hasUsers !== false) {
                         $("#node-config-dialog-user-count").find("span").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
                     }
+                    trayBody.i18n();
+                    finishedBuilding = true;
                     done();
                 });
             },
             close: function() {
                 RED.workspaces.refresh();
+                if (nodeInfoEditor) {
+                    nodeInfoEditor.destroy();
+                    nodeInfoEditor = null;
+                }
                 editStack.pop();
             },
             show: function() {
@@ -1502,6 +1612,31 @@ RED.editor = (function() {
                             }
                         }
                     }
+
+                    if (nodeInfoEditor) {
+                        editing_config_node.info = nodeInfoEditor.getValue();
+
+                        var oldInfo = editing_config_node.info;
+                        if (nodeInfoEditor) {
+                            var newInfo = nodeInfoEditor.getValue();
+                            if (!!oldInfo) {
+                                // Has existing info property
+                                if (newInfo.trim() === "") {
+                                    // New value is blank - remove the property
+                                    delete editing_config_node.info;
+                                } else if (newInfo !== oldInfo) {
+                                    // New value is different
+                                    editing_config_node.info = newInfo;
+                                }
+                            } else {
+                                // No existing info
+                                if (newInfo.trim() !== "") {
+                                    // New value is not blank
+                                    editing_config_node.info = newInfo;
+                                }
+                            }
+                        }
+                    }
                     editing_config_node.label = configTypeDef.label;
                     editing_config_node.z = scope;
 
@@ -1689,7 +1824,7 @@ RED.editor = (function() {
         editStack.push(subflow);
         RED.view.state(RED.state.EDITING);
         var subflowEditor;
-
+        var finishedBuilding = false;
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -1790,48 +1925,76 @@ RED.editor = (function() {
                 }
             ],
             resize: function(dimensions) {
-                $(".editor-tray-content").height(dimensions.height - 78);
+                $(".editor-tray-content").height(dimensions.height - 50);
-                var form = $(".editor-tray-content form").height(dimensions.height - 78 - 40);
+                var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
-
-                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
-                var editorRow = $("#dialog-form>div.node-text-editor-row");
-                var height = $("#dialog-form").height();
-                for (var i=0;i<rows.size();i++) {
-                    height -= $(rows[i]).outerHeight(true);
-                }
-                height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
-                $(".node-text-editor").css("height",height+"px");
-                subflowEditor.resize();
             },
             open: function(tray) {
                 var trayFooter = tray.find(".editor-tray-footer");
                 var trayBody = tray.find('.editor-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
-                var stack = RED.stack.create({
-                    container: trayBody,
-                    singleExpanded: true
-                });
-                var nodeProperties = stack.add({
-                    title: RED._("editor.nodeProperties"),
-                    expanded: true
-                });
-                nodeProperties.content.addClass("editor-tray-content");
-                var portLabels = stack.add({
-                    title: RED._("editor.portLabels")
-                });
-                portLabels.content.addClass("editor-tray-content");
 
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
-                var dialogForm = buildEditForm(nodeProperties.content,"dialog-form","subflow-template");
+
-                subflowEditor = RED.editor.createEditor({
+                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                    id: 'subflow-input-info-editor',
+                var editorContent = $('<div></div>').appendTo(trayBody);
-                    mode: 'ace/mode/markdown',
+
-                    value: ""
+                var editorTabs = RED.tabs.create({
+                    element:editorTabEl,
+                    onchange:function(tab) {
+                        editorContent.children().hide();
+                        if (tab.onchange) {
+                            tab.onchange.call(tab);
+                        }
+                        tab.content.show();
+                        if (finishedBuilding) {
+                            RED.tray.resize();
+                        }
+                    },
+                    collapsible: true
                 });
 
+                var nodePropertiesTab = {
+                    id: "editor-tab-properties",
+                    label: "Properties",
+                    name: "Properties",
+                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-cog"
+                };
+                buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template");
+                editorTabs.addTab(nodePropertiesTab);
+
+                var descriptionTab = {
+                    id: "editor-tab-description",
+                    label: "Description",
+                    name: "Description",
+                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-file-text-o",
+                    onchange: function() {
+                        subflowEditor.focus();
+                    }
+                };
+                editorTabs.addTab(descriptionTab);
+                subflowEditor = buildDescriptionForm(descriptionTab.content,editing_node);
+
+                var appearanceTab = {
+                    id: "editor-tab-appearance",
+                    label: "Appearance",
+                    name: "Appearance",
+                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-object-group",
+                    onchange: function() {
+                        refreshLabelForm(this.content,editing_node);
+                    }
+                };
+                buildAppearanceForm(appearanceTab.content,editing_node);
+                editorTabs.addTab(appearanceTab);
+
+
+
+
                 $("#subflow-input-name").val(subflow.name);
                 RED.text.bidi.prepareInput($("#subflow-input-name"));
 
@@ -1858,10 +2021,7 @@ RED.editor = (function() {
                     }
                 })
 
-
                 $("#subflow-input-category").val(subflow.category||"subflows");
-
-                subflowEditor.getSession().setValue(subflow.info||"",-1);
                 var userCount = 0;
                 var subflowType = "subflow:"+editing_node.id;
 
@@ -1872,8 +2032,8 @@ RED.editor = (function() {
                 });
                 $("#subflow-dialog-user-count").text(RED._("subflow.subflowInstances", {count:userCount})).show();
 
-                buildLabelForm(portLabels.content,subflow);
                 trayBody.i18n();
+                finishedBuilding = true;
             },
             close: function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
@@ -1882,6 +2042,7 @@ RED.editor = (function() {
                 RED.sidebar.info.refresh(editing_node);
                 RED.workspaces.refresh();
                 subflowEditor.destroy();
+                subflowEditor = null;
                 editStack.pop();
                 editing_node = null;
             },

editor/js/ui/tray.js

@@ -232,6 +232,7 @@ RED.tray = (function() {
             }
 
         },
+        resize: handleWindowResize,
         close: function close(done) {
             if (stack.length > 0) {
                 var tray = stack.pop();

editor/templates/index.mst

@@ -136,13 +136,6 @@
         <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 for="subflow-input-info" data-i18n="editor:subflow.info"></label>
-        <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>
-    </div>
-    <div class="form-row node-text-editor-row">
-        <div style="height: 250px;" class="node-text-editor" id="subflow-input-info-editor"></div>
-    </div>
     <div class="form-row form-tips" id="subflow-dialog-user-count"></div>
 </script>
 <script src="vendor/vendor.js"></script>