Merge pull request #8110 from IgniteUI/ibarakov/fix-7090-master

DiyanDimitrov · web-flow · commit d5d2d777e7af · 2020-09-28T15:16:10.000+03:00
Make filtering row respect grid's display density
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -552,6 +552,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;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -2443,6 +2443,7 @@
         }
 
         igx-input-group {
+            --igx-input-group-variant: fluent;
             width: 100%;
             max-width: rem(200px);
             min-width: rem(140px);
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html b/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>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/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
@@ -59,11 +60,19 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
 
     @HostBinding('class')
     get styleClasses(): string {
-        if (this.column && this.column.selected) {
-            return 'igx-grid__filtering-cell--selected';
+        let classes = this.column && this.column.selected ?
+            'igx-grid__filtering-cell--selected' :
+            '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 'igx-grid__filtering-cell';
+        return classes;
     }
 
     constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService) {
@@ -98,6 +107,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;
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
@@ -1,5 +1,5 @@
 <!-- Have to apply styles inline because of the overlay outlet ... -->
-<igx-drop-down #inputGroupConditions [height]="'200px'" (onSelection)="onConditionsChanged($event)">
+<igx-drop-down #inputGroupConditions [displayDensity]="displayDensity" [height]="'200px'" (onSelection)="onConditionsChanged($event)">
     <igx-drop-down-item *ngFor="let condition of conditions"
         [value]="condition"
         [selected]="isConditionSelected(condition)">
@@ -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
@@ -105,11 +105,11 @@
                 </igx-chip>
 
                 <span id='operand' *ngIf="!last">
-                    <button igxButton (click)="toggleOperatorsDropDown($event, i)" [igxDropDownItemNavigation]="operators">
+                    <button igxButton (click)="toggleOperatorsDropDown($event, i)" [igxDropDownItemNavigation]="operators" [displayDensity]="column.grid.displayDensity">
                         <igx-icon>expand_more</igx-icon>
                         <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
                     </button>
-                    <igx-drop-down #operators (onSelection)="onLogicOperatorChanged($event, item)">
+                    <igx-drop-down [displayDensity]="column.grid.displayDensity" #operators (onSelection)="onLogicOperatorChanged($event, item)">
                             <igx-drop-down-item [value]="0" [selected]="item.afterOperator === 0">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>
                             <igx-drop-down-item [value]="1" [selected]="item.afterOperator === 1">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>
                     </igx-drop-down>
@@ -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>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/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) { }
 

Original file line number	Diff line number	Diff line change
`@@ -2443,6 +2443,7 @@`
`2443`	`2443`	`}`
`2444`	`2444`
`2445`	`2445`	`igx-input-group {`
	`2446`	`+ --igx-input-group-variant: fluent;`
`2446`	`2447`	`width: 100%;`
`2447`	`2448`	`max-width: rem(200px);`
`2448`	`2449`	`min-width: rem(140px);`