Move palette editor to userSettings dialog

2023-10-10 13:36:53 +02:00 · 2017-04-29 23:10:55 +01:00 · 2017-04-29 23:10:55 +01:00 · ccfcbe8526
commit ccfcbe8526
parent 5938143002
7 changed files with 182 additions and 154 deletions
--- a/editor/js/main.js
+++ b/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});

--- a/editor/js/ui/common/tabs.js
+++ b/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");
--- a/editor/js/ui/keyboard.js
+++ b/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,
-        getSettingsPane: getSettingsPane
+        validateKey: validateKey
    }

 })();
--- a/editor/js/ui/palette-editor.js
+++ b/editor/js/ui/palette-editor.js
@ -309,20 +309,23 @@ RED.palette.editor = (function() {
        }

        initInstallTab();
-        $("#header-shade").show();
-        $("#editor-shade").show();
-        $("#sidebar-shade").show();
-        $("#sidebar-separator").hide();
+        // $("#header-shade").show();
+        // $("#editor-shade").show();
+        // $("#sidebar-shade").show();
+        // $("#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.keyboard.add("*","escape",function(){hidePaletteEditor()});
+        // RED.events.emit("palette-editor:open");
+        // 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.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.userSettings.add({
+            id:'palette',
+            title: 'Palette',
+            get: getSettingsPane,
+            close: function() {
+                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() {
-            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");
+        var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo(content);

        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 {
--- a/editor/js/ui/userSettings.js
+++ b/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);
-
-                createViewPane().hide().appendTo(tabContents);
-                RED.keyboard.getSettingsPane().hide().appendTo(tabContents);
-
-                $('<div id="user-settings-tab-palette"></div>').appendTo(tabContents);
-
-
-                var tabs = RED.tabs.create({
+                var settingsTabs = RED.tabs.create({
                    id: "user-settings-tabs",
                    vertical: true,
                    onchange: function(tab) {
-                        $("#user-settings-tabs-content").children().hide();
-                        $("#" + tab.id).show();
+                        setTimeout(function() {
+                            $("#user-settings-tabs-content").children().hide();
+                            $("#" + tab.id).show();
+                        },50);
                    }
                });
-                tabs.addTab({
-                    id: "user-settings-tab-view",
-                    label: "View"
+                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
+
+                panes.forEach(function(pane) {
+                    settingsTabs.addTab({
+                        id: "user-settings-tab-"+pane.id,
+                        label: pane.title
+                    });
+                    pane.get().hide().appendTo(tabContents);
                });
-                tabs.addTab({
-                    id: "user-settings-tab-keyboard",
-                    label: "Keyboard"
-                });
-                tabs.addTab({
-                    id: "user-settings-tab-palette",
-                    label: "Palette"
-                });
-                if (initialTab) {
-                    tabs.activateTab("user-settings-tab-"+initialTab)
-                }
+                settingsContent.i18n();
+                settingsTabs.activateTab("user-settings-tab-"+(initialTab||'view'))
            },
            close: function() {
                settingsVisible = false;
-
-                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());
-                        }
-                    });
-                })
-
-
+                panes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close();
+                    }
+                });
            },
            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
    };
 })();
--- a/editor/sass/palette-editor.scss
+++ b/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
--- a/editor/templates/index.mst
+++ b/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>