Commit af062cdf authored by Alexander Turinske's avatar Alexander Turinske Committed by Nicolò Maria Mezzopera

Pin selection summary/list header to the page top

- create class that sets the header immediately below the header
  and performance bar and updates the height depending on if
  the selection summary is visible or not
parent a30e935f
......@@ -23,7 +23,7 @@ export default {
<section
v-if="hasStickySlot"
data-testid="sticky-section"
class="position-sticky gl-z-index-2 security_dashboard_filters"
class="position-sticky gl-z-index-2 security-dashboard-filters"
>
<slot name="sticky"></slot>
</section>
......
......@@ -70,10 +70,13 @@ export default {
return this.shouldShowSelection && Boolean(this.numOfSelectedVulnerabilities);
},
checkboxClass() {
return this.shouldShowSelection ? '' : 'd-none';
return this.shouldShowSelection ? '' : 'gl-display-none';
},
theadClass() {
return this.shouldShowSelectionSummary ? 'below-selection-summary' : '';
},
fields() {
const commonThClass = ['table-th-transparent', 'original-gl-th'].join(' ');
const commonThClass = ['table-th-transparent', 'original-gl-th', 'gl-bg-white!'].join(' ');
return [
{
key: 'checkbox',
......@@ -154,7 +157,7 @@ export default {
</script>
<template>
<div>
<div class="vulnerability-list">
<selection-summary
v-if="shouldShowSelectionSummary"
:selected-vulnerabilities="Object.values(selectedVulnerabilities)"
......@@ -165,6 +168,7 @@ export default {
:busy="isLoading"
:fields="fields"
:items="vulnerabilities"
:thead-class="theadClass"
stacked="sm"
show-empty
responsive
......
$security-filter-height: 90px;
$selection-summary-height: 68px;
@mixin sticky-top-positioning($extra: 0) {
top: $header-height + $extra;
.with-performance-bar & {
top: $header-height + $performance-bar-height + $extra;
}
}
.vulnerabilities-row {
&.dismissed .table-mobile-content:not(.action-buttons) {
opacity: 0.5;
......@@ -23,10 +34,26 @@
}
}
.security_dashboard_filters {
top: $header-height;
.security-dashboard-filters {
@include sticky-top-positioning();
}
.with-performance-bar & {
top: $header-height + $performance-bar-height;
// Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
// the property is assigned to the th element as a workaround
.vulnerability-list {
.card,
thead th {
position: -webkit-sticky;
position: sticky;
z-index: 1;
@include sticky-top-positioning($security-filter-height);
}
thead th {
box-shadow: 0 1px $gray-100;
}
thead.below-selection-summary th {
@include sticky-top-positioning($security-filter-height + $selection-summary-height);
}
}
---
title: Pin selection summary/list header to the page top
merge_request: 33875
author:
type: added
......@@ -74,8 +74,8 @@ describe('Vulnerability list component', () => {
});
it('should not show the checkboxes if shouldShowSelection is passed in', () => {
expect(findCheckAllCheckboxCell().classes()).toContain('d-none');
expect(findFirstCheckboxCell().classes()).toContain('d-none');
expect(findCheckAllCheckboxCell().classes()).toContain('gl-display-none');
expect(findFirstCheckboxCell().classes()).toContain('gl-display-none');
});
});
......
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