diff options
author | Phil Hughes <me@iamphill.com> | 2019-02-28 14:14:15 +0000 |
---|---|---|
committer | Mark Chao <mchao@gitlab.com> | 2019-03-06 15:51:44 +0800 |
commit | b14de8e1f519b9b874033f783051814129af176c (patch) | |
tree | 05ebee82e8aa39f4d22bef8602107433e006efba /app/assets/javascripts/diffs/components/diff_file_header.vue | |
parent | 2609c2a73e8f8efc4fdd5e13c5378ffae7e4f9ef (diff) | |
download | gitlab-ce-b14de8e1f519b9b874033f783051814129af176c.tar.gz |
Add option to expand diff to full file
The user can also toggle between the diff changes and
the full file diff.
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/19054
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_file_header.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 36 |
1 files changed, 30 insertions, 6 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 4d33ad23f39..a5125c3d077 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -5,7 +5,7 @@ import { polyfillSticky } 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'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui'; import { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; import { diffViewerModes } from '~/ide/constants'; @@ -14,6 +14,9 @@ import DiffStats from './diff_stats.vue'; export default { components: { + GlTooltip, + GlLoadingIcon, + GlButton, ClipboardButton, EditButton, Icon, @@ -125,12 +128,15 @@ export default { isModeChanged() { return this.diffFile.viewer.name === diffViewerModes.mode_changed; }, + showExpandDiffToFullFileEnabled() { + return gon.features.expandDiffFullFile && !this.diffFile.is_fully_expanded; + }, }, mounted() { polyfillSticky(this.$refs.header); }, methods: { - ...mapActions('diffs', ['toggleFileDiscussions']), + ...mapActions('diffs', ['toggleFileDiscussions', 'toggleFullDiff']), handleToggleFile(e, checkTarget) { if ( !checkTarget || @@ -240,12 +246,30 @@ export default { v-html="viewReplacedFileButtonText" > </a> - <a + <gl-tooltip :target="() => $refs.viewButton" placement="bottom"> + <span v-html="viewFileButtonText"></span> + </gl-tooltip> + <gl-button + ref="viewButton" :href="diffFile.view_path" - class="btn view-file js-view-file-button" - v-html="viewFileButtonText" + target="blank" + class="view-file js-view-file-button" > - </a> + <icon name="external-link" /> + </gl-button> + <gl-button + v-if="showExpandDiffToFullFileEnabled" + 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" |