diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_file_header.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 26 |
1 files changed, 20 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 9f451cd759a..0d99a2e8a60 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -10,6 +10,7 @@ import { GlDropdown, GlDropdownItem, GlDropdownDivider, + GlLoadingIcon, } from '@gitlab/ui'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; @@ -18,6 +19,7 @@ import { __, s__, sprintf } from '~/locale'; import { diffViewerModes } from '~/ide/constants'; import DiffStats from './diff_stats.vue'; import { scrollToElement } from '~/lib/utils/common_utils'; +import { isCollapsed } from '../diff_file'; import { DIFF_FILE_HEADER } from '../i18n'; export default { @@ -31,6 +33,7 @@ export default { GlDropdown, GlDropdownItem, GlDropdownDivider, + GlLoadingIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -125,6 +128,9 @@ export default { isUsingLfs() { return this.diffFile.stored_externally && this.diffFile.external_storage === 'lfs'; }, + isCollapsed() { + return isCollapsed(this.diffFile, { fileByFile: this.viewDiffsFileByFile }); + }, collapseIcon() { return this.expanded ? 'chevron-down' : 'chevron-right'; }, @@ -209,7 +215,7 @@ export default { class="js-file-title file-title file-title-flex-parent" @click.self="handleToggleFile" > - <div class="file-header-content gl-display-flex gl-align-items-center gl-pr-0!"> + <div class="file-header-content"> <gl-icon v-if="collapsible" ref="collapseIcon" @@ -222,11 +228,17 @@ export default { <a ref="titleWrapper" :v-once="!viewDiffsFileByFile" - class="gl-mr-2 gl-text-decoration-none! gl-text-truncate" + class="gl-mr-2 gl-text-decoration-none! gl-word-break-all" :href="titleLink" @click="handleFileNameClick" > - <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" /> + <file-icon + :file-name="filePath" + :size="18" + aria-hidden="true" + css-classes="gl-mr-2" + :submodule="diffFile.submodule" + /> <span v-if="isFileRenamed"> <strong v-gl-tooltip @@ -270,12 +282,12 @@ export default { {{ diffFile.a_mode }} → {{ diffFile.b_mode }} </small> - <span v-if="isUsingLfs" class="label label-lfs gl-mr-2"> {{ __('LFS') }} </span> + <span v-if="isUsingLfs" class="badge label label-lfs gl-mr-2"> {{ __('LFS') }} </span> </div> <div v-if="!diffFile.submodule && addMergeRequestButtons" - class="file-actions d-flex align-items-center flex-wrap" + class="file-actions d-flex align-items-center gl-ml-auto gl-align-self-start" > <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" /> <gl-button-group class="gl-pt-0!"> @@ -334,7 +346,7 @@ export default { </gl-dropdown-item> </template> - <template v-if="!diffFile.viewer.automaticallyCollapsed"> + <template v-if="!isCollapsed"> <gl-dropdown-divider v-if="!diffFile.is_fully_expanded || diffHasDiscussions(diffFile)" /> @@ -355,8 +367,10 @@ export default { <gl-dropdown-item v-if="!diffFile.is_fully_expanded" ref="expandDiffToFullFileButton" + :disabled="diffFile.isLoadingFullFile" @click="toggleFullDiff(diffFile.file_path)" > + <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline /> {{ expandDiffToFullFileTitle }} </gl-dropdown-item> </template> |