fix some of jon comments

notebook/static/notebook/js/commandpalette.js

@@ -36,13 +36,15 @@ define(function(require){
 
     var CommandPalette = function(notebook) {
         if(!notebook){
-          throw new Error("CommandPalette take a notebook non-null mandatory arguement");
+          throw new Error("CommandPalette takes a notebook non-null mandatory arguement");
         }
 
-        var form = $('<form/>').css('background', 'white');
+        // typeahead lib need a specific layout with specific class names.
+        // the following just does that
+        var form = $('<form/>');
         var container = $('<div/>').addClass('typeahead-container');
         var field = $('<div/>').addClass('typeahead-field');
-        var input = $('<input/>').attr('type', 'search').css('outline', 'none');
+        var input = $('<input/>').attr('type', 'search');
 
         field
           .append(
@@ -61,36 +63,19 @@ define(function(require){
         container.append(field);
         form.append(container);
 
-        var before_close = function() {
-          // little trick to trigger early in onsubmit
-          // when the action called pop-up a dialog
-          // insure this function is only called once
-          if (before_close.ok) {
-            return;
-          }
-          var cell = notebook.get_selected_cell();
-          if (cell) {
-            cell.select();
-          }
-          if (notebook.keyboard_manager) {
-            notebook.keyboard_manager.enable();
-            notebook.keyboard_manager.command_mode();
-          }
-          before_close.ok = true; // avoid double call.
-        };
 
-        var mod = $('<div/>').addClass('modal').append(
+        var mod = $('<div/>').addClass('modal cmd-palette').append(
           $('<div/>').addClass('modal-dialog')
           .append(
             $('<div/>').addClass('modal-content').append(
               $('<div/>').addClass('modal-body')
-              .css('padding', '7px')
               .append(
                 form
               )
             )
           )
         )
+        // end setting up right layout
         .modal({show: false, backdrop:true})
         .on('shown.bs.modal', function () {
               // click on button trigger de-focus on mouse up.
@@ -101,6 +86,25 @@ define(function(require){
 
         notebook.keyboard_manager.disable();
 
+        var before_close = function() {
+          // little trick to trigger early in onsubmit
+          // when the action called pop-up a dialog
+          // insure this function is only called once
+          if (before_close.ok) {
+            return;
+          }
+          var cell = notebook.get_selected_cell();
+          if (cell) {
+            cell.select();
+          }
+          if (notebook.keyboard_manager) {
+            notebook.keyboard_manager.enable();
+            notebook.keyboard_manager.command_mode();
+          }
+          before_close.ok = true; // avoid double call.
+        };
+
+        // will be trigger when user select action
         var onSubmit = function(node, query, result, resultCount) {
           if (actions.indexOf(result.key) >= 0) {
             before_close();
@@ -111,6 +115,7 @@ define(function(require){
           mod.modal('hide');
         };
 
+        // generate structure needed for typeahead layout and ability to search
         var src = {};
 
         var actions = Object.keys(notebook.keyboard_manager.actions._actions);
@@ -144,6 +149,10 @@ define(function(require){
             key: action_id,
           });
         }
+
+        // now src is the right structure for typeahead
+
+
         input.typeahead({
           emptyTemplate: "No results found for <pre>{{query}}</pre>",
           maxItem: 1e3,

notebook/static/notebook/less/commandpalette.less

@@ -0,0 +1,39 @@
+ul.typeahead-list i{
+    margin-left: -10px;
+    width: 18px;
+}
+
+ul.typeahead-list {
+  max-height: 80vh;
+  overflow:auto;
+}
+
+.cmd-palette {
+  & .modal-body{
+    padding: 7px;
+  }
+  
+  & form {
+    background: white;
+  }
+  
+  & input {
+    outline:none;
+  }
+}
+
+.no-shortcut{
+    display:none;
+}
+
+.command-shortcut:before{
+    content:"(command)";
+    padding-right:3px;
+    color:@gray-light;
+}
+
+.edit-shortcut:before{
+    content:"(edit)";
+    padding-right:3px;
+    color:@gray-light;
+}

notebook/static/notebook/less/notebook.less

@@ -89,22 +89,6 @@ p {
     }
 }
 
-.no-shortcut{
-    display:none;
-}
-
-.command-shortcut:before{
-    content:"(command)";
-    padding-right:3px;
-    color:@gray-light;
-}
-
-.edit-shortcut:before{
-    content:"(edit)";
-    padding-right:3px;
-    color:@gray-light;
-}
-
 kbd {
     border-style: solid;
     border-width: 1px;
@@ -115,13 +99,3 @@ kbd {
     padding-top: 1px;
     padding-bottom: 1px;
 }
-
-ul.typeahead-list i{
-    margin-left: -10px;
-    width: 18px;
-}
-
-ul.typeahead-list {
-  max-height: 80vh;
-  overflow:auto;
-}

notebook/static/style/style.less

@@ -28,6 +28,7 @@
 
 // notebook
 @import "../notebook/less/style.less";
+@import "../notebook/less/commandpalette.less";
 
 // terminal
 @import "../terminal/less/terminal.less";