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'; ...@@ -11,6 +11,8 @@ import initDiffNotes from '~/diff_notes/diff_notes_bundle';
import { fetchCommitMergeRequests } from '~/commit_merge_requests'; import { fetchCommitMergeRequests } from '~/commit_merge_requests';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const hasPerfBar = document.querySelector('.with-performance-bar');
const performanceHeight = hasPerfBar ? 35 : 0;
new Diff(); new Diff();
new ZenMode(); new ZenMode();
new ShortcutsNavigation(); new ShortcutsNavigation();
...@@ -18,8 +20,7 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -18,8 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
container: '.js-commit-pipeline-graph', container: '.js-commit-pipeline-graph',
}).bindEvents(); }).bindEvents();
initNotes(); initNotes();
const stickyBarPaddingTop = 16; initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop);
$('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
fetchCommitMergeRequests(); fetchCommitMergeRequests();
initDiffNotes(); initDiffNotes();
......
...@@ -10,23 +10,33 @@ ...@@ -10,23 +10,33 @@
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 92px; top: 92px;
margin-left: -1px;
border-left: 1px solid $border-color;
z-index: 102; z-index: 102;
&.is-commit {
top: $header-height + 36px;
.with-performance-bar & {
top: $header-height + 36px + $performance-bar-height;
}
}
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -1px; top: -1px;
left: -10px; left: -11px;
width: 10px; width: 10px;
height: calc(100% + 1px); height: calc(100% + 1px);
background: $white-light; background: $white-light;
border-right: 1px solid $border-color; pointer-events: none;
}
} }
.with-performance-bar & { .with-performance-bar & {
top: 127px; top: 127px;
} }
}
a:hover { a:hover {
text-decoration: none; text-decoration: none;
...@@ -701,15 +711,14 @@ ...@@ -701,15 +711,14 @@
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
top: 24px; position: -webkit-sticky;
background-color: $white-light;
&.diff-files-changed-merge-request {
position: sticky; position: sticky;
top: 90px; top: $header-height;
background-color: $white-light;
z-index: 200; z-index: 200;
margin: $gl-padding 0;
padding: 0; .with-performance-bar & {
top: $header-height + $performance-bar-height;
} }
&.is-stuck { &.is-stuck {
...@@ -734,14 +743,6 @@ ...@@ -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 { .diff-file-changes {
max-width: 560px; max-width: 560px;
width: 100%; width: 100%;
......
...@@ -393,6 +393,14 @@ $note-form-margin-left: 72px; ...@@ -393,6 +393,14 @@ $note-form-margin-left: 72px;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
border-radius: 0; border-radius: 0;
@media (min-width: map-get($grid-breakpoints, md)) {
top: 91px;
.with-performance-bar & {
top: 126px;
}
}
&:hover { &:hover {
background-color: $gray-light; background-color: $gray-light;
} }
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
= render "ci_menu" = render "ci_menu"
- else - else
.block-connector .block-connector
= render "projects/diffs/diffs", diffs: @diffs, environment: @environment = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, is_commit: true
.limited-width-notes .limited-width-notes
= render "shared/notes/notes_with_form", :autocomplete => true = render "shared/notes/notes_with_form", :autocomplete => true
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
- show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true) - show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true)
- can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project) - can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project)
- diff_files = diffs.diff_files - 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 .files-changed-inner
.inline-parallel-buttons.d-none.d-sm-none.d-md-block .inline-parallel-buttons.d-none.d-sm-none.d-md-block
- if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? } - if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? }
...@@ -25,4 +25,4 @@ ...@@ -25,4 +25,4 @@
= render 'projects/diffs/warning', diff_files: diffs = render 'projects/diffs/warning', diff_files: diffs
.files{ data: { can_create_note: can_create_note } } .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) - environment = local_assigns.fetch(:environment, nil)
- is_commit = local_assigns.fetch(:is_commit, false)
- file_hash = hexdigest(diff_file.file_path) - file_hash = hexdigest(diff_file.file_path)
- image_diff = diff_file.rich_viewer && diff_file.rich_viewer.partial_name == 'image' - 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 - 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) } .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 .file-header-content
= render "projects/diffs/file_header", diff_file: diff_file, url: "##{file_hash}" = 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