|
|
|
<script>
|
|
|
|
import _ from 'underscore';
|
|
|
|
import { mapActions, mapGetters } from 'vuex';
|
|
|
|
import { polyfillSticky } from '~/lib/utils/sticky';
|
|
|
|
import { polyfillSticky, stickyMonitor } from '~/lib/utils/sticky';
|
|
|
|
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
|
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
|
|
|
import FileIcon from '~/vue_shared/components/file_icon.vue';
|
| ... | ... | @@ -11,7 +11,7 @@ import { __, s__, sprintf } from '~/locale'; |
|
|
|
import { diffViewerModes } from '~/ide/constants';
|
|
|
|
import EditButton from './edit_button.vue';
|
|
|
|
import DiffStats from './diff_stats.vue';
|
|
|
|
import { scrollToElement } from '~/lib/utils/common_utils';
|
|
|
|
import { scrollToElement, contentTop } from '~/lib/utils/common_utils';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
| ... | ... | @@ -137,9 +137,20 @@ export default { |
|
|
|
isModeChanged() {
|
|
|
|
return this.diffFile.viewer.name === diffViewerModes.mode_changed;
|
|
|
|
},
|
|
|
|
showExpandDiffToFullFileEnabled() {
|
|
|
|
return gon.features.expandDiffFullFile && !this.diffFile.is_fully_expanded;
|
|
|
|
},
|
|
|
|
expandDiffToFullFileTitle() {
|
|
|
|
if (this.diffFile.isShowingFullFile) {
|
|
|
|
return s__('MRDiff|Show changes only');
|
|
|
|
}
|
|
|
|
return s__('MRDiff|Show full file');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
polyfillSticky(this.$refs.header);
|
|
|
|
const fileHeaderHeight = this.$refs.header.clientHeight;
|
|
|
|
stickyMonitor(this.$refs.header, contentTop() - fileHeaderHeight - 1, false);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions('diffs', ['toggleFileDiscussions', 'toggleFullDiff']),
|
| ... | ... | @@ -243,6 +254,7 @@ export default { |
|
|
|
class="file-actions d-none d-sm-block"
|
|
|
|
>
|
|
|
|
<diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
|
|
|
|
<div class="btn-group" role="group">
|
|
|
|
<template v-if="diffFile.blob && diffFile.blob.readable_text">
|
|
|
|
<button
|
|
|
|
:disabled="!diffHasDiscussions(diffFile)"
|
| ... | ... | @@ -271,30 +283,28 @@ export default { |
|
|
|
v-html="viewReplacedFileButtonText"
|
|
|
|
>
|
|
|
|
</a>
|
|
|
|
<gl-tooltip :target="() => $refs.viewButton" placement="bottom">
|
|
|
|
<span v-html="viewFileButtonText"></span>
|
|
|
|
</gl-tooltip>
|
|
|
|
<gl-button
|
|
|
|
v-if="!diffFile.is_fully_expanded"
|
|
|
|
ref="expandDiffToFullFileButton"
|
|
|
|
v-gl-tooltip.hover
|
|
|
|
:title="expandDiffToFullFileTitle"
|
|
|
|
class="expand-file js-expand-file"
|
|
|
|
@click="toggleFullDiff(diffFile.file_path)"
|
|
|
|
>
|
|
|
|
<gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
|
|
|
|
<icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" />
|
|
|
|
<icon v-else name="doc-expand" />
|
|
|
|
</gl-button>
|
|
|
|
<gl-button
|
|
|
|
ref="viewButton"
|
|
|
|
v-gl-tooltip.hover
|
|
|
|
:href="diffFile.view_path"
|
|
|
|
target="blank"
|
|
|
|
class="view-file js-view-file-button"
|
|
|
|
:title="viewFileButtonText"
|
|
|
|
>
|
|
|
|
<icon name="external-link" />
|
|
|
|
</gl-button>
|
|
|
|
<gl-button
|
|
|
|
v-if="!diffFile.is_fully_expanded"
|
|
|
|
class="expand-file js-expand-file"
|
|
|
|
@click="toggleFullDiff(diffFile.file_path)"
|
|
|
|
>
|
|
|
|
<template v-if="diffFile.isShowingFullFile">
|
|
|
|
{{ s__('MRDiff|Show changes only') }}
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
{{ s__('MRDiff|Show full file') }}
|
|
|
|
</template>
|
|
|
|
<gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
|
|
|
|
</gl-button>
|
|
|
|
|
|
|
|
<a
|
|
|
|
v-if="diffFile.external_url"
|
| ... | ... | @@ -309,4 +319,5 @@ export default { |
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template> |