Add basic user settings panel

knolleary · knolleary · commit 8135da71bdd9 · 2017-05-03T11:38:16.000+01:00
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -148,6 +148,7 @@ module.exports = function(grunt) {
                     "editor/js/ui/search.js",
                     "editor/js/ui/typeSearch.js",
                     "editor/js/ui/subflow.js",
+                    "editor/js/ui/userSettings.js",
                     "editor/js/ui/touch/radialMenu.js"
                 ],
                 dest: "public/red/red.js"
diff --git a/editor/js/keymap.json b/editor/js/keymap.json
@@ -12,7 +12,8 @@
         "ctrl-g c": "core:show-config-tab",
         "ctrl-e": "core:show-export-dialog",
         "ctrl-i": "core:show-import-dialog",
-        "ctrl-space": "core:toggle-sidebar"
+        "ctrl-space": "core:toggle-sidebar",
+        "ctrl-,": "core:show-user-settings"
     },
     "workspace": {
         "backspace": "core:delete-selection",
diff --git a/editor/js/main.js b/editor/js/main.js
@@ -213,6 +213,9 @@
             menuOptions.push(null);
         }
 
+        menuOptions.push({id:"menu-item-user-settings",label:RED._("menu.label.userSettings"),onselect:"core:show-user-settings"});
+        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",
@@ -234,6 +237,7 @@
         RED.editor.init();
         RED.keyboard.init();
         RED.diff.init();
+        RED.userSettings.init();
 
         RED.menu.init({id:"btn-sidemenu",options: menuOptions});
 
diff --git a/editor/js/ui/userSettings.js b/editor/js/ui/userSettings.js
@@ -0,0 +1,91 @@
+/**
+ * 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.
+ **/
+
+RED.userSettings = (function() {
+
+    var trayWidth = null;
+    var settingsVisible = false;
+
+    function show() {
+        if (settingsVisible) {
+            return;
+        }
+        settingsVisible = true;
+
+        var trayOptions = {
+            title: "User Settings",
+            buttons: [
+                {
+                    id: "node-dialog-ok",
+                    text: RED._("common.label.close"),
+                    class: "primary",
+                    click: function() {
+                        RED.tray.close();
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                trayWidth = dimensions.width;
+            },
+            open: function(tray) {
+                var trayBody = tray.find('.editor-tray-body');
+
+                $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(trayBody);
+                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(trayBody);
+
+                $('<div class="hide" id="user-settings-tab-view">View Tab</div>').appendTo(tabContents);
+                $('<div class="hide" id="user-settings-tab-keyboard">Keyboard Tab</div>').appendTo(tabContents);
+                $('<div class="hide" id="user-settings-tab-something">Something Tab</div>').appendTo(tabContents);
+
+
+                var tabs = RED.tabs.create({
+                    id: "user-settings-tabs",
+                    onchange: function(tab) {
+                        $("#user-settings-tabs-content").children().hide();
+                        $("#" + tab.id).show();
+                    }
+                });
+                tabs.addTab({
+                    id: "user-settings-tab-view",
+                    label: "View"
+                });
+                tabs.addTab({
+                    id: "user-settings-tab-keyboard",
+                    label: "Keyboard Shortcuts"
+                });
+                tabs.addTab({
+                    id: "user-settings-tab-something",
+                    label: "Something Else"
+                });
+            },
+            close: function() {
+                settingsVisible = false;
+            },
+            show: function() {}
+        }
+        if (trayWidth !== null) {
+            trayOptions.width = trayWidth;
+        }
+        RED.tray.show(trayOptions);
+    }
+
+    function init() {
+        RED.actions.add("core:show-user-settings",show);
+    }
+    return {
+        init: init
+    };
+})();
diff --git a/red/api/locales/en-US/editor.json b/red/api/locales/en-US/editor.json
@@ -40,6 +40,7 @@
             "sidebar": {
                 "show": "Show sidebar"
             },
+            "userSettings": "Settings",
             "displayStatus": "Show node status",
             "displayConfig": "Configuration nodes",
             "import": "Import",
