diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js index 8e3281b3b..5c6d151c9 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js @@ -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); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js index ec5b78c99..f837d0cab 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js @@ -15,7 +15,7 @@ **/ (function() { - var template = ''; + var template = ''; function stringToUTF8Array(str) { var data = []; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js index 9a9765c35..3127a2813 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js @@ -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(); } }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js index 2975098ec..e40ae4261 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js @@ -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 = $('
',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"}); + div.css("width", "calc(100% - 40px)"); var contentDiv = $('
',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div); contentDiv.text(p.name); var controls = $('
',{class:"red-ui-info-outline-item-controls"}).appendTo(div); - var editProjectButton = $('') + var editProjectButton = $('') .appendTo(controls) .on("click", function(evt) { evt.preventDefault(); @@ -84,16 +75,7 @@ RED.sidebar.info.outliner = (function() { function getNodeLabel(n) { var div = $('
',{class:"red-ui-info-outline-item"}); - var nodeDiv = $('
',{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 = $('
',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); - RED.utils.createIconElement(icon_url, iconContainer, false); + RED.utils.createNodeIcon(n).appendTo(div); var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div); var labelText = getNodeLabelText(n); var label = $('
',{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 = $('
',{class:"red-ui-info-outline-item"}); - var nodeDiv = $('
',{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 = $('
',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); - RED.utils.createIconElement(icon_url, iconContainer, false); + RED.utils.createNodeIcon(n).appendTo(div); var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div); var labelText = getNodeLabelText(n); var label = $('
',{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 = $("
", {class:"red-ui-info-outline"}).css({'height': '400px'}); - var toolbar = $("
", {class:"red-ui-info-outline-toolbar"}).appendTo(container); + var container = $("
", {class:"red-ui-info-outline"}).css({'height': '100%'}); + var toolbar = $("
", {class:"red-ui-sidebar-header red-ui-info-outline-toolbar"}).appendTo(container); + toolbar.on("click", function(evt) { + evt.stopPropagation(); + }) - searchInput = $('').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').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").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 = $('
').appendTo(container) + + //
Space Monkey
').appendTo(container) + + treeList = $("
").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]) } } })(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index c6e9aec52..725785e33 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js @@ -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 = $("
",{class:"red-ui-sidebar-info-stack"}).appendTo(content); - sections = RED.stack.create({ - container: stackContainer - }).hide(); + var outlinerPanel = $("
").height("calc(70%)").appendTo(stackContainer); + var propertiesPanel = $("
").css({ + "overflow":"hidden", + "height":"100%", + "display": "flex", + "flex-direction": "column" + }).appendTo(stackContainer); + propertiesPanelHeader = $("
", {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 = $("").appendTo(propertiesPanelHeader); + propertiesPanelHeaderLabel = $("").appendTo(propertiesPanelHeader); + propertiesPanelHeaderHelp = $('').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 = $('').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 = $("
").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 = $('
').appendTo(content); tipBox = $('
').appendTo(tipContainer); var tipButtons = $('
').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 = $('
').appendTo(propertiesSection.content); + var table = $('
').appendTo(propertiesPanelContent); var tableBody = $('').appendTo(table); var subflowNode; var subflowUserCount; - var activeProject = RED.projects.getActiveProject(); - if (activeProject) { - propRow = $(''+ RED._("sidebar.project.name") + '').appendTo(tableBody); - $(propRow.children()[1]).text(activeProject.name||""); - $('').appendTo(tableBody); - var editProjectButton = $('') - .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 = $(''+RED._("sidebar.info.selection")+"").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 = $(''+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'').appendTo(tableBody); - RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); - propRow = $(''+RED._("sidebar.info.tabName")+"").appendTo(tableBody); - $(propRow.children()[1]).text(node.label||node.name||""); - if (node.type === "tab") { - propRow = $(''+RED._("sidebar.info.status")+'').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 = $(''+RED._("sidebar.info.group")+"").appendTo(tableBody); - RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); - if (node.name) { - propRow = $(''+RED._("common.label.name")+'').appendTo(tableBody); - $('').text(node.name).appendTo(propRow.children()[1]); - } - propRow = $(' ').appendTo(tableBody); + propertiesPanelHeaderHelp.hide(); + + propRow = $(''+RED._("sidebar.info.group")+'').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 = $(''+RED._("sidebar.info.node")+"").appendTo(tableBody); - RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); - if (node.type !== "subflow" && node.type !== "unknown" && node.name) { - propRow = $(''+RED._("common.label.name")+'').appendTo(tableBody); - $('').text(node.name).appendTo(propRow.children()[1]); + propertiesPanelHeaderHelp.show (); + + propRow = $('').appendTo(tableBody); + + if (!subflowRegex) { + $(propRow.children()[0]).text(RED._("sidebar.info.node")) + } else { + $(propRow.children()[0]).text(RED._("sidebar.info.subflow")) } - if (!m) { - propRow = $(''+RED._("sidebar.info.type")+"").appendTo(tableBody); + RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); + + if (!subflowRegex) { + propRow = $(''+RED._("sidebar.info.type")+'').appendTo(tableBody); $(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type); if (node.type === "unknown") { $('').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 = $('').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++; } - $('').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 = $(''+n+"").appendTo(tableBody); + propRow = $('').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) { - $(''+RED._("sidebar.info.showMore")+''+RED._("sidebar.info.showLess")+' ').appendTo(tableBody); + $(''+RED._("sidebar.info.showMore")+''+RED._("sidebar.info.showLess")+' ').appendTo(blankRow.children()[0]); } } if (node.type !== 'tab') { - if (m) { + if (subflowRegex) { $(''+RED._("sidebar.info.subflow")+'').appendTo(tableBody); $(''+RED._("common.label.name")+''+RED.utils.sanitize(subflowNode.name)+'').appendTo(tableBody); } } } - if (m) { + if (subflowRegex) { propRow = $(''+RED._("subflow.category")+'').appendTo(tableBody); var category = subflowNode.category||"subflows"; $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) $(''+RED._("sidebar.info.instances")+""+subflowUserCount+'').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||"")||(''+RED._("sidebar.info.none")+'')); - } else { - helpText = $("script[data-help-name='"+node.type+"']").html()||(''+RED._("sidebar.info.none")+''); - } - 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||"")||(''+RED._("sidebar.info.none")+'')); + // } else { + // helpText = $("script[data-help-name='"+node.type+"']").html()||(''+RED._("sidebar.info.none")+''); + // } + // 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 = $("
").css("padding","0 6px 6px").appendTo(propertiesPanelContent) + + // var editInfo = $('').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 = $('Actions').appendTo(tableBody); // var actionBar = $(propRow.children()[1]); // - // // var actionBar = $('
',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content); + // // var actionBar = $('
',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesPanel); // $('').appendTo(actionBar); // $('').appendTo(actionBar); // $('').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); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index e5d80cd72..b18583372 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -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 { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index ea4b06c52..922a31e33 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss index 699203703..4c8ddcc38 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss @@ -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; + } + } + }