diff options
| -rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 22 | ||||
| -rw-r--r-- | changelogs/unreleased/mr-sticky-headers.yml | 5 |
3 files changed, 31 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 60b33e771b4..f75a01b023b 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -1,6 +1,7 @@ <script> import _ from 'underscore'; import { mapActions, mapGetters } from 'vuex'; +import { polyfillSticky } from '~/lib/utils/sticky'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; @@ -116,6 +117,9 @@ export default { return `\`${this.diffFile.file_path}\``; }, }, + mounted() { + polyfillSticky(this.$refs.header); + }, methods: { ...mapActions('diffs', ['toggleFileDiscussions']), handleToggleFile(e, checkTarget) { diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 0163c795074..715af4aa4ba 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -6,6 +6,28 @@ .file-title-flex-parent { cursor: pointer; + @media (min-width: map-get($grid-breakpoints, md)) { + position: -webkit-sticky; + position: sticky; + top: 92px; + z-index: 102; + + &::before { + content: ''; + position: absolute; + top: -1px; + left: -10px; + width: 10px; + height: calc(100% + 1px); + background: $white-light; + border-right: 1px solid $border-color; + } + } + + .with-performance-bar & { + top: 127px; + } + a:hover { text-decoration: none; } diff --git a/changelogs/unreleased/mr-sticky-headers.yml b/changelogs/unreleased/mr-sticky-headers.yml new file mode 100644 index 00000000000..c20829bc2d7 --- /dev/null +++ b/changelogs/unreleased/mr-sticky-headers.yml @@ -0,0 +1,5 @@ +--- +title: Make diff file headers sticky +merge_request: +author: +type: changed |