Move view and keyboard into user settings dialog

editor/js/main.js

@@ -171,10 +171,10 @@
     function loadEditor() {
         var menuOptions = [];
         menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
-            {id:"menu-item-view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:"core:toggle-show-grid"},
+            // {id:"menu-item-view-show-grid",setting:"view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:"core:toggle-show-grid"},
-            {id:"menu-item-view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:"core:toggle-snap-grid"},
+            // {id:"menu-item-view-snap-grid",setting:"view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:"core:toggle-snap-grid"},
-            {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:"core:toggle-status", selected: true},
+            // {id:"menu-item-status",setting:"node-show-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:"core:toggle-status", selected: true},
-            null,
+            //null,
             // {id:"menu-item-bidi",label:RED._("menu.label.view.textDir"),options:[
             //     {id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if(s){RED.text.bidi.setTextDirection("")}}},
             //     {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("ltr")}}},
@@ -182,7 +182,8 @@
             //     {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}}
             // ]},
             // null,
-            {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true}
+            {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
+            null
         ]});
         menuOptions.push(null);
         menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
@@ -217,7 +218,6 @@
         menuOptions.push(null);
 
         menuOptions.push({id:"menu-item-keyboard-shortcuts",label:RED._("menu.label.keyboardShortcuts"),onselect:"core:show-help"});
-        menuOptions.push({id:"menu-item-show-tips",label:RED._("menu.label.showTips"),toggle:true,selected:true,onselect:"core:toggle-show-tips"});
         menuOptions.push({id:"menu-item-help",
             label: RED.settings.theme("menu.menu-item-help.label","Node-RED website"),
             href: RED.settings.theme("menu.menu-item-help.url","http://nodered.org/docs")

editor/js/ui/actions.js

@@ -21,7 +21,7 @@ RED.actions = (function() {
         var result = [];
         Object.keys(actions).forEach(function(action) {
             var shortcut = RED.keyboard.getShortcut(action);
-            result.push({id:action,scope:shortcut?shortcut.scope:undefined,key:shortcut?shortcut.key:undefined})
+            result.push({id:action,scope:shortcut?shortcut.scope:undefined,key:shortcut?shortcut.key:undefined,user:shortcut?shortcut.user:undefined})
         })
         return result;
     }

editor/js/ui/common/editableList.js

@@ -170,7 +170,7 @@
             var that = this;
             var count = 0;
             if (!this.activeFilter) {
-                this.element.children().show();
+                return this.element.children().show();
             }
             var items = this.items();
             items.each(function (i,el) {

editor/js/ui/common/menu.js

@@ -28,7 +28,17 @@ RED.menu = (function() {
         }
 
         function setInitialState() {
-            var savedStateActive = isSavedStateActive(opt.id);
+            var savedStateActive = RED.settings.get("menu-" + opt.id);
+            if (opt.setting) {
+                // May need to migrate pre-0.17 setting
+
+                if (savedStateActive !== null) {
+                    RED.settings.set(opt.setting,savedStateActive);
+                    RED.settings.remove("menu-" + opt.id);
+                } else {
+                    savedStateActive = RED.settings.get(opt.setting);
+                }
+            }
             if (savedStateActive) {
                 link.addClass("active");
                 triggerAction(opt.id,true);
@@ -176,18 +186,10 @@ RED.menu = (function() {
         }
     }
 
-    function isSavedStateActive(id) {
-        return RED.settings.get("menu-" + id);
-    }
-
     function isSelected(id) {
         return $("#" + id).hasClass("active");
     }
 
-    function setSavedState(id, state) {
-        RED.settings.set("menu-" + id, state);
-    }
-
     function setSelected(id,state) {
         if (isSelected(id) == state) {
             return;
@@ -201,7 +203,7 @@ RED.menu = (function() {
         if (opt && opt.onselect) {
             triggerAction(opt.id,state);
         }
-        setSavedState(id, state);
+        RED.settings.set(opt.setting||("menu-"+opt.id), state);
     }
 
     function toggleSelected(id) {

editor/js/ui/common/tabs.js

@@ -26,6 +26,9 @@ RED.tabs = (function() {
         var wrapper = ul.wrap( "<div>" ).parent();
         var scrollContainer = ul.wrap( "<div>" ).parent();
         wrapper.addClass("red-ui-tabs");
+        if (options.vertical) {
+            wrapper.addClass("red-ui-tabs-vertical");
+        }
         if (options.addButton && typeof options.addButton === 'function') {
             wrapper.addClass("red-ui-tabs-add");
             var addButton = $('<div class="red-ui-tab-button"><a href="#"><i class="fa fa-plus"></i></a></div>').appendTo(wrapper);
@@ -146,6 +149,9 @@ RED.tabs = (function() {
         }
 
         function updateTabWidths() {
+            if (options.vertical) {
+                return;
+            }
             var tabs = ul.find("li.red-ui-tab");
             var width = wrapper.width();
             var tabCount = tabs.size();

editor/js/ui/keyboard.js

@@ -48,6 +48,7 @@ RED.keyboard = (function() {
         93: true
     }
     var actionToKeyMap = {}
+    var defaultKeyMap = {};
 
     // FF generates some different keycodes because reasons.
     var firefoxKeyCodeMap = {
@@ -57,20 +58,45 @@ RED.keyboard = (function() {
     }
 
     function init() {
+        var userKeymap = RED.settings.get('keymap') || {};
         $.getJSON("red/keymap.json",function(data) {
             for (var scope in data) {
                 if (data.hasOwnProperty(scope)) {
                     var keys = data[scope];
                     for (var key in keys) {
                         if (keys.hasOwnProperty(key)) {
-                            addHandler(scope,key,keys[key]);
+                            if (!userKeymap.hasOwnProperty(keys[key])) {
+                                addHandler(scope,key,keys[key],false);
+                                defaultKeyMap[keys[key]] = {
+                                    scope:scope,
+                                    key:key,
+                                    user:false
+                                };
                             }
                         }
                     }
                 }
+            }
+            for (var action in userKeymap) {
+                if (userKeymap.hasOwnProperty(action)) {
+                    var obj = userKeymap[action];
+                    if (obj.hasOwnProperty('key')) {
+                        addHandler(obj.scope, obj.key, action, true);
+                    }
+                }
+            }
         })
-        RED.actions.add("core:show-help", showKeyboardHelp);
+    }
 
+    function revertToDefault(action) {
+        var currentAction = actionToKeyMap[action];
+        if (currentAction) {
+            removeHandler(currentAction.key);
+        }
+        if (defaultKeyMap.hasOwnProperty(action)) {
+            var obj = defaultKeyMap[action];
+            addHandler(obj.scope, obj.key, action, false);
+        }
     }
     function parseKeySpecifier(key) {
         var parts = key.toLowerCase().split("-");
@@ -126,10 +152,12 @@ RED.keyboard = (function() {
                 if (partialState) {
                     partialState = null;
                     return resolveKeyEvent(evt);
-                } else {
+                } else if (Object.keys(handler).length > 0) {
                     partialState = handler;
                     evt.preventDefault();
                     return null;
+                } else {
+                    return null;
                 }
             } else if (handler.scope && handler.scope !== "*") {
                 var target = evt.target;
@@ -174,6 +202,9 @@ RED.keyboard = (function() {
         if (typeof key === 'string') {
             if (typeof cbdown === 'string') {
                 actionToKeyMap[cbdown] = {scope:scope,key:key};
+                if (typeof ondown === 'boolean') {
+                    actionToKeyMap[cbdown].user = ondown;
+                }
             }
             var parts = key.split(" ");
             for (i=0;i<parts.length;i++) {
@@ -181,7 +212,6 @@ RED.keyboard = (function() {
                 if (parsedKey) {
                     keys.push(parsedKey);
                 } else {
-                    console.log("Unrecognised key specifier:",key)
                     return;
                 }
             }
@@ -217,7 +247,7 @@ RED.keyboard = (function() {
         var keys = [];
         var i=0;
         if (typeof key === 'string') {
-            delete actionToKeyMap[key];
+
             var parts = key.split(" ");
             for (i=0;i<parts.length;i++) {
                 var parsedKey = parseKeySpecifier(parts[i]);
@@ -249,78 +279,19 @@ RED.keyboard = (function() {
             }
             slot = slot[key];
         }
+        if (typeof slot.ondown === "string") {
+            if (typeof modifiers === 'boolean' && modifiers) {
+                actionToKeyMap[slot.ondown] = {user: modifiers}
+            } else {
+                delete actionToKeyMap[slot.ondown];
+            }
+        }
         delete slot.scope;
         delete slot.ondown;
     }
 
-    var shortcutDialog = null;
-
     var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';
 
-    function showKeyboardHelp() {
-        if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
-            return;
-        }
-        if (!shortcutDialog) {
-            shortcutDialog = $('<div id="keyboard-help-dialog" class="hide">'+
-                '<div class="keyboard-shortcut-entry keyboard-shortcut-list-header">'+
-                    '<div class="keyboard-shortcut-entry-key">shortcut</div>'+
-                    '<div class="keyboard-shortcut-entry-key">action</div>'+
-                    '<div class="keyboard-shortcut-entry-scope">scope</div>'+
-                '</div>'+
-                '<ol id="keyboard-shortcut-list"></ol>'+
-                '</div>')
-            .appendTo("body");
-
-            var shortcutList = $('#keyboard-shortcut-list').editableList({
-                addButton: false,
-                scrollOnAdd: false,
-                addItem: function(container,i,object) {
-                    var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
-
-                    var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
-                    if (object.key) {
-                        key.append(formatKey(object.key));
-                    } else {
-                        item.addClass("keyboard-shortcut-entry-unassigned");
-                        key.html(RED._('keyboard.unassigned'));
-                    }
-
-                    var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function() {
-                        if (arguments[5] === 0) {
-                            return arguments[2].toUpperCase();
-                        } else {
-                            return " "+arguments[4].toUpperCase();
-                        }
-                    });
-                    var label = $('<div>').html(text).appendTo(item);
-                    if (object.scope) {
-                        $('<div class="keyboard-shortcut-entry-scope">').html(object.scope).appendTo(item);
-                    }
-
-
-                },
-            });
-            var shortcuts = RED.actions.list();
-            shortcuts.sort(function(A,B) {
-                return A.id.localeCompare(B.id);
-            });
-            shortcuts.forEach(function(s) {
-                shortcutList.editableList('addItem',s);
-            })
-
-            shortcutDialog.dialog({
-                modal: true,
-                autoOpen: false,
-                width: "800",
-                height: "400",
-                title:RED._("keyboard.title"),
-                resizable: false
-            });
-        }
-
-        shortcutDialog.dialog("open");
-    }
     function formatKey(key) {
         var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
         formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
@@ -332,6 +303,206 @@ RED.keyboard = (function() {
         return '<span class="help-key-block"><span class="help-key">'+formattedKey.split(" ").join('</span> <span class="help-key">')+'</span></span>';
     }
 
+    function validateKey(key) {
+        key = key.trim();
+        var parts = key.split(" ");
+        for (i=0;i<parts.length;i++) {
+            var parsedKey = parseKeySpecifier(parts[i]);
+            if (!parsedKey) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function editShortcut(e) {
+        e.preventDefault();
+        var container = $(this);
+        var object = container.data('data');
+
+
+        if (!container.hasClass('keyboard-shortcut-entry-expanded')) {
+            endEditShortcut();
+
+            var key = container.find(".keyboard-shortcut-entry-key");
+            var scope = container.find(".keyboard-shortcut-entry-scope");
+            container.addClass('keyboard-shortcut-entry-expanded');
+
+            var keyInput = $('<input type="text">').attr('placeholder',RED._('keyboard.unassigned')).val(object.key||"").appendTo(key);
+            keyInput.on("keyup",function(e) {
+                if (e.keyCode === 13) {
+                    return endEditShortcut();
+                }
+                var currentVal = $(this).val();
+                currentVal = currentVal.trim();
+                var valid = (currentVal === "" || RED.keyboard.validateKey(currentVal));
+                $(this).toggleClass("input-error",!valid);
+            })
+
+            var scopeSelect = $('<select><option value="*">global</option><option value="workspace">workspace</option></select>').appendTo(scope);
+            scopeSelect.val(object.scope||'*');
+
+            var div = $('<div class="keyboard-shortcut-edit button-group-vertical"></div>').appendTo(scope);
+            var okButton = $('<button class="editor-button editor-button-small"><i class="fa fa-check"></i></button>').appendTo(div);
+            var revertButton = $('<button class="editor-button editor-button-small"><i class="fa fa-reply"></i></button>').appendTo(div);
+
+            okButton.click(function(e) {
+                e.stopPropagation();
+                endEditShortcut();
+            });
+            revertButton.click(function(e) {
+                e.stopPropagation();
+                RED.keyboard.revertToDefault(object.id);
+                container.empty();
+                container.removeClass('keyboard-shortcut-entry-expanded');
+                var shortcut = RED.keyboard.getShortcut(object.id);
+                var userKeymap = RED.settings.get('keymap') || {};
+                delete userKeymap[object.id];
+                RED.settings.set('keymap',userKeymap);
+
+                var obj = {
+                    id:object.id,
+                    scope:shortcut?shortcut.scope:undefined,
+                    key:shortcut?shortcut.key:undefined,
+                    user:shortcut?shortcut.user:undefined
+                }
+                buildShortcutRow(container,obj);
+            })
+
+            keyInput.focus();
+        }
+    }
+
+    function endEditShortcut(cancel) {
+        var container = $('.keyboard-shortcut-entry-expanded');
+        if (container.length === 1) {
+            var object = container.data('data');
+            var keyInput = container.find(".keyboard-shortcut-entry-key input");
+            var scopeSelect = container.find(".keyboard-shortcut-entry-scope select");
+            if (!cancel) {
+                var key = keyInput.val().trim();
+                var scope = scopeSelect.val();
+                var valid = (key === "" || RED.keyboard.validateKey(key));
+                if (valid) {
+                    var current = RED.keyboard.getShortcut(object.id);
+                    if ((!current && key) || (current && (current.scope !== scope || current.key !== key))) {
+                        var keyDiv = container.find(".keyboard-shortcut-entry-key");
+                        var scopeDiv = container.find(".keyboard-shortcut-entry-scope");
+                        keyDiv.empty();
+                        scopeDiv.empty();
+                        if (object.key) {
+                            RED.keyboard.remove(object.key,true);
+                        }
+                        container.find(".keyboard-shortcut-entry-text i").css("opacity",1);
+                        if (key === "") {
+                            keyDiv.parent().addClass("keyboard-shortcut-entry-unassigned");
+                            keyDiv.append($('<span>').text(RED._('keyboard.unassigned'))  );
+                            delete object.key;
+                            delete object.scope;
+                        } else {
+                            keyDiv.parent().removeClass("keyboard-shortcut-entry-unassigned");
+                            keyDiv.append(RED.keyboard.formatKey(key))
+                            $("<span>").text(scope).appendTo(scopeDiv);
+                            object.key = key;
+                            object.scope = scope;
+                            RED.keyboard.add(object.scope,object.key,object.id,true);
+                        }
+                        var userKeymap = RED.settings.get('keymap') || {};
+                        userKeymap[object.id] = RED.keyboard.getShortcut(object.id);
+                        RED.settings.set('keymap',userKeymap);
+                    }
+                }
+            }
+            keyInput.remove();
+            scopeSelect.remove();
+            $('.keyboard-shortcut-edit').remove();
+            container.removeClass('keyboard-shortcut-entry-expanded');
+        }
+    }
+
+    function buildShortcutRow(container,object) {
+        var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
+        container.data('data',object);
+
+        var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function() {
+            if (arguments[5] === 0) {
+                return arguments[2].toUpperCase();
+            } else {
+                return " "+arguments[4].toUpperCase();
+            }
+        });
+        var label = $('<div>').addClass("keyboard-shortcut-entry-text").text(text).appendTo(item);
+
+        var user = $('<i class="fa fa-user"></i>').prependTo(label);
+
+        if (!object.user) {
+            user.css("opacity",0);
+        }
+
+        var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
+        if (object.key) {
+            key.append(RED.keyboard.formatKey(object.key));
+        } else {
+            item.addClass("keyboard-shortcut-entry-unassigned");
+            key.append($('<span>').text(RED._('keyboard.unassigned'))  );
+        }
+
+        var scope = $('<div class="keyboard-shortcut-entry-scope">').appendTo(item);
+
+        $("<span>").text(object.scope === '*'?'global':object.scope||"").appendTo(scope);
+        container.click(editShortcut);
+    }
+
+    function getSettingsPane() {
+        var pane = $('<div id="user-settings-tab-keyboard"></div>');
+
+        $('<div class="keyboard-shortcut-entry keyboard-shortcut-list-header">'+
+        '<div class="keyboard-shortcut-entry-key keyboard-shortcut-entry-text"><input type="text" placeholder="filter actions"></div>'+
+        '<div class="keyboard-shortcut-entry-key">shortcut</div>'+
+        '<div class="keyboard-shortcut-entry-scope">scope</div>'+
+        '</div>').appendTo(pane);
+
+        pane.find("input").searchBox({
+            delay: 100,
+            change: function() {
+                var filterValue = $(this).val().trim();
+                if (filterValue === "") {
+                    shortcutList.editableList('filter', null);
+                } else {
+                    filterValue = filterValue.replace(/\s/g,"");
+                    shortcutList.editableList('filter', function(data) {
+                        return data.id.toLowerCase().replace(/^.*:/,"").replace("-","").indexOf(filterValue) > -1;
+                    })
+                }
+            }
+        });
+
+        var shortcutList = $('<ol class="keyboard-shortcut-list"></ol>').css({
+            position: "absolute",
+            top: "32px",
+            bottom: "0",
+            left: "0",
+            right: "0"
+        }).appendTo(pane).editableList({
+            addButton: false,
+            scrollOnAdd: false,
+            addItem: function(container,i,object) {
+                buildShortcutRow(container,object);
+            },
+
+        });
+        var shortcuts = RED.actions.list();
+        shortcuts.sort(function(A,B) {
+            var Aid = A.id.replace(/^.*:/,"").replace(/[ -]/g,"").toLowerCase();
+            var Bid = B.id.replace(/^.*:/,"").replace(/[ -]/g,"").toLowerCase();
+            return Aid.localeCompare(Bid);
+        });
+        shortcuts.forEach(function(s) {
+            shortcutList.editableList('addItem',s);
+        });
+        return pane;
+    }
+
     return {
         init: init,
         add: addHandler,
@@ -339,7 +510,10 @@ RED.keyboard = (function() {
         getShortcut: function(actionName) {
             return actionToKeyMap[actionName];
         },
-        formatKey: formatKey
+        revertToDefault: revertToDefault,
+        formatKey: formatKey,
+        validateKey: validateKey,
+        getSettingsPane: getSettingsPane
     }
 
 })();

editor/js/ui/tab-info.js

@@ -74,7 +74,7 @@ RED.sidebar.info = (function() {
         tipClose.click(function(e) {
             e.preventDefault();
             RED.actions.invoke("core:toggle-show-tips");
-            RED.notify("You can re-open the tips from the side menu");
+            RED.notify(RED._("sidebar.info.showTips"));
         });
 
         RED.sidebar.addTab({
@@ -267,7 +267,7 @@ RED.sidebar.info = (function() {
 
         RED.actions.add("core:toggle-show-tips",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-show-tips");
+                RED.userSettings.toggle("view-show-tips");
             } else {
                 enabled = state;
                 if (enabled) {

editor/js/ui/userSettings.js

@@ -16,14 +16,15 @@
 
 RED.userSettings = (function() {
 
-    var trayWidth = null;
+    var trayWidth = 700;
     var settingsVisible = false;
 
-    function show() {
+    function show(initialTab) {
         if (settingsVisible) {
             return;
         }
         settingsVisible = true;
+        var tabContainer;
 
         var trayOptions = {
             title: "User Settings",
@@ -42,17 +43,20 @@ RED.userSettings = (function() {
             },
             open: function(tray) {
                 var trayBody = tray.find('.editor-tray-body');
+                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(trayBody);
 
-                $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(trayBody);
+                $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
                 var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(trayBody);
 
-                $('<div class="hide" id="user-settings-tab-view">View Tab</div>').appendTo(tabContents);
+                createViewPane().hide().appendTo(tabContents);
-                $('<div class="hide" id="user-settings-tab-keyboard">Keyboard Tab</div>').appendTo(tabContents);
+                RED.keyboard.getSettingsPane().hide().appendTo(tabContents);
-                $('<div class="hide" id="user-settings-tab-something">Something Tab</div>').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) {
                         $("#user-settings-tabs-content").children().hide();
                         $("#" + tab.id).show();
@@ -64,15 +68,31 @@ RED.userSettings = (function() {
                 });
                 tabs.addTab({
                     id: "user-settings-tab-keyboard",
-                    label: "Keyboard Shortcuts"
+                    label: "Keyboard"
                 });
                 tabs.addTab({
-                    id: "user-settings-tab-something",
+                    id: "user-settings-tab-palette",
-                    label: "Something Else"
+                    label: "Palette"
                 });
+                if (initialTab) {
+                    tabs.activateTab("user-settings-tab-"+initialTab)
+                }
             },
             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());
+                        }
+                    });
+                })
+
+
             },
             show: function() {}
         }
@@ -82,10 +102,99 @@ RED.userSettings = (function() {
         RED.tray.show(trayOptions);
     }
 
+    var viewSettings = [
+        {
+            title: "Grid",
+            options: [
+                {setting:"view-show-grid",label:"menu.label.view.showGrid",toggle:true,onchange:"core:toggle-show-grid"},
+                {setting:"view-snap-grid",label:"menu.label.view.snapGrid",toggle:true,onchange:"core:toggle-snap-grid"},
+                {setting:"view-grid-size",label:"menu.label.view.gridSize",type:"number",default: 20, onchange:RED.view.gridSize}
+            ]
+        },
+        {
+            title: "Nodes",
+            options: [
+                {setting:"view-node-status",label:"menu.label.displayStatus",toggle:true,onchange:"core:toggle-status", selected: true}
+            ]
+        },
+        {
+            title: "Other",
+            options: [
+                {setting:"view-show-tips",label:"menu.label.showTips",toggle:true,default:true,onchange:"core:toggle-show-tips"}
+            ]
+        }
+    ];
+
+    var allSettings = {};
+
+    function createViewPane() {
+
+        var pane = $('<div id="user-settings-tab-view" class="node-help"></div>');
+
+        viewSettings.forEach(function(section) {
+            $('<h3></h3>').text(section.title).appendTo(pane);
+            section.options.forEach(function(opt) {
+                var initialState = RED.settings.get(opt.setting);
+                var row = $('<div class="user-settings-row"></div>').appendTo(pane);
+                var input;
+                if (opt.toggle) {
+                    input = $('<label for="user-settings-'+opt.setting+'"><input id="user-settings-'+opt.setting+'" type="checkbox"> '+RED._(opt.label)+'</label>').appendTo(row).find("input");
+                    input.prop('checked',initialState);
+                } else {
+                    $('<label for="user-settings-'+opt.setting+'">'+RED._(opt.label)+'</label>').appendTo(row);
+                    $('<input id="user-settings-'+opt.setting+'" type="'+(opt.type||"text")+'">').appendTo(row).val(initialState);
+                }
+            });
+        })
+        return pane;
+    }
+
+    function setSelected(id, value) {
+        var opt = allSettings[id];
+        RED.settings.set(opt.setting,value);
+        var callback = opt.onchange;
+        if (typeof callback === 'string') {
+            callback = RED.actions.get(callback);
+        }
+        if (callback) {
+            callback.call(opt,value);
+        }
+    }
+    function toggle(id) {
+        var opt = allSettings[id];
+        var state = RED.settings.get(opt.setting);
+        setSelected(id,!state);
+    }
+
+
     function init() {
         RED.actions.add("core:show-user-settings",show);
+        RED.actions.add("core:show-help", function() { show('keyboard')});
+
+        viewSettings.forEach(function(section) {
+            section.options.forEach(function(opt) {
+                allSettings[opt.setting] = opt;
+                if (opt.onchange) {
+                    var value = RED.settings.get(opt.setting);
+                    if (value === null && opt.hasOwnProperty('default')) {
+                        value = opt.default;
+                        RED.settings.set(opt.setting,value);
+                    }
+
+                    var callback = opt.onchange;
+                    if (typeof callback === 'string') {
+                        callback = RED.actions.get(callback);
+                    }
+                    if (callback) {
+                        callback.call(opt,value);
+                    }
+                }
+            });
+        });
+
     }
     return {
-        init: init
+        init: init,
+        toggle: toggle
     };
 })();

editor/js/ui/view.js

@@ -239,6 +239,41 @@ RED.view = (function() {
            });
     grid.style("visibility","hidden");
 
+    updateGrid();
+
+    function updateGrid() {
+        grid.selectAll("line.horizontal").remove();
+        grid.selectAll("line.horizontal").data(gridScale.ticks(space_width/gridSize)).enter()
+            .append("line")
+            .attr(
+                {
+                    "class":"horizontal",
+                    "x1" : 0,
+                    "x2" : space_width,
+                    "y1" : function(d){ return gridScale(d);},
+                    "y2" : function(d){ return gridScale(d);},
+                    "fill" : "none",
+                    "shape-rendering" : "crispEdges",
+                    "stroke" : "#eee",
+                    "stroke-width" : "1px"
+                });
+        grid.selectAll("line.vertical").remove();
+        grid.selectAll("line.vertical").data(gridScale.ticks(space_width/gridSize)).enter()
+            .append("line")
+            .attr(
+                {
+                    "class":"vertical",
+                    "y1" : 0,
+                    "y2" : space_width,
+                    "x1" : function(d){ return gridScale(d);},
+                    "x2" : function(d){ return gridScale(d);},
+                    "fill" : "none",
+                    "shape-rendering" : "crispEdges",
+                    "stroke" : "#eee",
+                    "stroke-width" : "1px"
+                });
+    }
+
     var dragGroup = vis.append("g");
     var drag_lines = [];
 
@@ -408,21 +443,21 @@ RED.view = (function() {
 
         RED.actions.add("core:toggle-show-grid",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-view-show-grid");
+                RED.userSettings.toggle("view-show-grid");
             } else {
                 toggleShowGrid(state);
             }
         });
         RED.actions.add("core:toggle-snap-grid",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-view-snap-grid");
+                RED.userSettings.toggle("view-snap-grid");
             } else {
                 toggleSnapGrid(state);
             }
         });
         RED.actions.add("core:toggle-status",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-status");
+                RED.userSettings.toggle("view-node-status");
             } else {
                 toggleStatus(state);
             }
@@ -2743,6 +2778,14 @@ RED.view = (function() {
                     RED.sidebar.config.show(id);
                 }
             }
+        },
+        gridSize: function(v) {
+            if (v === undefined) {
+                return gridSize;
+            } else {
+                gridSize = v;
+                updateGrid();
+            }
         }
 
     };

editor/sass/editor.scss

@@ -46,6 +46,7 @@
     overflow: auto;
 }
 .editor-tray-body {
+    position: relative;
     form {
         margin: 20px;
     }

editor/sass/keyboard.scss

@@ -19,31 +19,88 @@
     padding-top: 10px;
 
 }
+
+#user-settings-tab-keyboard .red-ui-editableList-container {
+    border-radius: 0;
+    border: none;
+    padding: 0;
+}
+
+
 .keyboard-shortcut-entry.keyboard-shortcut-list-header {
-    padding:0 30px 0 5px;
+    padding:0 5px 0 5px;
     div {
         color: #666 !important;
     }
+    .red-ui-searchBox-container {
+        width: calc(100% - 20px);
     }
-#keyboard-shortcut-list {
+    .keyboard-shortcut-entry-scope {
+        text-align: center;
+    }
+}
+
+.keyboard-shortcut-list-header {
+    border-bottom: 1px solid $primary-border-color;
+
+}
+.keyboard-shortcut-list {
     position: absolute;
     top:30px;
     left:10px;
     right:10px;
     bottom:10px;
+    li {
+        padding: 0;
+        .red-ui-editableList-item-content {
+            padding: 8px;
+            cursor: pointer;
+        }
+    }
+    li:hover {
+        background: #f6f6f6;
+    }
 }
 .keyboard-shortcut-entry {
-    padding: 0px 20px 0 10px;
     div {
         display: inline-block;
     }
+    // white-space: nowrap;
+
+    select {
+        margin: 0;
+        width: calc(100% - 30px);
+        font-size: 0.9em;
+        margin-right: 5px;
+    }
 }
 .keyboard-shortcut-entry-key {
-    width:150px;
+    width:160px;
+    vertical-align: middle;
+    input {
+        margin:0;
+        width: calc(100% - 5px);
+    }
+}
+.keyboard-shortcut-entry-text {
+    vertical-align: middle;
+    width: calc(100% - 160px - 100px - 10px);
+    overflow: hidden;
+    i {
+        color: #ccc;
+        margin-right: 5px;
+    }
 }
 .keyboard-shortcut-entry-scope {
-    float: right;
+    width:100px;
     color: #999;
+    vertical-align: middle;
+    text-align: right;
+}
+.keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
+    .keyboard-shortcut-entry-scope {
+        font-size: 0.8em;
+    }
 }
 .keyboard-shortcut-entry-unassigned {
     color: #999;
@@ -51,7 +108,21 @@
         font-style: italic;
     }
 }
-
+.keyboard-shortcut-entry-expanded {
+    .keyboard-shortcut-entry-key {
+        width: 150px;
+    }
+    .keyboard-shortcut-entry-text {
+    }
+    .keyboard-shortcut-entry-scope {
+        width: 110px;
+    }
+    span {
+        display: none;
+    }
+}
+.keyboard-shortcut-edit  {
+}
 .help-key {
     border: 1px solid #ddd;
     padding: 4px;

editor/sass/mixins.scss

@@ -80,12 +80,28 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
+    .button-group-vertical & {
+        display: block;
+        min-width: 22px;
+    }
+    .button-group-vertical &:not(:first-child) {
+        border-top: none;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .button-group-vertical &:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
     &:focus {
         outline: 1px solid $workspace-button-color-focus-outline;
     }
 }
-
+.button-group-vertical {
+    display: inline-block;
+    vertical-align: middle;
+}
 .button-group:not(:last-child) {
     margin-right: 10px;
 }

editor/sass/style.scss

@@ -45,6 +45,8 @@
 @import "palette-editor";
 @import "diff";
 
+@import "userSettings";
+
 
 @import "ui/common/editableList";
 @import "ui/common/searchBox";

editor/sass/tabs.scss

@@ -113,6 +113,50 @@
     &.red-ui-tabs-add.red-ui-tabs-scrollable {
         padding-right: 59px;
     }
+
+    &.red-ui-tabs-vertical {
+        box-sizing: border-box;
+        height: 100%;
+        border-right: 1px solid $primary-border-color;
+        margin: 0;
+        background: #f3f3f3;
+        overflow: visible;
+
+        .red-ui-tabs-scroll-container {
+            height: auto;
+            overflow-x:visible;
+            overflow-y: scroll;
+        }
+
+        & ul {
+            padding: 0;
+            height: auto;
+            border: none;
+            width: calc(100% + 1px);
+            li {
+                width: 100%;
+                display: block;
+                margin: 0;
+                border: none;
+                border-right: 1px solid $primary-border-color;
+                height: auto;
+                &:not(:first-child) {
+                    border-top: 1px solid  $secondary-border-color;
+                }
+                &:last-child {
+                    border-bottom: 1px solid  $secondary-border-color;
+                }
+
+                a.red-ui-tab-label {
+                    padding: 9px;
+                }
+
+                &.active {
+                    border-right: 1px solid #fff;
+                }
+            }
+        }
+    }
 }
 .red-ui-tab-button {
     position: absolute;

editor/sass/userSettings.scss

@@ -0,0 +1,59 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+#user-settings-tabs-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 120px;
+    background: #f3f3f3;
+}
+#user-settings-tabs-content {
+    position: absolute;
+    top: 0;
+    left: 120px;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    h3:not(:first-child) {
+        border-top: 1px solid $secondary-border-color;
+        margin-top: 15px;
+        margin-bottom: 10px;
+        padding-top: 20px;
+    }
+    label {
+        display: inline-block;
+        min-width: 100px;
+        input {
+            vertical-align: top;
+            padding-bottom: 0;
+        }
+    }
+    input {
+        margin-bottom: 0;
+    }
+    input[type='number'] {
+        width: 60px;
+    }
+}
+
+#user-settings-tab-view {
+    padding: 8px 20px 20px;
+}
+.user-settings-row {
+    padding: 5px 10px 2px;
+}

red/api/locales/en-US/editor.json

@@ -31,6 +31,7 @@
                 "view": "View",
                 "showGrid": "Show grid",
                 "snapGrid": "Snap to grid",
+                "gridSize": "Grid size",
                 "textDir": "Text Direction",
                 "defaultDir": "Default",
                 "ltr": "Left-to-right",
@@ -354,7 +355,8 @@
             "info": "Information",
             "blank": "blank",
             "null": "null",
-            "arrayItems": "__count__ items"
+            "arrayItems": "__count__ items",
+            "showTips":"You can open the tips from the settings panel"
         },
         "config": {
             "name": "Configuration nodes",

red/api/locales/en-US/infotips.json

@@ -5,7 +5,7 @@
         "tip2" : "{{core:toggle-sidebar}} will toggle the view of this sidebar",
         "tip3" : "You can manage your palette of nodes with {{core:manage-palette}}",
         "tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can been accessed from the menu or with {{core:show-config-tab}}",
-        "tip5" : "Enable or disable these tips from the option in the menu",
+        "tip5" : "Enable or disable these tips from the option in the settings",
         "tip6" : "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
         "tip7" : "Dragging a node onto a wire will splice it into the link",
         "tip8" : "Export the selected nodes, or the current tab with {{core:show-export-dialog}}",
@@ -19,15 +19,5 @@
         "tip16" : "Switch flow tabs with {{core:show-previous-tab}} and {{core:show-next-tab}}",
         "tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}",
         "tip18" : "Pressing {{core:edit-selected-node}} will edit the first node in the current selection"
-    },
-    "info-tbd": {
-        "tip1" : "Press the <code>Deploy</code> button above to start the flow running. You can choose to deploy the whole flow or just the changes.",
-        "tip2" : "Options like <b>Show grid</b> and <b>Snap to grid</b> are under the menu icon<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>View</b>",
-        "tip4" : "<i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Manage palette</b> can be used to find, add and remove extra nodes.",
-        "tip5" : "Nodes may install examples under<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Import</b> <i class='fa fa-caret-right'></i> <b>Examples</b>",
-        "tip6" : "Lots of example flows can be found on <a href='http://flows.nodered.org' target='_blank'>flows.nodered.org</a><br/>They can then be imported by drag and drop to the workspace.",
-        "tip7" : "<b>Shift-click and drag</b> on a connector to move all the attached wires in one go.",
-        "tip8" : "The <b>Node-RED Dashboard</b> package can be used to create simple User Interfaces.",
-        "tip10": "Got a question?<br/>Join us on <a href='https://node-red.slack.com/' target='_blank'>Slack</a><br/>or the<br/><a href='https://groups.google.com/forum/#!forum/node-red' target='_blank'>Node-RED Google group</a>"
     }
 }