From 73574d62939fe05b4d52014b8532f864c35f4582 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 7 Nov 2016 21:25:09 +0000
Subject: [PATCH] Add quick-add node mode with cmd/ctrl-click

---
 Gruntfile.js                    |   1 +
 editor/js/nodes.js              |   3 +
 editor/js/ui/palette-editor.js  |   2 +
 editor/js/ui/search.js          |   2 +
 editor/js/ui/typeSearch.js      | 271 ++++++++++++++++++++++++++++++++
 editor/js/ui/view.js            | 217 +++++++++++++++----------
 editor/sass/editor.scss         |   7 +-
 editor/sass/flow.scss           |  12 ++
 editor/sass/mixins.scss         |   9 ++
 editor/sass/palette-editor.scss |   7 +-
 editor/sass/search.scss         |  63 ++++++++
 editor/sass/sidebar.scss        |   7 +-
 12 files changed, 501 insertions(+), 100 deletions(-)
 create mode 100644 editor/js/ui/typeSearch.js

diff --git a/Gruntfile.js b/Gruntfile.js
index abe69aadd..ffb1df3c3 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -132,6 +132,7 @@ module.exports = function(grunt) {
                     "editor/js/ui/library.js",
                     "editor/js/ui/notifications.js",
                     "editor/js/ui/search.js",
+                    "editor/js/ui/typeSearch.js",
                     "editor/js/ui/subflow.js",
                     "editor/js/ui/touch/radialMenu.js"
                 ],
diff --git a/editor/js/nodes.js b/editor/js/nodes.js
index 732c339de..49bd29860 100644
--- a/editor/js/nodes.js
+++ b/editor/js/nodes.js
@@ -62,6 +62,9 @@ RED.nodes = (function() {
             getNodeList: function() {
                 return nodeList;
             },
+            getNodeTypes: function() {
+                return Object.keys(nodeDefinitions);
+            },
             setNodeList: function(list) {
                 nodeList = [];
                 for(var i=0;i<list.length;i++) {
diff --git a/editor/js/ui/palette-editor.js b/editor/js/ui/palette-editor.js
index 8513f67bd..1157ffcd6 100644
--- a/editor/js/ui/palette-editor.js
+++ b/editor/js/ui/palette-editor.js
@@ -422,6 +422,8 @@ RED.palette.editor = (function() {
         RED.events.on("editor:close",function() { disabled = false; });
         RED.events.on("search:open",function() { disabled = true; });
         RED.events.on("search:close",function() { disabled = false; });
+        RED.events.on("type-search:open",function() { disabled = true; });
+        RED.events.on("type-search:close",function() { disabled = false; });
 
         RED.keyboard.add("*", /* p */ 80,{shift:true,ctrl:true},function() {RED.palette.editor.show();d3.event.preventDefault();});
 
diff --git a/editor/js/ui/search.js b/editor/js/ui/search.js
index 75a649b60..032fc69b7 100644
--- a/editor/js/ui/search.js
+++ b/editor/js/ui/search.js
@@ -279,6 +279,8 @@ RED.search = (function() {
         RED.events.on("editor:close",function() { disabled = false; });
         RED.events.on("palette-editor:open",function() { disabled = true; });
         RED.events.on("palette-editor:close",function() { disabled = false; });
+        RED.events.on("type-search:open",function() { disabled = true; });
+        RED.events.on("type-search:close",function() { disabled = false; });
 
 
 
diff --git a/editor/js/ui/typeSearch.js b/editor/js/ui/typeSearch.js
new file mode 100644
index 000000000..c29a43da7
--- /dev/null
+++ b/editor/js/ui/typeSearch.js
@@ -0,0 +1,271 @@
+RED.typeSearch = (function() {
+
+    var shade;
+
+    var disabled = false;
+    var dialog = null;
+    var searchInput;
+    var searchResults;
+    var searchResultsDiv;
+    var selected = -1;
+    var visible = false;
+
+    var activeFilter = "";
+    var addCallback;
+
+    function search(val) {
+        activeFilter = val.toLowerCase();
+        var visible = searchResults.editableList('filter');
+        setTimeout(function() {
+            selected = 0;
+            searchResults.children().removeClass('selected');
+            searchResults.children(":visible:first").addClass('selected');
+        },100);
+
+    }
+
+    function ensureSelectedIsVisible() {
+        var selectedEntry = searchResults.find("li.selected");
+        if (selectedEntry.length === 1) {
+            var scrollWindow = searchResults.parent();
+            var scrollHeight = scrollWindow.height();
+            var scrollOffset = scrollWindow.scrollTop();
+            var y = selectedEntry.position().top;
+            var h = selectedEntry.height();
+            if (y+h > scrollHeight) {
+                scrollWindow.animate({scrollTop: '-='+(scrollHeight-(y+h)-10)},50);
+            } else if (y<0) {
+                scrollWindow.animate({scrollTop: '+='+(y-10)},50);
+            }
+        }
+    }
+
+    function createDialog() {
+        //shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container");
+        dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container");
+        var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
+        searchInput = $('<input type="text" placeholder="add a node...">').appendTo(searchDiv).searchBox({
+            delay: 50,
+            change: function() {
+                search($(this).val());
+            }
+        });
+        searchInput.on('keydown',function(evt) {
+            var children = searchResults.children(":visible");
+            if (children.length > 0) {
+                if (evt.keyCode === 40) {
+                    // Down
+                    if (selected < children.length-1) {
+                        if (selected > -1) {
+                            $(children[selected]).removeClass('selected');
+                        }
+                        selected++;
+                    }
+                    $(children[selected]).addClass('selected');
+                    ensureSelectedIsVisible();
+                    evt.preventDefault();
+                } else if (evt.keyCode === 38) {
+                    // Up
+                    if (selected > 0) {
+                        if (selected < children.length) {
+                            $(children[selected]).removeClass('selected');
+                        }
+                        selected--;
+                    }
+                    $(children[selected]).addClass('selected');
+                    ensureSelectedIsVisible();
+                    evt.preventDefault();
+                } else if (evt.keyCode === 13) {
+                    // Enter
+                    var index = Math.max(0,selected);
+                    if (index < children.length) {
+                        // TODO: dips into editableList impl details
+                        confirm($(children[index]).find(".red-ui-editableList-item-content").data('data'));
+                    }
+                }
+            }
+        });
+
+        searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
+        searchResults = $('<ol>',{id:"search-result-list", style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({
+            addButton: false,
+            filter: function(data) {
+                if (activeFilter === "" ) {
+                    return true;
+                }
+
+                return (activeFilter==="")||(data.index.indexOf(activeFilter) > -1);
+            },
+            addItem: function(container,i,object) {
+                var def = object.def;
+                object.index = object.type.toLowerCase();
+                var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
+
+                var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
+                var colour = def.color;
+                var icon_url = "arrow-in.png";
+                if (def.category === 'config') {
+                    icon_url = "cog.png";
+                } else {
+                    try {
+                        icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
+                    } catch(err) {
+                        console.log("Definition error: "+object.type+".icon",err);
+                    }
+                }
+                nodeDiv.css('backgroundColor',colour);
+
+                var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
+                $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+
+                var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
+
+                var label = object.type;
+                if (typeof def.paletteLabel !== "undefined") {
+                    try {
+                        label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
+                        label += " ("+object.type+")";
+                        object.index += "|"+label.toLowerCase();
+                    } catch(err) {
+                        console.log("Definition error: "+object.type+".paletteLabel",err);
+                    }
+                }
+
+
+                $('<div>',{class:"red-ui-search-result-node-label"}).html(label).appendTo(contentDiv);
+
+                div.click(function(evt) {
+                    evt.preventDefault();
+                    confirm(object);
+                });
+            },
+            scrollOnAdd: false
+        });
+
+    }
+    function confirm(def) {
+        hide();
+        addCallback(def.type);
+    }
+
+    function handleMouseActivity(evt) {
+        if (visible) {
+            var t = $(evt.target);
+            while (t.prop('nodeName').toLowerCase() !== 'body') {
+                if (t.attr('id') === 'red-ui-type-search') {
+                    return;
+                }
+                t = t.parent();
+            }
+            hide(true);
+        }
+    }
+    function show(opts) {
+        if (!visible) {
+            RED.keyboard.add("*",/* ESCAPE */ 27,function(){hide();d3.event.preventDefault();});
+            if (dialog === null) {
+                createDialog();
+            }
+            visible = true;
+            setTimeout(function() {
+                $(document).on('mousedown.type-search',handleMouseActivity);
+                $(document).on('mouseup.type-search',handleMouseActivity);
+                $(document).on('click.type-search',handleMouseActivity);
+            },200);
+        } else {
+            dialog.hide();
+            searchResultsDiv.hide();
+        }
+        refreshTypeList();
+        addCallback = opts.add;
+        RED.events.emit("type-search:open");
+        //shade.show();
+        dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
+        searchResultsDiv.slideDown();
+        setTimeout(function() {
+            searchInput.focus();
+        },100);
+    }
+    function hide(fast) {
+        if (visible) {
+            RED.keyboard.remove(/* ESCAPE */ 27);
+            visible = false;
+            if (dialog !== null) {
+                searchResultsDiv.slideUp(fast?50:200,function() {
+                    dialog.hide();
+                    searchInput.searchBox('value','');
+                });
+                //shade.hide();
+            }
+            RED.events.emit("type-search:close");
+            RED.view.focus();
+            $(document).off('mousedown.type-search');
+            $(document).off('mouseup.type-search');
+            $(document).off('click.type-search');
+        }
+    }
+    function refreshTypeList() {
+        searchResults.editableList('empty');
+        searchInput.searchBox('value','');
+        selected = -1;
+        searchResults.parent().scrollTop(0);
+        var common = {
+            "debug"   : false,
+            "inject"  : false,
+            "function": false
+        };
+        var nodeTypes = RED.nodes.registry.getNodeTypes().filter(function(n) {
+            if (common.hasOwnProperty(n)) {
+                common[n] = true;
+                return false;
+            }
+            return true;
+        });
+        // Just in case a core node has been disabled
+        if (common["function"]) {
+            nodeTypes.unshift("function");
+        }
+        if (common["inject"]) {
+            nodeTypes.unshift("inject");
+        }
+        if (common["debug"]) {
+            nodeTypes.unshift("debug");
+        }
+
+
+        var i;
+        for (i=0;i<nodeTypes.length;i++) {
+            var t = nodeTypes[i];
+            var def = RED.nodes.getType(t);
+            if (def.category !== 'config' && t !== 'unknown') {
+                searchResults.editableList('addItem',{type:t,def: def})
+            }
+        }
+        setTimeout(function() {
+            selected = 0;
+            searchResults.children(":first").addClass('selected');
+        },100);
+    }
+
+    function init() {
+        // RED.keyboard.add("*",/* . */ 190,{ctrl:true},function(){if (!disabled) { show(); } d3.event.preventDefault();});
+        // RED.events.on("editor:open",function() { disabled = true; });
+        // RED.events.on("editor:close",function() { disabled = false; });
+        // RED.events.on("palette-editor:open",function() { disabled = true; });
+        // RED.events.on("palette-editor:close",function() { disabled = false; });
+        //
+        //
+        //
+        // $("#header-shade").on('mousedown',hide);
+        // $("#editor-shade").on('mousedown',hide);
+        // $("#palette-shade").on('mousedown',hide);
+        // $("#sidebar-shade").on('mousedown',hide);
+    }
+
+    return {
+        init: init,
+        show: show,
+        hide: hide
+    };
+
+})();
diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js
index 7713dc33c..6b2b864d5 100644
--- a/editor/js/ui/view.js
+++ b/editor/js/ui/view.js
@@ -323,70 +323,12 @@ RED.view = (function() {
             drop: function( event, ui ) {
                 d3.event = event;
                 var selected_tool = ui.draggable[0].type;
-                var m = /^subflow:(.+)$/.exec(selected_tool);
-
-                if (activeSubflow && m) {
-                    var subflowId = m[1];
-                    if (subflowId === activeSubflow.id) {
-                        RED.notify(RED._("notification.error",{message: RED._("notification.errors.cannotAddSubflowToItself")}),"error");
-                        return;
-                    }
-                    if (RED.nodes.subflowContains(m[1],activeSubflow.id)) {
-                        RED.notify(RED._("notification.error",{message: RED._("notification.errors.cannotAddCircularReference")}),"error");
-                        return;
-                    }
-                }
-
-                var nn = { id:RED.nodes.id(),z:RED.workspaces.active()};
-
-                nn.type = selected_tool;
-                nn._def = RED.nodes.getType(nn.type);
-
-                if (!m) {
-                    nn.inputs = nn._def.inputs || 0;
-                    nn.outputs = nn._def.outputs;
-
-                    for (var d in nn._def.defaults) {
-                        if (nn._def.defaults.hasOwnProperty(d)) {
-                            if (nn._def.defaults[d].value !== undefined) {
-                                nn[d] = JSON.parse(JSON.stringify(nn._def.defaults[d].value));
-                            }
-                        }
-                    }
-
-                    if (nn._def.onadd) {
-                        try {
-                            nn._def.onadd.call(nn);
-                        } catch(err) {
-                            console.log("onadd:",err);
-                        }
-                    }
-                } else {
-                    var subflow = RED.nodes.subflow(m[1]);
-                    nn.inputs = subflow.in.length;
-                    nn.outputs = subflow.out.length;
-                }
-
-                nn.changed = true;
-
-                nn.w = node_width;
-                nn.h = Math.max(node_height,(nn.outputs||0) * 15);
-
-                var historyEvent = {
-                    t:"add",
-                    nodes:[nn.id],
-                    dirty:RED.nodes.dirty()
-                }
-                if (activeSubflow) {
-                    var subflowRefresh = RED.subflow.refresh(true);
-                    if (subflowRefresh) {
-                        historyEvent.subflow = {
-                            id:activeSubflow.id,
-                            changed: activeSubflow.changed,
-                            instances: subflowRefresh.instances
-                        }
-                    }
+                var result = addNode(selected_tool);
+                if (!result) {
+                    return;
                 }
+                var historyEvent = result.historyEvent;
+                var nn = result.node;
 
                 var helperOffset = d3.touches(ui.helper.get(0))[0]||d3.mouse(ui.helper.get(0));
                 var mousePos = d3.touches(this)[0]||d3.mouse(this);
@@ -463,6 +405,79 @@ RED.view = (function() {
         RED.keyboard.add("workspace",/* right */ 39, {shift:true}, function() { moveSelection(20,0); d3.event.preventDefault();},endKeyboardMove);
     }
 
+
+    function addNode(type,x,y) {
+        var m = /^subflow:(.+)$/.exec(type);
+
+        if (activeSubflow && m) {
+            var subflowId = m[1];
+            if (subflowId === activeSubflow.id) {
+                RED.notify(RED._("notification.error",{message: RED._("notification.errors.cannotAddSubflowToItself")}),"error");
+                return;
+            }
+            if (RED.nodes.subflowContains(m[1],activeSubflow.id)) {
+                RED.notify(RED._("notification.error",{message: RED._("notification.errors.cannotAddCircularReference")}),"error");
+                return;
+            }
+        }
+
+        var nn = { id:RED.nodes.id(),z:RED.workspaces.active()};
+
+        nn.type = type;
+        nn._def = RED.nodes.getType(nn.type);
+
+        if (!m) {
+            nn.inputs = nn._def.inputs || 0;
+            nn.outputs = nn._def.outputs;
+
+            for (var d in nn._def.defaults) {
+                if (nn._def.defaults.hasOwnProperty(d)) {
+                    if (nn._def.defaults[d].value !== undefined) {
+                        nn[d] = JSON.parse(JSON.stringify(nn._def.defaults[d].value));
+                    }
+                }
+            }
+
+            if (nn._def.onadd) {
+                try {
+                    nn._def.onadd.call(nn);
+                } catch(err) {
+                    console.log("onadd:",err);
+                }
+            }
+        } else {
+            var subflow = RED.nodes.subflow(m[1]);
+            nn.inputs = subflow.in.length;
+            nn.outputs = subflow.out.length;
+        }
+
+        nn.changed = true;
+
+        nn.w = node_width;
+        nn.h = Math.max(node_height,(nn.outputs||0) * 15);
+
+        var historyEvent = {
+            t:"add",
+            nodes:[nn.id],
+            dirty:RED.nodes.dirty()
+        }
+        if (activeSubflow) {
+            var subflowRefresh = RED.subflow.refresh(true);
+            if (subflowRefresh) {
+                historyEvent.subflow = {
+                    id:activeSubflow.id,
+                    changed: activeSubflow.changed,
+                    instances: subflowRefresh.instances
+                }
+            }
+        }
+        return {
+            node: nn,
+            historyEvent: historyEvent
+        }
+
+    }
+
     function canvasMouseDown() {
         if (!mousedown_node && !mousedown_link) {
             selected_link = null;
@@ -473,20 +488,58 @@ RED.view = (function() {
                 lasso.remove();
                 lasso = null;
             }
+            var point;
+            if (d3.event.metaKey || d3.event.ctrlKey) {
+                point = d3.mouse(this);
+                d3.event.stopPropagation();
+                var mainPos = $("#main-container").position();
+                RED.typeSearch.show({
+                    x:d3.event.clientX-mainPos.left-node_width/2,
+                    y:d3.event.clientY-mainPos.top-node_height/2,
+                    add: function(type) {
+                        var result = addNode(type);
+                        if (!result) {
+                            return;
+                        }
+                        var nn = result.node;
+                        var historyEvent = result.historyEvent;
+                        nn.x = point[0];
+                        nn.y = point[1];
+                        RED.history.push(historyEvent);
+                        RED.nodes.add(nn);
+                        RED.editor.validateNode(nn);
+                        RED.nodes.dirty(true);
+                        // auto select dropped node - so info shows (if visible)
+                        clearSelection();
+                        nn.selected = true;
+                        moving_set.push({n:nn});
+                        updateActiveNodes();
+                        updateSelection();
+                        redraw();
+                        if (nn._def.autoedit) {
+                            RED.editor.edit(nn);
+                        }
+                    }
+                });
 
-            if (!touchStartTime) {
-                var point = d3.mouse(this);
-                lasso = vis.append("rect")
-                    .attr("ox",point[0])
-                    .attr("oy",point[1])
-                    .attr("rx",1)
-                    .attr("ry",1)
-                    .attr("x",point[0])
-                    .attr("y",point[1])
-                    .attr("width",0)
-                    .attr("height",0)
-                    .attr("class","lasso");
-                d3.event.preventDefault();
+                updateActiveNodes();
+                updateSelection();
+                redraw();
+            } else {
+                if (!touchStartTime) {
+                    point = d3.mouse(this);
+                    lasso = vis.append("rect")
+                        .attr("ox",point[0])
+                        .attr("oy",point[1])
+                        .attr("rx",1)
+                        .attr("ry",1)
+                        .attr("x",point[0])
+                        .attr("y",point[1])
+                        .attr("width",0)
+                        .attr("height",0)
+                        .attr("class","lasso");
+                    d3.event.preventDefault();
+                }
             }
         }
     }
@@ -1673,14 +1726,14 @@ RED.view = (function() {
                             nodeMouseUp.call(this,d);
                         })
                         .on("mouseover",function(d) {
-                                if (mouse_mode === 0) {
-                                    var node = d3.select(this);
-                                    node.classed("node_hovered",true);
-                                }
+                            if (mouse_mode === 0) {
+                                var node = d3.select(this);
+                                node.classed("node_hovered",true);
+                            }
                         })
                         .on("mouseout",function(d) {
-                                var node = d3.select(this);
-                                node.classed("node_hovered",false);
+                            var node = d3.select(this);
+                            node.classed("node_hovered",false);
                         });
 
                    //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");
diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss
index fe0b18dac..5e8ecdd47 100644
--- a/editor/sass/editor.scss
+++ b/editor/sass/editor.scss
@@ -168,12 +168,7 @@
     color: $workspace-button-color;
 }
 #palette-shade, #editor-shade, #header-shade, #sidebar-shade  {
-    position: absolute;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
-    background: $shade-color;
+    @include shade;
     z-index: 2;
 }
 #sidebar-shade  {
diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss
index 88dad4622..8bd3f7e6c 100644
--- a/editor/sass/flow.scss
+++ b/editor/sass/flow.scss
@@ -170,6 +170,11 @@
     stroke-dasharray:8, 3;
 }
 
+
+.node_quickadd * {
+    stroke-dasharray: 12,3;
+}
+
 .node_status_label {
     @include disable-selection;
     stroke-width: 0;
@@ -183,6 +188,13 @@
     stroke: $port-selected-color;
     fill:  $port-selected-color;
 }
+
+.port_quick_link {
+    stroke: $port-selected-color;
+    fill:  $port-selected-color;
+}
+
+
 .subflowport {
     stroke-dasharray: 5,5;
     fill: #eee;
diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss
index 45cdd19a1..e4ad7660f 100644
--- a/editor/sass/mixins.scss
+++ b/editor/sass/mixins.scss
@@ -156,3 +156,12 @@
     box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
 
 }
+
+@mixin shade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: $shade-color;
+}
diff --git a/editor/sass/palette-editor.scss b/editor/sass/palette-editor.scss
index be1c4348d..6b67a8a85 100644
--- a/editor/sass/palette-editor.scss
+++ b/editor/sass/palette-editor.scss
@@ -82,12 +82,7 @@
         }
     }
     .palette-module-shade {
-        position: absolute;
-        top: 0;
-        bottom:0;
-        left:0;
-        right:0;
-        background: $shade-color;
+        @include shade;
         text-align: center;
         padding-top: 20px;
     }
diff --git a/editor/sass/search.scss b/editor/sass/search.scss
index 7ad8cbe5c..049aa8042 100644
--- a/editor/sass/search.scss
+++ b/editor/sass/search.scss
@@ -29,6 +29,59 @@
     ol {
     }
 }
+.red-ui-type-search-shade {
+    @include shade;
+    z-index: 20;
+    position: fixed;
+    background: rgba(255,255,255,0.05);
+}
+.red-ui-type-search {
+    box-shadow: 0 1px 6px -3px black;
+    background: none;
+    width: 300px;
+    margin-left: 0px;
+    //height: 75px;
+    border: none;
+    .red-ui-search-container {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        border: 1px dashed #aaa;
+        border-bottom: none;
+        padding: 0;
+    }
+    .red-ui-search-results-container {
+        display: none;
+        height: 150px;
+        // position: absolute;
+        // top: 0;
+        // left:0;
+        // right: 0;
+        // bottom: 0;
+        // padding: 0;
+    }
+    .red-ui-search-result {
+        padding:  2px 2px 2px 5px;
+        font-size: 12px;
+    }
+    .red-ui-search-result-node {
+        width: 18px;
+        height: 15px;
+    }
+    .palette_icon_container {
+        width: 18px;
+    }
+    .palette_icon {
+        width: 15px;
+    }
+    .red-ui-search-result-description {
+        margin-left:28px;
+    }
+    .red-ui-search-result-node-label {
+        color: #999;
+    }
+
+}
+
 .red-ui-search-container {
     padding: 3px;
     border-bottom: 1px solid $secondary-border-color;
@@ -64,6 +117,11 @@
         border-color: $primary-border-color;
         color: $form-text-color;
     }
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
 }
 
 .red-ui-search-result-node {
@@ -78,6 +136,11 @@
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
+
+    .palette_icon_container {
+        border-right: none;
+    }
+
 }
 .red-ui-search-result-description {
     margin-left: 40px;
diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss
index 08da74a24..95d58e2c8 100644
--- a/editor/sass/sidebar.scss
+++ b/editor/sass/sidebar.scss
@@ -101,10 +101,5 @@
 }
 
 .sidebar-shade {
-    position: absolute;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
-    background: $shade-color;
+    @include shade;
 }