fix(grid-quick-filtering): make filtering row respect grid's display density

Author: onlyexeption

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -536,6 +536,14 @@
         @extend %igx-grid__filtering-cell !optional;
     }
 
+    @include e(filtering-cell, $m: cosy) {
+        @extend %igx-grid__filtering-cell--cosy !optional;
+    }
+
+    @include e(filtering-cell, $m: compact) {
+        @extend %igx-grid__filtering-cell--compact !optional;
+    }
+
     @include e(filtering-cell, $m: 'selected') {
         @extend %igx-grid__filtering-cell !optional;
         @extend %igx-grid__filtering-cell--selected !optional;

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html

@@ -1,6 +1,6 @@
 <ng-template #emptyFilter>
     <igx-chips-area [attr.draggable]="false" class="igx-filtering-chips">
-        <igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" [displayDensity]="'cosy'" tabIndex="-1">
+        <igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" [displayDensity]="displayDensity" tabIndex="-1">
             <igx-icon [attr.draggable]="false" igxPrefix>filter_list</igx-icon>
             <span [attr.draggable]="false">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>
         </igx-chip>
@@ -13,7 +13,7 @@
             <igx-chip *ngIf="isChipVisible(index)"
                 [removable]="true"
                 tabIndex="-1"
-                [displayDensity]="'cosy'"
+                [displayDensity]="displayDensity"
                 (click)="onChipClicked(item.expression)"
                 (onRemove)="onChipRemoved($event, item)">
                 <igx-icon igxPrefix
@@ -34,7 +34,7 @@
 </ng-template>
 
 <ng-template #complexFilter>
-    <igx-chip #complexChip [removable]="true" [displayDensity]="'cosy'" (onRemove)="clearFiltering()" tabIndex="-1">
+    <igx-chip #complexChip [removable]="true" [displayDensity]="displayDensity" (onRemove)="clearFiltering()" tabIndex="-1">
         <igx-icon igxPrefix>filter_list</igx-icon>
         <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>
     </igx-chip>

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts

@@ -15,6 +15,7 @@ import { IgxColumnComponent } from '../../columns/column.component';
 import { IFilteringExpression } from '../../../data-operations/filtering-expression.interface';
 import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../../chips/public_api';
 import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service';
+import { DisplayDensity } from '../../../core/displayDensity';
 
 /**
  * @hidden
@@ -63,7 +64,17 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
             return 'igx-grid__filtering-cell--selected';
         }
 
-        return 'igx-grid__filtering-cell';
+        let classes = 'igx-grid__filtering-cell';
+
+        switch (this.column.grid.displayDensity) {
+            case DisplayDensity.compact:
+                classes = classes + ' igx-grid__filtering-cell--compact';
+                break;
+            case DisplayDensity.cosy:
+                classes = classes + ' igx-grid__filtering-cell--cosy';
+                break;
+        }
+        return classes;
     }
 
     constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService) {
@@ -98,6 +109,10 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
         this.updateVisibleFilters();
     }
 
+    get displayDensity(): string {
+        return this.column.grid.displayDensity === DisplayDensity.comfortable ? DisplayDensity.cosy : this.column.grid.displayDensity;
+    }
+
     get template(): TemplateRef<any> {
         if (!this.column.filterable) {
             return null;

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -11,7 +11,7 @@
 </igx-drop-down>
 
 <ng-template #defaultFilterUI>
-    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" (focusout)="onInputGroupFocusout()">
+    <igx-input-group #inputGroup type="box" [displayDensity]="displayDensity" (focusout)="onInputGroupFocusout()">
         <igx-prefix #inputGroupPrefix
                     (click)="inputGroupPrefixClick($event)"
                     (keydown)="onPrefixKeyDown($event)"
@@ -51,7 +51,7 @@
         (onSelection)="onDateSelected($event)"
         (onClosed)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog">
-            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" (focusout)="onInputGroupFocusout()">
+            <igx-input-group #inputGroup type="box" [displayDensity]="displayDensity" (focusout)="onInputGroupFocusout()">
                 <igx-prefix #inputGroupPrefix
                             tabindex="0"
                             (click)="inputGroupPrefixClick($event)"
@@ -94,7 +94,7 @@
                     (onRemove)="onChipRemoved($event, item)"
                     [selectable]="false"
                     [selected]="item.isSelected"
-                    [displayDensity]="'cosy'"
+                    [displayDensity]="displayDensity"
                     [removable]="true">
                     <igx-icon
                         igxPrefix
@@ -124,11 +124,11 @@
 </button>
 
 <div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
-    <button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
+    <button [displayDensity]="column.grid.displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
         <igx-icon>refresh</igx-icon>
         {{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
     </button>
-    <button #closeButton [igxButton]="isNarrowWidth ? 'icon' : 'flat'"  igxRipple (click)="close()">
+    <button #closeButton [displayDensity]="column.grid.displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'"  igxRipple (click)="close()">
         <igx-icon>close</igx-icon>
         {{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}
     </button>

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -26,6 +26,7 @@ import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.comp
 import { IgxFilteringService } from '../grid-filtering.service';
 import { KEYS, isEdge, isIE } from '../../../core/utils';
 import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll';
+import { DisplayDensity } from '../../../core/displayDensity';
 
 /**
  * @hidden
@@ -108,6 +109,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this.filter();
     }
 
+    public get displayDensity() {
+        return this.column.grid.displayDensity === DisplayDensity.comfortable ? DisplayDensity.cosy : this.column.grid.displayDensity;
+    }
+
     @ViewChild('defaultFilterUI', { read: TemplateRef, static: true })
     protected defaultFilterUI: TemplateRef<any>;
 
@@ -141,8 +146,20 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     @ViewChild('closeButton', { static: true })
     public closeButton: ElementRef;
 
-    @HostBinding('class.igx-grid__filtering-row')
-    public cssClass = 'igx-grid__filtering-row';
+    @HostBinding('class')
+    get styleClasses(): string {
+        let classes = 'igx-grid__filtering-row';
+
+        switch (this.column.grid.displayDensity) {
+            case DisplayDensity.compact:
+                classes = classes + ' igx-grid__filtering-row--compact';
+                break;
+            case DisplayDensity.cosy:
+                classes = classes + ' igx-grid__filtering-row--cosy';
+                break;
+        }
+        return classes;
+    }
 
     constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) { }