Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | <script> import { GlModal, GlSearchBoxByType, GlLink, GlSprintf } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import { joinPaths } from '../../lib/utils/url_utility'; import { keybindingGroups } from './keybindings'; import Shortcut from './shortcut.vue'; export default { components: { GlModal, GlSearchBoxByType, GlLink, GlSprintf, Shortcut, }, data() { return { searchTerm: '', }; }, computed: { filteredKeybindings() { Iif (!this.searchTerm) { return keybindingGroups; } const search = this.searchTerm.toLocaleLowerCase(); const mapped = keybindingGroups.map((group) => { Iif (group.name.toLocaleLowerCase().includes(search)) { return group; } return { ...group, keybindings: group.keybindings.filter((binding) => binding.description.toLocaleLowerCase().includes(search), ), }; }); return mapped.filter((group) => group.keybindings.length); }, absoluteUserPreferencesPath() { return joinPaths(gon.relative_url_root || '/', '/-/profile/preferences'); }, }, i18n: { title: __(`Keyboard shortcuts`), search: s__(`KeyboardShortcuts|Search keyboard shortcuts`), noMatch: s__(`KeyboardShortcuts|No shortcuts matched your search`), }, }; </script> <template> <gl-modal modal-id="keyboard-shortcut-modal" size="lg" :title="$options.i18n.title" data-testid="modal-shortcuts" body-class="shortcut-help-body gl-p-0!" :visible="true" :hide-footer="true" @hidden="$emit('hidden')" > <div class="gl-sticky gl-top-0 gl-py-5 gl-px-5 gl-display-flex gl-align-items-center gl-bg-white" > <gl-search-box-by-type v-model.trim="searchTerm" :aria-label="$options.i18n.search" class="gl-w-half gl-mr-3" /> <span> <gl-sprintf :message=" __( 'Enable or disable keyboard shortcuts in your %{linkStart}user preferences%{linkEnd}.', ) " > <template #link="{ content }"> <gl-link :href="absoluteUserPreferencesPath">{{ content }}</gl-link> </template> </gl-sprintf> </span> </div> <div v-if="filteredKeybindings.length === 0" class="gl-px-5"> {{ $options.i18n.noMatch }} </div> <div v-else class="shortcut-help-container gl-mt-8 gl-px-5 gl-pb-5"> <section v-for="group in filteredKeybindings" :key="group.id" class="shortcut-help-mapping gl-mb-4" > <strong class="shortcut-help-mapping-title gl-w-half gl-display-inline-block"> {{ group.name }} </strong> <div v-for="keybinding in group.keybindings" :key="keybinding.id" class="gl-display-flex gl-align-items-center" > <shortcut class="gl-w-40p gl-flex-shrink-0 gl-text-right gl-pr-4" :shortcuts="keybinding.defaultKeys" /> <div class="gl-w-half gl-flex-shrink-0 gl-flex-grow-1"> {{ keybinding.description }} </div> </div> </section> </div> </gl-modal> </template> |