Skip to content

Commit 4f1a10d

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into fix-for-#6270 
2 parents 6b53e1d + 35203d3 commit 4f1a10d

File tree

11 files changed

+102
-44
lines changed

11 files changed

+102
-44
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1200,7 +1200,8 @@
12001200
%grid-cell--selected {
12011201
color: --var($theme, 'cell-selected-text-color');
12021202
background: --var($theme, 'cell-selected-background');
1203-
border-bottom: 0;
1203+
// this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981
1204+
// border-bottom: 0;
12041205

12051206
%igx-grid__tree-grouping-indicator {
12061207
color: --var($theme, 'cell-selected-text-color');
@@ -1252,7 +1253,8 @@
12521253
%grid-cell--pinned-selected {
12531254
color: --var($theme, 'cell-selected-text-color');
12541255
background: --var($theme, 'cell-selected-background');
1255-
border-bottom: 0;
1256+
// this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981
1257+
// border-bottom: 0;
12561258
}
12571259

12581260
%grid-cell--pinned-last {

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -366,35 +366,27 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
366366
return !this.column.editable;
367367
}
368368

369-
@HostBinding('style.-ms-grid-row-span')
370369
get gridRowSpan(): number {
371370
return this.column.gridRowSpan;
372371
}
373372

374-
@HostBinding('style.-ms-grid-column-span')
375373
get gridColumnSpan(): number {
376374
return this.column.gridColumnSpan;
377375
}
378376

379377

380-
@HostBinding('style.grid-row-end')
381378
get rowEnd(): number {
382379
return this.column.rowEnd;
383380
}
384381

385-
@HostBinding('style.grid-column-end')
386382
get colEnd(): number {
387383
return this.column.colEnd;
388384
}
389385

390-
@HostBinding('style.-ms-grid-row')
391-
@HostBinding('style.grid-row-start')
392386
get rowStart(): number {
393387
return this.column.rowStart;
394388
}
395389

396-
@HostBinding('style.-ms-grid-column')
397-
@HostBinding('style.grid-column-start')
398390
get colStart(): number {
399391
return this.column.colStart;
400392
}

‎projects/igniteui-angular/src/lib/grids/common/column.interface.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,7 @@ export interface ColumnType {
4040
width: string;
4141
topLevelParent?: ColumnType;
4242
parent?: ColumnType;
43+
hasLastPinnedChildColumn: boolean;
44+
45+
getGridTemplate(isRow: boolean, isIE: boolean): string;
4346
}

‎projects/igniteui-angular/src/lib/grids/grid-common.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
22
import { IgxGridCellComponent } from './cell.component';
33
import { IgxGridFooterComponent } from './grid-footer/grid-footer.component';
44
import {
5-
IgxGridBodyDirective,
5+
IgxGridBodyDirective
66
} from './grid.common';
77
import { IgxGridTransaction, IgxGridBaseDirective } from './grid-base.directive';
88
import { IgxBaseTransactionService } from '../services/transaction/base-transaction';

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import {
2-
Directive,
3-
} from '@angular/core';
1+
import { Directive } from '@angular/core';
42
import { ConnectedPositioningStrategy } from '../services';
53
import { VerticalAlignment, PositionSettings } from '../services/overlay/utilities';
64
import { scaleInVerBottom, scaleInVerTop } from '../animations/main';

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

Lines changed: 83 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,28 @@
2929
<ng-container *ngIf="grid.hasColumnLayouts">
3030
<ng-container *ngIf="pinnedColumns.length > 0">
3131
<div *ngFor="let col of pinnedColumns | igxTopLevel" class="igx-grid__mrl-block"
32-
[ngClass]="{'igx-grid__td--pinned-last': col.hasLastPinnedChildColumn}"
33-
[ngStyle]="{'grid-template-rows':col.getGridTemplate(true, false),
34-
'grid-template-columns':col.getGridTemplate(false, false),
35-
'z-index': col.pinned ? 1 : null,
36-
'-ms-grid-rows':col.getGridTemplate(true, true),
37-
'-ms-grid-columns':col.getGridTemplate(false, true)}">
38-
<ng-template ngFor let-col [ngForOf]="col.children">
39-
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
40-
</ng-template>
32+
[class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
33+
[ngStyle]="{
34+
'grid-template-rows':col.getGridTemplate(true, false),
35+
'grid-template-columns':col.getGridTemplate(false, false),
36+
'z-index': col.pinned ? 1 : null,
37+
'-ms-grid-rows':col.getGridTemplate(true, true),
38+
'-ms-grid-columns':col.getGridTemplate(false, true)
39+
}">
40+
<ng-template ngFor let-col [ngForOf]="col.children">
41+
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)"></ng-container>
42+
</ng-template>
4143
</div>
4244
</ng-container>
4345
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='"calcPixelWidth"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
44-
<div class="igx-grid__mrl-block"
45-
[ngStyle]="{'grid-template-rows':col.getGridTemplate(true, false),
46-
'grid-template-columns':col.getGridTemplate(false, false),
47-
'-ms-grid-rows':col.getGridTemplate(true, true),
48-
'-ms-grid-columns':col.getGridTemplate(false, true)}">
46+
<div class="igx-grid__mrl-block" [ngStyle]="{
47+
'grid-template-rows':col.getGridTemplate(true, false),
48+
'grid-template-columns':col.getGridTemplate(false, false),
49+
'-ms-grid-rows':col.getGridTemplate(true, true),
50+
'-ms-grid-columns':col.getGridTemplate(false, true)
51+
}">
4952
<ng-template ngFor let-col [ngForOf]="col.children">
50-
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
53+
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)"></ng-container>
5154
</ng-template>
5255
</div>
5356
</ng-template>
@@ -80,10 +83,10 @@
8083
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
8184
[style.min-height.px]="grid.rowHeight || 32"
8285
[rowData]="rowData"
83-
[style.min-width]="col.columnLayoutChild ? null : col.width"
84-
[style.max-width]="col.parent ? null : col.width"
85-
[style.flex-basis]="col.parent ? null : col.width"
86-
[width]="col.parent ? null : col.getCellWidth()"
86+
[style.min-width]="col.width"
87+
[style.max-width]="col.width"
88+
[style.flex-basis]="col.width"
89+
[width]="col.getCellWidth()"
8790
[visibleColumnIndex]="col.visibleIndex"
8891
[value]="rowData[col.field]"
8992
[cellTemplate]="col.bodyTemplate"
@@ -106,15 +109,72 @@
106109
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
107110
[style.min-height.px]="grid.rowHeight || 32"
108111
[rowData]="rowData"
109-
[style.min-width]="col.columnLayoutChild ? null : col.width"
110-
[style.max-width]="col.columnLayoutChild ? null : col.width"
111-
[style.flex-basis]="col.columnLayoutChild ? null : col.width"
112-
[width]="col.columnLayoutChild ? null : col.getCellWidth()"
112+
[style.min-width]="col.width"
113+
[style.max-width]="col.width"
114+
[style.flex-basis]="col.width"
115+
[width]="col.getCellWidth()"
113116
[visibleColumnIndex]="col.visibleIndex"
114117
[value]="rowData[col.field]"
115118
[cellTemplate]="col.bodyTemplate"
116119
[cellSelectionMode]="grid.cellSelection" #cell>
117120
</igx-expandable-grid-cell>
118121
</ng-template>
119122

123+
<ng-template #mrlCellTemplate let-col>
124+
<igx-grid-cell
125+
class="igx-grid__td igx-grid__td--fw"
126+
[class.igx-grid__td--pinned]="col.pinned"
127+
[class.igx-grid__td--number]="col.dataType === 'number'"
128+
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
129+
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
130+
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
131+
[column]="col"
132+
[style.-ms-grid-row-span]="col.gridRowSpan"
133+
[style.-ms-grid-column-span]="col.girdColumnSpan"
134+
[style.grid-row-end]="col.rowEnd"
135+
[style.grid-column-end]="col.colEnd"
136+
[style.-ms-grid-row]="col.rowStart"
137+
[style.grid-row-start]="col.rowStart"
138+
[style.-ms-grid-column]="col.colStart"
139+
[style.grid-column-start]="col.colStart"
140+
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
141+
[formatter]="col.formatter"
142+
[row]="this"
143+
[style.min-height.px]="grid.rowHeight || 32"
144+
[rowData]="rowData"
145+
[visibleColumnIndex]="col.visibleIndex"
146+
[value]="rowData[col.field]"
147+
[cellTemplate]="col.bodyTemplate"
148+
[cellSelectionMode]="grid.cellSelection" #cell>
149+
</igx-grid-cell>
150+
</ng-template>
120151

152+
<ng-template #mrlExpandableCellTemplate let-col>
153+
<igx-expandable-grid-cell
154+
class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
155+
[class.igx-grid__td--pinned]="col.pinned"
156+
[class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
157+
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
158+
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
159+
[expanded]="expanded"
160+
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
161+
[column]="col"
162+
[style.-ms-grid-row-span]="col.gridRowSpan"
163+
[style.-ms-grid-column-span]="col.girdColumnSpan"
164+
[style.grid-row-end]="col.rowEnd"
165+
[style.grid-column-end]="col.colEnd"
166+
[style.-ms-grid-row]="col.rowStart"
167+
[style.grid-row-start]="col.rowStart"
168+
[style.-ms-grid-column]="col.colStart"
169+
[style.grid-column-start]="col.colStart"
170+
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
171+
[formatter]="col.formatter"
172+
[row]="this"
173+
[style.min-height.px]="grid.rowHeight || 32"
174+
[rowData]="rowData"
175+
[visibleColumnIndex]="col.visibleIndex"
176+
[value]="rowData[col.field]"
177+
[cellTemplate]="col.bodyTemplate"
178+
[cellSelectionMode]="grid.cellSelection" #cell>
179+
</igx-expandable-grid-cell>
180+
</ng-template>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
6262
*/
6363
@HostListener('focus', ['$event'])
6464
onFocus(event) {
65+
if (this.focused) {
66+
return;
67+
}
6568
this._clearAllHighlights();
6669
const currentElement = this.grid.nativeElement;
6770
let parentGrid = this.grid;

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { IgxTreeGridComponent } from './tree-grid.component';
33
import { DataType } from '../../data-operations/data-util';
44
import { ITreeGridRecord } from './tree-grid.interfaces';
55
import { IRowToggleEventArgs } from './tree-grid.interfaces';
6-
import { IgxColumnComponent } from '../columns/column.component';
76
import { HierarchicalTransaction, TransactionType, State } from '../../services';
87
import { mergeObjects } from '../../core/utils';
98
import { Injectable } from '@angular/core';
9+
import { ColumnType } from '../common/column.interface';
1010

1111
@Injectable()
1212
export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridComponent> {
@@ -154,7 +154,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
154154
}
155155
}
156156

157-
public should_apply_number_style(column: IgxColumnComponent): boolean {
157+
public should_apply_number_style(column: ColumnType): boolean {
158158
return column.dataType === DataType.Number && column.visibleIndex !== 0;
159159
}
160160

‎src/app/card/card.sample.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -318,17 +318,17 @@ <h5 igxCardHeaderSubtitle>{{ cards[4].subtitle }}</h5>
318318
<article>
319319
<igx-card>
320320
<igx-card-header>
321-
<igx-avatar src="https://upload.wikimedia.org/wikipedia/commons/4/49/Elon_Musk_2015.jpg" roundShape="true"></igx-avatar>
322-
<h4 igxCardHeaderTitle>Elon Musk</h4>
323-
<h5 igxCardHeaderSubtitle>Entrepreneur</h5>
321+
<igx-avatar src="assets/images/card/avatars/photographer.jpg" roundShape="true"></igx-avatar>
322+
<h4 igxCardHeaderTitle>Frank Carter</h4>
323+
<h5 igxCardHeaderSubtitle>Photographer</h5>
324324
</igx-card-header>
325325

326326
<igx-card-media>
327-
<img src="https://2pobaduekzw9jt9a-zippykid.netdna-ssl.com/wp-content/uploads/2017/01/elon-musk.jpg">
327+
<img src="assets/images/card/media/photographer_portfolio.jpg">
328328
</igx-card-media>
329329

330330
<igx-card-content>
331-
<p>South African entrepreneur Elon Musk is known for founding Tesla Motors and SpaceX, which launched a landmark commercial spacecraft in 2012.</p>
331+
<p>Photographer Frank Carter won this year national photo contest with his image "Skies" which gathered the most votes in the competition.</p>
332332
</igx-card-content>
333333

334334
<igx-card-actions>

‎src/assets/images/card/avatars/photographer.jpg‎

17.2 KB
Loading

0 commit comments

Comments
 (0)