summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSam Bigelow <sbigelow@gitlab.com>2018-11-27 18:05:16 +0000
committerPhil Hughes <me@iamphill.com>2018-11-27 18:05:16 +0000
commit153dddefed226e3716a41f177d8722a5a6fd48b8 (patch)
treeab2eec7193de8345e2ff9d0acfa485fb72216c86
parenta99f342b4231659d39b9a145acc3652f3de3bce8 (diff)
downloadgitlab-ce-153dddefed226e3716a41f177d8722a5a6fd48b8.tar.gz
Resolve "Jump to top in merge request"
-rw-r--r--app/assets/javascripts/merge_request_tabs.js22
-rw-r--r--changelogs/unreleased/52276-jump-to-top-in-merge-request.yml5
-rw-r--r--spec/javascripts/merge_request_tabs_spec.js34
3 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 28148319c41..b0dc5697018 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -217,6 +217,28 @@ export default class MergeRequestTabs {
}
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);
+ }
+ }
}
}
diff --git a/changelogs/unreleased/52276-jump-to-top-in-merge-request.yml b/changelogs/unreleased/52276-jump-to-top-in-merge-request.yml
new file mode 100644
index 00000000000..3dc95441eec
--- /dev/null
+++ b/changelogs/unreleased/52276-jump-to-top-in-merge-request.yml
@@ -0,0 +1,5 @@
+---
+title: Allow user to scroll to top of tab on MR page
+merge_request:
+author:
+type: added
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 7714197c821..c8df05eccf5 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -239,4 +239,38 @@ describe('MergeRequestTabs', function() {
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]);
+ });
+ });
});