diff options
| author | Phil Hughes <me@iamphill.com> | 2018-11-20 18:47:59 +0000 |
|---|---|---|
| committer | Phil Hughes <me@iamphill.com> | 2018-11-22 12:24:45 +0000 |
| commit | ce91c326f912eba5093aac30e57dbba96cb862ac (patch) | |
| tree | 472bf4e1abdac46d61e78b1ca311307cf2639a1a | |
| parent | 0e1822801a88461d0ae86ff031bfc4231ec2f02e (diff) | |
| download | gitlab-ce-ce91c326f912eba5093aac30e57dbba96cb862ac.tar.gz | |
Made diff file headers sticky
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/48816
| -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 |