fixed jumping when bar gets stuck
added specs to sticky util file added `No files found.` text when results are empty
This commit is contained in:
parent
b507682d6e
commit
30777178e3
5 changed files with 78 additions and 14 deletions
|
@ -114,7 +114,7 @@ GitLabDropdownFilter = (function() {
|
|||
} else {
|
||||
elements = this.options.elements();
|
||||
if (search_text) {
|
||||
return elements.each(function() {
|
||||
elements.each(function() {
|
||||
var $el, matches;
|
||||
$el = $(this);
|
||||
matches = fuzzaldrinPlus.match($el.text().trim(), search_text);
|
||||
|
@ -127,8 +127,10 @@ GitLabDropdownFilter = (function() {
|
|||
}
|
||||
});
|
||||
} else {
|
||||
return elements.show().removeClass('option-hidden');
|
||||
elements.show().removeClass('option-hidden');
|
||||
}
|
||||
|
||||
elements.parent().find('.dropdown-menu-empty-link').toggleClass('hidden', elements.is(':visible'));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export const isSticky = (el, stickyTop) => {
|
||||
const top = el.getBoundingClientRect().top;
|
||||
export const isSticky = (el, scrollY, stickyTop) => {
|
||||
const top = el.offsetTop - scrollY;
|
||||
|
||||
if (top === stickyTop) {
|
||||
el.classList.add('is-stuck');
|
||||
|
@ -15,7 +15,7 @@ export default (el) => {
|
|||
|
||||
const stickyTop = parseInt(computedStyle.top, 10);
|
||||
|
||||
document.addEventListener('scroll', () => isSticky(el, stickyTop), {
|
||||
document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop), {
|
||||
passive: true,
|
||||
});
|
||||
};
|
||||
|
|
|
@ -562,12 +562,18 @@
|
|||
.diff-files-changed {
|
||||
.commit-stat-summary {
|
||||
z-index: -1;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-left: -$gl-padding;
|
||||
padding-left: $gl-padding;
|
||||
background-color: $white-light;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
top: 84px;
|
||||
background-color: $white-light;
|
||||
z-index: 190;
|
||||
|
||||
|
@ -575,7 +581,7 @@
|
|||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.diff-stats-additions-deletions-collapsed {
|
||||
&:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -583,18 +589,15 @@
|
|||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
transform: translateY(16px);
|
||||
|
||||
.diff-stats-additions-deletions-expanded,
|
||||
.inline-parallel-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.diff-stats-additions-deletions-collapsed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ .files {
|
||||
margin-top: 16px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -604,6 +607,10 @@
|
|||
width: 450px;
|
||||
z-index: 150;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
left: $gl-padding;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
|
|
@ -5,12 +5,12 @@
|
|||
%button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown" } }<
|
||||
= pluralize(diff_files.size, "changed file")
|
||||
= icon("caret-down fw")
|
||||
%span.diff-stats-additions-deletions-expanded
|
||||
%span.diff-stats-additions-deletions-expanded#diff-stats
|
||||
with
|
||||
%strong.cgreen #{sum_added_lines} additions
|
||||
and
|
||||
%strong.cred #{sum_removed_lines} deletions
|
||||
.diff-stats-additions-deletions-collapsed.pull-right{ "aria-hidden": "true" }
|
||||
.diff-stats-additions-deletions-collapsed.pull-right{ "aria-hidden": "true", "aria-describedby": "diff-stats" }
|
||||
%strong.cgreen<
|
||||
+#{sum_added_lines}
|
||||
%strong.cred<
|
||||
|
@ -32,3 +32,6 @@
|
|||
+#{added_lines}
|
||||
%span.cred<
|
||||
\-#{removed_lines}
|
||||
%li.dropdown-menu-empty-link.hidden
|
||||
%a{ href: "#" }
|
||||
No files found.
|
||||
|
|
52
spec/javascripts/lib/utils/sticky_spec.js
Normal file
52
spec/javascripts/lib/utils/sticky_spec.js
Normal file
|
@ -0,0 +1,52 @@
|
|||
import { isSticky } from '~/lib/utils/sticky';
|
||||
|
||||
describe('sticky', () => {
|
||||
const el = {
|
||||
offsetTop: 0,
|
||||
classList: {},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
el.offsetTop = 0;
|
||||
el.classList.add = jasmine.createSpy('spy');
|
||||
el.classList.remove = jasmine.createSpy('spy');
|
||||
});
|
||||
|
||||
describe('classList.remove', () => {
|
||||
it('does not call classList.remove when stuck', () => {
|
||||
isSticky(el, 0, 0);
|
||||
|
||||
expect(
|
||||
el.classList.remove,
|
||||
).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls classList.remove when not stuck', () => {
|
||||
el.offsetTop = 10;
|
||||
isSticky(el, 0, 0);
|
||||
|
||||
expect(
|
||||
el.classList.remove,
|
||||
).toHaveBeenCalledWith('is-stuck');
|
||||
});
|
||||
});
|
||||
|
||||
describe('classList.add', () => {
|
||||
it('calls classList.add when stuck', () => {
|
||||
isSticky(el, 0, 0);
|
||||
|
||||
expect(
|
||||
el.classList.add,
|
||||
).toHaveBeenCalledWith('is-stuck');
|
||||
});
|
||||
|
||||
it('does not call classList.add when not stuck', () => {
|
||||
el.offsetTop = 10;
|
||||
isSticky(el, 0, 0);
|
||||
|
||||
expect(
|
||||
el.classList.add,
|
||||
).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue