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