From 72e3ab3b6b43bf4ae4cd53446724760d2ac6fdaf Mon Sep 17 00:00:00 2001 From: Simon Knox Date: Fri, 18 Oct 2019 03:57:17 +0000 Subject: [PATCH 1/2] Add keyboard shortcuts item from help menu Alternative was to add markup for .gl-toggle-wrapper in haml but this seemed easier. I don't love the resultant markup, or that you cannot add label text to GlToggle, but it's a start --- .../behaviors/shortcuts/shortcuts.js | 23 ++++++- .../behaviors/shortcuts/shortcuts_toggle.js | 22 +++++++ .../behaviors/shortcuts/shortcuts_toggle.vue | 60 +++++++++++++++++++ app/views/help/_shortcuts.html.haml | 1 + .../layouts/header/_help_dropdown.html.haml | 4 ++ ...shortcuts-or-allow-them-to-be-disabled.yml | 5 ++ doc/user/shortcuts.md | 4 +- locale/gitlab.pot | 12 ++++ .../projects/user_uses_shortcuts_spec.rb | 53 ++++++++++++++++ 9 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js create mode 100644 app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue create mode 100644 changelogs/unreleased/22113-improve-keyboard-shortcuts-or-allow-them-to-be-disabled.yml diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js index 66cb9fd7672d32..85636f3e5d28d3 100644 --- a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js @@ -1,6 +1,9 @@ import $ from 'jquery'; import Cookies from 'js-cookie'; import Mousetrap from 'mousetrap'; +import Vue from 'vue'; +import { disableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle'; +import ShortcutsToggle from './shortcuts_toggle.vue'; import axios from '../../lib/utils/axios_utils'; import { refreshCurrentPage, visitUrl } from '../../lib/utils/url_utility'; import findAndFollowLink from '../../lib/utils/navigation_utility'; @@ -15,6 +18,15 @@ Mousetrap.stopCallback = (e, element, combo) => { return defaultStopCallback(e, element, combo); }; +function initToggleButton() { + return new Vue({ + el: document.querySelector('.js-toggle-shortcuts'), + render(createElement) { + return createElement(ShortcutsToggle); + }, + }); +} + export default class Shortcuts { constructor() { this.onToggleHelp = this.onToggleHelp.bind(this); @@ -48,6 +60,14 @@ export default class Shortcuts { $(this).remove(); e.preventDefault(); }); + + $('.js-shortcuts-modal-trigger') + .off('click') + .on('click', this.onToggleHelp); + + if (shouldDisableShortcuts()) { + disableShortcuts(); + } } onToggleHelp(e) { @@ -104,7 +124,8 @@ export default class Shortcuts { } return $('.js-more-help-button').remove(); - }); + }) + .then(initToggleButton); } focusFilter(e) { diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js new file mode 100644 index 00000000000000..66aa1b752aebd8 --- /dev/null +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js @@ -0,0 +1,22 @@ +import Mousetrap from 'mousetrap'; +import 'mousetrap/plugins/pause/mousetrap-pause'; + +const shorcutsDisabledKey = 'shortcutsDisabled'; + +export const shouldDisableShortcuts = () => { + try { + return localStorage.getItem(shorcutsDisabledKey) === 'true'; + } catch (e) { + return false; + } +}; + +export function enableShortcuts() { + localStorage.setItem(shorcutsDisabledKey, false); + Mousetrap.unpause(); +} + +export function disableShortcuts() { + localStorage.setItem(shorcutsDisabledKey, true); + Mousetrap.pause(); +} diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue new file mode 100644 index 00000000000000..a53b1b06be9417 --- /dev/null +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue @@ -0,0 +1,60 @@ + + + diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml index 5f8f2333e40d00..4b9304cfdb9a7c 100644 --- a/app/views/help/_shortcuts.html.haml +++ b/app/views/help/_shortcuts.html.haml @@ -6,6 +6,7 @@ = _('Keyboard Shortcuts') %small = link_to _('(Show all)'), '#', class: 'js-more-help-button' + .js-toggle-shortcuts %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') } %span{ "aria-hidden": true } × .modal-body diff --git a/app/views/layouts/header/_help_dropdown.html.haml b/app/views/layouts/header/_help_dropdown.html.haml index 93854c212df0ae..a003d6f8903e2e 100644 --- a/app/views/layouts/header/_help_dropdown.html.haml +++ b/app/views/layouts/header/_help_dropdown.html.haml @@ -4,6 +4,10 @@ = link_to _("Help"), help_path %li = link_to _("Support"), support_url + %li + %button.js-shortcuts-modal-trigger{ type: "button" } + = _("Keyboard shortcuts") + %span.text-secondary.float-right{ "aria-hidden": true }= '?'.html_safe = render_if_exists "shared/learn_gitlab_menu_item" %li.divider %li diff --git a/changelogs/unreleased/22113-improve-keyboard-shortcuts-or-allow-them-to-be-disabled.yml b/changelogs/unreleased/22113-improve-keyboard-shortcuts-or-allow-them-to-be-disabled.yml new file mode 100644 index 00000000000000..45957b4acb2c51 --- /dev/null +++ b/changelogs/unreleased/22113-improve-keyboard-shortcuts-or-allow-them-to-be-disabled.yml @@ -0,0 +1,5 @@ +--- +title: Allow keyboard shortcuts to be disabled +merge_request: 18782 +author: +type: added diff --git a/doc/user/shortcuts.md b/doc/user/shortcuts.md index 54e7938d8f7c07..7a24f6d522be8c 100644 --- a/doc/user/shortcuts.md +++ b/doc/user/shortcuts.md @@ -6,7 +6,9 @@ disqus_identifier: 'https://docs.gitlab.com/ee/workflow/shortcuts.html' # GitLab keyboard shortcuts GitLab has many useful keyboard shortcuts to make it easier to access different features. -You can see the quick reference sheet within GitLab itself with Shift + ?. +You can see a modal listing keyboard shortcuts within GitLab itself by pressing ?, +or clicking **Keyboard shortcuts** in the Help menu at the top right. +Keyboard shortcuts can be disabled using the **Enable**/**Disable** toggle in this modal. The [Global Shortcuts](#global-shortcuts) work from any area of GitLab, but you must be in specific pages for the other shortcuts to be available, as explained in each diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 9edcf28e93e02a..67e4cf7ddc1fb4 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -375,6 +375,12 @@ msgid_plural "%{releases} releases" msgstr[0] "" msgstr[1] "" +msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled" +msgstr "" + +msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled" +msgstr "" + msgid "%{service_title} activated." msgstr "" @@ -7137,6 +7143,9 @@ msgstr "" msgid "Enable mirror configuration" msgstr "" +msgid "Enable or disable keyboard shortcuts" +msgstr "" + msgid "Enable or disable the Pseudonymizer data collection." msgstr "" @@ -10909,6 +10918,9 @@ msgstr "" msgid "Keyboard Shortcuts" msgstr "" +msgid "Keyboard shortcuts" +msgstr "" + msgid "Kubernetes" msgstr "" diff --git a/spec/features/projects/user_uses_shortcuts_spec.rb b/spec/features/projects/user_uses_shortcuts_spec.rb index c6efe1f1896ef4..beed1c07e51d2c 100644 --- a/spec/features/projects/user_uses_shortcuts_spec.rb +++ b/spec/features/projects/user_uses_shortcuts_spec.rb @@ -17,6 +17,59 @@ wait_for_requests end + context 'disabling shortcuts' do + before do + page.evaluate_script("localStorage.removeItem('shortcutsDisabled')") + end + + it 'can disable shortcuts from help menu' do + open_modal_shortcut_keys + click_toggle_button + close_modal + + open_modal_shortcut_keys + + # modal-shortcuts still in the DOM, but hidden + expect(find('#modal-shortcuts', visible: false)).not_to be_visible + + page.refresh + open_modal_shortcut_keys + + # after reload, shortcuts modal doesn't exist at all until we add it + expect(page).not_to have_selector('#modal-shortcuts') + end + + it 're-enables shortcuts' do + open_modal_shortcut_keys + click_toggle_button + close_modal + + open_modal_from_help_menu + click_toggle_button + close_modal + + open_modal_shortcut_keys + expect(find('#modal-shortcuts')).to be_visible + end + + def open_modal_shortcut_keys + find('body').native.send_key('?') + end + + def open_modal_from_help_menu + find('.header-help-dropdown-toggle').click + find('button', text: 'Keyboard shortcuts').click + end + + def click_toggle_button + find('.js-toggle-shortcuts .gl-toggle').click + end + + def close_modal + find('.modal button[aria-label="Close"]').click + end + end + context 'when navigating to the Project pages' do it 'redirects to the details page' do visit project_issues_path(project) -- GitLab From 41bce313329bbeb30b72e10748ed3506e0666502 Mon Sep 17 00:00:00 2001 From: Simon Knox Date: Thu, 13 Feb 2020 18:07:41 +0000 Subject: [PATCH 2/2] Apply suggestion to doc/user/shortcuts.md --- doc/user/shortcuts.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/user/shortcuts.md b/doc/user/shortcuts.md index 7a24f6d522be8c..0d7220fbd428b1 100644 --- a/doc/user/shortcuts.md +++ b/doc/user/shortcuts.md @@ -8,7 +8,8 @@ disqus_identifier: 'https://docs.gitlab.com/ee/workflow/shortcuts.html' GitLab has many useful keyboard shortcuts to make it easier to access different features. You can see a modal listing keyboard shortcuts within GitLab itself by pressing ?, or clicking **Keyboard shortcuts** in the Help menu at the top right. -Keyboard shortcuts can be disabled using the **Enable**/**Disable** toggle in this modal. +From [GitLab 12.8 onwards](https://gitlab.com/gitlab-org/gitlab/issues/22113), +keyboard shortcuts can be disabled using the **Enable**/**Disable** toggle in this modal window. The [Global Shortcuts](#global-shortcuts) work from any area of GitLab, but you must be in specific pages for the other shortcuts to be available, as explained in each -- GitLab