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:
Phil Hughes 2017-07-28 11:54:51 +01:00
parent b507682d6e
commit 30777178e3
No known key found for this signature in database
GPG key ID: DB8CE4B3A3EE91AB
5 changed files with 78 additions and 14 deletions

View file

@ -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'));
}
};

View file

@ -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,
});
};

View file

@ -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;

View file

@ -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.

View 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();
});
});
});