Move palette editor to userSettings dialog

editor/js/main.js

@@ -209,7 +209,6 @@
         ]});
         menuOptions.push(null);
         if (RED.settings.theme('palette.editable') !== false) {
-            RED.palette.editor.init();
             menuOptions.push({id:"menu-item-edit-palette",label:RED._("menu.label.editPalette"),onselect:"core:manage-palette"});
             menuOptions.push(null);
         }
@@ -225,19 +224,23 @@
         menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
 
 
+        RED.view.init();
+        RED.userSettings.init();
         RED.user.init();
         RED.library.init();
+        RED.keyboard.init();
         RED.palette.init();
+        if (RED.settings.theme('palette.editable') !== false) {
+            RED.palette.editor.init();
+        }
+
         RED.sidebar.init();
         RED.subflow.init();
         RED.workspaces.init();
         RED.clipboard.init();
         RED.search.init();
-        RED.view.init();
         RED.editor.init();
-        RED.keyboard.init();
         RED.diff.init();
-        RED.userSettings.init();
 
         RED.menu.init({id:"btn-sidemenu",options: menuOptions});
 

editor/js/ui/common/tabs.js

@@ -22,7 +22,7 @@ RED.tabs = (function() {
         var currentTabWidth;
         var currentActiveTabWidth = 0;
 
-        var ul = $("#"+options.id);
+        var ul = options.element || $("#"+options.id);
         var wrapper = ul.wrap( "<div>" ).parent();
         var scrollContainer = ul.wrap( "<div>" ).parent();
         wrapper.addClass("red-ui-tabs");

editor/js/ui/keyboard.js

@@ -85,6 +85,12 @@ RED.keyboard = (function() {
                     }
                 }
             }
+        });
+
+        RED.userSettings.add({
+            id:'keyboard',
+            title: 'Keyboard',
+            get: getSettingsPane
         })
     }
 
@@ -512,8 +518,7 @@ RED.keyboard = (function() {
         },
         revertToDefault: revertToDefault,
         formatKey: formatKey,
-        validateKey: validateKey,
+        validateKey: validateKey
-        getSettingsPane: getSettingsPane
     }
 
 })();

editor/js/ui/palette-editor.js

@@ -309,20 +309,23 @@ RED.palette.editor = (function() {
         }
 
         initInstallTab();
-        $("#header-shade").show();
+        // $("#header-shade").show();
-        $("#editor-shade").show();
+        // $("#editor-shade").show();
-        $("#sidebar-shade").show();
+        // $("#sidebar-shade").show();
-        $("#sidebar-separator").hide();
+        // $("#sidebar-separator").hide();
 
         editorTabs.activateTab('nodes');
 
-        $("#main-container").addClass("palette-expanded");
+        // $("#main-container").addClass("palette-expanded");
         setTimeout(function() {
             editorTabs.resize();
             filterInput.focus();
         },250);
-        RED.events.emit("palette-editor:open");
+        // RED.events.emit("palette-editor:open");
-        RED.keyboard.add("*","escape",function(){hidePaletteEditor()});
+        // RED.keyboard.add("*","escape",function(){hidePaletteEditor()});
+
+        RED.userSettings.show('palette');
+
     }
     function hidePaletteEditor() {
         RED.keyboard.remove("escape");
@@ -445,22 +448,114 @@ RED.palette.editor = (function() {
         return -1 * (A.info.timestamp-B.info.timestamp);
     }
 
+
     function init() {
         if (RED.settings.theme('palette.editable') === false) {
             return;
         }
+        createSettingsPane();
 
-        RED.events.on("editor:open",function() { disabled = true; });
+        RED.userSettings.add({
-        RED.events.on("editor:close",function() { disabled = false; });
+            id:'palette',
-        RED.events.on("search:open",function() { disabled = true; });
+            title: 'Palette',
-        RED.events.on("search:close",function() { disabled = false; });
+            get: getSettingsPane,
-        RED.events.on("type-search:open",function() { disabled = true; });
+            close: function() {
-        RED.events.on("type-search:close",function() { disabled = false; });
+                settingsPane.detach();
+            }
+        })
+
+        // RED.events.on("editor:open",function() { disabled = true; });
+        // RED.events.on("editor:close",function() { disabled = false; });
+        // RED.events.on("search:open",function() { disabled = true; });
+        // RED.events.on("search:close",function() { disabled = false; });
+        // RED.events.on("type-search:open",function() { disabled = true; });
+        // RED.events.on("type-search:close",function() { disabled = false; });
 
         RED.actions.add("core:manage-palette",RED.palette.editor.show);
 
+        RED.events.on('registry:module-updated', function(ns) {
+            refreshNodeModule(ns.module);
+        });
+        RED.events.on('registry:node-set-enabled', function(ns) {
+            refreshNodeModule(ns.module);
+        });
+        RED.events.on('registry:node-set-disabled', function(ns) {
+            refreshNodeModule(ns.module);
+        });
+        RED.events.on('registry:node-type-added', function(nodeType) {
+            if (!/^subflow:/.test(nodeType)) {
+                var ns = RED.nodes.registry.getNodeSetForType(nodeType);
+                refreshNodeModule(ns.module);
+            }
+        });
+        RED.events.on('registry:node-type-removed', function(nodeType) {
+            if (!/^subflow:/.test(nodeType)) {
+                var ns = RED.nodes.registry.getNodeSetForType(nodeType);
+                refreshNodeModule(ns.module);
+            }
+        });
+        RED.events.on('registry:node-set-added', function(ns) {
+            refreshNodeModule(ns.module);
+            for (var i=0;i<filteredList.length;i++) {
+                if (filteredList[i].info.id === ns.module) {
+                    var installButton = filteredList[i].elements.installButton;
+                    installButton.addClass('disabled');
+                    installButton.html(RED._('palette.editor.installed'));
+                    break;
+                }
+            }
+        });
+        RED.events.on('registry:node-set-removed', function(ns) {
+            var module = RED.nodes.registry.getModule(ns.module);
+            if (!module) {
+                var entry = nodeEntries[ns.module];
+                if (entry) {
+                    nodeList.editableList('removeItem', entry);
+                    delete nodeEntries[ns.module];
+                    for (var i=0;i<filteredList.length;i++) {
+                        if (filteredList[i].info.id === ns.module) {
+                            var installButton = filteredList[i].elements.installButton;
+                            installButton.removeClass('disabled');
+                            installButton.html(RED._('palette.editor.install'));
+                            break;
+                        }
+                    }
+                }
+            }
+        });
+        RED.events.on('nodes:add', function(n) {
+            if (!/^subflow:/.test(n.type)) {
+                typesInUse[n.type] = (typesInUse[n.type]||0)+1;
+                if (typesInUse[n.type] === 1) {
+                    var ns = RED.nodes.registry.getNodeSetForType(n.type);
+                    refreshNodeModule(ns.module);
+                }
+            }
+        })
+        RED.events.on('nodes:remove', function(n) {
+            if (typesInUse.hasOwnProperty(n.type)) {
+                typesInUse[n.type]--;
+                if (typesInUse[n.type] === 0) {
+                    delete typesInUse[n.type];
+                    var ns = RED.nodes.registry.getNodeSetForType(n.type);
+                    refreshNodeModule(ns.module);
+                }
+            }
+        })
+    }
+
+    var settingsPane;
+    function getSettingsPane() {
+        return settingsPane;
+    }
+    function createSettingsPane() {
+        settingsPane = $('<div id="user-settings-tab-palette"></div>');
+        var content = $('<div id="palette-editor">'+
+            '<ul id="palette-editor-tabs"></ul>'+
+        '</div>').appendTo(settingsPane);
+
         editorTabs = RED.tabs.create({
-            id:"palette-editor-tabs",
+            element: settingsPane.find('#palette-editor-tabs'),
             onchange:function(tab) {
                 $("#palette-editor .palette-editor-tab").hide();
                 tab.content.show();
@@ -484,17 +579,7 @@ RED.palette.editor = (function() {
         });
 
 
-        $("#editor-shade").click(function() {
+        var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo(content);
-            if ($("#main-container").hasClass("palette-expanded")) {
-                hidePaletteEditor();
-            }
-        });
-
-        $("#palette-editor-close").on("click", function(e) {
-            hidePaletteEditor();
-        })
-
-        var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo("#palette-editor");
 
         editorTabs.addTab({
             id: 'nodes',
@@ -659,7 +744,7 @@ RED.palette.editor = (function() {
 
 
 
-        var installTab = $('<div>',{class:"palette-editor-tab hide"}).appendTo("#palette-editor");
+        var installTab = $('<div>',{class:"palette-editor-tab hide"}).appendTo(content);
 
         editorTabs.addTab({
             id: 'install',
@@ -874,79 +959,6 @@ RED.palette.editor = (function() {
                 }
             ]
         })
-
-
-        RED.events.on('registry:module-updated', function(ns) {
-            refreshNodeModule(ns.module);
-        });
-        RED.events.on('registry:node-set-enabled', function(ns) {
-            refreshNodeModule(ns.module);
-        });
-        RED.events.on('registry:node-set-disabled', function(ns) {
-            refreshNodeModule(ns.module);
-        });
-        RED.events.on('registry:node-type-added', function(nodeType) {
-            if (!/^subflow:/.test(nodeType)) {
-                var ns = RED.nodes.registry.getNodeSetForType(nodeType);
-                refreshNodeModule(ns.module);
-            }
-        });
-        RED.events.on('registry:node-type-removed', function(nodeType) {
-            if (!/^subflow:/.test(nodeType)) {
-                var ns = RED.nodes.registry.getNodeSetForType(nodeType);
-                refreshNodeModule(ns.module);
-            }
-        });
-        RED.events.on('registry:node-set-added', function(ns) {
-            refreshNodeModule(ns.module);
-            for (var i=0;i<filteredList.length;i++) {
-                if (filteredList[i].info.id === ns.module) {
-                    var installButton = filteredList[i].elements.installButton;
-                    installButton.addClass('disabled');
-                    installButton.html(RED._('palette.editor.installed'));
-                    break;
-                }
-            }
-        });
-        RED.events.on('registry:node-set-removed', function(ns) {
-            var module = RED.nodes.registry.getModule(ns.module);
-            if (!module) {
-                var entry = nodeEntries[ns.module];
-                if (entry) {
-                    nodeList.editableList('removeItem', entry);
-                    delete nodeEntries[ns.module];
-                    for (var i=0;i<filteredList.length;i++) {
-                        if (filteredList[i].info.id === ns.module) {
-                            var installButton = filteredList[i].elements.installButton;
-                            installButton.removeClass('disabled');
-                            installButton.html(RED._('palette.editor.install'));
-                            break;
-                        }
-                    }
-                }
-            }
-        });
-        RED.events.on('nodes:add', function(n) {
-            if (!/^subflow:/.test(n.type)) {
-                typesInUse[n.type] = (typesInUse[n.type]||0)+1;
-                if (typesInUse[n.type] === 1) {
-                    var ns = RED.nodes.registry.getNodeSetForType(n.type);
-                    refreshNodeModule(ns.module);
-                }
-            }
-        })
-        RED.events.on('nodes:remove', function(n) {
-            if (typesInUse.hasOwnProperty(n.type)) {
-                typesInUse[n.type]--;
-                if (typesInUse[n.type] === 0) {
-                    delete typesInUse[n.type];
-                    var ns = RED.nodes.registry.getNodeSetForType(n.type);
-                    refreshNodeModule(ns.module);
-                }
-            }
-        })
-
-
     }
 
     return {

editor/js/ui/userSettings.js

@@ -19,6 +19,12 @@ RED.userSettings = (function() {
     var trayWidth = 700;
     var settingsVisible = false;
 
+    var panes = [];
+
+    function addPane(options) {
+        panes.push(options);
+    }
+
     function show(initialTab) {
         if (settingsVisible) {
             return;
@@ -43,56 +49,39 @@ RED.userSettings = (function() {
             },
             open: function(tray) {
                 var trayBody = tray.find('.editor-tray-body');
-                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(trayBody);
+                var settingsContent = $('<div></div>').appendTo(trayBody);
+                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
 
                 $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
-                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(trayBody);
+                var settingsTabs = RED.tabs.create({
-
-                createViewPane().hide().appendTo(tabContents);
-                RED.keyboard.getSettingsPane().hide().appendTo(tabContents);
-
-                $('<div id="user-settings-tab-palette"></div>').appendTo(tabContents);
-
-
-                var tabs = RED.tabs.create({
                     id: "user-settings-tabs",
                     vertical: true,
                     onchange: function(tab) {
+                        setTimeout(function() {
                             $("#user-settings-tabs-content").children().hide();
                             $("#" + tab.id).show();
+                        },50);
                     }
                 });
-                tabs.addTab({
+                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
-                    id: "user-settings-tab-view",
+
-                    label: "View"
+                panes.forEach(function(pane) {
+                    settingsTabs.addTab({
+                        id: "user-settings-tab-"+pane.id,
+                        label: pane.title
                     });
-                tabs.addTab({
+                    pane.get().hide().appendTo(tabContents);
-                    id: "user-settings-tab-keyboard",
-                    label: "Keyboard"
                 });
-                tabs.addTab({
+                settingsContent.i18n();
-                    id: "user-settings-tab-palette",
+                settingsTabs.activateTab("user-settings-tab-"+(initialTab||'view'))
-                    label: "Palette"
-                });
-                if (initialTab) {
-                    tabs.activateTab("user-settings-tab-"+initialTab)
-                }
             },
             close: function() {
                 settingsVisible = false;
-
+                panes.forEach(function(pane) {
-                viewSettings.forEach(function(section) {
+                    if (pane.close) {
-                    section.options.forEach(function(opt) {
+                        pane.close();
-                        var input = $("#user-settings-"+opt.setting);
-                        if (opt.toggle) {
-                            setSelected(opt.setting,input.prop('checked'));
-                        } else {
-                            setSelected(opt.setting,input.val());
                     }
                 });
-                })
-
-
             },
             show: function() {}
         }
@@ -171,6 +160,24 @@ RED.userSettings = (function() {
         RED.actions.add("core:show-user-settings",show);
         RED.actions.add("core:show-help", function() { show('keyboard')});
 
+        addPane({
+            id:'view',
+            title: 'View',
+            get: createViewPane,
+            close: function() {
+                viewSettings.forEach(function(section) {
+                    section.options.forEach(function(opt) {
+                        var input = $("#user-settings-"+opt.setting);
+                        if (opt.toggle) {
+                            setSelected(opt.setting,input.prop('checked'));
+                        } else {
+                            setSelected(opt.setting,input.val());
+                        }
+                    });
+                })
+            }
+        })
+
         viewSettings.forEach(function(section) {
             section.options.forEach(function(opt) {
                 allSettings[opt.setting] = opt;
@@ -195,6 +202,8 @@ RED.userSettings = (function() {
     }
     return {
         init: init,
-        toggle: toggle
+        toggle: toggle,
+        show: show,
+        add: addPane
     };
 })();

editor/sass/palette-editor.scss

@@ -14,13 +14,16 @@
  * limitations under the License.
  **/
 
+#user-settings-tab-palette {
+    height: 100%;
+}
+
 #palette-editor {
     text-align: left;
-    display: none;
     position: absolute;
     top: 0px;
     right: 0;
-    bottom: 25px;
+    bottom: 0;
     left:0;
     padding: 0;
     box-sizing:border-box;
@@ -51,7 +54,7 @@
 
             }
             .red-ui-editableList-item-content {
-                padding: 12px 8px;
+                padding: 12px 16px;
             }
             &:last-child {
                 // border-bottom: 1px solid $primary-border-color;
@@ -61,7 +64,7 @@
     }
     .palette-editor-tab {
         position:absolute;
-        top:115px;
+        top:35px;
         left:0;
         right:0;
         bottom:0

editor/templates/index.mst

@@ -60,10 +60,6 @@
         <div id="palette-search" class="palette-search hide">
             <input type="text" data-i18n="[placeholder]palette.filter"></input>
         </div>
-        <div id="palette-editor">
-            <div class="editor-tray-header"><div class="editor-tray-titlebar"><ul class="editor-tray-breadcrumbs"><li data-i18n="palette.editor.title"></li></ul></div><div class="editor-tray-toolbar"><button id="palette-editor-close" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only primary" role="button" aria-disabled="false" data-i18n="common.label.done"></button></div></div>
-            <ul id="palette-editor-tabs"></ul>
-        </div>
         <div id="palette-container" class="palette-scroll hide"></div>
         <div id="palette-footer">
             <a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>