frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #2588 from node-red/status-filter-nodes

Browse Source 
Add compact searchBox to status/catch/complete nodes
This commit is contained in:
Nick O'Leary 2020-06-03 17:29:05 +01:00 committed by GitHub
commit b6fbe7d07d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 100 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,11 @@
this.element.addClass("red-ui-searchBox-input");
this.uiContainer = this.element.wrap("<div>").parent();
this.uiContainer.addClass("red-ui-searchBox-container");
if (this.options.style === "compact") {
this.uiContainer.addClass("red-ui-searchBox-compact");
}
if (this.element.parents("form").length === 0) {
var form = this.element.wrap("<form>").parent();
form.addClass("red-ui-searchBox-form");

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

@ -773,10 +773,12 @@
}
},
filter: function(filterFunc,expandResults) {
var totalCount = 0;
var filter = function(item) {
var matchCount = 0;
if (filterFunc && filterFunc(item)) {
matchCount++;
totalCount++;
}
var childCount = 0;
if (item.children && typeof item.children !== "function") {
@ -799,11 +801,13 @@
}
}
if (!filterFunc) {
totalCount++;
return true
}
return matchCount > 0
}
return this._topList.editableList('filter', filter);
this._topList.editableList('filter', filter);
return totalCount;
},
get: function(id) {
return this._items[id] || null;

1
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js vendored
View File

@ -202,6 +202,7 @@ RED.sidebar.info.outliner = (function() {
var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val();

12
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -504,18 +504,6 @@ div.red-ui-info-table {
width: calc(100% - 150px);
max-width: 250px;
background: $palette-header-background;
input.red-ui-searchBox-input {
border: 1px solid $secondary-border-color;
border-radius: 3px;
font-size: 12px;
height: 26px;
}
input:focus.red-ui-searchBox-input {
border: 1px solid $secondary-border-color;
}
i.fa-search, i.fa-times {
top: 7px;
}
}
}

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

@ -71,3 +71,18 @@
border-radius: 4px;
}
}
.red-ui-searchBox-compact {
input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
border: 1px solid $secondary-border-color;
border-radius: 3px;
font-size: 12px;
height: 26px;
}
i.fa-times,i.fa-search {
top: 7px;
}
.red-ui-searchBox-resultCount {
top: 3px;
padding: 0 6px;
}
}

19
packages/node_modules/@node-red/nodes/core/common/24-complete.html vendored
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,22 @@
var editorRow = $("#dialog-form>div.node-input-target-list-row");
editorRow.css("height",height+"px");
};
var search = $("#node-input-complete-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
dirList.treeList("filter", null);
search.searchBox("count","");
} else {
var count = dirList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
search.searchBox("count",count+" / "+candidateNodes.length);
}
}
});
var dirList = $("#node-input-complete-target-container-div").css({width: "100%", height: "100%"})
.treeList({multi:true}).on("treelistitemmouseover", function(e, item) {

20
packages/node_modules/@node-red/nodes/core/common/25-catch.html vendored
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,22 @@
var editorRow = $("#dialog-form>div.node-input-target-list-row");
editorRow.css("height",height+"px");
};
var search = $("#node-input-catch-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
dirList.treeList("filter", null);
search.searchBox("count","");
} else {
var count = dirList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
search.searchBox("count",count+" / "+candidateNodes.length);
}
}
});
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;

19
packages/node_modules/@node-red/nodes/core/common/25-status.html vendored
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,22 @@
var editorRow = $("#dialog-form>div.node-input-target-list-row");
editorRow.css("height",height+"px");
};
var search = $("#node-input-status-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
dirList.treeList("filter", null);
search.searchBox("count","");
} else {
var count = dirList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
search.searchBox("count",count+" / "+candidateNodes.length);
}
}
});
var dirList = $("#node-input-status-target-container-div").css({width: "100%", height: "100%"})
.treeList({multi:true}).on("treelistitemmouseover", function(e, item) {

20
packages/node_modules/@node-red/nodes/core/common/60-link.html vendored
View File

@ -4,6 +4,7 @@
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
</div>
<div style="position:relative; height: 30px; text-align: right;"><div style="display:inline-block"><input type="text" id="node-input-link-target-filter"></div></div>
<div class="form-row node-input-link-row"></div>
</script>
<script type="text/html" data-template-name="link out">
@ -11,6 +12,7 @@
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
</div>
<div style="position:relative; height: 30px; text-align: right;"><div style="display:inline-block"><input type="text" id="node-input-link-target-filter"></div></div>
<div class="form-row node-input-link-row"></div>
</script>
@ -47,6 +49,24 @@
});
var candidateNodes = RED.nodes.filterNodes({type:targetType});
var search = $("#node-input-link-target-filter").searchBox({
style: "compact",
delay: 300,
change: function() {
var val = $(this).val().trim();
if (val === "") {
treeList.treeList("filter", null);
search.searchBox("count","");
} else {
var count = treeList.treeList("filter", function(item) {
return item.label.indexOf(val) > -1
});
search.searchBox("count",count+" / "+candidateNodes.length);
}
}
});
var flows = [];
var flowMap = {};