Add compact searchBox to status/catch/complete nodes

This commit is contained in:
Nick O'Leary
2020-06-01 21:09:58 +01:00
parent dc412b305c
commit 2ce424b567
7 changed files with 65 additions and 16 deletions

View File

@@ -2,7 +2,8 @@
<div class="form-row node-input-target-row">
<button id="node-input-complete-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
</div>
<div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
<div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
<div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-complete-target-filter"></div>
<div id="node-input-complete-target-container-div"></div>
</div>
@@ -45,6 +46,20 @@
var editorRow = $("#dialog-form>div.node-input-target-list-row");
editorRow.css("height",height+"px");
};
$("#node-input-complete-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
dirList.treeList("filter", null);
} else {
dirList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
}
}
});
var dirList = $("#node-input-complete-target-container-div").css({width: "100%", height: "100%"})
.treeList({multi:true}).on("treelistitemmouseover", function(e, item) {

View File

@@ -14,7 +14,8 @@
<div class="form-row node-input-target-row">
<button id="node-input-catch-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
</div>
<div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
<div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
<div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-catch-target-filter"></div>
<div id="node-input-catch-target-container-div"></div>
</div>
@@ -60,7 +61,20 @@
var editorRow = $("#dialog-form>div.node-input-target-list-row");
editorRow.css("height",height+"px");
};
$("#node-input-catch-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
dirList.treeList("filter", null);
} else {
dirList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
}
}
});
var dirList = $("#node-input-catch-target-container-div").css({width: "100%", height: "100%"})
.treeList({multi:true}).on("treelistitemmouseover", function(e, item) {
item.node.highlighted = true;

View File

@@ -10,7 +10,8 @@
<div class="form-row node-input-target-row">
<button id="node-input-status-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
</div>
<div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
<div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
<div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-status-target-filter"></div>
<div id="node-input-status-target-container-div"></div>
</div>
<div class="form-row">
@@ -48,6 +49,20 @@
var editorRow = $("#dialog-form>div.node-input-target-list-row");
editorRow.css("height",height+"px");
};
$("#node-input-status-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
dirList.treeList("filter", null);
} else {
dirList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
}
}
});
var dirList = $("#node-input-status-target-container-div").css({width: "100%", height: "100%"})
.treeList({multi:true}).on("treelistitemmouseover", function(e, item) {