Commit e18e38f1 authored by Filipa Lacerda's avatar Filipa Lacerda

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
parents d933731a 79ce045d
......@@ -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();
......
......@@ -10,22 +10,32 @@
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;
.with-performance-bar & {
top: 127px;
}
}
a:hover {
......@@ -701,15 +711,14 @@
}
@include media-breakpoint-up(sm) {
top: 24px;
position: -webkit-sticky;
position: sticky;
top: $header-height;
background-color: $white-light;
z-index: 200;
&.diff-files-changed-merge-request {
position: sticky;
top: 90px;
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%;
......
......@@ -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;
}
......
......@@ -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
......
......@@ -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 }
- 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}"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment