made the changed files holder sticky

3 files changed, 65 insertions, 0 deletions

diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
new file mode 100644
index 00000000000..f53acaa17b1
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -0,0 +1,21 @@
+export const isSticky = (el, stickyTop) => {
+  const top = el.getBoundingClientRect().top;
+
+  if (top === stickyTop) {
+    el.classList.add('is-stuck');
+  } else {
+    el.classList.remove('is-stuck');
+  }
+};
+
+export default (el) => {
+  const computedStyle = window.getComputedStyle(el);
+
+  if (!/sticky/.test(computedStyle.position)) return;
+
+  const stickyTop = parseInt(computedStyle.top, 10);
+
+  document.addEventListener('scroll', () => isSticky(el, stickyTop), {
+    passive: true,
+  });
+};
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index d3faa2d8e51..4ffd71d9de5 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -7,6 +7,7 @@ import Cookies from 'js-cookie';
 import './breakpoints';
 import './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
+import stickyMonitor from './lib/utils/sticky';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -268,6 +269,8 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 
           this.initChangesDropdown();
 
+          stickyMonitor(document.querySelector('.js-diff-files-changed'));
+
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
           }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 972e6c7425f..7d765f45812 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -559,6 +559,47 @@
   }
 }
 
+.diff-files-changed {
+  .commit-stat-summary {
+    z-index: -1;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 100px;
+    background-color: $white-light;
+    z-index: 190;
+
+    + .files {
+      margin-top: 1px;
+    }
+
+    .diff-stats-additions-deletions-collapsed {
+      display: none;
+    }
+
+    &.is-stuck {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-bottom: 1px solid $white-dark;
+
+      .diff-stats-additions-deletions-expanded,
+      .inline-parallel-buttons {
+        display: none;
+      }
+
+      .diff-stats-additions-deletions-collapsed {
+        display: block;
+      }
+
+      + .files {
+        margin-top: 16px;
+      }
+    }
+  }
+}
+
 .diff-file-changes {
   width: 450px;
   z-index: 150;