diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-11-27 14:44:47 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-11-27 14:44:47 +0000 |
commit | e18e38f10fb80f40e3b706b583c4f10a1dd7aef7 (patch) | |
tree | 1a15ee2afbc73c76b84ba9800f5e111ca0de7488 | |
parent | d933731ae9db6b053be0c61029bc06d9c9dee67c (diff) | |
parent | 79ce045dc4726cadaefd860b2645c6696306b335 (diff) | |
download | gitlab-ce-e18e38f10fb80f40e3b706b583c4f10a1dd7aef7.tar.gz |
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
-rw-r--r-- | app/assets/javascripts/pages/projects/commit/show/index.js | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 41 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 8 | ||||
-rw-r--r-- | app/views/projects/commit/show.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/diffs/_diffs.html.haml | 6 | ||||
-rw-r--r-- | app/views/projects/diffs/_file.html.haml | 3 |
6 files changed, 38 insertions, 27 deletions
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js index f477424811d..6fc982967eb 100644 --- a/app/assets/javascripts/pages/projects/commit/show/index.js +++ b/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(); diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 715af4aa4ba..5405f20a760 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -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%; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 085ff27e6ef..4fda2964fd5 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/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; } diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml index 541ae905246..79e32949db9 100644 --- a/app/views/projects/commit/show.html.haml +++ b/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 diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml index 9de3c2db6e7..cc2d0d3b2d8 100644 --- a/app/views/projects/diffs/_diffs.html.haml +++ b/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 } diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml index 1f90acaabcc..5565ae1d98b 100644 --- a/app/views/projects/diffs/_file.html.haml +++ b/app/views/projects/diffs/_file.html.haml @@ -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}" |