diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/compare_versions.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/compare_versions.vue | 52 |
1 files changed, 51 insertions, 1 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index 6b1e2bfb34e..7526c5347f7 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -1,7 +1,8 @@ <script> -import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { __ } from '~/locale'; +import { setUrlParams } from '../../lib/utils/url_utility'; import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants'; import eventHub from '../event_hub'; import CompareDropdownLayout from './compare_dropdown_layout.vue'; @@ -11,7 +12,9 @@ import SettingsDropdown from './settings_dropdown.vue'; export default { components: { CompareDropdownLayout, + GlIcon, GlLink, + GlButtonGroup, GlButton, GlSprintf, SettingsDropdown, @@ -56,6 +59,19 @@ export default { hasSourceVersions() { return this.diffCompareDropdownSourceVersions.length > 0; }, + nextCommitUrl() { + return this.commit.next_commit_id + ? setUrlParams({ commit_id: this.commit.next_commit_id }) + : ''; + }, + previousCommitUrl() { + return this.commit.prev_commit_id + ? setUrlParams({ commit_id: this.commit.prev_commit_id }) + : ''; + }, + hasNeighborCommits() { + return this.commit && (this.commit.next_commit_id || this.commit.prev_commit_id); + }, }, created() { this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES; @@ -65,6 +81,7 @@ export default { expandAllFiles() { eventHub.$emit(EVT_EXPAND_ALL_FILES); }, + ...mapActions('diffs', ['moveToNeighboringCommit']), }, }; </script> @@ -84,6 +101,7 @@ export default { icon="file-tree" class="gl-mr-3 js-toggle-tree-list" :title="toggleFileBrowserTitle" + :aria-label="toggleFileBrowserTitle" :selected="showTreeList" @click="setShowTreeList({ showTreeList: !showTreeList })" /> @@ -91,6 +109,38 @@ export default { {{ __('Viewing commit') }} <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link> </div> + <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3"> + <gl-button-group> + <gl-button + :href="previousCommitUrl" + :disabled="!commit.prev_commit_id" + @click.prevent="moveToNeighboringCommit({ direction: 'previous' })" + > + <span + v-if="!commit.prev_commit_id" + v-gl-tooltip + class="h-100 w-100 position-absolute position-top-0 position-left-0" + :title="__('You\'re at the first commit')" + ></span> + <gl-icon name="chevron-left" /> + {{ __('Prev') }} + </gl-button> + <gl-button + :href="nextCommitUrl" + :disabled="!commit.next_commit_id" + @click.prevent="moveToNeighboringCommit({ direction: 'next' })" + > + <span + v-if="!commit.next_commit_id" + v-gl-tooltip + class="h-100 w-100 position-absolute position-top-0 position-left-0" + :title="__('You\'re at the last commit')" + ></span> + {{ __('Next') }} + <gl-icon name="chevron-right" /> + </gl-button> + </gl-button-group> + </div> <gl-sprintf v-else-if="hasSourceVersions" class="d-flex align-items-center compare-versions-container" |