Fix the sticky changes bar on commits pagefixed-sticky-stats-box-commit-view

6 files changed, 23 insertions, 14 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 7cc7636cca3..8c5a4367440 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -76,6 +76,7 @@ import initLegacyFilters from './init_legacy_filters';
 import initIssuableSidebar from './init_issuable_sidebar';
 import GpgBadges from './gpg_badges';
 import UserFeatureHelper from './helpers/user_feature_helper';
+import initChangesDropdown from './init_changes_dropdown';
 
 (function() {
   var Dispatcher;
@@ -228,6 +229,7 @@ import UserFeatureHelper from './helpers/user_feature_helper';
           break;
         case 'projects:compare:show':
           new gl.Diff();
+          initChangesDropdown();
           break;
         case 'projects:branches:new':
         case 'projects:branches:create':
@@ -320,6 +322,7 @@ import UserFeatureHelper from './helpers/user_feature_helper';
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
           initNotes();
+          initChangesDropdown();
           $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
         case 'projects:commit:pipelines':
diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js
new file mode 100644
index 00000000000..f785ed29e6c
--- /dev/null
+++ b/app/assets/javascripts/init_changes_dropdown.js
@@ -0,0 +1,10 @@
+import stickyMonitor from './lib/utils/sticky';
+
+export default () => {
+  stickyMonitor(document.querySelector('.js-diff-files-changed'));
+
+  $('.js-diff-stats-dropdown').glDropdown({
+    filterable: true,
+    remoteFilter: false,
+  });
+};
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 4ffd71d9de5..0294da3f20d 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -7,7 +7,7 @@ import Cookies from 'js-cookie';
 import './breakpoints';
 import './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
-import stickyMonitor from './lib/utils/sticky';
+import initChangesDropdown from './init_changes_dropdown';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -267,9 +267,7 @@ import stickyMonitor from './lib/utils/sticky';
           const $container = $('#diffs');
           $container.html(data.html);
 
-          this.initChangesDropdown();
-
-          stickyMonitor(document.querySelector('.js-diff-files-changed'));
+          initChangesDropdown();
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
@@ -319,13 +317,6 @@ import stickyMonitor from './lib/utils/sticky';
       });
     }
 
-    initChangesDropdown() {
-      $('.js-diff-stats-dropdown').glDropdown({
-        filterable: true,
-        remoteFilter: false,
-      });
-    }
-
     // Show or hide the loading spinner
     //
     // status - Boolean, true to show, false to hide
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index da77346d8b2..215bedc04fd 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -574,10 +574,14 @@
   @media (min-width: $screen-sm-min) {
     position: -webkit-sticky;
     position: sticky;
-    top: 84px;
+    top: 34px;
     background-color: $white-light;
     z-index: 190;
 
+    &.diff-files-changed-merge-request {
+      top: 84px;
+    }
+
     + .files,
     + .alert {
       margin-top: 1px;
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 25a5dfc2aaa..178ab3df2e5 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -2,8 +2,9 @@
 - show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true)
 - can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project)
 - diff_files = diffs.diff_files
+- merge_request = local_assigns.fetch(:merge_request, false)
 
-.content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
+.content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed{ class: ("diff-files-changed-merge-request" if merge_request) }
   .files-changed-inner
     .inline-parallel-buttons
       - if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? }
diff --git a/app/views/projects/merge_requests/diffs/_diffs.html.haml b/app/views/projects/merge_requests/diffs/_diffs.html.haml
index fb31e2fef00..0d30d6da68f 100644
--- a/app/views/projects/merge_requests/diffs/_diffs.html.haml
+++ b/app/views/projects/merge_requests/diffs/_diffs.html.haml
@@ -1,5 +1,5 @@
 - if @merge_request_diff.collected? || @merge_request_diff.overflow?
   = render 'projects/merge_requests/diffs/versions'
-  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
+  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, merge_request: true
 - elsif @merge_request_diff.empty?
   .nothing-here-block Nothing to merge from #{@merge_request.source_branch} into #{@merge_request.target_branch}