debian-mirror-gitlab/app/assets/javascripts/diffs/components/compare_versions.vue

192 lines
5.8 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2021-04-29 21:17:54 +05:30
import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { mapActions, mapGetters, mapState } from 'vuex';
2018-12-05 23:21:45 +05:30
import { __ } from '~/locale';
2021-04-29 21:17:54 +05:30
import { setUrlParams } from '../../lib/utils/url_utility';
2021-01-29 00:20:46 +05:30
import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants';
import eventHub from '../event_hub';
2021-03-11 19:13:27 +05:30
import CompareDropdownLayout from './compare_dropdown_layout.vue';
import DiffStats from './diff_stats.vue';
import SettingsDropdown from './settings_dropdown.vue';
2018-11-08 19:23:39 +05:30
export default {
components: {
2020-04-22 19:07:51 +05:30
CompareDropdownLayout,
2021-04-29 21:17:54 +05:30
GlIcon,
2019-02-15 15:39:39 +05:30
GlLink,
2021-04-29 21:17:54 +05:30
GlButtonGroup,
2020-11-24 15:15:51 +05:30
GlButton,
2020-03-13 15:44:24 +05:30
GlSprintf,
2019-03-02 22:35:43 +05:30
SettingsDropdown,
DiffStats,
2018-12-05 23:21:45 +05:30
},
directives: {
2019-02-15 15:39:39 +05:30
GlTooltip: GlTooltipDirective,
2018-11-08 19:23:39 +05:30
},
props: {
2019-07-07 11:18:12 +05:30
isLimitedContainer: {
type: Boolean,
required: false,
default: false,
},
2020-10-24 23:57:45 +05:30
diffFilesCountText: {
type: String,
required: false,
default: null,
2020-03-13 15:44:24 +05:30
},
2018-11-08 19:23:39 +05:30
},
computed: {
2020-04-22 19:07:51 +05:30
...mapGetters('diffs', [
2021-01-29 00:20:46 +05:30
'whichCollapsedTypes',
2020-04-22 19:07:51 +05:30
'diffCompareDropdownTargetVersions',
'diffCompareDropdownSourceVersions',
]),
2019-03-02 22:35:43 +05:30
...mapState('diffs', [
2021-03-08 18:12:59 +05:30
'diffFiles',
2019-03-02 22:35:43 +05:30
'commit',
'showTreeList',
'startVersion',
'latestVersionPath',
'addedLines',
'removedLines',
]),
toggleFileBrowserTitle() {
return this.showTreeList ? __('Hide file browser') : __('Show file browser');
},
2021-03-08 18:12:59 +05:30
hasChanges() {
return this.diffFiles.length > 0;
},
hasSourceVersions() {
return this.diffCompareDropdownSourceVersions.length > 0;
},
2021-04-29 21:17:54 +05:30
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);
},
2019-03-02 22:35:43 +05:30
},
2019-07-07 11:18:12 +05:30
created() {
this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
},
2018-12-05 23:21:45 +05:30
methods: {
2021-02-22 17:27:13 +05:30
...mapActions('diffs', ['setInlineDiffViewType', 'setParallelDiffViewType', 'setShowTreeList']),
2021-01-29 00:20:46 +05:30
expandAllFiles() {
eventHub.$emit(EVT_EXPAND_ALL_FILES);
},
2021-04-29 21:17:54 +05:30
...mapActions('diffs', ['moveToNeighboringCommit']),
2018-11-08 19:23:39 +05:30
},
};
</script>
<template>
2020-03-13 15:44:24 +05:30
<div class="mr-version-controls border-top">
2019-07-07 11:18:12 +05:30
<div
class="mr-version-menus-container content-block"
:class="{
[CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
}"
>
2020-11-24 15:15:51 +05:30
<gl-button
2021-03-08 18:12:59 +05:30
v-if="hasChanges"
2019-02-15 15:39:39 +05:30
v-gl-tooltip.hover
2020-11-24 15:15:51 +05:30
variant="default"
icon="file-tree"
2021-09-30 23:02:18 +05:30
class="gl-mr-3 js-toggle-tree-list btn-icon"
2021-11-18 22:05:49 +05:30
data-qa-selector="file_tree_button"
2019-03-02 22:35:43 +05:30
:title="toggleFileBrowserTitle"
2021-04-29 21:17:54 +05:30
:aria-label="toggleFileBrowserTitle"
2020-11-24 15:15:51 +05:30
:selected="showTreeList"
2021-02-22 17:27:13 +05:30
@click="setShowTreeList({ showTreeList: !showTreeList })"
2020-11-24 15:15:51 +05:30
/>
2021-03-08 18:12:59 +05:30
<div v-if="commit">
{{ __('Viewing commit') }}
<gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
</div>
2021-09-30 23:02:18 +05:30
<div v-if="hasNeighborCommits" class="commit-nav-buttons">
2021-04-29 21:17:54 +05:30
<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>
2020-03-13 15:44:24 +05:30
<gl-sprintf
2021-06-08 01:23:25 +05:30
v-else-if="!commit && hasSourceVersions"
2020-03-13 15:44:24 +05:30
class="d-flex align-items-center compare-versions-container"
2020-06-23 00:09:42 +05:30
:message="s__('MergeRequest|Compare %{target} and %{source}')"
2020-03-13 15:44:24 +05:30
>
<template #target>
2020-04-22 19:07:51 +05:30
<compare-dropdown-layout
:versions="diffCompareDropdownTargetVersions"
2020-03-13 15:44:24 +05:30
class="mr-version-compare-dropdown"
2021-01-03 14:25:43 +05:30
data-qa-selector="target_version_dropdown"
2020-03-13 15:44:24 +05:30
/>
</template>
2020-06-23 00:09:42 +05:30
<template #source>
<compare-dropdown-layout
:versions="diffCompareDropdownSourceVersions"
class="mr-version-dropdown"
/>
</template>
2020-03-13 15:44:24 +05:30
</gl-sprintf>
2021-09-30 23:02:18 +05:30
<gl-button
v-if="commit || startVersion"
:href="latestVersionPath"
variant="default"
class="js-latest-version"
:class="{ 'gl-ml-3': commit && !hasNeighborCommits }"
>
{{ __('Show latest version') }}
</gl-button>
2021-03-08 18:12:59 +05:30
<div v-if="hasChanges" class="inline-parallel-buttons d-none d-md-flex ml-auto">
2019-03-02 22:35:43 +05:30
<diff-stats
2020-10-24 23:57:45 +05:30
:diff-files-count-text="diffFilesCountText"
2019-03-02 22:35:43 +05:30
:added-lines="addedLines"
:removed-lines="removedLines"
/>
2020-11-24 15:15:51 +05:30
<gl-button
2021-01-29 00:20:46 +05:30
v-show="whichCollapsedTypes.any"
2020-11-24 15:15:51 +05:30
variant="default"
class="gl-mr-3"
@click="expandAllFiles"
>
2018-12-05 23:21:45 +05:30
{{ __('Expand all') }}
2020-11-24 15:15:51 +05:30
</gl-button>
2019-03-02 22:35:43 +05:30
<settings-dropdown />
2018-12-05 23:21:45 +05:30
</div>
2018-11-08 19:23:39 +05:30
</div>
</div>
</template>