Adding keyboard shortcut help dialog.

ipython · Aug 20, 2011 · 7e2eee1 · 7e2eee1
1 parent d11e8eb
commit 7e2eee1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -91,7 +91,7 @@ span.section_row_buttons a {
     float: right;
     width: 170px;
     padding: 0px 5px;
-    text-align: center;
+    text-align: left;
     font-size: 85%;
 }
 

diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js
@@ -53,7 +53,7 @@ var IPython = (function (IPython) {
     Notebook.prototype.bind_events = function () {
         var that = this;
         $(document).keydown(function (event) {
-            // console.log(event);
+            console.log(event);
             if (event.which === 38) {
                 var cell = that.selected_cell();
                 if (cell.at_top()) {
@@ -87,7 +87,7 @@ var IPython = (function (IPython) {
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 66 && that.control_key_active) {
-                // Insert code cell before selected = a
+                // Insert code cell before selected = b
                 that.insert_code_cell_before();
                 that.control_key_active = false;
                 return false;
@@ -131,6 +131,11 @@ var IPython = (function (IPython) {
                 that.select_next();
                 that.control_key_active = false;
                 return false;
+            } else if (event.which === 72 && that.control_key_active) {
+                // Show keyboard shortcuts = h
+                that.show_keyboard_shortcuts();
+                that.control_key_active = false;
+                return false;
             } else if (that.control_key_active) {
                 that.control_key_active = false;
                 return true;
@@ -177,6 +182,35 @@ var IPython = (function (IPython) {
     };
 
 
+    Notebook.prototype.show_keyboard_shortcuts = function () {
+        console.log('showing');
+        var dialog = $('<div/>');
+        var shortcuts = [
+            {key: 'Shift-Enter', help: 'run cell'},
+            {key: 'Ctrl-Enter', help: 'run cell in terminal mode'},
+            {key: 'Ctrl-m d', help: 'delete cell'},
+            {key: 'Ctrl-m a', help: 'insert cell above'},
+            {key: 'Ctrl-m b', help: 'insert cell below'},
+            {key: 'Ctrl-m t', help: 'toggle output'},
+            {key: 'Ctrl-m s', help: 'save notebook'},
+            {key: 'Ctrl-m j', help: 'move cell down'},
+            {key: 'Ctrl-m k', help: 'move cell up'},
+            {key: 'Ctrl-m c', help: 'code cell'},
+            {key: 'Ctrl-m m', help: 'markdown cell'},
+            {key: 'Ctrl-m up', help: 'select previous'},
+            {key: 'Ctrl-m down', help: 'select next'},
+            {key: 'Ctrl-m h', help: 'display keyboard shortcuts'}
+        ];
+        for (var i=0; i<shortcuts.length; i++) {
+            dialog.append($('<div>').
+                append($('<span/>').addClass('shortcut_key').html(shortcuts[i].key+' : ')).
+                append($('<span/>').html(shortcuts[i].help))
+            );
+        };
+        dialog.dialog({title: 'Keyboard shortcuts'});
+    };
+
+
     Notebook.prototype.scroll_to_bottom = function () {
         this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 0);
     };

diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
@@ -177,11 +177,15 @@ <h3 class="section_header">Help</h3>
                 </div>
                 <div class="section_row">
                     <span class="help_string">run selected cell</span>
-                    <span class="help_string_label">Shift-Enter |</span>
+                    <span class="help_string_label">Shift-Enter :</span>
                 </div>
                 <div class="section_row">
                     <span class="help_string">run in terminal mode</span>
-                    <span class="help_string_label">Ctrl-Enter  |</span>
+                    <span class="help_string_label">Ctrl-Enter  :</span>
+                </div>
+                <div class="section_row">
+                    <span class="help_string">show keyboard shortcuts</span>
+                    <span class="help_string_label">Ctrl-m h  :</span>
                 </div>
             </div>
         </div>