made the changed files holder sticky
This commit is contained in:
parent
655510ec9a
commit
b507682d6e
|
@ -0,0 +1,21 @@
|
|||
export const isSticky = (el, stickyTop) => {
|
||||
const top = el.getBoundingClientRect().top;
|
||||
|
||||
if (top === stickyTop) {
|
||||
el.classList.add('is-stuck');
|
||||
} else {
|
||||
el.classList.remove('is-stuck');
|
||||
}
|
||||
};
|
||||
|
||||
export default (el) => {
|
||||
const computedStyle = window.getComputedStyle(el);
|
||||
|
||||
if (!/sticky/.test(computedStyle.position)) return;
|
||||
|
||||
const stickyTop = parseInt(computedStyle.top, 10);
|
||||
|
||||
document.addEventListener('scroll', () => isSticky(el, stickyTop), {
|
||||
passive: true,
|
||||
});
|
||||
};
|
|
@ -7,6 +7,7 @@ import Cookies from 'js-cookie';
|
|||
import './breakpoints';
|
||||
import './flash';
|
||||
import BlobForkSuggestion from './blob/blob_fork_suggestion';
|
||||
import stickyMonitor from './lib/utils/sticky';
|
||||
|
||||
/* eslint-disable max-len */
|
||||
// MergeRequestTabs
|
||||
|
@ -268,6 +269,8 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
|
|||
|
||||
this.initChangesDropdown();
|
||||
|
||||
stickyMonitor(document.querySelector('.js-diff-files-changed'));
|
||||
|
||||
if (typeof gl.diffNotesCompileComponents !== 'undefined') {
|
||||
gl.diffNotesCompileComponents();
|
||||
}
|
||||
|
|
|
@ -559,6 +559,47 @@
|
|||
}
|
||||
}
|
||||
|
||||
.diff-files-changed {
|
||||
.commit-stat-summary {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
background-color: $white-light;
|
||||
z-index: 190;
|
||||
|
||||
+ .files {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.diff-stats-additions-deletions-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-stuck {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
.diff-stats-additions-deletions-expanded,
|
||||
.inline-parallel-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.diff-stats-additions-deletions-collapsed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ .files {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diff-file-changes {
|
||||
width: 450px;
|
||||
z-index: 150;
|
||||
|
|
|
@ -1,12 +1,20 @@
|
|||
- sum_added_lines = diff_files.sum(&:added_lines)
|
||||
- sum_removed_lines = diff_files.sum(&:removed_lines)
|
||||
.commit-stat-summary.dropdown
|
||||
Showing
|
||||
%button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown" } }<
|
||||
= pluralize(diff_files.size, "changed file")
|
||||
= icon("caret-down fw")
|
||||
with
|
||||
%strong.cgreen #{diff_files.sum(&:added_lines)} additions
|
||||
and
|
||||
%strong.cred #{diff_files.sum(&:removed_lines)} deletions
|
||||
%span.diff-stats-additions-deletions-expanded
|
||||
with
|
||||
%strong.cgreen #{sum_added_lines} additions
|
||||
and
|
||||
%strong.cred #{sum_removed_lines} deletions
|
||||
.diff-stats-additions-deletions-collapsed.pull-right{ "aria-hidden": "true" }
|
||||
%strong.cgreen<
|
||||
+#{sum_added_lines}
|
||||
%strong.cred<
|
||||
\-#{sum_removed_lines}
|
||||
.dropdown-menu.diff-file-changes
|
||||
= dropdown_filter("Search file")
|
||||
.dropdown-content
|
||||
|
|
Loading…
Reference in New Issue