Skip to content

Commit 2af98f4

Browse files
kdinevkdinev
authored
Merge branch 'master' into ibarakov/fix-6965-9.1.x
2 parents 2ca28be + 795e8a7 commit 2af98f4

File tree

15 files changed

+106
-20
lines changed

15 files changed

+106
-20
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,6 +508,11 @@
508508
@extend %igx-grid__filtering-cell !optional;
509509
}
510510

511+
@include e(filtering-cell, $m: 'selected') {
512+
@extend %igx-grid__filtering-cell !optional;
513+
@extend %igx-grid__filtering-cell--selected !optional;
514+
}
515+
511516
@include e(filtering-cell-indicator) {
512517
@extend %igx-grid__filtering-cell-indicator !optional;
513518
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1074,7 +1074,7 @@
10741074
border-bottom: none;
10751075
}
10761076

1077-
%igx-grid__tr--pinned {
1077+
%igx-grid__tr--pinned {
10781078
position: relative;
10791079
background: inherit;
10801080
z-index: 10000;
@@ -2207,6 +2207,11 @@
22072207
}
22082208
}
22092209

2210+
%igx-grid__filtering-cell--selected {
2211+
color: --var($theme, 'row-selected-text-color');
2212+
background: --var($theme, 'row-selected-cell-background');
2213+
}
2214+
22102215
%igx-grid__filtering-cell-indicator {
22112216
position: relative;
22122217
display: flex;

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ $_fluent-tooltip: extend(
4646
$_fluent-shape-tooltip,
4747
(
4848
background: (
49-
igx-color: 'surface'
49+
igx-color: ('grays', 900)
50+
),
51+
text-color: (
52+
igx-contrast-color: ('grays', 900)
5053
)
5154
)
5255
);

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
TemplateRef,
1111
Output,
1212
EventEmitter,
13+
ElementRef,
1314
} from '@angular/core';
1415
import { notifyChanges } from '../watch-changes';
1516
import { WatchColumnChanges } from '../watch-changes';
@@ -1319,7 +1320,7 @@ export class IgxColumnComponent implements AfterContentInit {
13191320
protected collapseIndicatorTemplate: IgxCollapsibleIndicatorTemplateDirective;
13201321

13211322
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef,
1322-
public rowIslandAPI: IgxRowIslandAPIService) { }
1323+
public rowIslandAPI: IgxRowIslandAPIService, public elementRef: ElementRef) { }
13231324

13241325
/**
13251326
* @hidden

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,15 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
5959
@ViewChild('complexChip', { read: IgxChipComponent })
6060
protected complexChip: IgxChipComponent;
6161

62-
@HostBinding('class.igx-grid__filtering-cell')
63-
public cssClass = 'igx-grid__filtering-cell';
62+
63+
@HostBinding('class')
64+
get styleClasses(): string {
65+
if (this.column && this.column.selected) {
66+
return 'igx-grid__filtering-cell--selected';
67+
}
68+
69+
return 'igx-grid__filtering-cell';
70+
}
6471

6572
constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService) {
6673
this.filteringService.subscribeToEvents();

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,14 @@ <h4>{{ column.header || column.field }}</h4>
104104

105105
<section class="igx-excel-filter__actions">
106106

107-
<div *ngIf="column.selectable && grid.displayDensity==='comfortable'">
108-
<ng-container *ngTemplateOutlet="selectingTemplate"></ng-container>
109-
</div>
110-
111107
<div *ngIf="column.movable">
112108
<ng-container *ngTemplateOutlet="movingTemplate"></ng-container>
113109
</div>
114110

111+
<div *ngIf="column.selectable && grid.displayDensity==='comfortable'">
112+
<ng-container *ngTemplateOutlet="selectingTemplate"></ng-container>
113+
</div>
114+
115115
<div *ngIf="!column.disablePinning && grid.displayDensity==='comfortable'">
116116
<ng-container *ngTemplateOutlet="pinningTemplate"></ng-container>
117117
</div>

‎projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1573,6 +1573,23 @@ describe('IgxGrid - multi-column headers #grid', () => {
15731573

15741574
expect(grid.columnList.length).toEqual(10);
15751575
});
1576+
1577+
it('should set title attribute on column group header spans', () => {
1578+
const fixture = TestBed.createComponent(ColumnGroupTestComponent);
1579+
fixture.detectChanges();
1580+
1581+
const grid = fixture.componentInstance.grid;
1582+
const generalGroup = grid.columnList.find(c => c.header === 'General Information');
1583+
generalGroup.elementRef.nativeElement.title = 'General Information Title';
1584+
fixture.detectChanges();
1585+
1586+
const headers = fixture.debugElement.queryAll(By.css('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
1587+
const generalHeader = headers.find(h => h.nativeElement.textContent === 'General Information');
1588+
const addressHeader = headers.find(h => h.nativeElement.textContent === 'Address Information');
1589+
1590+
expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
1591+
expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
1592+
});
15761593
});
15771594

15781595
@Component({

‎projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { ɵɵsetComponentScope } from '@angular/core';
1212

1313
const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected';
1414
const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected';
15+
const SELECTED_FILTER_CELL_CLASS = 'igx-grid__filtering-cell--selected';
16+
1517
function selectedData() {
1618
return [{ ProductID: 1, ProductName: 'Chai' },
1719
{ ProductID: 2, ProductName: 'Aniseed Syrup' },
@@ -766,11 +768,15 @@ describe('IgxGrid - Column Selection #grid', () => {
766768

767769
it('Filtering: Verify column selection when filter row is opened ', fakeAsync(() => {
768770
grid.allowFiltering = true;
771+
fix.detectChanges();
772+
const filterCell = GridFunctions.getFilterCell(fix , 'ProductID');
773+
expect(filterCell.nativeElement.classList.contains(SELECTED_FILTER_CELL_CLASS)).toBeFalsy();
769774
const colInStock = grid.getColumnByName('InStock');
770775
colProductID.selected = true;
771776
fix.detectChanges();
772777

773-
GridFunctions.clickFilterCellChipUI(fix, 'ProductName'); // Name column contains nested object as a value
778+
expect(filterCell.nativeElement.classList.contains(SELECTED_FILTER_CELL_CLASS)).toBeTruthy();
779+
GridFunctions.clickFilterCellChipUI(fix, 'InStock'); // Name column contains nested object as a value
774780
tick(150);
775781
fix.detectChanges();
776782

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,29 @@ describe('IgxGrid - Column properties #grid', () => {
375375
const row = grid.getRowByIndex(0);
376376
row.cells.forEach(cell => expect(cell.nativeElement.getAttribute('style')).toMatch('background: black'));
377377
});
378+
379+
it('should set title attribute on column header spans', () => {
380+
const fix = TestBed.createComponent(ColumnsFromIterableComponent);
381+
fix.detectChanges();
382+
383+
const grid = fix.componentInstance.instance;
384+
const idColumn = grid.getColumnByName('ID');
385+
const nameColumn = grid.getColumnByName('Name');
386+
387+
idColumn.header = 'ID Header';
388+
idColumn.elementRef.nativeElement.title = 'ID Title';
389+
nameColumn.header = 'Name Header';
390+
fix.detectChanges();
391+
392+
const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
393+
const idHeader = headers[0].nativeElement;
394+
const nameHeader = headers[1].nativeElement;
395+
expect(idHeader.textContent).toBe('ID Header');
396+
expect(idHeader.firstElementChild.firstElementChild.title).toBe('ID Title');
397+
expect(nameHeader.textContent).toBe('Name Header');
398+
expect(nameHeader.firstElementChild.firstElementChild.title).toBe('Name Header');
399+
});
400+
378401
});
379402

380403
@Component({

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626

2727
<ng-template #defaultColumn>
28-
<span class="igx-grid__th-group-title" [attr.title]="column.header">{{column.header}}</span>
28+
<span class="igx-grid__th-group-title" [attr.title]="columnTitle">{{column.header}}</span>
2929
</ng-template>
3030

3131
<ng-template #defaultCollapseIndicator>

0 commit comments

Comments
 (0)