diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2019-04-01 15:28:37 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2019-04-01 15:28:37 +0000 |
commit | f87ff7af538a6ac559217a4c7cfa0fd75f247fd6 (patch) | |
tree | 3ca07716df7a2d08f04d962ed72b9d44114cfda5 /app/assets | |
parent | b224efe767e4f8e24b51b87753f55bf6d3129f68 (diff) | |
parent | a9441396daac861a381c50cef0766f929b1b26b6 (diff) | |
download | gitlab-ce-f87ff7af538a6ac559217a4c7cfa0fd75f247fd6.tar.gz |
Merge branch '57669-fix-bug-clicking-file-header-refreshes-page' into 'master'
Fix bug where clicking file header in diff refreshes page
Closes #57669
See merge request gitlab-org/gitlab-ce!26422
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file.vue | 30 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 30 | ||||
-rw-r--r-- | app/assets/javascripts/lib/utils/common_utils.js | 25 |
3 files changed, 62 insertions, 23 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index 0e779e1be9a..58a9605c181 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -170,21 +170,23 @@ export default { </div> <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" /> <template v-else> - <div v-if="errorMessage" class="diff-viewer"> - <div class="nothing-here-block" v-html="errorMessage"></div> + <div :id="`diff-content-${file.file_hash}`"> + <div v-if="errorMessage" class="diff-viewer"> + <div class="nothing-here-block" v-html="errorMessage"></div> + </div> + <div v-else-if="isCollapsed" class="nothing-here-block diff-collapsed"> + {{ __('This diff is collapsed.') }} + <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{ + __('Click to expand it.') + }}</a> + </div> + <diff-content + v-else + :class="{ hidden: isCollapsed || isFileTooLarge }" + :diff-file="file" + :help-page-path="helpPagePath" + /> </div> - <div v-else-if="isCollapsed" class="nothing-here-block diff-collapsed"> - {{ __('This diff is collapsed.') }} - <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{ - __('Click to expand it.') - }}</a> - </div> - <diff-content - v-else - :class="{ hidden: isCollapsed || isFileTooLarge }" - :diff-file="file" - :help-page-path="helpPagePath" - /> </template> <div v-if="isFileTooLarge" class="nothing-here-block diff-collapsed js-too-large-diff"> {{ __('This source diff could not be displayed because it is too large.') }} diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index d41d1464166..fda7b7c5fd9 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -11,6 +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'; export default { components: { @@ -66,6 +67,9 @@ export default { hasExpandedDiscussions() { return this.diffHasExpandedDiscussions(this.diffFile); }, + diffContentIDSelector() { + return `#diff-content-${this.diffFile.file_hash}`; + }, icon() { if (this.diffFile.submodule) { return 'archive'; @@ -77,6 +81,11 @@ export default { if (this.diffFile.submodule) { return this.diffFile.submodule_tree_url || this.diffFile.submodule_link; } + + if (!this.discussionPath) { + return this.diffContentIDSelector; + } + return this.discussionPath; }, filePath() { @@ -149,6 +158,18 @@ export default { handleToggleDiscussions() { this.toggleFileDiscussions(this.diffFile); }, + handleFileNameClick(e) { + const isLinkToOtherPage = + this.diffFile.submodule_tree_url || this.diffFile.submodule_link || this.discussionPath; + + if (!isLinkToOtherPage) { + e.preventDefault(); + const selector = this.diffContentIDSelector; + + scrollToElement(document.querySelector(selector)); + window.location.hash = selector; + } + }, }, }; </script> @@ -168,7 +189,14 @@ export default { class="diff-toggle-caret append-right-5" @click.stop="handleToggle" /> - <a v-once ref="titleWrapper" :href="titleLink" class="append-right-4 js-title-wrapper"> + <a + v-once + id="diffFile.file_path" + ref="titleWrapper" + class="append-right-4 js-title-wrapper" + :href="titleLink" + @click="handleFileNameClick" + > <file-icon :file-name="filePath" :size="18" diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 1af6b63efc9..59930f8d4a3 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -7,6 +7,7 @@ import axios from './axios_utils'; import { getLocationHash } from './url_utility'; import { convertToCamelCase } from './text_utility'; import { isObject } from './type_utility'; +import BreakpointInstance from '../../breakpoints'; export const getPagePath = (index = 0) => { const page = $('body').attr('data-page') || ''; @@ -193,16 +194,24 @@ export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; export const isMetaClick = e => e.metaKey || e.ctrlKey || e.which === 2; export const contentTop = () => { - const perfBar = $('#js-peek').height() || 0; - const mrTabsHeight = $('.merge-request-tabs').height() || 0; - const headerHeight = $('.navbar-gitlab').height() || 0; - const diffFilesChanged = $('.js-diff-files-changed').height() || 0; - const diffFileLargeEnoughScreen = - 'matchMedia' in window ? window.matchMedia('min-width: 768') : true; + const perfBar = $('#js-peek').outerHeight() || 0; + const mrTabsHeight = $('.merge-request-tabs').outerHeight() || 0; + const headerHeight = $('.navbar-gitlab').outerHeight() || 0; + const diffFilesChanged = $('.js-diff-files-changed').outerHeight() || 0; + const mdScreenOrBigger = ['lg', 'md'].includes(BreakpointInstance.getBreakpointSize()); const diffFileTitleBar = - (diffFileLargeEnoughScreen && $('.diff-file .file-title-flex-parent:visible').height()) || 0; + (mdScreenOrBigger && $('.diff-file .file-title-flex-parent:visible').outerHeight()) || 0; + const compareVersionsHeaderHeight = + (mdScreenOrBigger && $('.mr-version-controls').outerHeight()) || 0; - return perfBar + mrTabsHeight + headerHeight + diffFilesChanged + diffFileTitleBar; + return ( + perfBar + + mrTabsHeight + + headerHeight + + diffFilesChanged + + diffFileTitleBar + + compareVersionsHeaderHeight + ); }; export const scrollToElement = element => { |