Skip to content

Commit c02d244

Browse files
PlamenaMitevaPlamenaMiteva
authored
Merge branch '9.0.x' into PMiteva/fix-row-drag-tests-9.0
2 parents dd22e29 + a3ee13a commit c02d244

17 files changed

+1470
-1235
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,18 @@
1616

1717
%grid-excel-filter {
1818
display: block;
19-
}
20-
21-
%grid-excel-filter--inline {
2219
width: 100%;
20+
height: 100%;
2321
flex-grow: 1;
22+
box-shadow: igx-elevation($elevations, 12);
2423
overflow: auto;
24+
}
25+
26+
%grid-excel-filter--inline {
27+
box-shadow: none;
2528

2629
%grid-excel-menu {
27-
display: flex;
28-
flex-direction: column;
2930
width: 100%;
30-
height: 100%;
31-
box-shadow: none;
32-
33-
%grid-excel-main {
34-
display: flex;
35-
flex-direction: column;
36-
flex-grow: 1;
37-
overflow: hidden;
38-
}
39-
40-
%grid-excel-main igx-list {
41-
flex-grow: 1;
42-
overflow: hidden;
43-
}
4431
}
4532
}
4633

@@ -67,10 +54,12 @@
6754
}
6855

6956
%grid-excel-menu {
57+
display: flex;
58+
flex-direction: column;
59+
height: 100%;
7060
width: 320px;
7161
min-width: 320px;
7262
background: --var($theme, 'filtering-row-background');
73-
box-shadow: igx-elevation($elevations, 12);
7463
border-radius: 4px;
7564

7665
@include igx-button-group(igx-button-group-theme(
@@ -227,10 +216,15 @@
227216
}
228217

229218
%grid-excel-main {
230-
display: block;
219+
display: flex;
220+
flex-direction: column;
221+
flex-grow: 1;
222+
overflow: hidden;
231223
padding: 0 rem(16px);
232224

233225
igx-list {
226+
flex-grow: 1;
227+
overflow: hidden;
234228
margin: rem(8px) -#{rem(16px)} 0;
235229
border: 0;
236230
border-top: 1px dashed igx-color($palette, 'grays', 300);

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,11 @@ $_dark-fluent-toast: extend($_fluent-toast);
2323
/// @type {Map}
2424
/// @requires {function} extend
2525
/// @requires $_bootstrap-toast
26-
$_dark-bootstrap-toast: extend($_bootstrap-toast);
26+
$_dark-bootstrap-toast: extend(
27+
$_bootstrap-toast, (
28+
text-color: (
29+
igx-contrast-color: ('grays', 600)
30+
)
31+
)
32+
);
2733

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-position-strategy.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy';
2+
import { ConnectedFit } from '../../../services/overlay/utilities';
3+
4+
/** @hidden */
5+
export class ExcelStylePositionStrategy extends AutoPositionStrategy {
6+
protected shouldFitInViewPort(connectedFit: ConnectedFit) {
7+
return true;
8+
}
9+
10+
protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit) {
11+
const heightOverflow = connectedFit.contentElementRect.height - connectedFit.viewPortRect.height;
12+
if (heightOverflow > 0) {
13+
element.style.width = 'auto';
14+
element.style.height = `${connectedFit.viewPortRect.height}px`;
15+
} else {
16+
element.style.height = `${Math.max(
17+
connectedFit.viewPortRect.height - connectedFit.targetRect.bottom - 1,
18+
connectedFit.contentElementRect.height)}px`;
19+
}
20+
21+
super.fitInViewport(element, connectedFit);
22+
}
23+
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</igx-icon>
2020
</igx-input-group>
2121

22-
<igx-list #list [displayDensity]="displayDensity" [style.height.px]="listSize" [isLoading]="isLoading">
22+
<igx-list #list [displayDensity]="displayDensity" [isLoading]="isLoading">
2323
<div [style.overflow]="'hidden'" [style.position]="'relative'">
2424
<igx-list-item
2525
*igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
1616
import { FilterListItem } from './grid.excel-style-filtering.component';
1717
import { IgxListComponent } from '../../../list';
1818

19-
const SEARCH_LIST_HEIGHT = 250;
20-
2119
@Directive({
2220
selector: '[igxExcelStyleLoading]'
2321
})
@@ -134,11 +132,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
134132
return itemSize;
135133
}
136134

137-
public get listSize() {
138-
return this.inline ? null : SEARCH_LIST_HEIGHT;
139-
}
140-
141135
public get containerSize() {
142-
return this.inline ? this.list.element.nativeElement.offsetHeight : SEARCH_LIST_HEIGHT;
136+
return this.list.element.nativeElement.offsetHeight;
143137
}
144138
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
'igx-excel-filter__menu--compact': grid.displayDensity === 'compact'
5353
}"
5454
[id]="overlayComponentId"
55-
(keydown)="onKeyDown($event)">
55+
(keydown)="onKeyDown($event)"
56+
[style.min-height]="minHeight"
57+
[style.max-height]="maxHeight">
5658

5759
<header class="igx-excel-filter__menu-header">
5860
<h4>{{ column.header || column.field }}</h4>
@@ -136,7 +138,7 @@ <h4>{{ column.header || column.field }}</h4>
136138
</footer>
137139
</article>
138140

139-
<igx-drop-down
141+
<igx-drop-down
140142
*ngIf="column"
141143
#subMenu
142144
[maxHeight]="'397px'"

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { takeUntil } from 'rxjs/operators';
3939
import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down';
4040
import { IgxColumnComponent } from '../../columns/column.component';
4141
import { IgxGridBaseDirective } from '../../grid-base.directive';
42+
import { DisplayDensity } from '../../../core/density';
4243

4344
/**
4445
*@hidden
@@ -202,6 +203,36 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
202203
scrollStrategy: new AbsoluteScrollStrategy()
203204
};
204205

206+
/**
207+
* @hidden @internal
208+
*/
209+
get minHeight() {
210+
if (!this.inline) {
211+
let minHeight = 600;
212+
switch (this.grid.displayDensity) {
213+
case DisplayDensity.cosy: minHeight = 465; break;
214+
case DisplayDensity.compact: minHeight = 330; break;
215+
default: break;
216+
}
217+
return `${minHeight}px`;
218+
}
219+
}
220+
221+
/**
222+
* @hidden @internal
223+
*/
224+
@HostBinding('style.max-height') get maxHeight() {
225+
if (!this.inline) {
226+
let maxHeight = 730;
227+
switch (this.grid.displayDensity) {
228+
case DisplayDensity.cosy: maxHeight = 565; break;
229+
case DisplayDensity.compact: maxHeight = 405; break;
230+
default: break;
231+
}
232+
return `${maxHeight}px`;
233+
}
234+
}
235+
205236
/**
206237
* @hidden @internal
207238
*/

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2630,7 +2630,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
26302630
const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
26312631
const checkbox: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
26322632

2633-
expect(checkbox.map(c => c.checked)).toEqual([false, false, false, false, false, false, false, false]);
2633+
expect(checkbox.map(c => c.checked)).toEqual([false, false, false, false, false, false, false ]);
26342634
}));
26352635

26362636
it('Should not select values in list if two values with Or operator are entered and contains operand.', fakeAsync(() => {
@@ -2672,8 +2672,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
26722672
const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
26732673
const checkbox: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
26742674

2675-
expect(checkbox.map(c => c.checked)).toEqual([true, false, false, true, false, false, true, false]);
2676-
expect(checkbox.map(c => c.indeterminate)).toEqual([true, false, false, false, false, false, false, false]);
2675+
expect(checkbox.map(c => c.checked)).toEqual([true, false, false, true, false, false, true]);
2676+
expect(checkbox.map(c => c.indeterminate)).toEqual([true, false, false, false, false, false, false]);
26772677
}));
26782678

26792679
it('Should change filter when changing And/Or operator.', fakeAsync(() => {
@@ -3370,15 +3370,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
33703370
fix.detectChanges();
33713371

33723372
// Verify scrollbar's scrollTop.
3373-
expect(scrollbar.scrollTop >= 610 && scrollbar.scrollTop <= 615).toBe(true,
3373+
expect(scrollbar.scrollTop >= 680 && scrollbar.scrollTop <= 690).toBe(true,
33743374
'search scrollbar has incorrect scrollTop');
33753375
// Verify display container height.
33763376
const displayContainer = searchComponent.querySelector('igx-display-container');
33773377
const displayContainerRect = displayContainer.getBoundingClientRect();
3378-
expect(displayContainerRect.height).toBe(288, 'incorrect search display container height');
3378+
expect(displayContainerRect.height).toBe(216, 'incorrect search display container height');
33793379
// Verify rendered list items count.
33803380
const listItems = displayContainer.querySelectorAll('igx-list-item');
3381-
expect(listItems.length).toBe(12, 'incorrect rendered list items count');
3381+
expect(listItems.length).toBe(9, 'incorrect rendered list items count');
33823382
}));
33833383

33843384
it('should correctly display all items in search list after filtering it', (async () => {
@@ -3650,8 +3650,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
36503650
fix.detectChanges();
36513651

36523652
verifyExcelStyleFilterAvailableOptions(fix,
3653-
['Select All', '(Blanks)', '0', '20', '100', '127', '254', '702'],
3654-
[true, true, true, true, true, true, true, true]);
3653+
['Select All', '(Blanks)', '0', '20', '100', '127', '254'],
3654+
[true, true, true, true, true, true, true]);
36553655

36563656
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
36573657
tick(100);

0 commit comments

Comments
 (0)