mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Add per-node filter option to Debug pane
This commit is contained in:
Nick O'Leary
131
editor/js/ui/common/checkboxSet.js
Normal file
131
editor/js/ui/common/checkboxSet.js
Normal file
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Copyright JS Foundation and other contributors, http://js.foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
(function($) {
|
||||
$.widget( "nodered.checkboxSet", {
|
||||
_create: function() {
|
||||
var that = this;
|
||||
this.uiElement = this.element.wrap( "<span>" ).parent();
|
||||
this.uiElement.addClass("red-ui-checkboxSet");
|
||||
if (this.options.parent) {
|
||||
this.parent = this.options.parent;
|
||||
this.parent.checkboxSet('addChild',this.element);
|
||||
}
|
||||
this.children = [];
|
||||
this.partialFlag = false;
|
||||
this.stateValue = 0;
|
||||
var initialState = this.element.prop('checked');
|
||||
this.options = [
|
||||
$('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-square-o"></i></span>').appendTo(this.uiElement),
|
||||
$('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-check-square-o"></i></span>').appendTo(this.uiElement),
|
||||
$('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-minus-square-o"></i></span>').appendTo(this.uiElement)
|
||||
];
|
||||
if (initialState) {
|
||||
this.options[1].show();
|
||||
} else {
|
||||
this.options[0].show();
|
||||
}
|
||||
|
||||
this.element.change(function() {
|
||||
if (this.checked) {
|
||||
that.options[0].hide();
|
||||
that.options[1].show();
|
||||
that.options[2].hide();
|
||||
} else {
|
||||
that.options[1].hide();
|
||||
that.options[0].show();
|
||||
that.options[2].hide();
|
||||
}
|
||||
var isChecked = this.checked;
|
||||
that.children.forEach(function(child) {
|
||||
child.checkboxSet('state',isChecked,false,true);
|
||||
})
|
||||
})
|
||||
this.uiElement.click(function(e) {
|
||||
e.stopPropagation();
|
||||
// state returns null for a partial state. Clicking on that should
|
||||
// result in false.
|
||||
that.state((that.state()===false)?true:false);
|
||||
})
|
||||
if (this.parent) {
|
||||
this.parent.checkboxSet('updateChild',this);
|
||||
}
|
||||
},
|
||||
_destroy: function() {
|
||||
if (this.parent) {
|
||||
this.parent.checkboxSet('removeChild',this.element);
|
||||
}
|
||||
},
|
||||
addChild: function(child) {
|
||||
var that = this;
|
||||
this.children.push(child);
|
||||
},
|
||||
removeChild: function(child) {
|
||||
var index = this.children.indexOf(child);
|
||||
if (index > -1) {
|
||||
this.children.splice(index,1);
|
||||
}
|
||||
},
|
||||
updateChild: function(child) {
|
||||
var checkedCount = 0;
|
||||
this.children.forEach(function(c,i) {
|
||||
if (c.checkboxSet('state') === true) {
|
||||
checkedCount++;
|
||||
}
|
||||
});
|
||||
if (checkedCount === 0) {
|
||||
|
||||
this.state(false,true);
|
||||
} else if (checkedCount === this.children.length) {
|
||||
this.state(true,true);
|
||||
} else {
|
||||
this.state(null,true);
|
||||
}
|
||||
},
|
||||
disable: function() {
|
||||
this.uiElement.addClass('disabled');
|
||||
},
|
||||
state: function(state,suppressEvent,suppressParentUpdate) {
|
||||
|
||||
if (arguments.length === 0) {
|
||||
return this.partialFlag?null:this.element.is(":checked");
|
||||
} else {
|
||||
this.partialFlag = (state === null);
|
||||
var trueState = this.partialFlag||state;
|
||||
this.element.prop('checked',trueState);
|
||||
if (state === true) {
|
||||
this.options[0].hide();
|
||||
this.options[1].show();
|
||||
this.options[2].hide();
|
||||
} else if (state === false) {
|
||||
this.options[2].hide();
|
||||
this.options[1].hide();
|
||||
this.options[0].show();
|
||||
} else if (state === null) {
|
||||
this.options[0].hide();
|
||||
this.options[1].hide();
|
||||
this.options[2].show();
|
||||
}
|
||||
if (!suppressEvent) {
|
||||
this.element.trigger('change',null);
|
||||
}
|
||||
if (!suppressParentUpdate && this.parent) {
|
||||
this.parent.checkboxSet('updateChild',this);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})(jQuery);
|
||||
@@ -50,9 +50,19 @@
|
||||
this.uiContainer = this.element
|
||||
.wrap( "<div>" )
|
||||
.parent();
|
||||
this.topContainer = this.uiContainer.wrap("<div>").parent();
|
||||
|
||||
if (this.options.header) {
|
||||
this.options.header.addClass("red-ui-editableList-header");
|
||||
this.borderContainer = this.uiContainer.wrap("<div>").parent();
|
||||
this.borderContainer.prepend(this.options.header);
|
||||
this.topContainer = this.borderContainer.wrap("<div>").parent();
|
||||
} else {
|
||||
this.topContainer = this.uiContainer.wrap("<div>").parent();
|
||||
}
|
||||
this.topContainer.addClass('red-ui-editableList');
|
||||
if (this.options.class) {
|
||||
this.topContainer.addClass(this.options.class);
|
||||
}
|
||||
|
||||
if (this.options.addButton !== false) {
|
||||
var addLabel;
|
||||
@@ -86,6 +96,11 @@
|
||||
this.uiContainer.css("position","absolute");
|
||||
|
||||
}
|
||||
if (this.options.header) {
|
||||
this.borderContainer.addClass("red-ui-editableList-border");
|
||||
} else {
|
||||
this.uiContainer.addClass("red-ui-editableList-border");
|
||||
}
|
||||
this.uiContainer.addClass("red-ui-editableList-container");
|
||||
|
||||
this.uiHeight = this.element.height();
|
||||
@@ -273,6 +288,11 @@
|
||||
},0);
|
||||
}
|
||||
},
|
||||
addItems: function(items) {
|
||||
for (var i=0; i<items.length;i++) {
|
||||
this.addItem(items[i]);
|
||||
}
|
||||
},
|
||||
removeItem: function(data) {
|
||||
var items = this.element.children().filter(function(f) {
|
||||
return data === $(this).find(".red-ui-editableList-item-content").data('data');
|
||||
|
||||
@@ -594,12 +594,17 @@ RED.utils = (function() {
|
||||
|
||||
function getNodeLabel(node,defaultLabel) {
|
||||
defaultLabel = defaultLabel||"";
|
||||
var l = node._def.label;
|
||||
try {
|
||||
l = (typeof l === "function" ? l.call(node) : l)||defaultLabel;
|
||||
} catch(err) {
|
||||
console.log("Definition error: "+node.type+".label",err);
|
||||
l = defaultLabel;
|
||||
var l;
|
||||
if (node.type === 'tab') {
|
||||
l = node.label || defaultLabel
|
||||
} else {
|
||||
l = node._def.label;
|
||||
try {
|
||||
l = (typeof l === "function" ? l.call(node) : l)||defaultLabel;
|
||||
} catch(err) {
|
||||
console.log("Definition error: "+node.type+".label",err);
|
||||
l = defaultLabel;
|
||||
}
|
||||
}
|
||||
return RED.text.bidi.enforceTextDirectionWithUCC(l);
|
||||
}
|
||||
|
||||
@@ -36,13 +36,16 @@
|
||||
top: 42px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 20;
|
||||
background: #f9f9f9;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
.debug-filter-row {
|
||||
text-align: right;
|
||||
.red-ui-nodeList {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.debug-message {
|
||||
|
||||
@@ -52,6 +52,8 @@
|
||||
@import "ui/common/editableList";
|
||||
@import "ui/common/searchBox";
|
||||
@import "ui/common/typedInput";
|
||||
@import "ui/common/nodeList";
|
||||
@import "ui/common/checkboxSet";
|
||||
|
||||
@import "dragdrop";
|
||||
|
||||
|
||||
29
editor/sass/ui/common/checkboxSet.scss
Normal file
29
editor/sass/ui/common/checkboxSet.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Copyright JS Foundation and other contributors, http://js.foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
.red-ui-checkboxSet {
|
||||
width: 15px;
|
||||
display: inline-block;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
input {
|
||||
display:none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
@@ -13,59 +13,63 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
.red-ui-editableList-border {
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
.red-ui-editableList-header {
|
||||
border-bottom: 1px solid $form-input-border-color;
|
||||
padding: 2px 16px 2px 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
.red-ui-editableList-container {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
.red-ui-editableList-list {
|
||||
list-style-type:none;
|
||||
margin: 0;
|
||||
}
|
||||
.red-ui-editabelList-item-placeholder {
|
||||
border: 2px dashed $secondary-border-color !important;
|
||||
}
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin:0;
|
||||
padding:8px 0px;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
min-height: 20px;
|
||||
.red-ui-editableList-item-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
margin-top: -7px;
|
||||
color: #eee;
|
||||
cursor: move;
|
||||
}
|
||||
.red-ui-editableList-item-remove {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
border-top: 1px solid $secondary-border-color;
|
||||
}
|
||||
//.red-ui-editableList-item-content { outline: 1px solid red}
|
||||
|
||||
&.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
|
||||
margin-left: 22px;
|
||||
}
|
||||
&.red-ui-editableList-item-removable .red-ui-editableList-item-content {
|
||||
margin-right: 28px;
|
||||
}
|
||||
&.red-ui-editableList-item-deleting {
|
||||
background: #fee;
|
||||
}
|
||||
}
|
||||
|
||||
.red-ui-editableList-container {
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
|
||||
.red-ui-editableList-list {
|
||||
list-style-type:none;
|
||||
margin: 0;
|
||||
}
|
||||
.red-ui-editabelList-item-placeholder {
|
||||
border: 2px dashed $secondary-border-color !important;
|
||||
}
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin:0;
|
||||
padding:8px 0px;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
min-height: 20px;
|
||||
.red-ui-editableList-item-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
margin-top: -7px;
|
||||
color: #eee;
|
||||
cursor: move;
|
||||
}
|
||||
.red-ui-editableList-item-remove {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
border-top: 1px solid $secondary-border-color;
|
||||
}
|
||||
//.red-ui-editableList-item-content { outline: 1px solid red}
|
||||
|
||||
&.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
|
||||
margin-left: 22px;
|
||||
}
|
||||
&.red-ui-editableList-item-removable .red-ui-editableList-item-content {
|
||||
margin-right: 28px;
|
||||
}
|
||||
&.red-ui-editableList-item-deleting {
|
||||
background: #fee;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
65
editor/sass/ui/common/nodeList.scss
Normal file
65
editor/sass/ui/common/nodeList.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* Copyright JS Foundation and other contributors, http://js.foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
.red-ui-nodeList {
|
||||
.red-ui-editableList-container {
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
background: #fefefe;
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
i.fa-angle-right {
|
||||
text-align: center;
|
||||
width: 15px;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
.expandable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.expanded i.fa-angle-right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.meta {
|
||||
float: right;
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.red-ui-editableList-item-content.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
&.red-ui-editableList-section-header {
|
||||
background: #f0f0f0;
|
||||
.red-ui-editableList-item-content.disabled {
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.red-ui-editableList-header {
|
||||
text-align: left;
|
||||
&>span:last-child {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user