[outline] Connect search dialog to outline filter box

node-red · Apr 27, 2020 · 12dc4ab · 12dc4ab
1 parent 55a5917
commit 12dc4ab
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 14 deletions.
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
@@ -157,6 +157,11 @@ RED.search = (function() {
 
             }
         });
+        var copySearchContainer = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-caret-right"></button>').appendTo(searchDiv).on('click', function(evt) {
+            evt.preventDefault();
+            RED.sidebar.info.outliner.search(searchInput.val())
+            hide();
+        });
 
         searchInput.on('keydown',function(evt) {
             var children;

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
@@ -1,7 +1,7 @@
 RED.sidebar.info.outliner = (function() {
 
     var treeList;
-
+    var searchInput;
     var flowList;
     var subflowList;
     var globalConfigNodes;
@@ -222,23 +222,21 @@ RED.sidebar.info.outliner = (function() {
             var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '400px'});
             var toolbar = $("<div>", {class:"red-ui-info-outline-toolbar"}).appendTo(container);
 
-            var searchInput = $('<input type="text">').appendTo(toolbar).searchBox({
-                delay: 100,
+            searchInput = $('<input type="text">').appendTo(toolbar).searchBox({
+                delay: 300,
                 change: function() {
-                    var val = $(this).val().trim().toLowerCase();
+                    var val = $(this).val();
+                    var searchResults = RED.search.search(val);
                     if (val) {
+                        var resultMap = {};
+                        for (var i=0,l=searchResults.length;i<l;i++) {
+                            resultMap[searchResults[i].node.id] = true;
+                        }
                         var c = treeList.treeList('filter',function(item) {
                             if (item.depth === 0) {
                                 return true;
                             }
-                            if (item.id &&  objects[item.id]) {
-                                var l = ((objects[item.id].type||"")+" "+(objects[item.id].name||"")+" "+(objects[item.id].id||"")+" "+(objects[item.id].label||"")).toLowerCase();
-                                var isMatch = l.indexOf(val) > -1;
-                                if (isMatch) {
-                                    return true;
-                                }
-                            }
-                            return false;
+                            return item.id &&  objects[item.id] && resultMap[item.id]
                         })
                     } else {
                         treeList.treeList('filter',null);
@@ -421,6 +419,9 @@ RED.sidebar.info.outliner = (function() {
     }
 
     return {
-        build: build
+        build: build,
+        search: function(val) {
+            searchInput.searchBox('value',val)
+        }
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -24,6 +24,13 @@
     top: 0px;
     border: 1px solid $primary-border-color;
     box-shadow: 0 0 10px $shadow;
+    background: $secondary-background;
+
+    .red-ui-searchBox-container {
+        display: inline-block;
+        margin-right: 6px;
+        width: calc(100% - 30px);
+    }
 }
 
 .red-ui-type-search {

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -369,7 +369,7 @@ div.red-ui-info-table {
     top:0;
     bottom: 0;
     right: 0px;
-    padding: 2px 0 0 1px;
+    padding: 2px 8px 0 1px;
     text-align: right;
     background: $list-item-background;