Skip to content

Commit 6a8545e

Browse files
LipataLipata
authored
Merge branch '8.1.x' into nrobakova/fix-issue-5437
2 parents 0dc5715 + 7984775 commit 6a8545e

19 files changed

+278
-82
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@
6868
@extend %grid-excel-actions__action !optional;
6969
}
7070

71+
@include e(actions-pin, $m: disabled) {
72+
@extend %grid-excel-actions__action !optional;
73+
@extend %grid-excel-actions__action--disabled !optional;
74+
}
75+
7176
@include e(actions-unpin) {
7277
@extend %grid-excel-actions__action !optional;
7378
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
/// @param {Color} $header-border-color [null] - The color used for header borders.
1919
///
2020
/// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
21+
/// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.
2122
///
2223
/// @param {Color} $content-background [null] - The table body background color.
2324
/// @param {Color} $content-text-color [null] - The table body text color.
@@ -192,6 +193,7 @@
192193
$row-ghost-background: null,
193194
$row-drag-color: null,
194195
$drop-area-border-radius: null,
196+
$sortable-header-icon-hover-color: null
195197
) {
196198
$name: 'igx-grid';
197199
$grid-schema: map-get($schema, $name);
@@ -474,7 +476,8 @@
474476
drag-shadow: $drag-shadow,
475477
row-ghost-background: $row-ghost-background,
476478
row-drag-color: $row-drag-color,
477-
drop-area-border-radius: $drop-area-border-radius
479+
drop-area-border-radius: $drop-area-border-radius,
480+
sortable-header-icon-hover-color: $sortable-header-icon-hover-color
478481
));
479482
}
480483

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

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #fff] - The table header background color.
1313
/// @prop {Map} header-text-color [igx-color: ('grays', 600)] - The table header text color.
1414
///
15-
/// @prop {Map} $sorted-header-icon-color [igx-color: ('secondary', 500)] - The sorted table header icon color.
15+
/// @prop {Map} sorted-header-icon-color [igx-color: ('secondary', 500)] - The sorted table header icon color.
16+
/// @prop {Map} sortable-header-icon-hover-color [igx-color: ('secondary', 500)] - The icon color on hover in grid header when the column is sortable.
1617
///
1718
/// @prop {Number} header-border-width [1px] - The border width used for header borders.
1819
/// @prop {String} header-border-style [solid] - The border style used for header borders.
@@ -85,22 +86,10 @@ $_light-grid: extend(
8586
igx-color: ('grays', 600)
8687
),
8788

88-
sortable-header-hover-color: (
89-
igx-color: ('grays', 900)
90-
),
91-
92-
sortable-header-hover-icon-color: (
93-
igx-color: ('grays', 500)
94-
),
95-
9689
sortable-header-icon-hover-color: (
9790
igx-color: ('secondary', 500)
9891
),
9992

100-
sorted-header-color: (
101-
igx-color: ('grays', 900)
102-
),
103-
10493
sorted-header-icon-color: (
10594
igx-color: ('secondary', 500)
10695
),

‎projects/igniteui-angular/src/lib/core/touch.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ export class HammerGesturesManager {
2020
inputClass: Hammer.TouchInput,
2121
recognizers: [
2222
[ Hammer.Pan, { threshold: 0 } ],
23-
[ Hammer.Pinch, { enable: true } ],
24-
[ Hammer.Rotate, { enable: true } ],
2523
[ Hammer.Swipe, {
2624
direction: Hammer.DIRECTION_HORIZONTAL
27-
}]
25+
}],
26+
[Hammer.Tap],
27+
[Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']]
2828
]
2929
};
3030

@@ -44,14 +44,14 @@ export class HammerGesturesManager {
4444
public addEventListener(element: HTMLElement,
4545
eventName: string,
4646
eventHandler: (eventObj) => void,
47-
options: object = null): () => void {
47+
options: HammerOptions = null): () => void {
4848

4949
// Creating the manager bind events, must be done outside of angular
5050
return this._zone.runOutsideAngular(() => {
5151
let mc: HammerManager = this.getManagerForElement(element);
5252
if (mc === null) {
5353
// new Hammer is a shortcut for Manager with defaults
54-
mc = new Hammer(element, this.hammerOptions);
54+
mc = new Hammer(element, Object.assign(this.hammerOptions, options));
5555
this.addManagerForElement(element, mc);
5656
}
5757
const handler = (eventObj) => { this._zone.run(() => { eventHandler(eventObj); }); };

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export const enum KEYS {
170170
*/
171171
export function getNodeSizeViaRange(range: Range, node: any): number {
172172
let overflow = null;
173-
if (isIE() || isEdge()) {
173+
if (!isFirefox()) {
174174
overflow = node.style.overflow;
175175
// we need that hack - otherwise content won't be measured correctly in IE/Edge
176176
node.style.overflow = 'visible';
@@ -179,7 +179,7 @@ export function getNodeSizeViaRange(range: Range, node: any): number {
179179
range.selectNodeContents(node);
180180
const width = range.getBoundingClientRect().width;
181181

182-
if (isIE() || isEdge()) {
182+
if (!isFirefox()) {
183183
// we need that hack - otherwise content won't be measured correctly in IE/Edge
184184
node.style.overflow = overflow;
185185
}

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { State } from '../services/index';
2323
import { IgxGridBaseComponent, IGridEditEventArgs, IGridDataBindable } from './grid-base.component';
2424
import { IgxGridSelectionService, ISelectionNode, IgxGridCRUDService } from '../core/grid-selection';
2525
import { DeprecateProperty } from '../core/deprecateDecorators';
26+
import { HammerGesturesManager } from '../core/touch';
2627

2728
/**
2829
* Providing reference to `IgxGridCellComponent`:
@@ -40,7 +41,8 @@ import { DeprecateProperty } from '../core/deprecateDecorators';
4041
@Component({
4142
changeDetection: ChangeDetectionStrategy.OnPush,
4243
selector: 'igx-grid-cell',
43-
templateUrl: './cell.component.html'
44+
templateUrl: './cell.component.html',
45+
providers: [HammerGesturesManager]
4446
})
4547
export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
4648
private _vIndex = -1;
@@ -530,7 +532,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
530532
public selection: IgxSelectionAPIService,
531533
public cdr: ChangeDetectorRef,
532534
private element: ElementRef,
533-
protected zone: NgZone) { }
535+
protected zone: NgZone,
536+
private touchManager: HammerGesturesManager) { }
534537

535538

536539
/**
@@ -552,6 +555,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
552555
this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
553556
}
554557
});
558+
this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
559+
cssProps: { } /* don't disable user-select, etc */
560+
} as HammerOptions);
555561
}
556562

557563
/**
@@ -569,6 +575,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
569575
this.nativeElement.removeEventListener('compositionend', this.compositionEndHandler);
570576
}
571577
});
578+
this.touchManager.destroy();
572579
}
573580

574581
/**
@@ -716,7 +723,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
716723
* @internal
717724
*/
718725
@HostListener('dblclick', ['$event'])
719-
public onDoubleClick(event: MouseEvent) {
726+
public onDoubleClick = (event: MouseEvent| HammerInput) => {
727+
if (event.type === 'doubletap') {
728+
// prevent double-tap to zoom on iOS
729+
event.preventDefault();
730+
}
720731
if (this.editable && !this.editMode && !this.row.deleted) {
721732
this.crudService.begin(this);
722733
}

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1391,9 +1391,7 @@ export class IgxColumnComponent implements AfterContentInit {
13911391
return false;
13921392
}
13931393

1394-
const width = parseInt(this.width, 10);
1395-
1396-
if (!this.parent && (grid.getUnpinnedWidth(true) - width < grid.unpinnedAreaMinWidth)) {
1394+
if (!this.parent && !this.pinnable) {
13971395
return false;
13981396
}
13991397

@@ -1684,6 +1682,15 @@ export class IgxColumnComponent implements AfterContentInit {
16841682
this.calcPixelWidth = parseInt(this._calcWidth, 10);
16851683
}
16861684

1685+
/**
1686+
*@hidden
1687+
*/
1688+
public get pinnable() {
1689+
const gridUnpinnedWidth = (this.grid as any).getUnpinnedWidth(true);
1690+
const columnWidth = parseInt(this.width, 10);
1691+
return !((gridUnpinnedWidth - columnWidth) < this.grid.unpinnedAreaMinWidth);
1692+
}
1693+
16871694
/**
16881695
* @hidden
16891696
*/

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export class IgxExcelStyleColumnMovingComponent {
2323
@Input()
2424
public displayDensity: DisplayDensity;
2525

26+
@Input()
27+
public isColumnPinnable: boolean;
28+
2629
constructor() {}
2730

2831
private get visibleColumns() {
@@ -32,6 +35,7 @@ export class IgxExcelStyleColumnMovingComponent {
3235
get canNotMoveLeft() {
3336
return this.column.visibleIndex === 0 ||
3437
(this.grid.unpinnedColumns.indexOf(this.column) === 0 && this.column.disablePinning) ||
38+
(this.grid.unpinnedColumns.indexOf(this.column) === 0 && !this.isColumnPinnable) ||
3539
(this.column.level !== 0 && !this.findColumn(0, this.visibleColumns));
3640
}
3741

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ <h4>{{ column.header || column.field }}</h4>
1414
igxButton="icon"
1515
[displayDensity]="grid.displayDensity"
1616
(click)="onPin()"
17+
[disabled]="!isColumnPinnable"
1718
tabindex="0">
1819
<igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
1920
</button>
@@ -54,6 +55,7 @@ <h4>{{ column.header || column.field }}</h4>
5455
class="igx-excel-filter__move"
5556
[column]="column"
5657
[grid]="grid"
58+
[isColumnPinnable]="isColumnPinnable"
5759
[displayDensity]="grid.displayDensity">
5860
</igx-excel-style-column-moving>
5961
</ng-template>
@@ -63,7 +65,7 @@ <h4>{{ column.header || column.field }}</h4>
6365
</div>
6466

6567
<ng-template #defaultExcelStylePinningTemplate>
66-
<div class="igx-excel-filter__actions-pin"
68+
<div [ngClass]="pinClass()"
6769
(click)="onPin()"
6870
tabindex="0"
6971
*ngIf="!column.pinned">

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
Directive,
99
OnDestroy,
1010
AfterViewInit,
11-
ElementRef
11+
ElementRef,
12+
OnInit
1213
} from '@angular/core';
1314
import {
1415
HorizontalAlignment,
@@ -87,7 +88,7 @@ export class IgxExcelStylePinningTemplateDirective {
8788
selector: 'igx-grid-excel-style-filtering',
8889
templateUrl: './grid.excel-style-filtering.component.html'
8990
})
90-
export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterViewInit {
91+
export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, AfterViewInit {
9192
private static readonly filterOptimizationThreshold = 2;
9293

9394
private shouldOpenSubMenu = true;
@@ -148,6 +149,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
148149
@ViewChild('defaultExcelStylePinningTemplate', { read: TemplateRef, static: true })
149150
protected defaultExcelStylePinningTemplate: TemplateRef<any>;
150151

152+
public isColumnPinnable: boolean;
153+
151154
get grid(): any {
152155
return this.filteringService.grid;
153156
}
@@ -171,6 +174,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
171174

172175
constructor(private cdr: ChangeDetectorRef) {}
173176

177+
ngOnInit() {
178+
this.isColumnPinnable = this.column.pinnable;
179+
}
180+
174181
ngOnDestroy(): void {
175182
this.destroy$.next(true);
176183
this.destroy$.complete();
@@ -205,6 +212,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
205212
return 'igx-excel-filter__actions-clear--disabled';
206213
}
207214

215+
public pinClass() {
216+
return this.isColumnPinnable ? 'igx-excel-filter__actions-pin' : 'igx-excel-filter__actions-pin--disabled';
217+
}
218+
208219
public initialize(column: IgxColumnComponent, filteringService: IgxFilteringService, overlayService: IgxOverlayService,
209220
overlayComponentId: string) {
210221
this.column = column;

0 commit comments

Comments
 (0)