Skip to content

Commit 52f0047

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #5475 from IgniteUI/tzhelev/esf-dropdown-density
Add display density support for dropdowns in ESF - 8.1.x
2 parents c95279a + b2e5a4d commit 52f0047

File tree

5 files changed

+175
-1
lines changed

5 files changed

+175
-1
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
#dropdownConditions
33
[maxHeight]="'200px'"
44
[width]="getInputWidth()"
5+
[displayDensity]="displayDensity"
56
(onSelection)="onConditionsChanged($event)">
67
<igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
78
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
#dropdownConditions
33
[maxHeight]="'200px'"
44
[width]="getInputWidth()"
5+
[displayDensity]="displayDensity"
56
(onSelection)="onConditionsChanged($event)">
67
<igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
78
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ <h4>{{ column.header || column.field }}</h4>
131131
</footer>
132132
</article>
133133

134-
<igx-drop-down [maxHeight]="'397px'" #subMenu (onSelection)="onSubMenuSelection($event)" (onClosed)="onSubMenuClosed()">
134+
<igx-drop-down [maxHeight]="'397px'" [displayDensity]="grid.displayDensity" #subMenu (onSelection)="onSubMenuSelection($event)" (onClosed)="onSubMenuClosed()">
135135
<div>
136136
<igx-drop-down-item
137137
*ngFor="let condition of conditions"

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

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4277,6 +4277,149 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
42774277
fix.detectChanges();
42784278
}));
42794279

4280+
it('display density is properly applied on the excel style cascade dropdown', fakeAsync(() => {
4281+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
4282+
4283+
// Open excel style cascade operators dropdown and verify its display density
4284+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4285+
fix.detectChanges();
4286+
GridFunctions.clickExcelFilterCascadeButton(fix);
4287+
fix.detectChanges();
4288+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.comfortable);
4289+
GridFunctions.clickCancelExcelStyleFiltering(fix);
4290+
fix.detectChanges();
4291+
4292+
grid.displayDensity = DisplayDensity.cosy;
4293+
tick(200);
4294+
fix.detectChanges();
4295+
4296+
// Open excel style cascade operators dropdown and verify its display density
4297+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4298+
fix.detectChanges();
4299+
GridFunctions.clickExcelFilterCascadeButton(fix);
4300+
fix.detectChanges();
4301+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.cosy);
4302+
GridFunctions.clickCancelExcelStyleFiltering(fix);
4303+
fix.detectChanges();
4304+
4305+
grid.displayDensity = DisplayDensity.compact;
4306+
tick(200);
4307+
fix.detectChanges();
4308+
4309+
// Open excel style cascade operators dropdown and verify its display density
4310+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4311+
fix.detectChanges();
4312+
GridFunctions.clickExcelFilterCascadeButton(fix);
4313+
fix.detectChanges();
4314+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.compact);
4315+
GridFunctions.clickCancelExcelStyleFiltering(fix);
4316+
fix.detectChanges();
4317+
}));
4318+
4319+
it('display density is properly applied on the excel custom dialog\'s default expression dropdown',
4320+
fakeAsync(() => {
4321+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
4322+
4323+
// Open excel style custom filtering dialog.
4324+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4325+
fix.detectChanges();
4326+
GridFunctions.clickExcelFilterCascadeButton(fix);
4327+
fix.detectChanges();
4328+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4329+
tick(200);
4330+
fix.detectChanges();
4331+
4332+
// Click the left input to open the operators dropdown and verify its display density.
4333+
let expr = GridFunctions.getExcelCustomFilteringDefaultExpressions(fix)[0];
4334+
let inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4335+
let conditionsInput = inputs[0];
4336+
conditionsInput.click();
4337+
tick(100);
4338+
fix.detectChanges();
4339+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.comfortable);
4340+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4341+
tick(100);
4342+
fix.detectChanges();
4343+
4344+
// Change display density
4345+
grid.displayDensity = DisplayDensity.cosy;
4346+
tick(200);
4347+
fix.detectChanges();
4348+
4349+
// Open excel style custom filtering dialog.
4350+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4351+
fix.detectChanges();
4352+
GridFunctions.clickExcelFilterCascadeButton(fix);
4353+
fix.detectChanges();
4354+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4355+
tick(200);
4356+
fix.detectChanges();
4357+
4358+
// Click the left input to open the operators dropdown and verify its display density.
4359+
expr = GridFunctions.getExcelCustomFilteringDefaultExpressions(fix)[0];
4360+
inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4361+
conditionsInput = inputs[0];
4362+
conditionsInput.click();
4363+
tick(100);
4364+
fix.detectChanges();
4365+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.cosy);
4366+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4367+
tick(100);
4368+
fix.detectChanges();
4369+
}));
4370+
4371+
it('display density is properly applied on the excel custom dialog\'s date expression dropdown',
4372+
fakeAsync(() => {
4373+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
4374+
4375+
// Open excel style custom filtering dialog.
4376+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
4377+
fix.detectChanges();
4378+
GridFunctions.clickExcelFilterCascadeButton(fix);
4379+
fix.detectChanges();
4380+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4381+
tick(200);
4382+
fix.detectChanges();
4383+
4384+
// Click the left input to open the operators dropdown and verify its display density.
4385+
let expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4386+
let inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4387+
let conditionsInput = inputs[0];
4388+
conditionsInput.click();
4389+
tick(100);
4390+
fix.detectChanges();
4391+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.comfortable);
4392+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4393+
tick(100);
4394+
fix.detectChanges();
4395+
4396+
// Change display density
4397+
grid.displayDensity = DisplayDensity.cosy;
4398+
tick(200);
4399+
fix.detectChanges();
4400+
4401+
// Open excel style custom filtering dialog.
4402+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
4403+
fix.detectChanges();
4404+
GridFunctions.clickExcelFilterCascadeButton(fix);
4405+
fix.detectChanges();
4406+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4407+
tick(200);
4408+
fix.detectChanges();
4409+
4410+
// Click the left input to open the operators dropdown and verify its display density.
4411+
expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4412+
inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4413+
conditionsInput = inputs[0];
4414+
conditionsInput.click();
4415+
tick(100);
4416+
fix.detectChanges();
4417+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.cosy);
4418+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4419+
tick(100);
4420+
fix.detectChanges();
4421+
}));
4422+
42804423
it('should scroll items in search list correctly', (async () => {
42814424
// Add additional rows as prerequisite for the test
42824425
for (let index = 0; index < 30; index++) {
@@ -5638,6 +5781,17 @@ function verifyExcelCustomFilterDisplayDensity(gridNativeElement: HTMLElement, e
56385781
});
56395782
}
56405783

5784+
function verifyGridSubmenuDisplayDensity(gridNativeElement: HTMLElement, expectedDisplayDensity: DisplayDensity) {
5785+
const outlet = gridNativeElement.querySelector('.igx-grid__outlet');
5786+
const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list'));
5787+
const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden'));
5788+
const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item');
5789+
dropdownItems.forEach((dropdownItem) => {
5790+
expect(dropdownItem.classList.contains(getDropdownItemDensityClass(expectedDisplayDensity))).toBe(true,
5791+
'incorrect dropdown item density');
5792+
});
5793+
}
5794+
56415795
function getListDensityClass(displayDensity: DisplayDensity) {
56425796
let densityClass;
56435797
switch (displayDensity) {
@@ -5672,6 +5826,16 @@ function getButtonDensityClass(displayDensity: DisplayDensity) {
56725826
return densityClass;
56735827
}
56745828

5829+
function getDropdownItemDensityClass(displayDensity: DisplayDensity) {
5830+
let densityClass;
5831+
switch (displayDensity) {
5832+
case DisplayDensity.compact: densityClass = 'igx-drop-down__item--compact'; break;
5833+
case DisplayDensity.cosy: densityClass = 'igx-drop-down__item--cosy'; break;
5834+
default: densityClass = 'igx-drop-down__item'; break;
5835+
}
5836+
return densityClass;
5837+
}
5838+
56755839
function verifyFilteringExpression(operand: IFilteringExpression, fieldName: string, conditionName: string, searchVal: any) {
56765840
expect(operand.fieldName).toBe(fieldName);
56775841
expect(operand.condition.name).toBe(conditionName);

‎projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,14 @@ export class GridFunctions {
511511
applyButton.click();
512512
}
513513

514+
public static clickCancelExcelStyleCustomFiltering(fix: ComponentFixture<any>) {
515+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
516+
const customFilterMenu = gridNativeElement.querySelector('.igx-excel-filter__secondary');
517+
const flatButtons = Array.from(customFilterMenu.querySelectorAll('.igx-button--flat'));
518+
const cancelButton: any = flatButtons.find((rb: any) => rb.innerText === 'cancel');
519+
cancelButton.click();
520+
}
521+
514522
public static clickAddFilterExcelStyleCustomFiltering(fix: ComponentFixture<any>) {
515523
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
516524
const customFilterMenu = gridNativeElement.querySelector('.igx-excel-filter__secondary');

0 commit comments

Comments
 (0)