Restore config node tab

Gruntfile.js

@@ -118,6 +118,7 @@ module.exports = function(grunt) {
                   "editor/js/ui/sidebar.js",
                   "editor/js/ui/palette.js",
                   "editor/js/ui/tab-info.js",
+                  "editor/js/ui/tab-config.js",
                   "editor/js/ui/editor.js",
                   "editor/js/ui/clipboard.js",
                   "editor/js/ui/library.js",

editor/js/main.js

@@ -152,9 +152,6 @@ var RED = (function() {
         statusEnabled = state;
         RED.view.status(statusEnabled);
     }
-    function toggleConfigNodes(state) {
-        RED.workspaces.toggleConfigNodes(state);
-    }
 
     function loadEditor() {
         RED.menu.init({id:"btn-sidemenu",
@@ -164,7 +161,6 @@ var RED = (function() {
                     null
                 ]},
                 {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true},
-                {id:"menu-item-config-nodes",label:RED._("menu.label.displayConfig"),toggle:true,onselect:toggleConfigNodes, selected: false},
                 null,
                 {id:"menu-item-import",label:RED._("menu.label.import"),options:[
                     {id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:RED.clipboard.import},

editor/js/ui/sidebar.js

@@ -188,6 +188,7 @@ RED.sidebar = (function() {
         RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();});
         showSidebar();
         RED.sidebar.info.init();
+        RED.sidebar.config.init();
         // hide info bar at start if screen rather narrow...
         if ($(window).width() < 600) { toggleSidebar(); }
     }

editor/js/ui/workspaces.js

@@ -90,7 +90,7 @@ RED.workspaces = (function() {
                 activeWorkspace = tab.id;
                 event.workspace = activeWorkspace;
                 RED.events.emit("workspace:change",event);
-                refreshConfigNodeList();
+                RED.sidebar.config.refresh();
             },
             ondblclick: function(tab) {
                 if (tab.type != "subflow") {
@@ -197,18 +197,6 @@ RED.workspaces = (function() {
         $('#btn-workspace-add-tab').on("click",function(e) {addWorkspace(); e.preventDefault()});
         RED.events.on("sidebar:resize",workspace_tabs.resize);
 
-        $(".workspace-config-node-tray-header").on('click', function(e) {
-            var icon = $(this).find("i");
-            if (icon.hasClass("expanded")) {
-                icon.removeClass("expanded");
-                $(this).next().slideUp();
-            } else {
-                icon.addClass("expanded");
-                $(this).next().slideDown();
-            }
-
-        });
-
         RED.menu.setAction('menu-item-workspace-delete',function() {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
         });
@@ -228,83 +216,6 @@ RED.workspaces = (function() {
         }
     }
 
-    function createConfigNodeList(nodes,list) {
-        nodes.sort(function(A,B) {
-            if (A.type < B.type) { return -1;}
-            if (A.type > B.type) { return 1;}
-            return 0;
-        });
-        list.empty();
-        if (nodes.length === 0) {
-            $('<li class="config_node_none">none</li>').appendTo(list);
-        } else {
-            var currentType = "";
-            nodes.forEach(function(node) {
-                var label = "";
-                if (typeof node._def.label == "function") {
-                    label = node._def.label.call(node);
-                } else {
-                    label = node._def.label;
-                }
-                label = label || node.id;
-                if (node.type != currentType) {
-                    $('<li class="config_node_type">'+node.type+'</li>').appendTo(list);
-                    currentType = node.type;
-                }
-
-                var entry = $('<li class="palette_node config_node"></li>').appendTo(list);
-                $('<div class="palette_label"></div>').text(label).appendTo(entry);
-
-                var iconContainer = $('<div/>',{class:"palette_icon_container  palette_icon_container_right"}).text(node.users.length).appendTo(entry);
-                if (node.users.length === 0) {
-                    entry.addClass("config_node_unused");
-                }
-                entry.on('click',function(e) {
-                    RED.sidebar.info.refresh(node);
-                });
-                entry.on('dblclick',function(e) {
-                    RED.editor.editConfig("", node.type, node.id);
-                });
-                var userArray = node.users.map(function(n) { return n.id });
-                entry.on('mouseover',function(e) {
-                    RED.nodes.eachNode(function(node) {
-                        if( userArray.indexOf(node.id) != -1) {
-                            node.highlighted = true;
-                            node.dirty = true;
-                        }
-                    });
-                    RED.view.redraw();
-                });
-
-                entry.on('mouseout',function(e) {
-                    RED.nodes.eachNode(function(node) {
-                        if(node.highlighted) {
-                            node.highlighted = false;
-                            node.dirty = true;
-                        }
-                    });
-                    RED.view.redraw();
-                });
-            });
-        }
-    }
-
-    function refreshConfigNodeList() {
-
-        var localConfigNodes = [];
-        var globalConfigNodes = [];
-
-        RED.nodes.eachConfig(function(cn) {
-            if (cn.z == activeWorkspace) {
-                localConfigNodes.push(cn);
-            } else if (!cn.z) {
-                globalConfigNodes.push(cn);
-            }
-        });
-        createConfigNodeList(localConfigNodes,$("#workspace-config-node-tray-locals"));
-        createConfigNodeList(globalConfigNodes,$("#workspace-config-node-tray-globals"));
-    }
-
     return {
         init: init,
         add: addWorkspace,
@@ -337,14 +248,10 @@ RED.workspaces = (function() {
                     workspace_tabs.renameTab(sf.id,sf.name);
                 }
             });
-            refreshConfigNodeList();
+            RED.sidebar.config.refresh();
         },
         resize: function() {
             workspace_tabs.resize();
-        },
-        toggleConfigNodes: function(state) {
-            refreshConfigNodeList();
-            $("#workspace").toggleClass("config-open",state);
         }
     }
 })();

editor/sass/tab-config.scss

@@ -14,50 +14,56 @@
  * limitations under the License.
  **/
 
-ul.tab-config-list {
+.sidebar-node-config {
-    list-style-type: none;
+    background: #f3f3f3;
-    padding: 3px;
+    height: 100%;
-    margin: 0;
+    overflow-y:auto;
     @include disable-selection;
 }
 
-ul.tab-config-list li {
+ .config-node-list {
-    max-width: 400px;
+     margin: 0;
-    font-size: 13px;
+     list-style-type: none;
+ }
+ .config_node {
+     width: 160px;
+     height: 30px;
      background: #f3f3f3;
-    margin: 10px auto;
+     color: #666;
-    border-radius: 3px;
-    border: 1px solid #ccc;
-    padding: 3px 8px;
-}
-div.tab-config-list-type {
-}
-
-div.tab-config-list-entry {
-    position: relative;
-    margin: 4px 0;
-    padding: 8px 4px 8px 10px;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
      cursor: pointer;
-}
-div.tab-config-list-entry:hover {
-    background: #f6f6f6;
-}
 
-div.tab-config-list-label {
+     .palette_label {
-}
+         margin-left: 8px;
-div.tab-config-list-users {
+         line-height: 24px;
-    position: absolute;
+         text-align: left;
-    right: 3px;
+         white-space: nowrap;
-    top: 3px;
+         overflow: hidden;
-    bottom: 3px;
+         text-overflow: ellipsis;
-    line-height: 27px;
+     }
-    font-size: 11px;
+     .palette_icon_container {
-    background: #f6f6f6;
+         font-size: 12px;
-    float: right;
+         line-height: 30px;
-    border: 1px solid #eee;
+         background-color: #e8e8e8;
-    border-radius: 3px;
+         border-top-right-radius: 4px;
-    padding: 1px 5px;
+         border-bottom-right-radius: 4px;
-}
+     }
+ }
+ .config_node_type {
+     color: #999;
+     text-align: right;
+     padding-right: 3px;
+     &:not(:first-child) {
+         margin-top: 20px;
+     }
+ }
+ .config_node_none {
+     color: #ddd;
+     text-align:right;
+     padding-right: 3px;
+ }
+ .config_node_unused {
+     border-color: #aaa;
+     background: #f9f9f9;
+     border-style: dashed;
+     color: #aaa;
+ }

editor/sass/workspace.scss

@@ -27,19 +27,6 @@
    transition: right 0.2s ease;
 }
 
-#workspace.config-open {
-    #chart {
-        right: 190px;
-    }
-    #workspace-config-node-tray {
-        right: 0px;
-    }
-    #workspace-toolbar {
-        right: 190px;
-    }
-}
-
-
 #chart svg:focus {
     outline: none;
 }
@@ -87,64 +74,3 @@
 #workspace-footer {
     @include component-footer;
 }
-
-#workspace-config-node-tray {
-    @include disable-selection;
-    position: absolute;
-    top: 35px;
-    bottom:25px;
-    right:-190px;
-    width: 190px;
-    border-left: 1px solid $secondary-border-color;
-    box-sizing:border-box;
-    background: #f3f3f3;
-    transition: right 0.2s ease;
-    overflow-y: auto;
-}
-
-.config-node-list {
-    margin: 0;
-    list-style-type: none;
-}
-.config_node {
-    width: 160px;
-    height: 30px;
-    background: #f3f3f3;
-    color: #666;
-    cursor: pointer;
-
-    .palette_label {
-        margin-left: 8px;
-        line-height: 24px;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .palette_icon_container {
-        font-size: 12px;
-        line-height: 30px;
-        background-color: #e8e8e8;
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-    }
-}
-.config_node_type {
-    color: #999;
-    text-align: right;
-    padding-right: 3px;
-    &:not(:first-child) {
-        margin-top: 20px;
-    }
-}
-.config_node_none {
-    color: #ddd;
-    text-align:right;
-    padding-right: 3px;
-}
-.config_node_unused {
-    border-color: #aaa;
-    background: #f9f9f9;
-    border-style: dashed;
-    color: #aaa;
-}

editor/templates/index.mst

@@ -58,16 +58,6 @@
         <ul id="workspace-tabs"></ul>
         <div id="workspace-add-tab"><a id="btn-workspace-add-tab" href="#"><i class="fa fa-plus"></i></a></div>
         <div id="chart"></div>
-        <div id="workspace-config-node-tray">
-            <div class="palette-category">
-                <div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="workspace.config.local"></span></div>
-                <ul id="workspace-config-node-tray-locals" class="palette-content config-node-list"></ul>
-            </div>
-            <div class="palette-category">
-                <div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="workspace.config.global"></span></div>
-                <ul id="workspace-config-node-tray-globals" class="palette-content config-node-list"></ul>
-            </div>
-        </div>
         <div id="workspace-toolbar"></div>
         <div id="workspace-footer">
             <a class="workspace-footer-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>

locales/en-US/editor.json

@@ -13,11 +13,7 @@
         "renameSheet": "Rename sheet",
         "confirmDelete": "Confirm delete",
         "delete": "Are you sure you want to delete '__label__'?",
-        "dropFlowHere": "Drop the flow here",
+        "dropFlowHere": "Drop the flow here"
-        "config": {
-            "local": "on this sheet",
-            "global": "on all sheets"
-        }
     },
     "menu": {
         "label": {
@@ -198,7 +194,10 @@
         },
         "config": {
             "name": "Configuration nodes",
-            "label": "config"
+            "label": "config",
+            "local": "on this sheet",
+            "global": "on all sheets",
+            "none": "none"
         }
     }
 }