Fixed UI bugs with sticky diff header
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54503
This commit is contained in:
parent
ea8f0f3bcc
commit
79ce045dc4
6 changed files with 38 additions and 27 deletions
|
@ -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 }
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
- 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}"
|
||||
|
||||
|
|
Loading…
Reference in a new issue