frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

[outline] Update information section of info sidebar

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

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

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

227
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 searchInput;
var projectInfo;
var flowList;
var subflowList;
var globalConfigNodes;
@ -10,47 +11,37 @@ RED.sidebar.info.outliner = (function() {
var objectBacklog = {};
function getFlowData(project) {
function getFlowData() {
var flowData = [
{
label: "Flows",
expanded: true,
children: [
{
id: "__global__",
label: "Global",
children: []
}
]
children: []
},
{
label: "Subflows",
children: []
},
{
id: "__global__",
label: "Global Configuration Nodes",
children: []
}
]
flowList = flowData[0];
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;
}
function getProjectLabel(p) {
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);
contentDiv.text(p.name);
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)
.on("click", function(evt) {
evt.preventDefault();
@ -84,16 +75,7 @@ RED.sidebar.info.outliner = (function() {
function getNodeLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item"});
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).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);
RED.utils.createNodeIcon(n).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var labelText = getNodeLabelText(n);
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) {
var div = $('<div>',{class:"red-ui-info-outline-item"});
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).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);
RED.utils.createNodeIcon(n).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var labelText = getNodeLabelText(n);
var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
@ -214,86 +187,93 @@ RED.sidebar.info.outliner = (function() {
}
function onProjectLoad(activeProject) {
var newFlowData = getFlowData(activeProject);
var newFlowData = getFlowData();
getProjectLabel(activeProject).appendTo(projectInfo);
treeList.treeList('data',newFlowData);
}
function build() {
var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '400px'});
var toolbar = $("<div>", {class:"red-ui-info-outline-toolbar"}).appendTo(container);
var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '100%'});
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({
delay: 300,
change: function() {
var val = $(this).val();
var searchResults = RED.search.search(val);
if (val) {
var resultMap = {};
for (var i=0,l=searchResults.length;i<l;i++) {
resultMap[searchResults[i].node.id] = true;
searchInput = $('<input type="text">').appendTo(toolbar).searchBox({
delay: 300,
change: function() {
var val = $(this).val();
var searchResults = RED.search.search(val);
if (val) {
var resultMap = {};
for (var i=0,l=searchResults.length;i<l;i++) {
resultMap[searchResults[i].node.id] = true;
}
var c = treeList.treeList('filter',function(item) {
if (item.depth === 0) {
return true;
}
var c = treeList.treeList('filter',function(item) {
if (item.depth === 0) {
return true;
}
return item.id && objects[item.id] && resultMap[item.id]
})
} else {
treeList.treeList('filter',null);
return item.id && objects[item.id] && resultMap[item.id]
},true)
} else {
treeList.treeList('filter',null);
}
}
});
}
});
treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
data:getFlowData()
})
// treeList.on('treelistselect', function(e,item) {
// console.log(item)
// RED.view.reveal(item.id);
// })
// treeList.treeList('data',[ ... ] )
treeList.on('treelistconfirm', function(e,item) {
var node = RED.nodes.node(item.id);
if (node) {
if (node._def.category === "config") {
RED.editor.editConfig("", node.type, node.id);
} else {
RED.editor.edit(node);
}
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({
data:getFlowData()
})
// treeList.on('treelistselect', function(e,item) {
// console.log(item)
// RED.view.reveal(item.id);
// })
// treeList.treeList('data',[ ... ] )
treeList.on('treelistconfirm', function(e,item) {
var node = RED.nodes.node(item.id);
if (node) {
if (node._def.category === "config") {
RED.editor.editConfig("", node.type, node.id);
} else {
RED.editor.edit(node);
}
})
}
})
RED.events.on("projects:load", onProjectLoad)
RED.events.on("projects:load", onProjectLoad)
RED.events.on("flows:add", onFlowAdd)
RED.events.on("flows:remove", onObjectRemove)
RED.events.on("flows:change", onFlowChange)
RED.events.on("flows:reorder", onFlowsReorder)
RED.events.on("flows:add", onFlowAdd)
RED.events.on("flows:remove", onObjectRemove)
RED.events.on("flows:change", onFlowChange)
RED.events.on("flows:reorder", onFlowsReorder)
RED.events.on("subflows:add", onSubflowAdd)
RED.events.on("subflows:remove", onObjectRemove)
RED.events.on("subflows:change", onSubflowChange)
RED.events.on("subflows:add", onSubflowAdd)
RED.events.on("subflows:remove", onObjectRemove)
RED.events.on("subflows:change", onSubflowChange)
RED.events.on("nodes:add",onNodeAdd);
RED.events.on("nodes:remove",onObjectRemove);
RED.events.on("nodes:change",onNodeChange);
RED.events.on("nodes:add",onNodeAdd);
RED.events.on("nodes:remove",onObjectRemove);
RED.events.on("nodes:change",onNodeChange);
RED.events.on("groups:add",onNodeAdd);
RED.events.on("groups:remove",onObjectRemove);
RED.events.on("groups:change",onNodeChange);
RED.events.on("groups:add",onNodeAdd);
RED.events.on("groups:remove",onObjectRemove);
RED.events.on("groups:change",onNodeChange);
RED.events.on("view:selection-changed", onSelectionChanged);
RED.events.on("view:selection-changed", onSelectionChanged);
// ["links","nodes","flows","subflows","groups"].forEach(function(t) {
// ["add","remove","change"].forEach(function(v) {
// RED.events.on(t+":"+v, function(n) { console.log(t+":"+v,n)})
// })
// })
// RED.events.on("workspace:clear", function() { console.log("workspace:clear")})
return container;
// ["links","nodes","flows","subflows","groups"].forEach(function(t) {
// ["add","remove","change"].forEach(function(v) {
// RED.events.on(t+":"+v, function(n) { console.log(t+":"+v,n)})
// })
// })
// RED.events.on("workspace:clear", function() { console.log("workspace:clear")})
return container;
}
function onFlowAdd(ws) {
objects[ws.id] = {
@ -330,18 +310,22 @@ RED.sidebar.info.outliner = (function() {
function onSubflowAdd(sf) {
objects[sf.id] = {
id: sf.id,
element: getSubflowLabel(sf),
element: getNodeLabel(sf),
children:[getEmptyItem(sf.id)],
deferBuild: true
}
subflowList.treeList.addChild(objects[sf.id])
}
function onSubflowChange(n) {
var existingObject = objects[n.id];
existingObject.treeList.replaceElement(getSubflowLabel(n));
function onSubflowChange(sf) {
var existingObject = objects[sf.id];
existingObject.treeList.replaceElement(getNodeLabel(sf));
// 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) {
@ -404,24 +388,27 @@ RED.sidebar.info.outliner = (function() {
}
function onSelectionChanged(selection) {
// treeList.treeList('clearSelection');
// console.log(selection);
if (selection.nodes) {
selection.nodes.forEach(function(n) {
// console.log("..",n.id);
treeList.treeList('show',n.id);
if (objects[n.id].treeList) {
objects[n.id].treeList.select(true);
}
});
}
treeList.treeList('clearSelection');
// // console.log(selection);
// if (selection.nodes) {
// selection.nodes.forEach(function(n) {
// // console.log("..",n.id);
// treeList.treeList('show',n.id);
// if (objects[n.id].treeList) {
// objects[n.id].treeList.select(true);
// }
//
// });
// }
}
return {
build: build,
search: function(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() {
var content;
var sections;
var propertiesSection;
var outlinerSection;
var panels;
var infoSection;
var helpSection;
var propertiesPanelContent;
var propertiesPanelHeader;
var propertiesPanelHeaderIcon;
var propertiesPanelHeaderLabel;
var propertiesPanelHeaderReveal;
var propertiesPanelHeaderHelp;
var selectedObject;
var tipBox;
// TODO: remove this
var expandedSections = {
"property": false
};
function resizeStack() {
var h = $(content).parent().height();
panels.resize(h)
}
function init() {
content = document.createElement("div");
@ -36,37 +48,74 @@ RED.sidebar.info = (function() {
var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
sections = RED.stack.create({
container: stackContainer
}).hide();
var outlinerPanel = $("<div>").height("calc(70%)").appendTo(stackContainer);
var propertiesPanel = $("<div>").css({
"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({
title: RED._("sidebar.info.outline"),
collapsible: true
})
outlinerSection.expand();
RED.sidebar.info.outliner.build().appendTo(outlinerSection.content);
propertiesPanelHeaderIcon = $("<span>").appendTo(propertiesPanelHeader);
propertiesPanelHeaderLabel = $("<span>").appendTo(propertiesPanelHeader);
propertiesPanelHeaderHelp = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-question"></button>').css({
position: 'absolute',
top: '12px',
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"),
collapsible: true
propertiesPanelHeaderReveal = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
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({
title: RED._("sidebar.info.desc"),
collapsible: true
});
infoSection.expand();
infoSection.content.css("padding","6px");
$(window).on("resize", resizeStack);
$(window).on("focus", resizeStack);
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);
tipBox = $('<div class="red-ui-help-tip"></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.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()) {
tips.start();
} else {
@ -121,42 +159,29 @@ RED.sidebar.info = (function() {
refreshSelection();
return;
}
sections.show();
$(propertiesSection.content).empty();
$(infoSection.content).empty();
$(helpSection.content).empty();
infoSection.title.text(RED._("sidebar.info.desc"));
$(propertiesPanelContent).empty();
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 subflowNode;
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) {
return;
} else if (Array.isArray(node)) {
// Multiple things selected
// - 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 = {
nodes:0,
flows:0,
@ -175,8 +200,7 @@ RED.sidebar.info = (function() {
types.nodes++;
}
});
helpSection.container.hide();
infoSection.container.hide();
// infoSection.container.hide();
// - 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);
@ -197,10 +221,10 @@ RED.sidebar.info = (function() {
// A single 'thing' selected.
// Check to see if this is a subflow or subflow instance
var m = /^subflow(:(.+))?$/.exec(node.type);
if (m) {
if (m[2]) {
subflowNode = RED.nodes.subflow(m[2]);
var subflowRegex = /^subflow(:(.+))?$/.exec(node.type);
if (subflowRegex) {
if (subflowRegex[2]) {
subflowNode = RED.nodes.subflow(subflowRegex[2]);
} else {
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 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);
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"))
}
propertiesPanelHeaderHelp.hide();
} else if (node.type === "group") {
// An actual node is selected in the editor - build up its properties table
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]);
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);
propertiesPanelHeaderHelp.hide();
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.group")+'</td><td></td></tr>').appendTo(tableBody);
var typeCounts = {
nodes:0,
groups: 0
@ -254,22 +274,30 @@ RED.sidebar.info = (function() {
} else {
// An actual node is selected in the editor - build up its properties table
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]);
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);
$('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
propertiesPanelHeaderHelp.show ();
propRow = $('<tr class="red-ui-help-info-row"><td></td><td></td></tr>').appendTo(tableBody);
if (!subflowRegex) {
$(propRow.children()[0]).text(RED._("sidebar.info.node"))
} else {
$(propRow.children()[0]).text(RED._("sidebar.info.subflow"))
}
if (!m) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
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);
if (node.type === "unknown") {
$('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1]))
}
}
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;
if (node.type === 'unknown') {
defaults = {};
@ -284,7 +312,6 @@ RED.sidebar.info = (function() {
$(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module);
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) {
for (var n in defaults) {
@ -292,7 +319,8 @@ RED.sidebar.info = (function() {
var val = node[n];
var type = typeof val;
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) {
var configNode = RED.nodes.node(val);
if (!configNode) {
@ -322,37 +350,35 @@ RED.sidebar.info = (function() {
}
}
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 (m) {
if (subflowRegex) {
$('<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);
}
}
}
if (m) {
if (subflowRegex) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
var category = subflowNode.category||"subflows";
$(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);
}
var helpText = "";
if (node.type === "tab" || node.type === "subflow") {
$(helpSection.container).hide();
} else {
$(helpSection.container).show();
if (subflowNode && node.type !== "subflow") {
// Selected a subflow instance node.
// - The subflow template info goes into help
helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<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);
}
// var helpText = "";
// if (node.type === "tab" || node.type === "subflow") {
// } else {
// if (subflowNode && node.type !== "subflow") {
// // Selected a subflow instance node.
// // - The subflow template info goes into help
// helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<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);
// }
var infoText = "";
@ -364,7 +390,26 @@ RED.sidebar.info = (function() {
if (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);
$(".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);
// 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);
@ -495,11 +540,11 @@ RED.sidebar.info = (function() {
// tips.stop();
// sections.show();
refresh(null);
propertiesSection.container.hide();
helpSection.container.hide();
infoSection.container.show();
infoSection.title.text(title||RED._("sidebar.info.desc"));
setInfoText(html,infoSection.content);
// propertiesSection.container.hide();
console.warn("Missing RED.sidebar.tab.set")
// infoSection.container.show();
// infoSection.title.text(title||RED._("sidebar.info.desc"));
// setInfoText(html,infoSection.content);
$(".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 {
padding: 20px 20px 0;
}
&:last-child {
padding-bottom: 20px;
}
}
}
.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-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 {
color: white;
position: absolute;

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

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