From 1c11e7f97bcce93c35514d4c95f973d5d7913220 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 10 Apr 2017 14:33:21 +0100
Subject: [PATCH] Shrink config node appearance in info table

---
 editor/js/ui/tab-info.js | 20 ++++++++++++--------
 editor/sass/palette.scss | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js
index 423777b02..1e5cda0d5 100644
--- a/editor/js/ui/tab-info.js
+++ b/editor/js/ui/tab-info.js
@@ -163,17 +163,21 @@ RED.sidebar.info = (function() {
                                     RED.utils.createObjectElement(undefined).appendTo(propRow.children()[1]);
                                 } else {
                                     var configLabel = RED.utils.getNodeLabel(configNode,val);
-                                    var nodeContainer = $('<span></span>').appendTo(propRow.children()[1]);
-                                    var entry = $('<span class="palette_node config_node"></span>')
-                                        .css({marginLeft:"5px",width:"calc(100% - 20px)"}).appendTo(nodeContainer);
-                                    $('<div class="palette_label"></div>').text(configLabel).appendTo(entry);
-                                    var icon_url = RED.utils.getNodeIcon(node._def);
-                                    var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(entry);
-                                    $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
+                                    var container = propRow.children()[1];
 
-                                    entry.dblclick(function(e) {
+                                    var div = $('<span>',{class:""}).appendTo(container);
+                                    var nodeDiv = $('<div>',{class:"palette_node palette_node_small"}).appendTo(div);
+                                    var colour = configNode._def.color;
+                                    var icon_url = RED.utils.getNodeIcon(configNode._def);
+                                    nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"});
+                                    var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
+                                    $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
+                                    var nodeContainer = $('<span></span>').css({"verticalAlign":"top","marginLeft":"6px"}).html(configLabel).appendTo(container);
+
+                                    nodeDiv.on('dblclick',function() {
                                         RED.editor.editConfig("", configNode.type, configNode.id);
                                     })
+
                                 }
                             } else {
                                 RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss
index 3bc457094..b9aeffdad 100644
--- a/editor/sass/palette.scss
+++ b/editor/sass/palette.scss
@@ -187,3 +187,22 @@
     background-size: contain;
     background-repeat: no-repeat;
 }
+
+.palette_node_small {
+    display: inline-block;
+    position: relative;
+    width: 18px;
+    height: 15px;
+    margin: 3px 0px;
+    vertical-align: middle;
+    cursor: default;
+
+    .palette_icon_container {
+        width: 18px;
+        border-right: none;
+    }
+    .palette_icon {
+        margin-left: -1px;
+        width: 15px;
+    }
+}