diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js
index c51ef1e42..bea8705bb 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js
@@ -48,7 +48,7 @@
form.addClass("red-ui-searchBox-form");
}
$('').prependTo(this.uiContainer);
- this.clearButton = $('').appendTo(this.uiContainer);
+ this.clearButton = $('').appendTo(this.uiContainer);
this.clearButton.on("click",function(e) {
e.preventDefault();
that.element.val("");
@@ -56,6 +56,62 @@
that.element.trigger("focus");
});
+ if (this.options.options) {
+ this.uiContainer.addClass("red-ui-searchBox-has-options");
+ this.optsButton = $('').appendTo(this.uiContainer);
+ var menuShown = false;
+ this.optsMenu = RED.popover.menu({
+ style: this.options.style,
+ options: this.options.options.map(function(opt) {
+ return {
+ label: opt.label,
+ onselect: function() {
+ that.element.val(opt.value+" ");
+ that._change(opt.value,true);
+ }
+ }
+ }),
+ onclose: function(cancelled) {
+ menuShown = false;
+ that.element.trigger("focus");
+ },
+ disposeOnClose: false
+ });
+
+ var showMenu = function() {
+ menuShown = true;
+ that.optsMenu.show({
+ target: that.optsButton,
+ align: "left",
+ offset: [that.optsButton.width()-2,-1],
+ dispose: false
+ })
+ }
+ this.optsButton.on("click",function(e) {
+ e.preventDefault();
+ if (!menuShown) {
+ showMenu();
+ } else {
+ // TODO: This doesn't quite work because the panel's own
+ // mousedown handler triggers a close before this click
+ // handler fires.
+ that.optsMenu.hide(true);
+ }
+ });
+ this.optsButton.on("keydown",function(e) {
+ if (!menuShown && e.keyCode === 40) {
+ //DOWN
+ showMenu();
+ }
+ });
+ this.element.on("keydown",function(e) {
+ if (!menuShown && e.keyCode === 40) {
+ //DOWN
+ showMenu();
+ }
+ });
+ }
+
this.resultCount = $('',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
this.element.val("");
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
index bb51d9969..29ca35d27 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
@@ -18,23 +18,32 @@
.red-ui-searchBox-container {
position: relative;
i {
+ position: absolute;
+ top: 9px;
font-size: 10px;
color: $secondary-text-color;
}
i.fa-search {
- position: absolute;
pointer-events: none;
left: 8px;
- top: 9px;
+ }
+ i.fa-caret-down {
+ position: absolute;
+ right: 6px;
+ font-size: 12px;
}
i.fa-times {
position: absolute;
- right: 5px;
- top: 9px;
+ right: 4px;
}
+
form.red-ui-searchBox-form {
margin: 0;
}
+ a.red-ui-searchBox-opts:hover {
+ color: $workspace-button-color-hover;
+ background: $workspace-button-background-hover;
+ }
input.red-ui-searchBox-input {
border-radius: 0;
border: none;
@@ -57,9 +66,12 @@
right: 0;
top: 0;
bottom: 0;
- width: 20px;
+ width: 16px;
+ }
+ a.red-ui-searchBox-clear {
display: none;
}
+
.red-ui-searchBox-resultCount {
position: absolute;
right: 18px;
@@ -70,6 +82,17 @@
font-size: 9px;
border-radius: 4px;
}
+ &.red-ui-searchBox-has-options {
+ a.red-ui-searchBox-clear {
+ right: 16px;
+ }
+ .red-ui-searchBox-resultCount {
+ right: 33px;
+ }
+ input.red-ui-searchBox-input {
+ padding-right: 33px;
+ }
+ }
}
.red-ui-searchBox-compact {
input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
@@ -78,7 +101,7 @@
font-size: 12px;
height: 26px;
}
- i.fa-times,i.fa-search {
+ i.fa-times,i.fa-search, i.fa-caret-down {
top: 7px;
}
.red-ui-searchBox-resultCount {