Add keyboard shortcut help

rwdaigle · Oct 19, 2012 · e23df8f · e23df8f
1 parent bad837b
commit e23df8f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
@@ -38,14 +38,14 @@ var wireSearch = function() {
     haltEvent(e);
   });
 
-  Mousetrap.bind(['enter', 'o'], function(e) {
+  Mousetrap.bind(['enter'], function(e) {
     executeOutsideInputFields(e, function() {
       goToSelectedResult();
       haltEvent(e);
     });
   });
 
-  Mousetrap.bind(['/', 's'], function(e) {
+  Mousetrap.bind(['/'], function(e) {
     executeOutsideInputFields(e, function() {
       searchField().focus().select();
       $(".display .choice.selected").removeClass(selectedClass);
@@ -68,7 +68,7 @@ var wireSearch = function() {
       searchField().blur();
     } else {
       previouslySelectedEl.removeClass(selectedClass);
-      newlySelectedEl = direction == 'up' ? previouslySelectedEl.prev() : previouslySelectedEl.next();
+      newlySelectedEl = direction == 'up' ? previouslySelectedEl.prev(".choice") : previouslySelectedEl.next(".choice");
       newlySelectedEl.addClass(selectedClass);
       if(newlySelectedEl.size() <= 0) {
         searchField().focus();

diff --git a/app/assets/stylesheets/search.sass b/app/assets/stylesheets/search.sass
@@ -22,5 +22,22 @@
       background: #D8EBFA
       text-shadow: none
 
+    div.hints
+      background: #EBEBEB
+      color: #555
+      height: 15px
+      font-size: 12px
+      line-height: 1.0
+      padding: 3px 2px 2px 8px
+      text-shadow: -1px 2px 1px white
+      border-top: 1px solid #BBB
+
+      em
+        font-weight: bold
+        font-style: normal
+        color: #777
+        font-size: 11px
+        padding-right: 5px
+
 .command_bar_form
-  padding-right: 0px
+  padding-right: 0px
diff --git a/app/views/gists/search.html.haml b/app/views/gists/search.html.haml
@@ -4,13 +4,16 @@
 .topsearch.command-bar-activated
   = form_tag(search_gists_path, :method => "get", :id => "top_search_form", :class => "command_bar_form") do
     .commandbar.focused
-      = text_field_tag(:q, params[:q], :size => 50, :class => "mousetrap", :id => "command-bar", :placeholder => "Search your gists", :tabindex => "1")
+      = text_field_tag(:q, params[:q], :size => 50, :class => "mousetrap", :id => "command-bar", :placeholder => "Search your gists", :tabindex => "1", :autocomplete => "off")
       .display(style="display: block;")
         - if @results.size > 0
           - for result in @results
             .choice
               %span.command= search_result_link(result)
               %span.description= pluralize(result.comment_count, "comments")
+          .hints
+            %em keyboard:
+            ↑ = up, ↓ = down, enter = go, / = search
         - else
           .choice
             %span.command= "No results found. Bummer."