Merge branch '52276-jump-to-top-in-merge-request' into 'master'
Resolve "Jump to top in merge request" Closes #52276 See merge request gitlab-org/gitlab-ce!23069
This commit is contained in:
commit
c88cea8191
|
@ -217,6 +217,28 @@ export default class MergeRequestTabs {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.eventHub.$emit('MergeRequestTabChange', this.getCurrentAction());
|
this.eventHub.$emit('MergeRequestTabChange', this.getCurrentAction());
|
||||||
|
} else if (action === this.currentAction) {
|
||||||
|
// ContentTop is used to handle anything at the top of the page before the main content
|
||||||
|
const mainContentContainer = document.querySelector('.content-wrapper');
|
||||||
|
const tabContentContainer = document.querySelector('.tab-content');
|
||||||
|
|
||||||
|
if (mainContentContainer && tabContentContainer) {
|
||||||
|
const mainContentTop = mainContentContainer.getBoundingClientRect().top;
|
||||||
|
const tabContentTop = tabContentContainer.getBoundingClientRect().top;
|
||||||
|
|
||||||
|
// 51px is the height of the navbar buttons, e.g. `Discussion | Commits | Changes`
|
||||||
|
const scrollDestination = tabContentTop - mainContentTop - 51;
|
||||||
|
|
||||||
|
// scrollBehavior is only available in browsers that support scrollToOptions
|
||||||
|
if ('scrollBehavior' in document.documentElement.style) {
|
||||||
|
window.scrollTo({
|
||||||
|
top: scrollDestination,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.scrollTo(0, scrollDestination);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Allow user to scroll to top of tab on MR page
|
||||||
|
merge_request:
|
||||||
|
author:
|
||||||
|
type: added
|
|
@ -239,4 +239,38 @@ describe('MergeRequestTabs', function() {
|
||||||
expect($('.content-wrapper')).toContainElement('.container-limited');
|
expect($('.content-wrapper')).toContainElement('.container-limited');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('tabShown', function() {
|
||||||
|
const mainContent = document.createElement('div');
|
||||||
|
const tabContent = document.createElement('div');
|
||||||
|
|
||||||
|
beforeEach(function() {
|
||||||
|
spyOn(mainContent, 'getBoundingClientRect').and.returnValue({ top: 10 });
|
||||||
|
spyOn(tabContent, 'getBoundingClientRect').and.returnValue({ top: 100 });
|
||||||
|
spyOn(document, 'querySelector').and.callFake(function(selector) {
|
||||||
|
return selector === '.content-wrapper' ? mainContent : tabContent;
|
||||||
|
});
|
||||||
|
this.class.currentAction = 'commits';
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls window scrollTo with options if document has scrollBehavior', function() {
|
||||||
|
document.documentElement.style.scrollBehavior = '';
|
||||||
|
|
||||||
|
spyOn(window, 'scrollTo');
|
||||||
|
|
||||||
|
this.class.tabShown('commits', 'foobar');
|
||||||
|
|
||||||
|
expect(window.scrollTo.calls.first().args[0]).toEqual({ top: 39, behavior: 'smooth' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls window scrollTo with two args if document does not have scrollBehavior', function() {
|
||||||
|
spyOnProperty(document.documentElement, 'style', 'get').and.returnValue({});
|
||||||
|
|
||||||
|
spyOn(window, 'scrollTo');
|
||||||
|
|
||||||
|
this.class.tabShown('commits', 'foobar');
|
||||||
|
|
||||||
|
expect(window.scrollTo.calls.first().args).toEqual([0, 39]);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue