Restructure info tab

2025-03-01 10:36:34 +00:00 · 2017-04-06 23:17:06 +01:00
parent 203539841d
commit 624befd704
7 changed files with 242 additions and 131 deletions
--- a/editor/js/ui/common/stack.js
+++ b/editor/js/ui/common/stack.js
@@ -20,37 +20,46 @@ RED.stack = (function() {

        var entries = [];

+        var visible = true;
+
        return {
            add: function(entry) {
-
                entries.push(entry);
-                var entryContainer = $('<div class="palette-category">').appendTo(container);
-
-                var header = $('<div class="palette-header"></div>').appendTo(entryContainer);
-                var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
-                $('<span></span>').html(entry.title).appendTo(header);
-                entry.content = $('<div class="editor-tray-content"></div>').appendTo(entryContainer);
-
-                if (entry.expanded) {
-                    icon.addClass("expanded");
-                } else {
-                    entry.content.hide();
+                entry.container = $('<div class="palette-category">').appendTo(container);
+                if (!visible) {
+                    entry.container.hide();
                }
-
-                header.click(function() {
-                    if (options.singleExpanded) {
-                        if (!entry.isExpanded()) {
-                            for (var i=0;i<entries.length;i++) {
-                                if (entries[i].isExpanded()) {
-                                    entries[i].collapse();
+                var header = $('<div class="palette-header"></div>').appendTo(entry.container);
+                entry.content = $('<div></div>').appendTo(entry.container);
+                if (entry.collapsible !== false) {
+                    header.click(function() {
+                        if (options.singleExpanded) {
+                            if (!entry.isExpanded()) {
+                                for (var i=0;i<entries.length;i++) {
+                                    if (entries[i].isExpanded()) {
+                                        entries[i].collapse();
+                                    }
                                }
+                                entry.expand();
                            }
-                            entry.expand();
+                        } else {
+                            entry.toggle();
                        }
+                    });
+                    var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
+
+                    if (entry.expanded) {
+                        icon.addClass("expanded");
                    } else {
-                        entry.toggle();
+                        entry.content.hide();
                    }
-                });
+                } else {
+                    header.css("cursor","default");
+                }
+                entry.title = $('<span></span>').html(entry.title).appendTo(header);
+
+
+
                entry.toggle = function() {
                    if (entry.isExpanded()) {
                        entry.collapse();
@@ -85,6 +94,21 @@ RED.stack = (function() {

            },

+            hide: function() {
+                visible = false;
+                entries.forEach(function(entry) {
+                    entry.container.hide();
+                });
+                return this;
+            },
+
+            show: function() {
+                visible = true;
+                entries.forEach(function(entry) {
+                    entry.container.show();
+                });
+                return this;
+            }
        }

    }
--- a/editor/js/ui/editor.js
+++ b/editor/js/ui/editor.js
@@ -963,12 +963,16 @@ RED.editor = (function() {
                    title: RED._("editor.nodeProperties"),
                    expanded: true
                });
+                nodeProperties.content.addClass("editor-tray-content");
+
                var portLabels = stack.add({
                    title: RED._("editor.portLabels"),
                    onexpand: function() {
                        refreshLabelForm(this.content,node);
                    }
                });
+                portLabels.content.addClass("editor-tray-content");
+

                if (editing_node) {
                    RED.sidebar.info.refresh(editing_node);
@@ -1537,9 +1541,11 @@ RED.editor = (function() {
                    title: RED._("editor.nodeProperties"),
                    expanded: true
                });
+                nodeProperties.content.addClass("editor-tray-content");
                var portLabels = stack.add({
                    title: RED._("editor.portLabels")
                });
+                portLabels.content.addClass("editor-tray-content");



--- a/editor/js/ui/palette.js
+++ b/editor/js/ui/palette.js
@@ -101,7 +101,7 @@ RED.palette = (function() {
            if (label != type) {
                l = "<p><b>"+RED.text.bidi.enforceTextDirectionWithUCC(label)+"</b><br/><i>"+type+"</i></p>";
            }
-            popOverContent = $(l+(info?info:$("script[data-help-name$='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
+            popOverContent = $(l+(info?info:$("script[data-help-name='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
                                .filter(function(n) {
                                    return (this.nodeType == 1 && this.nodeName == "P") || (this.nodeType == 3 && this.textContent.trim().length > 0)
                                }).slice(0,2);
@@ -205,7 +205,7 @@ RED.palette = (function() {
                if (nt.indexOf("subflow:") === 0) {
                    helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"");
                } else {
-                    helpText = $("script[data-help-name$='"+d.type+"']").html()||"";
+                    helpText = $("script[data-help-name='"+d.type+"']").html()||"";
                }
                var help = '<div class="node-help">'+helpText+"</div>";
                RED.sidebar.info.set(help);
--- a/editor/js/ui/tab-info.js
+++ b/editor/js/ui/tab-info.js
@@ -26,20 +26,40 @@ RED.sidebar.info = (function() {
        smartypants: false
    });

-    var content = document.createElement("div");
-    content.style.paddingTop = "4px";
-    content.style.paddingLeft = "4px";
-    content.style.paddingRight = "4px";
-    content.className = "sidebar-node-info"
+    var content;
+    var sections;
+    var nodeSection;
+    var infoSection;
+    var tipBox;

    var expandedSections = {
-        "node": true,
-        "property": false,
-        "info": true,
-        "subflow": true
+        "property": false
    };

    function init() {
+
+        content = document.createElement("div");
+        content.className = "sidebar-node-info"
+
+        tipBox = $('<div class="node-info-tip collapsed hide"></div>').appendTo(content);
+
+
+        RED.actions.add("core:show-info-tab",show);
+
+        sections = RED.stack.create({
+            container: content
+        }).hide();
+
+        nodeSection = sections.add({
+            title: "Node",
+            collapsible: false
+        });
+        infoSection = sections.add({
+            title: "Information",
+            collapsible: false
+        });
+        infoSection.content.css("padding","6px");
+        infoSection.container.css("border-bottom","none");
        RED.sidebar.addTab({
            id: "info",
            label: RED._("sidebar.info.label"),
@@ -47,7 +67,6 @@ RED.sidebar.info = (function() {
            content: content,
            enableOnEdit: true
        });
-        RED.actions.add("core:show-info-tab",show);
    }

    function show() {
@@ -82,84 +101,100 @@ RED.sidebar.info = (function() {
    }
    function refresh(node) {
        tips.stop();
-        $(content).empty();
+        sections.show();
+        $(nodeSection.content).empty();
+        $(infoSection.content).empty();
+
        var table = $('<table class="node-info"></table>');
        var tableBody = $('<tbody>').appendTo(table);
-        $('<tr class="blank"><th colspan="2"><a href="#" class="node-info-node-header'+(expandedSections.node?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.node")+'</a></th></tr>').appendTo(tableBody);
+        var propRow;
+        if (node.type === "tab") {
+            nodeSection.title.html("Flow");
+            propRow = $('<tr class="node-info-node-row"><td>Name</td><td></td></tr>').appendTo(tableBody);
+            $(propRow.children()[1]).html('&nbsp;'+(node.label||""))
+            propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</td><td></td></tr>").appendTo(tableBody);
+            RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
+            propRow = $('<tr class="node-info-node-row"><td>Enabled</td><td></td></tr>').appendTo(tableBody);
+            RED.utils.createObjectElement((!!!node.disabled)).appendTo(propRow.children()[1]);

-
-        if (node.type != "subflow" && node.name) {
-            $('<tr class="node-info-node-row'+(expandedSections.node?"":" hide")+'"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
-        }
-        $('<tr class="node-info-node-row'+(expandedSections.node?"":" hide")+'"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
-        $('<tr class="node-info-node-row'+(expandedSections.node?"":" hide")+'"><td>'+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>").appendTo(tableBody);
-
-        var m = /^subflow(:(.+))?$/.exec(node.type);
-        var subflowNode;
-        if (m) {
-            if (m[2]) {
-                subflowNode = RED.nodes.subflow(m[2]);
-            } else {
-                subflowNode = node;
+        } else {
+            nodeSection.title.html("Node");
+            if (node.type !== "subflow" && node.name) {
+                $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
            }
+            $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
+            propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</td><td></td></tr>").appendTo(tableBody);
+            RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);

-            $('<tr class="blank"><th colspan="2"><a href="#" class="node-info-subflow-header'+(expandedSections.subflow?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.subflow")+'</a></th></tr>').appendTo(tableBody);
+            var m = /^subflow(:(.+))?$/.exec(node.type);
+            var subflowNode;

-            var userCount = 0;
-            var subflowType = "subflow:"+subflowNode.id;
-            RED.nodes.eachNode(function(n) {
-                if (n.type === subflowType) {
-                    userCount++;
-                }
-            });
-            $('<tr class="node-info-subflow-row'+(expandedSections.subflow?"":" hide")+'"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>').appendTo(tableBody);
-            $('<tr class="node-info-subflow-row'+(expandedSections.subflow?"":" hide")+'"><td>'+RED._("sidebar.info.instances")+"</td><td>"+userCount+'</td></tr>').appendTo(tableBody);
-        }
-
-        if (!m && node.type != "subflow" && node.type != "comment") {
-            $('<tr class="blank"><th colspan="2"><a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.properties")+'</a></th></tr>').appendTo(tableBody);
-            if (node._def) {
-                for (var n in node._def.defaults) {
-                    if (n != "name" && node._def.defaults.hasOwnProperty(n)) {
-                        var val = node[n];
-                        var type = typeof val;
-                        var propRow = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
-                        RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+            if (!m && node.type != "subflow" && node.type != "comment") {
+                if (node._def) {
+                    var count = 0;
+                    for (var n in node._def.defaults) {
+                        if (n != "name" && node._def.defaults.hasOwnProperty(n)) {
+                            var val = node[n];
+                            var type = typeof val;
+                            count++;
+                            propRow = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
+                            RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+                        }
+                    }
+                    if (count > 0) {
+                        $('<tr class="node-info-property-expand blank"><td colspan="2"><a href="#" class=" node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="node-info-property-show-more">show more</span><span class="node-info-property-show-less">show less</span> <i class="fa fa-caret-down"></i></a></td></tr>').appendTo(tableBody);
                    }
                }
            }
+
+            if (m) {
+                if (m[2]) {
+                    subflowNode = RED.nodes.subflow(m[2]);
+                } else {
+                    subflowNode = node;
+                }
+
+                $('<tr class="blank"><th colspan="2"><a href="#" class="node-info-subflow-header">'+RED._("sidebar.info.subflow")+'</a></th></tr>').appendTo(tableBody);
+
+                var userCount = 0;
+                var subflowType = "subflow:"+subflowNode.id;
+                RED.nodes.eachNode(function(n) {
+                    if (n.type === subflowType) {
+                        userCount++;
+                    }
+                });
+                $('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>').appendTo(tableBody);
+                $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+userCount+'</td></tr>').appendTo(tableBody);
+            }
        }
-        $(table).appendTo(content);
+
+        $(table).appendTo(nodeSection.content);

        var infoText = "";

        if (!subflowNode && node.type != "comment") {
-            var helpText = $("script[data-help-name$='"+node.type+"']").html()||"";
+            var helpText = $("script[data-help-name='"+node.type+"']").html()||"";
            infoText = helpText;
        }
        if (subflowNode) {
-            infoText = marked(subflowNode.info||"");
+            infoText = infoText + marked(subflowNode.info||"");
        } else if (node._def && node._def.info) {
            var info = node._def.info;
            var textInfo = (typeof info === "function" ? info.call(node) : info);
-            infoText = marked(textInfo);
+            // TODO: help
+            infoText = infoText + marked(textInfo);
        }
        if (infoText) {
-            $('<tr class="blank"><th colspan="2"><a href="#" class="node-info-info-header'+(expandedSections.info?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.info")+'</a></th></tr>').appendTo(tableBody);
-            addTargetToExternalLinks($('<tr class="blank node-info-info-row'+(expandedSections.info?"":" hide")+'"><td colspan="2"><div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div></td></tr>')).appendTo(tableBody);
+            addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content);
        }


-        ["node","subflow","property","info"].forEach(function(t) {
-            $(".node-info-"+t+"-header").click(function(e) {
-                e.preventDefault();
-                console.log(t,expandedSections[t]);
-                expandedSections[t] = !expandedSections[t];
-                $(this).toggleClass("expanded",expandedSections[t]);
-                $(".node-info-"+t+"-row").toggle(expandedSections[t]);
-
-            })
-        })
+        $(".node-info-property-header").click(function(e) {
+            e.preventDefault();
+            expandedSections["property"] = !expandedSections["property"];
+            $(this).toggleClass("expanded",expandedSections["property"]);
+            $(".node-info-property-row").toggle(expandedSections["property"]);
+        });
    }


@@ -203,15 +238,14 @@ RED.sidebar.info = (function() {
            while ((m=/(\[(.*?)\])/.exec(tip))) {
                tip = tip.replace(m[1],RED.keyboard.formatKey(m[2]));
            }
-            $('<div class="node-info-tip hide">'+tip+'</div>').appendTo(content).fadeIn(200);
+            tipBox.html(tip).fadeIn(200);
            if (startTimeout) {
                startTimeout = null;
                refreshTimeout = setInterval(cycleTips,cycleDelay);
            }
        }
        function cycleTips() {
-            $(".node-info-tip").fadeOut(300,function() {
-                $(this).remove();
+            tipBox.fadeOut(300,function() {
                setTip();
            })
        }
@@ -219,7 +253,6 @@ RED.sidebar.info = (function() {
            started = true;
            if (enabled) {
                if (!startTimeout && !refreshTimeout) {
-                    $(content).html("");
                    if (tipCount === -1) {
                        do {
                            tipCount++;
@@ -235,7 +268,7 @@ RED.sidebar.info = (function() {
            clearTimeout(startTimeout);
            refreshTimeout = null;
            startTimeout = null;
-            $(".node-info-tip").remove();
+            tipBox.hide();
        }
        return {
            start: startTips,
@@ -244,12 +277,15 @@ RED.sidebar.info = (function() {
    })();

    function clear() {
+        console.log("clear');");
+        sections.hide();
        tips.start();
    }

    function set(html) {
        tips.stop();
-        $(content).html(html);
+        sections.show();
+        $(infoSection.content).html(html);
    }


@@ -265,9 +301,11 @@ RED.sidebar.info = (function() {
                }
            }
        } else {
-            var subflow = RED.nodes.subflow(RED.workspaces.active());
-            if (subflow) {
-                refresh(subflow);
+            var activeWS = RED.workspaces.active();
+
+            var flow = RED.nodes.workspace(activeWS) || RED.nodes.subflow(activeWS);
+            if (flow) {
+                refresh(flow);
            } else {
                clear();
            }