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

[outline] Update information section of info sidebar

Browse Source
This commit is contained in:
Nick O'Leary 2020-05-01 17:39:54 +01:00
parent aca61c0354
commit 78c86880e4
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
8 changed files with 415 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,6 +101,8 @@
var target; var target;
switch(evt.keyCode) { switch(evt.keyCode) {
case 13: // ENTER case 13: // ENTER
evt.preventDefault();
evt.stopPropagation();
if (selected.children) { if (selected.children) {
if (selected.treeList.container.hasClass("expanded")) { if (selected.treeList.container.hasClass("expanded")) {
selected.treeList.collapse() selected.treeList.collapse()
@ -113,6 +115,8 @@
break; break;
case 37: // LEFT case 37: // LEFT
evt.preventDefault();
evt.stopPropagation();
if (selected.children&& selected.treeList.container.hasClass("expanded")) { if (selected.children&& selected.treeList.container.hasClass("expanded")) {
selected.treeList.collapse() selected.treeList.collapse()
} else if (selected.parent) { } else if (selected.parent) {
@ -120,6 +124,8 @@
} }
break; break;
case 38: // UP case 38: // UP
evt.preventDefault();
evt.stopPropagation();
target = that._getPreviousSibling(selected); target = that._getPreviousSibling(selected);
if (target) { if (target) {
target = that._getLastDescendant(target); target = that._getLastDescendant(target);
@ -129,6 +135,8 @@
} }
break; break;
case 39: // RIGHT case 39: // RIGHT
evt.preventDefault();
evt.stopPropagation();
if (selected.children) { if (selected.children) {
if (!selected.treeList.container.hasClass("expanded")) { if (!selected.treeList.container.hasClass("expanded")) {
selected.treeList.expand() selected.treeList.expand()
@ -136,6 +144,8 @@
} }
break break
case 40: //DOWN case 40: //DOWN
evt.preventDefault();
evt.stopPropagation();
if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) { if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) {
target = selected.children[0]; target = selected.children[0];
} else { } else {
@ -339,17 +349,17 @@
} }
item.treeList.expand = function(done) { item.treeList.expand = function(done) {
if (!item.children) { if (!item.children) {
if (done) { done() } if (done) { done(false) }
return; return;
} }
if (!item.treeList.container) { if (!item.treeList.container) {
item.expanded = true; item.expanded = true;
if (done) { done() } if (done) { done(false) }
return; return;
} }
var container = item.treeList.container; var container = item.treeList.container;
if (container.hasClass("expanded")) { if (container.hasClass("expanded")) {
if (done) { done() } if (done) { done(false) }
return; return;
} }
@ -376,7 +386,7 @@
} }
} }
item.expanded = true; item.expanded = true;
if (done) { done() } if (done) { done(true) }
that._trigger("childrenloaded",null,item) that._trigger("childrenloaded",null,item)
} }
if (typeof item.children === 'function') { if (typeof item.children === 'function') {
@ -399,7 +409,7 @@
item.treeList.childList.slideDown('fast'); item.treeList.childList.slideDown('fast');
} }
item.expanded = true; item.expanded = true;
if (done) { done() } if (done) { done(!that._loadingData) }
} }
container.addClass("expanded"); container.addClass("expanded");
} }
@ -427,14 +437,17 @@
} }
} }
item.treeList.replaceElement = function (element) { item.treeList.replaceElement = function (element) {
if (item.element && item.treeList.container) { if (item.element) {
if (item.treeList.container) {
$(item.element).remove(); $(item.element).remove();
item.element = element; $(element).appendTo(item.treeList.label);
$(item.element).appendTo(label); var labelPaddingWidth = (item.gutter?item.gutter.width()+2:0)+(item.depth*20);
$(item.element).css({ $(element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)" width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
}) })
} }
item.element = element;
}
} }
if (item.children && typeof item.children !== "function") { if (item.children && typeof item.children !== "function") {
@ -595,6 +608,7 @@
if (v) { if (v) {
that._trigger("select",null,item) that._trigger("select",null,item)
} }
that.reveal(item);
} }
} }
if (item.icon) { if (item.icon) {
@ -658,10 +672,15 @@
stack.unshift(i); stack.unshift(i);
i = i.parent; i = i.parent;
} }
var handleStack = function() { var isOpening = false;
var handleStack = function(opening) {
isOpening = isOpening ||opening
var item = stack.shift(); var item = stack.shift();
if (stack.length === 0) { if (stack.length === 0) {
item.treeList.parentList.editableList('show',item); setTimeout(function() {
that.reveal(item);
},isOpening?200:0);
// item.treeList.parentList.editableList('show',item);
} else { } else {
item.treeList.expand(handleStack) item.treeList.expand(handleStack)
} }
@ -674,13 +693,27 @@
// } // }
// } // }
}, },
reveal: function(item) {
var listOffset = this._topList.offset().top;
var itemOffset = item.treeList.label.offset().top;
var scrollTop = this._topList.parent().scrollTop();
itemOffset -= listOffset+scrollTop;
var treeHeight = this._topList.parent().height();
var itemHeight = item.treeList.label.outerHeight();
if (itemOffset < itemHeight/2) {
this._topList.parent().scrollTop(scrollTop+itemOffset-itemHeight/2-itemHeight)
} else if (itemOffset+itemHeight > treeHeight) {
this._topList.parent().scrollTop(scrollTop+((itemOffset+2.5*itemHeight)-treeHeight));
}
console.log("scroll now",this._topList.parent().scrollTop())
},
select: function(item) { select: function(item) {
if (!this.options.multi) { if (!this.options.multi) {
this._topList.find(".selected").removeClass("selected"); this._topList.find(".selected").removeClass("selected");
} }
this.show(item.id);
item.treeList.label.addClass("selected"); item.treeList.label.addClass("selected");
this._trigger("select",null,item) this._trigger("select",null,item)
}, },
clearSelection: function() { clearSelection: function() {
this._topList.find(".selected").removeClass("selected"); this._topList.find(".selected").removeClass("selected");
@ -700,16 +733,16 @@
return undefined; return undefined;
} }
}, },
filter: function(filterFunc) { filter: function(filterFunc,expandResults) {
var filter = function(item) { var filter = function(item) {
// console.log(item); var matchCount = 0;
var childCount = 0;
if (filterFunc && filterFunc(item)) { if (filterFunc && filterFunc(item)) {
childCount++; matchCount++;
} }
var childCount = 0;
if (item.children && typeof item.children !== "function") { if (item.children && typeof item.children !== "function") {
if (item.treeList.childList) { if (item.treeList.childList) {
childCount += item.treeList.childList.editableList('filter', filter); childCount = item.treeList.childList.editableList('filter', filter);
} else { } else {
item.treeList.childFilter = filter; item.treeList.childFilter = filter;
if (filterFunc) { if (filterFunc) {
@ -718,13 +751,18 @@
childCount++; childCount++;
} }
}) })
} }
} }
matchCount += childCount;
if (childCount > 0) {
item.treeList.expand();
}
} }
if (!filterFunc) { if (!filterFunc) {
return true return true
} }
return childCount > 0 return matchCount > 0
} }
return this._topList.editableList('filter', filter); return this._topList.editableList('filter', filter);
} }

2
packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js vendored
View File

@ -15,7 +15,7 @@
**/ **/
(function() { (function() {
var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>'; var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px; margin-bottom:0;"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
function stringToUTF8Array(str) { function stringToUTF8Array(str) {
var data = []; var data = [];

4
packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js vendored
View File

@ -318,9 +318,9 @@
var p2 = $("#red-ui-editor-type-expression-panel-info > .form-row > div:first-child"); var p2 = $("#red-ui-editor-type-expression-panel-info > .form-row > div:first-child");
p2Height -= p2.outerHeight(true) + 20; p2Height -= p2.outerHeight(true) + 20;
$(".red-ui-editor-type-expression-tab-content").height(p2Height); $(".red-ui-editor-type-expression-tab-content").height(p2Height);
$("#red-ui-editor-type-expression-test-data").css("height",(p2Height-5)+"px"); $("#red-ui-editor-type-expression-test-data").css("height",(p2Height-25)+"px");
testDataEditor.resize(); testDataEditor.resize();
$("#red-ui-editor-type-expression-test-result").css("height",(p2Height-5)+"px"); $("#red-ui-editor-type-expression-test-result").css("height",(p2Height-25)+"px");
testResultEditor.resize(); testResultEditor.resize();
} }
}); });

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

@ -2,6 +2,7 @@ RED.sidebar.info.outliner = (function() {
var treeList; var treeList;
var searchInput; var searchInput;
var projectInfo;
var flowList; var flowList;
var subflowList; var subflowList;
var globalConfigNodes; var globalConfigNodes;
@ -10,47 +11,37 @@ RED.sidebar.info.outliner = (function() {
var objectBacklog = {}; var objectBacklog = {};
function getFlowData(project) { function getFlowData() {
var flowData = [ var flowData = [
{ {
label: "Flows", label: "Flows",
expanded: true, expanded: true,
children: [
{
id: "__global__",
label: "Global",
children: [] children: []
}
]
}, },
{ {
label: "Subflows", label: "Subflows",
children: [] children: []
},
{
id: "__global__",
label: "Global Configuration Nodes",
children: []
} }
] ]
flowList = flowData[0]; flowList = flowData[0];
subflowList = flowData[1]; subflowList = flowData[1];
globalConfigNodes = flowList.children[0]; globalConfigNodes = flowData[2];
if (project) {
flowData = [
{
element: getProjectLabel(project),
icon: "fa fa-archive",
children: flowData,
expanded: true
}
]
}
return flowData; return flowData;
} }
function getProjectLabel(p) { function getProjectLabel(p) {
var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"}); var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
div.css("width", "calc(100% - 40px)");
var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
contentDiv.text(p.name); contentDiv.text(p.name);
var controls = $('<div>',{class:"red-ui-info-outline-item-controls"}).appendTo(div); var controls = $('<div>',{class:"red-ui-info-outline-item-controls"}).appendTo(div);
var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>') var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;top: 3px;"><i class="fa fa-ellipsis-h"></i></button>')
.appendTo(controls) .appendTo(controls)
.on("click", function(evt) { .on("click", function(evt) {
evt.preventDefault(); evt.preventDefault();
@ -84,16 +75,7 @@ RED.sidebar.info.outliner = (function() {
function getNodeLabel(n) { function getNodeLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item"}); var div = $('<div>',{class:"red-ui-info-outline-item"});
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div); RED.utils.createNodeIcon(n).appendTo(div);
if (n.type === "group") {
div.addClass('red-ui-info-outline-item-group')
} else {
var colour = RED.utils.getNodeColor(n.type,n._def);
nodeDiv.css('backgroundColor',colour);
}
var icon_url = RED.utils.getNodeIcon(n._def,n);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, false);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var labelText = getNodeLabelText(n); var labelText = getNodeLabelText(n);
var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv); var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
@ -119,16 +101,7 @@ RED.sidebar.info.outliner = (function() {
function getSubflowLabel(n) { function getSubflowLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item"}); var div = $('<div>',{class:"red-ui-info-outline-item"});
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div); RED.utils.createNodeIcon(n).appendTo(div);
if (n.type === "group") {
div.addClass('red-ui-info-outline-item-group')
} else {
var colour = RED.utils.getNodeColor(n.type,n._def);
nodeDiv.css('backgroundColor',colour);
}
var icon_url = RED.utils.getNodeIcon(n._def,n);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, false);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var labelText = getNodeLabelText(n); var labelText = getNodeLabelText(n);
var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv); var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
@ -214,13 +187,17 @@ RED.sidebar.info.outliner = (function() {
} }
function onProjectLoad(activeProject) { function onProjectLoad(activeProject) {
var newFlowData = getFlowData(activeProject); var newFlowData = getFlowData();
getProjectLabel(activeProject).appendTo(projectInfo);
treeList.treeList('data',newFlowData); treeList.treeList('data',newFlowData);
} }
function build() { function build() {
var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '400px'}); var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '100%'});
var toolbar = $("<div>", {class:"red-ui-info-outline-toolbar"}).appendTo(container); var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-outline-toolbar"}).appendTo(container);
toolbar.on("click", function(evt) {
evt.stopPropagation();
})
searchInput = $('<input type="text">').appendTo(toolbar).searchBox({ searchInput = $('<input type="text">').appendTo(toolbar).searchBox({
delay: 300, delay: 300,
@ -237,7 +214,7 @@ RED.sidebar.info.outliner = (function() {
return true; return true;
} }
return item.id && objects[item.id] && resultMap[item.id] return item.id && objects[item.id] && resultMap[item.id]
}) },true)
} else { } else {
treeList.treeList('filter',null); treeList.treeList('filter',null);
@ -245,6 +222,10 @@ RED.sidebar.info.outliner = (function() {
} }
}); });
projectInfo = $('<div class="red-ui-treeList-label red-ui-info-outline-project"><span class="red-ui-treeList-icon"><i class="fa fa-archive"></i></span></div>').appendTo(container)
// <div class="red-ui-info-outline-item red-ui-info-outline-item-flow" style=";"><div class="red-ui-search-result-description red-ui-info-outline-item-label">Space Monkey</div><div class="red-ui-info-outline-item-controls"><button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;"><i class="fa fa-ellipsis-h"></i></button></div></div></div>').appendTo(container)
treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({ treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
data:getFlowData() data:getFlowData()
}) })
@ -292,7 +273,6 @@ RED.sidebar.info.outliner = (function() {
// }) // })
// }) // })
// RED.events.on("workspace:clear", function() { console.log("workspace:clear")}) // RED.events.on("workspace:clear", function() { console.log("workspace:clear")})
return container; return container;
} }
function onFlowAdd(ws) { function onFlowAdd(ws) {
@ -330,18 +310,22 @@ RED.sidebar.info.outliner = (function() {
function onSubflowAdd(sf) { function onSubflowAdd(sf) {
objects[sf.id] = { objects[sf.id] = {
id: sf.id, id: sf.id,
element: getSubflowLabel(sf), element: getNodeLabel(sf),
children:[getEmptyItem(sf.id)], children:[getEmptyItem(sf.id)],
deferBuild: true deferBuild: true
} }
subflowList.treeList.addChild(objects[sf.id]) subflowList.treeList.addChild(objects[sf.id])
} }
function onSubflowChange(n) { function onSubflowChange(sf) {
var existingObject = objects[n.id]; var existingObject = objects[sf.id];
existingObject.treeList.replaceElement(getNodeLabel(sf));
existingObject.treeList.replaceElement(getSubflowLabel(n));
// existingObject.element.find(".red-ui-info-outline-item-label").text(n.name || n.id); // existingObject.element.find(".red-ui-info-outline-item-label").text(n.name || n.id);
RED.nodes.eachNode(function(n) {
if (n.type == "subflow:"+sf.id) {
var sfInstance = objects[n.id];
sfInstance.treeList.replaceElement(getNodeLabel(n));
}
});
} }
function onNodeChange(n) { function onNodeChange(n) {
@ -404,24 +388,27 @@ RED.sidebar.info.outliner = (function() {
} }
function onSelectionChanged(selection) { function onSelectionChanged(selection) {
// treeList.treeList('clearSelection'); treeList.treeList('clearSelection');
// console.log(selection); // // console.log(selection);
if (selection.nodes) { // if (selection.nodes) {
selection.nodes.forEach(function(n) { // selection.nodes.forEach(function(n) {
// console.log("..",n.id); // // console.log("..",n.id);
treeList.treeList('show',n.id); // treeList.treeList('show',n.id);
if (objects[n.id].treeList) { // if (objects[n.id].treeList) {
objects[n.id].treeList.select(true); // objects[n.id].treeList.select(true);
} // }
//
}); // });
} // }
} }
return { return {
build: build, build: build,
search: function(val) { search: function(val) {
searchInput.searchBox('value',val) searchInput.searchBox('value',val)
},
reveal: function(node) {
treeList.treeList('select', objects[node.id])
} }
} }
})(); })();

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

@ -16,17 +16,29 @@
RED.sidebar.info = (function() { RED.sidebar.info = (function() {
var content; var content;
var sections; var panels;
var propertiesSection;
var outlinerSection;
var infoSection; var infoSection;
var helpSection;
var propertiesPanelContent;
var propertiesPanelHeader;
var propertiesPanelHeaderIcon;
var propertiesPanelHeaderLabel;
var propertiesPanelHeaderReveal;
var propertiesPanelHeaderHelp;
var selectedObject;
var tipBox; var tipBox;
// TODO: remove this
var expandedSections = { var expandedSections = {
"property": false "property": false
}; };
function resizeStack() {
var h = $(content).parent().height();
panels.resize(h)
}
function init() { function init() {
content = document.createElement("div"); content = document.createElement("div");
@ -36,37 +48,74 @@ RED.sidebar.info = (function() {
var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content); var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
sections = RED.stack.create({ var outlinerPanel = $("<div>").height("calc(70%)").appendTo(stackContainer);
container: stackContainer var propertiesPanel = $("<div>").css({
}).hide(); "overflow":"hidden",
"height":"100%",
"display": "flex",
"flex-direction": "column"
}).appendTo(stackContainer);
propertiesPanelHeader = $("<div>", {class:"red-ui-palette-header red-ui-info-header"}).css({
"flex":"0 0 auto"
}).appendTo(propertiesPanel);
outlinerSection = sections.add({ propertiesPanelHeaderIcon = $("<span>").appendTo(propertiesPanelHeader);
title: RED._("sidebar.info.outline"), propertiesPanelHeaderLabel = $("<span>").appendTo(propertiesPanelHeader);
collapsible: true propertiesPanelHeaderHelp = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-question"></button>').css({
}) position: 'absolute',
outlinerSection.expand(); top: '12px',
RED.sidebar.info.outliner.build().appendTo(outlinerSection.content); right: '38px'
}).on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
if (selectedObject) {
RED.sidebar.info.outliner.reveal(selectedObject);
}
}).appendTo(propertiesPanelHeader);
RED.popover.tooltip(propertiesPanelHeaderHelp,"Show help");
propertiesSection = sections.add({
title: RED._("sidebar.info.info"), propertiesPanelHeaderReveal = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
collapsible: true position: 'absolute',
top: '12px',
right: '8px'
}).on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
if (selectedObject) {
RED.sidebar.info.outliner.reveal(selectedObject);
}
}).appendTo(propertiesPanelHeader);
RED.popover.tooltip(propertiesPanelHeaderReveal,"Show in outline");
propertiesPanelContent = $("<div>").css({
"flex":"1 1 auto",
"overflow-y":"scroll",
}).appendTo(propertiesPanel);
panels = RED.panels.create({container: stackContainer})
panels.ratio(0.6);
RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
RED.sidebar.addTab({
id: "info",
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
action:"core:show-info-tab",
content: content,
pinned: true,
enableOnEdit: true
}); });
propertiesSection.expand();
infoSection = sections.add({ $(window).on("resize", resizeStack);
title: RED._("sidebar.info.desc"), $(window).on("focus", resizeStack);
collapsible: true
});
infoSection.expand();
infoSection.content.css("padding","6px");
helpSection = sections.add({
title: RED._("sidebar.info.nodeHelp"),
collapsible: true
});
helpSection.expand();
helpSection.content.css("padding","6px");
// Tip Box
var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content); var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
tipBox = $('<div class="red-ui-help-tip"></div>').appendTo(tipContainer); tipBox = $('<div class="red-ui-help-tip"></div>').appendTo(tipContainer);
var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer); var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
@ -83,17 +132,6 @@ RED.sidebar.info = (function() {
RED.actions.invoke("core:toggle-show-tips"); RED.actions.invoke("core:toggle-show-tips");
RED.notify(RED._("sidebar.info.showTips")); RED.notify(RED._("sidebar.info.showTips"));
}); });
RED.sidebar.addTab({
id: "info",
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
action:"core:show-info-tab",
content: content,
pinned: true,
enableOnEdit: true
});
if (tips.enabled()) { if (tips.enabled()) {
tips.start(); tips.start();
} else { } else {
@ -121,42 +159,29 @@ RED.sidebar.info = (function() {
refreshSelection(); refreshSelection();
return; return;
} }
sections.show(); $(propertiesPanelContent).empty();
$(propertiesSection.content).empty();
$(infoSection.content).empty();
$(helpSection.content).empty();
infoSection.title.text(RED._("sidebar.info.desc"));
var propRow; var propRow;
var table = $('<table class="red-ui-info-table"></table>').appendTo(propertiesSection.content); var table = $('<table class="red-ui-info-table"></table>').appendTo(propertiesPanelContent);
var tableBody = $('<tbody>').appendTo(table); var tableBody = $('<tbody>').appendTo(table);
var subflowNode; var subflowNode;
var subflowUserCount; var subflowUserCount;
var activeProject = RED.projects.getActiveProject();
if (activeProject) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+ RED._("sidebar.project.name") + '</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text(activeProject.name||"");
$('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
.appendTo(propRow.children()[1])
.on("click", function(evt) {
evt.preventDefault();
RED.projects.editProject();
});
RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
}
propertiesSection.container.show();
infoSection.container.show();
helpSection.container.show();
if (node === null) { if (node === null) {
return; return;
} else if (Array.isArray(node)) { } else if (Array.isArray(node)) {
// Multiple things selected // Multiple things selected
// - hide help and info sections // - hide help and info sections
propertiesPanelHeaderIcon.empty();
RED.utils.createNodeIcon({type:"_selection_"}).appendTo(propertiesPanelHeaderIcon);
propertiesPanelHeaderLabel.text("Selection");
propertiesPanelHeaderReveal.hide();
propertiesPanelHeaderHelp.hide();
selectedObject = null;
var types = { var types = {
nodes:0, nodes:0,
flows:0, flows:0,
@ -175,8 +200,7 @@ RED.sidebar.info = (function() {
types.nodes++; types.nodes++;
} }
}); });
helpSection.container.hide(); // infoSection.container.hide();
infoSection.container.hide();
// - show the count of selected nodes // - show the count of selected nodes
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
@ -197,10 +221,10 @@ RED.sidebar.info = (function() {
// A single 'thing' selected. // A single 'thing' selected.
// Check to see if this is a subflow or subflow instance // Check to see if this is a subflow or subflow instance
var m = /^subflow(:(.+))?$/.exec(node.type); var subflowRegex = /^subflow(:(.+))?$/.exec(node.type);
if (m) { if (subflowRegex) {
if (m[2]) { if (subflowRegex[2]) {
subflowNode = RED.nodes.subflow(m[2]); subflowNode = RED.nodes.subflow(subflowRegex[2]);
} else { } else {
subflowNode = node; subflowNode = node;
} }
@ -213,25 +237,21 @@ RED.sidebar.info = (function() {
} }
}); });
} }
propertiesPanelHeaderIcon.empty();
RED.utils.createNodeIcon(node).appendTo(propertiesPanelHeaderIcon);
propertiesPanelHeaderLabel.text(RED.utils.getNodeLabel(node, node.type+" "+node.id));
propertiesPanelHeaderReveal.show();
selectedObject = node;
if (node.type === "tab" || node.type === "subflow") { if (node.type === "tab" || node.type === "subflow") {
// If nothing is selected, but we're on a flow or subflow tab. // If nothing is selected, but we're on a flow or subflow tab.
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody); propertiesPanelHeaderHelp.hide();
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
$(propRow.children()[1]).text(node.label||node.name||"");
if (node.type === "tab") {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
}
} else if (node.type === "group") { } else if (node.type === "group") {
// An actual node is selected in the editor - build up its properties table propertiesPanelHeaderHelp.hide();
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.group")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.group")+'</td><td></td></tr>').appendTo(tableBody);
if (node.name) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
$('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
}
propRow = $('<tr class="red-ui-help-info-row"><td>&nbsp;</td><td></td></tr>').appendTo(tableBody);
var typeCounts = { var typeCounts = {
nodes:0, nodes:0,
groups: 0 groups: 0
@ -254,22 +274,30 @@ RED.sidebar.info = (function() {
} else { } else {
// An actual node is selected in the editor - build up its properties table propertiesPanelHeaderHelp.show ();
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); propRow = $('<tr class="red-ui-help-info-row"><td></td><td></td></tr>').appendTo(tableBody);
if (node.type !== "subflow" && node.type !== "unknown" && node.name) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody); if (!subflowRegex) {
$('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]); $(propRow.children()[0]).text(RED._("sidebar.info.node"))
} else {
$(propRow.children()[0]).text(RED._("sidebar.info.subflow"))
} }
if (!m) { RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+"</td><td></td></tr>").appendTo(tableBody);
if (!subflowRegex) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+'</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type); $(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type);
if (node.type === "unknown") { if (node.type === "unknown") {
$('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1])) $('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1]))
} }
} }
var count = 0; var count = 0;
if (!m && node.type != "subflow" && node.type != "group") { if (!subflowRegex && node.type != "subflow" && node.type != "group") {
var blankRow = $('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
var defaults; var defaults;
if (node.type === 'unknown') { if (node.type === 'unknown') {
defaults = {}; defaults = {};
@ -284,7 +312,6 @@ RED.sidebar.info = (function() {
$(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module); $(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module);
count++; count++;
} }
$('<tr class="red-ui-help-property-expand red-ui-help-info-property-row blank'+(expandedSections.property?"":" hide")+'"><td colspan="2"></td></tr>').appendTo(tableBody);
if (defaults) { if (defaults) {
for (var n in defaults) { for (var n in defaults) {
@ -292,7 +319,8 @@ RED.sidebar.info = (function() {
var val = node[n]; var val = node[n];
var type = typeof val; var type = typeof val;
count++; count++;
propRow = $('<tr class="red-ui-help-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="red-ui-help-info-property-row'+(expandedSections.property?"":" hide")+'"><td></td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[0]).text(n);
if (defaults[n].type) { if (defaults[n].type) {
var configNode = RED.nodes.node(val); var configNode = RED.nodes.node(val);
if (!configNode) { if (!configNode) {
@ -322,37 +350,35 @@ RED.sidebar.info = (function() {
} }
} }
if (count > 0) { if (count > 0) {
$('<tr class="red-ui-help-property-expand blank"><td colspan="2"><a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="red-ui-help-property-more">'+RED._("sidebar.info.showMore")+'</span><span class="red-ui-help-property-less">'+RED._("sidebar.info.showLess")+'</span> <i class="fa fa-caret-down"></i></a></td></tr>').appendTo(tableBody); $('<a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="red-ui-help-property-more">'+RED._("sidebar.info.showMore")+'</span><span class="red-ui-help-property-less">'+RED._("sidebar.info.showLess")+'</span> <i class="fa fa-caret-down"></i></a>').appendTo(blankRow.children()[0]);
} }
} }
if (node.type !== 'tab') { if (node.type !== 'tab') {
if (m) { if (subflowRegex) {
$('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody); $('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody);
$('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.utils.sanitize(subflowNode.name)+'</span></td></tr>').appendTo(tableBody); $('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.utils.sanitize(subflowNode.name)+'</span></td></tr>').appendTo(tableBody);
} }
} }
} }
if (m) { if (subflowRegex) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody); propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
var category = subflowNode.category||"subflows"; var category = subflowNode.category||"subflows";
$(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
$('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody); $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
} }
var helpText = ""; // var helpText = "";
if (node.type === "tab" || node.type === "subflow") { // if (node.type === "tab" || node.type === "subflow") {
$(helpSection.container).hide(); // } else {
} else { // if (subflowNode && node.type !== "subflow") {
$(helpSection.container).show(); // // Selected a subflow instance node.
if (subflowNode && node.type !== "subflow") { // // - The subflow template info goes into help
// Selected a subflow instance node. // helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'));
// - The subflow template info goes into help // } else {
helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>')); // helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
} else { // }
helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'); // setInfoText(helpText, helpSection.content);
} // }
setInfoText(helpText, helpSection.content);
}
var infoText = ""; var infoText = "";
@ -364,7 +390,26 @@ RED.sidebar.info = (function() {
if (node.info) { if (node.info) {
infoText = infoText + RED.utils.renderMarkdown(node.info || "") infoText = infoText + RED.utils.renderMarkdown(node.info || "")
} }
setInfoText(infoText, infoSection.content); var infoSectionContainer = $("<div>").css("padding","0 6px 6px").appendTo(propertiesPanelContent)
// var editInfo = $('<button class="red-ui-button red-ui-button-small" style="float: right"><i class="fa fa-file-text-o"></button>').appendTo(infoSectionContainer).on("click", function(evt) {
// //.text(RED._("sidebar.info.editDescription"))
// evt.preventDefault();
// evt.stopPropagation();
// if (node.type === 'tab') {
//
// } else if (node.type === 'subflow') {
//
// } else if (node.type === 'group') {
//
// } else if (node._def.category !== 'config') {
// RED.editor.edit(node,"editor-tab-description");
// } else {
//
// }
// })
setInfoText(infoText, infoSectionContainer);
$(".red-ui-sidebar-info-stack").scrollTop(0); $(".red-ui-sidebar-info-stack").scrollTop(0);
$(".node-info-property-header").on("click", function(e) { $(".node-info-property-header").on("click", function(e) {
@ -380,7 +425,7 @@ RED.sidebar.info = (function() {
// propRow = $('<tr class="red-ui-help-info-row"><td>Actions</td><td></td></tr>').appendTo(tableBody); // propRow = $('<tr class="red-ui-help-info-row"><td>Actions</td><td></td></tr>').appendTo(tableBody);
// var actionBar = $(propRow.children()[1]); // var actionBar = $(propRow.children()[1]);
// //
// // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content); // // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesPanel);
// $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar); // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
// $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar); // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
// $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar); // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
@ -495,11 +540,11 @@ RED.sidebar.info = (function() {
// tips.stop(); // tips.stop();
// sections.show(); // sections.show();
refresh(null); refresh(null);
propertiesSection.container.hide(); // propertiesSection.container.hide();
helpSection.container.hide(); console.warn("Missing RED.sidebar.tab.set")
infoSection.container.show(); // infoSection.container.show();
infoSection.title.text(title||RED._("sidebar.info.desc")); // infoSection.title.text(title||RED._("sidebar.info.desc"));
setInfoText(html,infoSection.content); // setInfoText(html,infoSection.content);
$(".red-ui-sidebar-info-stack").scrollTop(0); $(".red-ui-sidebar-info-stack").scrollTop(0);
} }

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

@ -304,9 +304,6 @@ button.red-ui-button-small
&:first-child { &:first-child {
padding: 20px 20px 0; padding: 20px 20px 0;
} }
&:last-child {
padding-bottom: 20px;
}
} }
} }
.red-ui-editor-type-expression-tab-content { .red-ui-editor-type-expression-tab-content {

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

@ -186,6 +186,21 @@
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.red-ui-search-result-node {
&.red-ui-palette-icon-flow,
&.red-ui-palette-icon-group,
&.red-ui-palette-icon-selection {
background: none;
border-color: transparent;
.red-ui-palette-icon-container {
background: none;
}
.red-ui-palette-icon-fa {
color: $secondary-text-color;
font-size: 18px;
}
}
}
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: white; color: white;
position: absolute; position: absolute;

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

@ -14,16 +14,34 @@
* limitations under the License. * limitations under the License.
**/ **/
.red-ui-sidebar-info {
height: 100%;
}
.red-ui-sidebar-info hr { .red-ui-sidebar-info hr {
margin: 10px 0; margin: 10px 0;
} }
.red-ui-info-header {
padding-left: 9px;
line-height: 21px;
cursor: default;
> * {
vertical-align: middle
}
> span {
display: inline-block;
margin-left: 5px;
}
border-bottom: 1px solid $secondary-border-color;
}
table.red-ui-info-table { table.red-ui-info-table {
font-size: 14px; font-size: 14px;
margin: 0 0 10px; margin: 0 0 10px;
width: 100%; width: 100%;
} }
table.red-ui-info-table tr:not(.blank) { table.red-ui-info-table tr:not(.blank) {
&:not(:first-child) {
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
}
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
} }
.red-ui-help-property-expand { .red-ui-help-property-expand {
@ -214,12 +232,13 @@ div.red-ui-info-table {
} }
.red-ui-sidebar-info-stack { .red-ui-sidebar-info-stack {
position: absolute; height: 100%;
top: 0; // position: absolute;
bottom: 0; // top: 0;
left: 0; // bottom: 0;
right: 0; // left: 0;
overflow-y: scroll; // right: 0;
// overflow-y: scroll;
} }
.red-ui-help-tips { .red-ui-help-tips {
display: none; display: none;
@ -291,6 +310,12 @@ div.red-ui-info-table {
.red-ui-treeList { .red-ui-treeList {
flex-grow: 1; flex-grow: 1;
position: relative;
}
.red-ui-treeList-container {
position: absolute;
top: 0;
bottom: 0;
} }
.red-ui-treeList-container,.red-ui-editableList-border { .red-ui-treeList-container,.red-ui-editableList-border {
@ -302,6 +327,10 @@ div.red-ui-info-table {
padding: 2px 0; padding: 2px 0;
overflow: hidden; overflow: hidden;
} }
.red-ui-info-outline-project {
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-info-outline-item { .red-ui-info-outline-item {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
@ -369,7 +398,7 @@ div.red-ui-info-table {
top:0; top:0;
bottom: 0; bottom: 0;
right: 0px; right: 0px;
padding: 2px 8px 0 1px; padding: 2px 3px 0 1px;
text-align: right; text-align: right;
background: $list-item-background; background: $list-item-background;
@ -429,6 +458,9 @@ div.red-ui-info-table {
opacity: 0.4; opacity: 0.4;
} }
} }
.red-ui-icons { .red-ui-icons {
display: inline-block; display: inline-block;
width: 18px; width: 18px;
@ -447,5 +479,32 @@ div.red-ui-info-table {
} }
.red-ui-info-outline-toolbar { .red-ui-info-outline-toolbar {
border-bottom: 1px solid $secondary-border-color; min-height: 39px;
box-sizing: border-box;
// padding-left: 9px;
// box-sizing: border-box;
// background: $palette-header-background;
// border-bottom: 1px solid $secondary-border-color;
.red-ui-searchBox-container {
position: absolute;
top: 6px;
right: 8px;
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;
}
}
} }