1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Add search presets option to searchBox widget

This commit is contained in:
Nick O'Leary 2020-06-08 12:01:29 +01:00
parent ce7d7a8e01
commit a9fb50787b
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 86 additions and 7 deletions

View File

@ -48,7 +48,7 @@
form.addClass("red-ui-searchBox-form"); form.addClass("red-ui-searchBox-form");
} }
$('<i class="fa fa-search"></i>').prependTo(this.uiContainer); $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
this.clearButton = $('<a href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer); this.clearButton = $('<a class="red-ui-searchBox-clear" href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
this.clearButton.on("click",function(e) { this.clearButton.on("click",function(e) {
e.preventDefault(); e.preventDefault();
that.element.val(""); that.element.val("");
@ -56,6 +56,62 @@
that.element.trigger("focus"); that.element.trigger("focus");
}); });
if (this.options.options) {
this.uiContainer.addClass("red-ui-searchBox-has-options");
this.optsButton = $('<a class="red-ui-searchBox-opts" href="#"><i class="fa fa-caret-down"></i></a>').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 = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer); this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
this.element.val(""); this.element.val("");

View File

@ -18,23 +18,32 @@
.red-ui-searchBox-container { .red-ui-searchBox-container {
position: relative; position: relative;
i { i {
position: absolute;
top: 9px;
font-size: 10px; font-size: 10px;
color: $secondary-text-color; color: $secondary-text-color;
} }
i.fa-search { i.fa-search {
position: absolute;
pointer-events: none; pointer-events: none;
left: 8px; left: 8px;
top: 9px; }
i.fa-caret-down {
position: absolute;
right: 6px;
font-size: 12px;
} }
i.fa-times { i.fa-times {
position: absolute; position: absolute;
right: 5px; right: 4px;
top: 9px;
} }
form.red-ui-searchBox-form { form.red-ui-searchBox-form {
margin: 0; margin: 0;
} }
a.red-ui-searchBox-opts:hover {
color: $workspace-button-color-hover;
background: $workspace-button-background-hover;
}
input.red-ui-searchBox-input { input.red-ui-searchBox-input {
border-radius: 0; border-radius: 0;
border: none; border: none;
@ -57,9 +66,12 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 20px; width: 16px;
}
a.red-ui-searchBox-clear {
display: none; display: none;
} }
.red-ui-searchBox-resultCount { .red-ui-searchBox-resultCount {
position: absolute; position: absolute;
right: 18px; right: 18px;
@ -70,6 +82,17 @@
font-size: 9px; font-size: 9px;
border-radius: 4px; 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 { .red-ui-searchBox-compact {
input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input { input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
@ -78,7 +101,7 @@
font-size: 12px; font-size: 12px;
height: 26px; height: 26px;
} }
i.fa-times,i.fa-search { i.fa-times,i.fa-search, i.fa-caret-down {
top: 7px; top: 7px;
} }
.red-ui-searchBox-resultCount { .red-ui-searchBox-resultCount {