frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add per-node filter option to Debug pane

Browse Source
This commit is contained in:
Nick O'Leary
2017-05-22 11:35:45 +01:00
parent f6b0459d27
commit 2a3e355437
12 changed files with 538 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
editor/sass/debug.scss
View File

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

2
editor/sass/style.scss
View File

@@ -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
View 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;
}
}

112
editor/sass/ui/common/editableList.scss
View File

@@ -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
View 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;
}
}
}