frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js vendored
View File

@ -48,7 +48,7 @@
form.addClass("red-ui-searchBox-form");
}
$('<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) {
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 = $('<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.element.val("");

35
packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss vendored
View File

@ -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 {