mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Make node-info properties collapsable in sidebar
This commit is contained in:
parent
57c049b49f
commit
35042132fa
@ -32,6 +32,8 @@ RED.sidebar.info = (function() {
|
|||||||
content.style.paddingLeft = "4px";
|
content.style.paddingLeft = "4px";
|
||||||
content.style.paddingRight = "4px";
|
content.style.paddingRight = "4px";
|
||||||
|
|
||||||
|
var propertiesExpanded = false;
|
||||||
|
|
||||||
function show() {
|
function show() {
|
||||||
if (!RED.sidebar.containsTab("info")) {
|
if (!RED.sidebar.containsTab("info")) {
|
||||||
RED.sidebar.addTab("info",content,false);
|
RED.sidebar.addTab("info",content,false);
|
||||||
@ -59,6 +61,9 @@ RED.sidebar.info = (function() {
|
|||||||
function refresh(node) {
|
function refresh(node) {
|
||||||
var table = '<table class="node-info"><tbody>';
|
var table = '<table class="node-info"><tbody>';
|
||||||
table += '<tr class="blank"><td colspan="2">Node</td></tr>';
|
table += '<tr class="blank"><td colspan="2">Node</td></tr>';
|
||||||
|
if (node.type != "subflow" && node.name) {
|
||||||
|
table += "<tr><td>Name</td><td> "+node.name+"</td></tr>";
|
||||||
|
}
|
||||||
table += "<tr><td>Type</td><td> "+node.type+"</td></tr>";
|
table += "<tr><td>Type</td><td> "+node.type+"</td></tr>";
|
||||||
table += "<tr><td>ID</td><td> "+node.id+"</td></tr>";
|
table += "<tr><td>ID</td><td> "+node.id+"</td></tr>";
|
||||||
|
|
||||||
@ -84,18 +89,22 @@ RED.sidebar.info = (function() {
|
|||||||
table += "<tr><td>instances</td><td>"+userCount+"</td></tr>";
|
table += "<tr><td>instances</td><td>"+userCount+"</td></tr>";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (node.type != "subflow" && node.type != "comment") {
|
if (!m && node.type != "subflow" && node.type != "comment") {
|
||||||
table += '<tr class="blank"><td colspan="2">Properties</td></tr>';
|
table += '<tr class="blank"><td colspan="2"><a href="#" class="node-info-property-header"><i style="width: 10px; text-align: center;" class="fa fa-caret-'+(propertiesExpanded?"down":"right")+'"></i> Properties</a></td></tr>';
|
||||||
if (node._def) {
|
if (node._def) {
|
||||||
for (var n in node._def.defaults) {
|
for (var n in node._def.defaults) {
|
||||||
if (node._def.defaults.hasOwnProperty(n)) {
|
if (n != "name" && node._def.defaults.hasOwnProperty(n)) {
|
||||||
var val = node[n]||"";
|
var val = node[n]||"";
|
||||||
var type = typeof val;
|
var type = typeof val;
|
||||||
if (type === "string") {
|
if (type === "string") {
|
||||||
if (val.length > 30) {
|
if (val.length == 0) {
|
||||||
val = val.substring(0,30)+" ...";
|
val += '<span style="font-style: italic; color: #ccc;">blank</span>';
|
||||||
|
} else {
|
||||||
|
if (val.length > 30) {
|
||||||
|
val = val.substring(0,30)+" ...";
|
||||||
|
}
|
||||||
|
val = val.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
||||||
}
|
}
|
||||||
val = val.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
|
||||||
} else if (type === "number") {
|
} else if (type === "number") {
|
||||||
val = val.toString();
|
val = val.toString();
|
||||||
} else if ($.isArray(val)) {
|
} else if ($.isArray(val)) {
|
||||||
@ -113,12 +122,12 @@ RED.sidebar.info = (function() {
|
|||||||
val = val.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
val = val.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
||||||
}
|
}
|
||||||
|
|
||||||
table += "<tr><td>"+n+"</td><td>"+val+"</td></tr>";
|
table += '<tr class="node-info-property-row'+(propertiesExpanded?"":" hide")+'"><td>'+n+"</td><td>"+val+"</td></tr>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
table += "</tbody></table><br/>";
|
table += "</tbody></table><hr/>";
|
||||||
if (node.type != "comment") {
|
if (node.type != "comment") {
|
||||||
var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
|
var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
|
||||||
table += '<div class="node-help">'+helpText+"</div>";
|
table += '<div class="node-help">'+helpText+"</div>";
|
||||||
@ -131,6 +140,23 @@ RED.sidebar.info = (function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$("#tab-info").html(table);
|
$("#tab-info").html(table);
|
||||||
|
|
||||||
|
$(".node-info-property-header").click(function(e) {
|
||||||
|
var icon = $(this).find("i");
|
||||||
|
if (icon.hasClass("fa-caret-right")) {
|
||||||
|
icon.removeClass("fa-caret-right");
|
||||||
|
icon.addClass("fa-caret-down");
|
||||||
|
$(".node-info-property-row").show();
|
||||||
|
propertiesExpanded = true;
|
||||||
|
} else {
|
||||||
|
icon.addClass("fa-caret-right");
|
||||||
|
icon.removeClass("fa-caret-down");
|
||||||
|
$(".node-info-property-row").hide();
|
||||||
|
propertiesExpanded = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function clear() {
|
function clear() {
|
||||||
|
@ -827,6 +827,7 @@ button.input-append-right {
|
|||||||
}
|
}
|
||||||
|
|
||||||
table.node-info {
|
table.node-info {
|
||||||
|
font-size: 14px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
width: 97%;
|
width: 97%;
|
||||||
}
|
}
|
||||||
@ -857,6 +858,16 @@ table.node-info td:last-child{
|
|||||||
div.node-info {
|
div.node-info {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
.node-info-property-header {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-info-property-header:hover,
|
||||||
|
.node-info-property-header:focus {
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.input-error {
|
.input-error {
|
||||||
border-color: rgb(214, 97, 95) !important;
|
border-color: rgb(214, 97, 95) !important;
|
||||||
|
Loading…
Reference in New Issue
Block a user