From 59a7c46482d6565b03dddb2951c937fbe9db3877 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sat, 21 May 2016 22:11:29 +0100
Subject: [PATCH] Modify config node select box to have dedicated add button

---
 editor/js/ui/editor.js | 147 +++++++++++++++++++++++------------------
 1 file changed, 83 insertions(+), 64 deletions(-)

diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js
index 8ef14b61f..d2223904d 100644
--- a/editor/js/ui/editor.js
+++ b/editor/js/ui/editor.js
@@ -218,22 +218,39 @@ RED.editor = (function() {
         var newWidth;
         if (existingWidthCSS !== '') {
             if (/%/.test(existingWidthCSS)) {
-                newWidth = (input.width()-10)+"%";
+                newWidth = (input.width()-20)+"%";
             } else {
-                newWidth = input.width()-50;
+                newWidth = input.width()-80;
             }
         } else {
-            newWidth = "60%";
+            newWidth = "55%";
         }
-        var select = $('<select id="'+prefix+'-'+property+'"></select>');
-        select.width(newWidth);
+        var select = $('<select id="'+prefix+'-'+property+'"></select>').width(newWidth);
         input.replaceWith(select);
         updateConfigNodeSelect(property,type,node[property],prefix);
-        select.after(' <a id="'+prefix+'-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>');
-        $('#'+prefix+'-lookup-'+property).click(function(e) {
-            showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);
+        var addButton = $('<a style="margin-left: 5px;" class="editor-button"><i class="fa fa-plus"></i></a>').insertAfter(select);
+        var editButton = $('<a id="'+prefix+'-lookup-'+property+'" style="margin-left: 5px;" class="editor-button"><i class="fa fa-pencil"></i></a>').insertAfter(select);
+
+        editButton.click(function(e) {
+            if (!$(this).hasClass('disabled')) {
+                showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);
+            }
             e.preventDefault();
         });
+        addButton.click(function(e) {
+            showEditConfigNodeDialog(property,type,"_ADD_",prefix);
+            e.preventDefault();
+        });
+
+        select.change(function() {
+            var options = select.children();
+            if (options.length > 1 || $(options[0]).val() !== "_ADD_") {
+                editButton.removeClass("disabled");
+            } else {
+                editButton.addClass("disabled");
+            }
+        });
+
         var label = "";
         var configNode = RED.nodes.node(node[property]);
         var node_def = RED.nodes.getType(type);
@@ -248,6 +265,64 @@ RED.editor = (function() {
         input.val(label);
     }
 
+    function updateConfigNodeSelect(name,type,value,prefix) {
+        // if prefix is null, there is no config select to update
+        if (prefix) {
+            var button = $("#"+prefix+"-edit-"+name);
+            if (button.length) {
+                if (value) {
+                    button.text(RED._("editor.configEdit"));
+                } else {
+                    button.text(RED._("editor.configAdd"));
+                }
+                $("#"+prefix+"-"+name).val(value);
+            } else {
+
+                var select = $("#"+prefix+"-"+name);
+                var node_def = RED.nodes.getType(type);
+                select.children().remove();
+
+                var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
+                if (!activeWorkspace) {
+                    activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
+                }
+
+                var configNodes = [];
+
+                RED.nodes.eachConfig(function(config) {
+                    if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
+                        var label = "";
+                        if (typeof node_def.label == "function") {
+                            label = node_def.label.call(config);
+                        } else {
+                            label = node_def.label;
+                        }
+                        configNodes.push({id:config.id,label:label});
+                    }
+                });
+
+                configNodes.sort(function(A,B) {
+                    if (A.label < B.label) {
+                        return -1;
+                    } else if (A.label > B.label) {
+                        return 1;
+                    }
+                    return 0;
+                });
+
+                configNodes.forEach(function(cn) {
+                    select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+cn.label+'</option>');
+                });
+
+                if (configNodes.length === 0) {
+                    select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
+                }
+
+                window.setTimeout(function() { select.change();},50);
+            }
+        }
+    }
+
     /**
      * Create a config-node button for this property
      * @param node - the node being edited
@@ -1038,62 +1113,6 @@ RED.editor = (function() {
         RED.tray.show(trayOptions);
     }
 
-
-    function updateConfigNodeSelect(name,type,value,prefix) {
-        // if prefix is null, there is no config select to update
-        if (prefix) {
-            var button = $("#"+prefix+"-edit-"+name);
-            if (button.length) {
-                if (value) {
-                    button.text(RED._("editor.configEdit"));
-                } else {
-                    button.text(RED._("editor.configAdd"));
-                }
-                $("#"+prefix+"-"+name).val(value);
-            } else {
-
-                var select = $("#"+prefix+"-"+name);
-                var node_def = RED.nodes.getType(type);
-                select.children().remove();
-
-                var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
-                if (!activeWorkspace) {
-                    activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
-                }
-
-                var configNodes = [];
-
-                RED.nodes.eachConfig(function(config) {
-                    if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
-                        var label = "";
-                        if (typeof node_def.label == "function") {
-                            label = node_def.label.call(config);
-                        } else {
-                            label = node_def.label;
-                        }
-                        configNodes.push({id:config.id,label:label});
-                    }
-                });
-
-                configNodes.sort(function(A,B) {
-                    if (A.label < B.label) {
-                        return -1;
-                    } else if (A.label > B.label) {
-                        return 1;
-                    }
-                    return 0;
-                });
-
-                configNodes.forEach(function(cn) {
-                    select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+cn.label+'</option>');
-                });
-
-                select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
-                window.setTimeout(function() { select.change();},50);
-            }
-        }
-    }
-
     function showEditSubflowDialog(subflow) {
         var editing_node = subflow;
         editStack.push(subflow);