Move keyboard shortcut dialog to keyboard module

public/index.html

@@ -107,57 +107,6 @@
     </form>
 </div>
 
-<div id="node-help" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="node-help-label" aria-hidden="true">
-  <div class="modal-header">
-    <h5 id="node-help-label">Keyboard Shortcuts <span style="float: right;"><a href="http://nodered.org/docs" target="_blank">Open help in new window &raquo;</a></span></h5>
-  </div>
-  <div class="modal-body">
-    <table>
-        <tr>
-          <td><span class="help-key">?</span></td><td>Help</td>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">a</span></td><td>Select all nodes</td>
-        </tr>
-        <tr>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">Space</span></td><td>Toggle sidebar</td>
-          <td><span class="help-key">Shift</span> <span class="help-key">Click</span></td><td>Select all connected nodes</td>
-        </tr>
-        <tr>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">z</span></td><td>Undo</td>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">Click</span></td><td>Add/remove node from selection</td>
-        </tr>
-        <tr>
-          <td></td><td></td>
-          <td><span class="help-key">Delete</span></td><td>Delete selected nodes or link</td>
-        </tr>
-        <tr>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">x</span></td><td>Cut selected nodes</td>
-          <td></td><td></td>
-        </tr>
-        <tr>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">c</span></td><td>Copy selected nodes</td>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">v</span></td><td>Paste nodes</td>
-        </tr>
-        <tr>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">i</span></td><td>Import nodes</td>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">e</span></td><td>Export selected nodes</td>
-        </tr>
-        <tr>
-          <td colspan="2"></td>
-        </tr>
-        <tr>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">+</span></td><td>Zoom in</td>
-          <td><span class="help-key">Ctrl</span> <span class="help-key">-</span></td><td>Zoom out</td>
-        </tr>
-        <tr>
-          <td colspan="4">Mac users can use the <b>⌘ - Cmd</b> key rather than Ctrl key.</td>
-        </tr>
-    </table>
-  </div>
-  <div class="modal-footer">
-    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-  </div>
-</div>
-
 <div id="node-dialog-library-save-confirm" class="hide">
     <form class="form-horizontal">
         <div style="text-align: center; padding-top: 30px;">

public/red/main.js

@@ -245,24 +245,6 @@ var RED = (function() {
         RED.view.status(statusEnabled);
     }
 
-    function showHelp() {
-
-        var dialog = $('#node-help');
-
-        //$("#node-help").draggable({
-        //        handle: ".modal-header"
-        //});
-
-        dialog.on('show',function() {
-            RED.keyboard.disable();
-        });
-        dialog.on('hidden',function() {
-            RED.keyboard.enable();
-        });
-
-        dialog.modal();
-    }
-    
     function changeDeploymentType(type) {
         deploymentType = type;
         $("#btn-deploy img").attr("src",deploymentTypes[type].img);
@@ -297,7 +279,7 @@ var RED = (function() {
                     null
                 ]},
                 null,
-                {id:"btn-keyboard-shortcuts",label:"Keyboard Shortcuts",onselect:showHelp},
+                {id:"btn-keyboard-shortcuts",label:"Keyboard Shortcuts",onselect:RED.keyboard.showHelp},
                 {id:"btn-help",label:"Node-RED Website", href:"http://nodered.org/docs"}
             ]
         });
@@ -361,7 +343,7 @@ var RED = (function() {
         RED.clipboard.init();
         RED.view.init();
         
-        RED.keyboard.add(/* ? */ 191,{shift:true},function(){showHelp();d3.event.preventDefault();});
+        RED.keyboard.add(/* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
         RED.comms.connect();
         loadNodeList();
     }

public/red/ui/keyboard.js

@@ -57,12 +57,58 @@ RED.keyboard = (function() {
     function removeHandler(key) {
         delete handlers[key];
     }
-
+    
+    
+    var dialog = $('<div id="keyboard-help-dialog" class="hide">'+
+    '<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
+        '<table class="keyboard-shortcuts">'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">a</span></td><td>Select all nodes</td></tr>'+
+            '<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>Select all connected nodes</td></tr>'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">Click</span></td><td>Add/remove node from selection</td></tr>'+
+            '<tr><td><span class="help-key">Delete</span></td><td>Delete selected nodes or link</td></tr>'+
+            '<tr><td>&nbsp;</td><td></td></tr>'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">i</span></td><td>Import nodes</td></tr>'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">e</span></td><td>Export selected nodes</td></tr>'+
+        '</table>'+
+    '</div>'+
+    '<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
+        '<table class="keyboard-shortcuts">'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">Space</span></td><td>Toggle sidebar</td></tr>'+
+            '<tr><td></td><td></td></tr>'+
+            '<tr><td><span class="help-key">Delete</span></td><td>Delete selected nodes or link</td></tr>'+
+            '<tr><td></td><td></td></tr>'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">c</span></td><td>Copy selected nodes</td></tr>'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">x</span></td><td>Cut selected nodes</td></tr>'+
+            '<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">v</span></td><td>Paste nodes</td></tr>'+
+        '</table>'+
+    '</div>'+
+    '</div>')
+    .appendTo("body")
+    .dialog({
+        modal: true,
+        autoOpen: false,
+        width: "800",
+        title:"Keyboard shortcuts",
+        resizable: false,
+        open: function() {
+            RED.keyboard.disable();
+        },
+        close: function() {
+            RED.keyboard.enable();
+        }
+    });
+    
+    function showKeyboardHelp() {
+        dialog.dialog("open");
+    }
+    
     return {
         add: addHandler,
         remove: removeHandler,
         disable: function(){ active = false;},
-        enable: function(){ active = true; }
+        enable: function(){ active = true; },
+        
+        showHelp: showKeyboardHelp
     }
 
 })();

public/style.css

@@ -914,13 +914,21 @@ div.node-info {
 #node-help {
     width: 700px;
 }
-#node-help * td {
+#keyboard-help-dialog {
-    padding: 0.8em 0.5em;
+    font-size: 0.9em;
 }
-#node-help * tr > td:first-child+td+td {
+.keyboard-shortcuts {
-    padding-left: 5em;
+    padding: 10px;
+}
+.keyboard-shortcuts td  {
+    padding: 7px 5px;
+    margin-bottom: 10px;
+    white-space: pre;
+}
+.keyboard-shortcuts td:first-child {
+    text-align: right;
+    padding-right: 10px;
 }
-
 .help-key {
     border: 1px solid #ddd;
     padding: 4px;