From e220eecb57ced25b12fcdad10fcaf0ec5f86cce1 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 30 Mar 2017 10:14:56 -0500 Subject: Switch global shortcuts to shift; reuse key styles from help menu --- app/assets/javascripts/shortcuts.js | 61 +++++++++------------- .../javascripts/shortcuts_dashboard_navigation.js | 15 ------ app/assets/javascripts/shortcuts_navigation.js | 2 +- app/assets/stylesheets/framework/dropdowns.scss | 15 +----- app/views/help/_shortcuts.html.haml | 39 +++++++++----- app/views/layouts/nav/_dashboard.html.haml | 42 +++++++-------- changelogs/unreleased/menu-shortcut.yml | 2 +- 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 @@ -198,6 +203,12 @@ .key s %td Go to snippets + %tr + %td.shortcut + .key g + .key w + %td + Go to wiki %tr %td.shortcut .key t 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: -- cgit v1.2.1