diff options
author | Denys Mishunov <dmishunov@gitlab.com> | 2019-02-27 09:12:13 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-02-27 09:12:13 +0000 |
commit | 0aff8e27530d391e4c819838b46d77f6231ecf70 (patch) | |
tree | 994b53c9de178e06dfca697044c231651749a369 /app/assets/javascripts/diffs | |
parent | d40a3809fd387f8dc9a28218a004260b600a1412 (diff) | |
download | gitlab-ce-0aff8e27530d391e4c819838b46d77f6231ecf70.tar.gz |
Set up basic keyboard next/previous navigation in diff list
Mousetrap is used as the help-tool to listen to keystrokes
Added currentDiffIndex getter to store that holds
the index of currently active diff file in the list
Instead of computing it on the component, we will take advantage of it
being available for all components in DiffsApp
Testing keyboard navigation and jumpToFile()
Diffstat (limited to 'app/assets/javascripts/diffs')
-rw-r--r-- | app/assets/javascripts/diffs/components/app.vue | 33 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/store/actions.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/store/getters.js | 7 |
3 files changed, 41 insertions, 3 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 8f47931d14a..1fc2b7fe859 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -5,6 +5,7 @@ import { __ } from '~/locale'; import createFlash from '~/flash'; import { GlLoadingIcon } from '@gitlab/ui'; import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; +import Mousetrap from 'mousetrap'; import eventHub from '../../notes/event_hub'; import CompareVersions from './compare_versions.vue'; import DiffFile from './diff_file.vue'; @@ -87,7 +88,7 @@ export default { emailPatchPath: state => state.diffs.emailPatchPath, }), ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion']), - ...mapGetters('diffs', ['isParallelView']), + ...mapGetters('diffs', ['isParallelView', 'currentDiffIndex']), ...mapGetters(['isNotesFetched', 'getNoteableData']), targetBranch() { return { @@ -149,6 +150,7 @@ export default { }, beforeDestroy() { eventHub.$off('fetchDiffData', this.fetchData); + this.removeEventListeners(); }, methods: { ...mapActions(['startTaskList']), @@ -159,6 +161,7 @@ export default { 'assignDiscussionsToDiff', 'setHighlightedRow', 'cacheTreeListWidth', + 'scrollToFile', ]), fetchData() { this.fetchDiffFiles() @@ -197,7 +200,35 @@ export default { this.$nextTick(() => { window.mrTabs.resetViewContainer(); window.mrTabs.expandViewContainer(this.showTreeList); + this.setEventListeners(); }); + } else { + this.removeEventListeners(); + } + }, + setEventListeners() { + Mousetrap.bind(['[', 'k', ']', 'j'], (e, combo) => { + switch (combo) { + case '[': + case 'k': + this.jumpToFile(-1); + break; + case ']': + case 'j': + this.jumpToFile(+1); + break; + default: + break; + } + }); + }, + removeEventListeners() { + Mousetrap.unbind(['[', 'k', ']', 'j']); + }, + jumpToFile(step) { + const targetIndex = this.currentDiffIndex + step; + if (targetIndex >= 0 && targetIndex < this.diffFiles.length) { + this.scrollToFile(this.diffFiles[targetIndex].file_path); } }, }, diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index 82ff2e3be76..c40775c3259 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/app/assets/javascripts/diffs/store/actions.js @@ -52,7 +52,9 @@ export const fetchDiffFiles = ({ state, commit }) => { }; export const setHighlightedRow = ({ commit }, lineCode) => { + const fileHash = lineCode.split('_')[0]; commit(types.SET_HIGHLIGHTED_ROW, lineCode); + commit(types.UPDATE_CURRENT_DIFF_FILE_ID, fileHash); }; // This is adding line discussions to the actual lines in the diff tree @@ -262,8 +264,6 @@ export const scrollToFile = ({ state, commit }, path) => { document.location.hash = fileHash; commit(types.UPDATE_CURRENT_DIFF_FILE_ID, fileHash); - - setTimeout(() => commit(types.UPDATE_CURRENT_DIFF_FILE_ID, ''), 1000); }; export const toggleShowTreeList = ({ commit, state }) => { diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js index 4e7e5306995..bc27e263bff 100644 --- a/app/assets/javascripts/diffs/store/getters.js +++ b/app/assets/javascripts/diffs/store/getters.js @@ -100,5 +100,12 @@ export const diffFilesLength = state => state.diffFiles.length; export const getCommentFormForDiffFile = state => fileHash => state.commentForms.find(form => form.fileHash === fileHash); +/** + * Returns index of a currently selected diff in diffFiles + * @returns {number} + */ +export const currentDiffIndex = state => + Math.max(0, state.diffFiles.findIndex(diff => diff.file_hash === state.currentDiffFileId)); + // prevent babel-plugin-rewire from generating an invalid default during karma tests export default () => {}; |