Switch global shortcuts to shift; reuse key styles from help menu

7 files changed, 75 insertions, 101 deletions

diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index 24b6ad02b25..4a09cdfe99f 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -20,50 +20,39 @@
         };
       })(this));
 
-      function gotoMenu(menu){
-        window.location.href = $('.js-dashboard-shortcuts-'+menu).attr('href');
-      }
+      const globalDropdownMenu = $('.global-dropdown-menu');
 
       $('.global-dropdown').on('hide.bs.dropdown', function() {
-        $('.global-dropdown-menu').removeClass('shortcuts');
-        Mousetrap.unbind(['p', 'a', 'r', 'l', 'i', 'm', 'e']);
-      });
-
-      $('.global-dropdown').on('show.bs.dropdown', function() {
-        Mousetrap.bind('p', function() {
-          gotoMenu('projects');
-        });
-
-        Mousetrap.bind('a', function() {
-          gotoMenu('activity');
-        });
-
-        Mousetrap.bind('r', function() {
-          gotoMenu('groups');
-        });
-
-        Mousetrap.bind('l', function() {
-          gotoMenu('milestones');
-        });
-
-        Mousetrap.bind('i', function() {
-          gotoMenu('issues');
-        });
-
-        Mousetrap.bind('m', function() {
-          gotoMenu('merge_requests');
-        });
-
-        Mousetrap.bind('e', function() {
-          gotoMenu('snippets');
-        });
+        globalDropdownMenu.removeClass('shortcuts');
       });
 
       Mousetrap.bind('n', function() {
-        $('.global-dropdown-menu').addClass('shortcuts');
+        globalDropdownMenu.addClass('shortcuts');
         $('.global-dropdown-toggle').trigger('click');
       });
 
+      Mousetrap.bind('shift+a', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-activity');
+      });
+      Mousetrap.bind('shift+i', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-issues');
+      });
+      Mousetrap.bind('shift+m', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-merge_requests');
+      });
+      Mousetrap.bind('shift+p', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-projects');
+      });
+      Mousetrap.bind('shift+g', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-groups');
+      });
+      Mousetrap.bind('shift+l', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-milestones');
+      });
+      Mousetrap.bind('shift+s', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-snippets');
+      });
+
       Mousetrap.bind(['ctrl+shift+p', 'command+shift+p'], this.toggleMarkdownPreview);
       if (typeof findFileURL !== "undefined" && findFileURL !== null) {
         Mousetrap.bind('t', function() {
diff --git a/app/assets/javascripts/shortcuts_dashboard_navigation.js b/app/assets/javascripts/shortcuts_dashboard_navigation.js
index 4f1a19924a4..0d8d251e93e 100644
--- a/app/assets/javascripts/shortcuts_dashboard_navigation.js
+++ b/app/assets/javascripts/shortcuts_dashboard_navigation.js
@@ -13,21 +13,6 @@ require('./shortcuts');
 
     function ShortcutsDashboardNavigation() {
       ShortcutsDashboardNavigation.__super__.constructor.call(this);
-      Mousetrap.bind('g a', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-activity');
-      });
-      Mousetrap.bind('g i', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-issues');
-      });
-      Mousetrap.bind('g m', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-merge_requests');
-      });
-      Mousetrap.bind('g t', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-todos');
-      });
-      Mousetrap.bind('g p', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-projects');
-      });
     }
 
     ShortcutsDashboardNavigation.findAndFollowLink = function(selector) {
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index 3f5d6724417..5128223b373 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -31,7 +31,7 @@ require('./shortcuts');
       Mousetrap.bind('g n', function() {
         return ShortcutsNavigation.findAndFollowLink('.shortcuts-network');
       });
-      Mousetrap.bind('g g', function() {
+      Mousetrap.bind('g d', function() {
         return ShortcutsNavigation.findAndFollowLink('.shortcuts-repository-charts');
       });
       Mousetrap.bind('g i', function() {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 06b6a9da4fa..7767826b033 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -187,24 +187,13 @@
     }
   }
 
-  .kbd {
+  .shortcut-mappings {
     display: none;
   }
 
-  &.shortcuts .kbd {
-    background-color: $gray-light;
-    color: $gl-text-color;
-    border: 1px solid $gray-darkest;
-    box-shadow: 0 -1px 0 $gray-darkest inset;
+  &.shortcuts .shortcut-mappings {
     display: inline-block;
-    vertical-align: top;
-    padding: 3px 0;
     margin-right: 5px;
-    font-size: 11px;
-    line-height: 10px;
-    border-radius: 3px;
-    width: 20px;
-    text-align: center;
   }
 
   ul {
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index 127db1d26e7..a20d3e3a235 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -100,34 +100,39 @@
                   %th Global Dashboard
                 %tr
                   %td.shortcut
-                    .key g
-                    .key a
+                    .key shift a
                   %td
                     Go to the activity feed
                 %tr
                   %td.shortcut
-                    .key g
-                    .key p
+                    .key shift p
                   %td
                     Go to projects
                 %tr
                   %td.shortcut
-                    .key g
-                    .key i
+                    .key shift i
                   %td
                     Go to issues
                 %tr
                   %td.shortcut
-                    .key g
-                    .key m
+                    .key shift m
                   %td
                     Go to merge requests
                 %tr
                   %td.shortcut
-                    .key g
-                    .key t
+                    .key shift g
+                  %td
+                    Go to groups
+                %tr
+                  %td.shortcut
+                    .key shift l
                   %td
-                    Go to todos
+                    Go to milestones
+                %tr
+                  %td.shortcut
+                    .key shift s
+                  %td
+                    Go to snippets
               %tbody
                 %tr
                   %th
@@ -159,7 +164,7 @@
                 %tr
                   %td.shortcut
                     .key g
-                    .key b
+                    .key j
                   %td
                     Go to jobs
                 %tr
@@ -171,7 +176,7 @@
                 %tr
                   %td.shortcut
                     .key g
-                    .key g
+                    .key d
                   %td
                     Go to repository charts
                 %tr
@@ -183,7 +188,7 @@
                 %tr
                   %td.shortcut
                     .key g
-                    .key l
+                    .key b
                   %td
                     Go to issue boards
                 %tr
@@ -200,6 +205,12 @@
                     Go to snippets
                 %tr
                   %td.shortcut
+                    .key g
+                    .key w
+                  %td
+                    Go to wiki
+                %tr
+                  %td.shortcut
                     .key t
                   %td Go to finding file
                 %tr
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 6cfbbec8c46..39daefa11fd 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -1,14 +1,14 @@
 %ul
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
-    = link_to dashboard_projects_path, title: 'Projects', class: 'js-dashboard-shortcuts-projects' do
-      .kbd
-        p
+    = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
+      .shortcut-mappings
+        .key shift p
       %span
         Projects
   = nav_link(path: 'dashboard#activity') do
-    = link_to activity_dashboard_path, class: 'js-dashboard-shortcuts-activity', title: 'Activity' do
-      .kbd
-        a
+    = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
+      .shortcut-mappings
+        .key shift a
       %span
         Activity
   - if koding_enabled?
@@ -17,35 +17,35 @@
         %span
           Koding
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
-    = link_to dashboard_groups_path, class: 'js-dashboard-shortcuts-groups', title: 'Groups' do
-      .kbd
-        r
+    = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do
+      .shortcut-mappings
+        .key shift l
       %span
         Groups
   = nav_link(controller: 'dashboard/milestones') do
-    = link_to dashboard_milestones_path, class: 'js-dashboard-shortcuts-milestones', title: 'Milestones' do
-      .kbd
-        l
+    = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: 'Milestones' do
+      .shortcut-mappings
+        .key shift w
       %span
         Milestones
   = nav_link(path: 'dashboard#issues') do
-    = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'js-dashboard-shortcuts-issues' do
-      .kbd
-        i
+    = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
+      .shortcut-mappings
+        .key shift i
       %span
         Issues
       .badge= number_with_delimiter(cached_assigned_issuables_count(current_user, :issues, :opened))
   = nav_link(path: 'dashboard#merge_requests') do
-    = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'js-dashboard-shortcuts-merge_requests' do
-      .kbd
-        m
+    = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
+      .shortcut-mappings
+        .key shift m
       %span
         Merge Requests
       .badge= number_with_delimiter(cached_assigned_issuables_count(current_user, :merge_requests, :opened))
   = nav_link(controller: 'dashboard/snippets') do
-    = link_to dashboard_snippets_path, class: 'js-dashboard-shortcuts-snippets', title: 'Snippets' do
-      .kbd
-        e
+    = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: 'Snippets' do
+      .shortcut-mappings
+        .key shift s
       %span
         Snippets
   %li.divider
diff --git a/changelogs/unreleased/menu-shortcut.yml b/changelogs/unreleased/menu-shortcut.yml
index 51fdabb9ade..74803498f58 100644
--- a/changelogs/unreleased/menu-shortcut.yml
+++ b/changelogs/unreleased/menu-shortcut.yml
@@ -1,4 +1,4 @@
 ---
 title: Add keyboard shortcuts to main menu
 merge_request:
-author: Jacob Schatz
+author: