Merge branch 'mr-tabs-affix' into 'master'

Merge request tabs stick when scrolling page

## What does this MR do?

When scrolling merge requests this sticks the tabs to below the navigation for easy access.

## Screenshots (if relevant)

![sticky](/uploads/372a9889c50e9f85fef475cbee110ec1/sticky.gif)

## What are the relevant issue numbers?

Closes #20548

See merge request !6382

CHANGELOG

@@ -268,6 +268,7 @@ v 8.12.0
   - Remove prefixes from transition CSS property (ClemMakesApps)
   - Add Sentry logging to API calls
   - Add BroadcastMessage API
+  - Merge request tabs are fixed when scrolling page
   - Use 'git update-ref' for safer web commits !6130
   - Sort pipelines requested through the API
   - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)

app/assets/javascripts/merge_request_tabs.js

@@ -71,6 +71,7 @@
       this._location = location;
       this.bindEvents();
       this.activateTab(this.opts.action);
+      this.initAffix();
     }
 
     MergeRequestTabs.prototype.bindEvents = function() {
@@ -380,6 +381,46 @@
     // Only when sidebar is collapsed
     };
 
+    MergeRequestTabs.prototype.initAffix = function () {
+      var $tabs = $('.js-tabs-affix');
+
+      // Screen space on small screens is usually very sparse
+      // So we dont affix the tabs on these
+      if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
+
+      var tabsWidth = $tabs.outerWidth(),
+        $diffTabs = $('#diff-notes-app'),
+        offsetTop = $tabs.offset().top - ($('.navbar-fixed-top').height() + $('.layout-nav').height());
+
+      $tabs.off('affix.bs.affix affix-top.bs.affix')
+        .affix({
+          offset: {
+            top: offsetTop
+          }
+        }).on('affix.bs.affix', function () {
+          $tabs.css({
+            left: $tabs.offset().left,
+            width: tabsWidth
+          });
+          $diffTabs.css({
+            marginTop: $tabs.height()
+          });
+        }).on('affix-top.bs.affix', function () {
+          $tabs.css({
+            left: '',
+            width: ''
+          });
+          $diffTabs.css({
+            marginTop: ''
+          });
+        });
+
+      // Fix bug when reloading the page already scrolling
+      if ($tabs.hasClass('affix')) {
+        $tabs.trigger('affix.bs.affix');
+      }
+    };
+
     return MergeRequestTabs;
 
   })();

app/assets/stylesheets/pages/merge_requests.scss

@@ -437,3 +437,12 @@
     margin-bottom: 20px;
   }
 }
+
+.merge-request-tabs {
+  background-color: #fff;
+
+  &.affix {
+    top: 100px;
+    z-index: 9;
+  }
+}

app/views/projects/merge_requests/_show.html.haml

@@ -47,7 +47,7 @@
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
     - if @commits_count.nonzero?
-      %ul.merge-request-tabs.nav-links.no-top.no-bottom
+      %ul.merge-request-tabs.nav-links.no-top.no-bottom{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
         %li.notes-tab
           = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
             Discussion

spec/javascripts/merge_request_tabs_spec.js

 
 /*= require merge_request_tabs */
+//= require breakpoints
 
 (function() {
   describe('MergeRequestTabs', function() {