Merge branch 'diff-header-styling-fixes' into 'master'

Fixed UI bugs with sticky diff header

Closes #54503

See merge request gitlab-org/gitlab-ce!23374

app/assets/javascripts/pages/projects/commit/show/index.js

@@ -11,6 +11,8 @@ import initDiffNotes from '~/diff_notes/diff_notes_bundle';
 import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 
 document.addEventListener('DOMContentLoaded', () => {
+  const hasPerfBar = document.querySelector('.with-performance-bar');
+  const performanceHeight = hasPerfBar ? 35 : 0;
   new Diff();
   new ZenMode();
   new ShortcutsNavigation();
@@ -18,8 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
     container: '.js-commit-pipeline-graph',
   }).bindEvents();
   initNotes();
-  const stickyBarPaddingTop = 16;
-  initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop);
+  initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
   $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
   fetchCommitMergeRequests();
   initDiffNotes();

app/assets/stylesheets/pages/diff.scss

@@ -10,23 +10,33 @@
       position: -webkit-sticky;
       position: sticky;
       top: 92px;
+      margin-left: -1px;
+      border-left: 1px solid $border-color;
       z-index: 102;
 
+      &.is-commit {
+        top: $header-height + 36px;
+
+        .with-performance-bar & {
+          top: $header-height + 36px + $performance-bar-height;
+        }
+      }
+
       &::before {
         content: '';
         position: absolute;
         top: -1px;
-        left: -10px;
+        left: -11px;
         width: 10px;
         height: calc(100% + 1px);
         background: $white-light;
-        border-right: 1px solid $border-color;
-      }
+        pointer-events: none;
       }
 
       .with-performance-bar & {
         top: 127px;
       }
+    }
 
     a:hover {
       text-decoration: none;
@@ -701,15 +711,14 @@
   }
 
   @include media-breakpoint-up(sm) {
-    top: 24px;
-    background-color: $white-light;
-
-    &.diff-files-changed-merge-request {
+    position: -webkit-sticky;
     position: sticky;
-      top: 90px;
+    top: $header-height;
+    background-color: $white-light;
     z-index: 200;
-      margin: $gl-padding 0;
-      padding: 0;
+
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height;
     }
 
     &.is-stuck {
@@ -734,14 +743,6 @@
   }
 }
 
-@include media-breakpoint-up(sm) {
-  .with-performance-bar {
-    .diff-files-changed.diff-files-changed-merge-request {
-      top: 76px + $performance-bar-height;
-    }
-  }
-}
-
 .diff-file-changes {
   max-width: 560px;
   width: 100%;

app/assets/stylesheets/pages/notes.scss

@@ -393,6 +393,14 @@ $note-form-margin-left: 72px;
     border-top: 1px solid $border-color;
     border-radius: 0;
 
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      top: 91px;
+
+      .with-performance-bar & {
+        top: 126px;
+      }
+    }
+
     &:hover {
       background-color: $gray-light;
     }

app/views/projects/commit/show.html.haml

@@ -13,7 +13,7 @@
     = render "ci_menu"
   - else
     .block-connector
-  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
+  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, is_commit: true
 
   .limited-width-notes
     = render "shared/notes/notes_with_form", :autocomplete => true

app/views/projects/diffs/_diffs.html.haml

@@ -2,9 +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)
+- is_commit = local_assigns.fetch(:is_commit, false)
 
-.content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed{ class: ("diff-files-changed-merge-request" if merge_request) }
+.content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
   .files-changed-inner
     .inline-parallel-buttons.d-none.d-sm-none.d-md-block
       - if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? }
@@ -25,4 +25,4 @@
   = render 'projects/diffs/warning', diff_files: diffs
 
 .files{ data: { can_create_note: can_create_note } }
-  = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment }
+  = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, is_commit: is_commit }

app/views/projects/diffs/_file.html.haml

 - environment = local_assigns.fetch(:environment, nil)
+- is_commit = local_assigns.fetch(:is_commit, false)
 - file_hash = hexdigest(diff_file.file_path)
 - image_diff = diff_file.rich_viewer && diff_file.rich_viewer.partial_name == 'image'
 - image_replaced = diff_file.old_content_sha && diff_file.old_content_sha != diff_file.content_sha
 
 .diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_file.content_sha) }
-  .js-file-title.file-title-flex-parent
+  .js-file-title.file-title-flex-parent{ class: is_commit ? "is-commit" : "" }
     .file-header-content
       = render "projects/diffs/file_header", diff_file: diff_file, url: "##{file_hash}"