Commit d993f4b1 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'mr-sticky-headers' into 'master'

Made diff file headers sticky

Closes #48816

See merge request gitlab-org/gitlab-ce!23249
parents 875a45a6 ce91c326
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import { polyfillSticky } from '~/lib/utils/sticky';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue';
...@@ -116,6 +117,9 @@ export default { ...@@ -116,6 +117,9 @@ export default {
return `\`${this.diffFile.file_path}\``; return `\`${this.diffFile.file_path}\``;
}, },
}, },
mounted() {
polyfillSticky(this.$refs.header);
},
methods: { methods: {
...mapActions('diffs', ['toggleFileDiscussions']), ...mapActions('diffs', ['toggleFileDiscussions']),
handleToggleFile(e, checkTarget) { handleToggleFile(e, checkTarget) {
......
...@@ -6,6 +6,28 @@ ...@@ -6,6 +6,28 @@
.file-title-flex-parent { .file-title-flex-parent {
cursor: pointer; 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 { a:hover {
text-decoration: none; text-decoration: none;
} }
......
---
title: Make diff file headers sticky
merge_request:
author:
type: changed
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