Skip to content

Commit 296db2d

Browse files
kdinevkdinev
authored
Merge branch 'master' into mpopov/fix-for-8483--dark-action-strip-MASTER
2 parents 2362636 + dc83c5c commit 296db2d

28 files changed

+1406
-208
lines changed

‎projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
export interface IGridResourceStrings {
22
igx_grid_groupByArea_message?: string;
3+
igx_grid_groupByArea_select_message?: string;
4+
igx_grid_groupByArea_deselect_message?: string;
35
igx_grid_emptyFilteredGrid_message?: string;
46
igx_grid_emptyGrid_message?: string;
57
igx_grid_filter?: string;
@@ -113,6 +115,8 @@ export interface IGridResourceStrings {
113115

114116
export const GridResourceStringsEN: IGridResourceStrings = {
115117
igx_grid_groupByArea_message: 'Drag a column header and drop it here to group by that column.',
118+
igx_grid_groupByArea_select_message: 'Select all rows in the group with field name {0} and value {1}.',
119+
igx_grid_groupByArea_deselect_message: 'Deselect all rows in the group with field name {0} and value {1}.',
116120
igx_grid_emptyFilteredGrid_message: 'No records found.',
117121
igx_grid_emptyGrid_message: 'Grid has no data.',
118122
igx_grid_filter: 'Filter',

‎projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
width: 100%;
55
overflow: hidden;
66
flex-shrink: 0;
7+
order: 3;
78
}
89

910
%display-container--inactive {

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -647,10 +647,6 @@
647647
@extend %igx-grid__hierarchical-expander--push !optional;
648648
}
649649

650-
@include e(hierarchical-expander, $m: no-border) {
651-
@extend %igx-grid__hierarchical-expander--no-border !optional;
652-
}
653-
654650
@include e(hierarchical-indent, $m: scroll) {
655651
@extend %igx-grid__hierarchical-indent--scroll !optional;
656652
}
@@ -663,6 +659,7 @@
663659
@include e(row-indentation, $m: level-#{$i}) {
664660
@extend %igx-grid__row-indentation--level-#{$i} !optional;
665661
}
662+
666663
@include e(group-row, $m: padding-level-#{$i}) {
667664
@extend %igx-grid__group-row--padding-level-#{$i} !optional;
668665
}
@@ -771,8 +768,9 @@
771768
@include e(row-indentation, $m: level-#{$i}) {
772769
@extend %igx-grid__row-indentation-cosy--level-#{$i} !optional;
773770
}
771+
774772
@include e(group-row, $m: padding-level-#{$i}) {
775-
@extend %igx-grid__group-row--padding-cosy-level-#{$i} !optional;
773+
@extend %igx-grid__group-row-cosy--padding-level-#{$i} !optional;
776774
}
777775
}
778776

@@ -883,6 +881,7 @@
883881
@include e(row-indentation, $m: level-#{$i}) {
884882
@extend %igx-grid__row-indentation-compact--level-#{$i} !optional;
885883
}
884+
886885
@include e(group-row, $m: padding-level-#{$i}) {
887886
@extend %igx-grid__group-row-compact--padding-level-#{$i} !optional;
888887
}

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

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1043,12 +1043,13 @@
10431043
align-items: center;
10441044
justify-content: center;
10451045
padding: map-get($grid-cell-padding, 'comfortable');
1046-
padding-#{$right}: 0;
1046+
flex: 1 0 auto;
10471047
// Fix for IE 11
10481048
min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable});
10491049
background: inherit;
10501050
z-index: 4;
10511051
cursor: move;
1052+
order: -1;
10521053

10531054
%igx-icon-display {
10541055
width: $drag-icon-size;
@@ -1057,29 +1058,22 @@
10571058
}
10581059
}
10591060

1060-
%igx-grid__drag-indicator--cosy{
1061+
%igx-grid__drag-indicator--cosy {
10611062
padding: map-get($grid-cell-padding, 'cosy');
10621063
// Fix for IE 11
10631064
min-width: calc(#{$drag-icon-size} + #{$cell-padding-cosy});
1064-
padding-#{$right}: 0;
10651065
}
10661066

10671067
%igx-grid__drag-indicator--compact {
10681068
padding: map-get($grid-cell-padding, 'compact');
10691069
// Fix for IE 11
10701070
min-width: calc(#{$drag-icon-size} + #{$cell-padding-compact});
1071-
padding-#{$right}: 0;
10721071
}
10731072

10741073
%igx-grid__drag-indicator--header {
10751074
border-#{$right}: $grid-header-border;
10761075
}
10771076

1078-
%igx-grid__hierarchical-expander + %igx-grid__drag-indicator {
1079-
padding-#{$left}: 0;
1080-
min-width: $drag-icon-size;
1081-
}
1082-
10831077
%igx-grid__drag-indicator--off {
10841078
color: --var($theme, 'row-drag-color');
10851079
}
@@ -1945,6 +1939,11 @@
19451939
outline-style: none;
19461940
border-bottom: 1px solid --var($theme, 'row-border-color');
19471941
min-height: map-get($grid-header-height, 'comfortable');
1942+
1943+
%igx-grid__drag-indicator {
1944+
cursor: default;
1945+
flex-grow: 0;
1946+
}
19481947
}
19491948

19501949
%igx-grid__group-row--active {
@@ -1955,6 +1954,13 @@
19551954
color: --var($theme, 'expand-icon-color');
19561955
}
19571956

1957+
%igx-grid__drag-indicator {
1958+
border: 1px solid --var($theme, 'cell-active-border-color');
1959+
border-left-width: 0;
1960+
border-right-width: 0;
1961+
box-shadow: inset 1px 0 0 0 --var($theme, 'cell-active-border-color');
1962+
}
1963+
19581964
&:hover {
19591965
background: --var($theme, 'group-row-selected-background');
19601966
}
@@ -2061,15 +2067,15 @@
20612067
}
20622068

20632069
%igx-grid__row-indentation {
2064-
background: transparent;
2065-
z-index: 1;
2070+
position: relative;
20662071
display: flex;
20672072
justify-content: center;
20682073
align-items: center;
2069-
position: relative;
20702074
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
20712075
padding-#{$right}: map-get($grid-grouping-indicator-padding, 'comfortable');
2072-
border-#{$right}: 1px solid transparent;
2076+
border-#{$right}: 1px solid --var($theme, 'header-border-color');
2077+
background: inherit;
2078+
z-index: 1;
20732079

20742080
&::after {
20752081
content: '';
@@ -2202,8 +2208,8 @@
22022208
align-items: center;
22032209
z-index: 1;
22042210
cursor: pointer;
2205-
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
22062211
padding-#{$right}: $grouping-padding-right;
2212+
margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'comfortable')};
22072213
min-height: map-get($grid-header-height, 'comfortable');
22082214

22092215
igx-icon {
@@ -2226,13 +2232,13 @@
22262232
}
22272233

22282234
%igx-grid__grouping-indicator--cosy {
2229-
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy');
22302235
min-height: map-get($grid-header-height, 'cosy');
2236+
margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'cosy')};
22312237
}
22322238

22332239
%igx-grid__grouping-indicator--compact {
2234-
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact');
22352240
min-height: map-get($grid-header-height, 'compact');
2241+
margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'compact')};
22362242
}
22372243

22382244
%igx-grid__header-indentation {
@@ -2284,32 +2290,34 @@
22842290
}
22852291

22862292
@for $i from 1 through 10 {
2287-
// COMFORTABLE
22882293
%igx-grid__row-indentation--level-#{$i} {
2289-
background: inherit;
22902294
padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width});
22912295
}
22922296

22932297
%igx-grid__group-row--padding-level-#{$i} {
2294-
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
2298+
%igx-grid__grouping-indicator {
2299+
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
2300+
}
22952301
}
22962302

2297-
// COSY
22982303
%igx-grid__row-indentation-cosy--level-#{$i} {
22992304
padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width});
23002305
}
23012306

23022307
%igx-grid__group-row-cosy--padding-level-#{$i} {
2303-
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
2308+
%igx-grid__grouping-indicator {
2309+
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
2310+
}
23042311
}
23052312

2306-
// COMPACT
23072313
%igx-grid__row-indentation-compact--level-#{$i} {
23082314
padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width});
23092315
}
23102316

23112317
%igx-grid__group-row-compact--padding-level-#{$i} {
2312-
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
2318+
%igx-grid__grouping-indicator {
2319+
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
2320+
}
23132321
}
23142322
}
23152323

@@ -2629,7 +2637,8 @@
26292637
cursor: pointer;
26302638
z-index: 3;
26312639
color: --var($theme, 'expand-icon-color');
2632-
border-#{$right}: 1px solid transparent;
2640+
border-#{$right}: 1px solid --var($theme, 'header-border-color');
2641+
order: 2;
26332642

26342643
&:focus {
26352644
outline: none;
@@ -2703,7 +2712,6 @@
27032712
}
27042713
}
27052714

2706-
%igx-grid__hierarchical-expander--no-border,
27072715
%igx-grid__header-indentation--no-border {
27082716
border-#{$right}: 1px solid transparent;
27092717
}

‎projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@ import {
66
ChangeDetectorRef,
77
OnDestroy,
88
Directive,
9-
AfterViewInit
9+
AfterViewInit,
10+
Inject,
11+
NgZone
1012
} from '@angular/core';
13+
import { DOCUMENT } from '@angular/common';
14+
import { Subject } from 'rxjs';
15+
import { takeUntil, throttleTime } from 'rxjs/operators';
16+
import { resizeObservable, isIE } from '../../core/utils';
1117

1218
@Directive({
1319
selector: '[igxVirtualHelperBase]'
@@ -21,16 +27,25 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
2127

2228
private _afterViewInit = false;
2329
private _scrollNativeSize: number;
30+
private _detached = false;
31+
protected destroy$ = new Subject<any>();
32+
2433

2534
ngAfterViewInit() {
2635
this._afterViewInit = true;
36+
const delayTime = isIE() ? 40 : 0;
37+
this._zone.runOutsideAngular(() => {
38+
resizeObservable(this.nativeElement).pipe(
39+
throttleTime(delayTime),
40+
takeUntil(this.destroy$)).subscribe((event) => this.handleMutations(event));
41+
});
2742
}
2843

2944
@HostListener('scroll', ['$event'])
3045
onScroll(event) {
3146
this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
3247
}
33-
constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
48+
constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
3449
this._scrollNativeSize = this.calculateScrollNativeSize();
3550
}
3651

@@ -40,6 +55,8 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
4055

4156
public ngOnDestroy() {
4257
this.destroyed = true;
58+
this.destroy$.next(true);
59+
this.destroy$.complete();
4360
}
4461

4562
public set size(value) {
@@ -60,6 +77,23 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
6077
return this._scrollNativeSize;
6178
}
6279

80+
protected get isAttachedToDom(): boolean {
81+
return this.document.body.contains(this.nativeElement);
82+
}
83+
84+
protected handleMutations(event) {
85+
const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
86+
if (!hasSize && !this.isAttachedToDom) {
87+
// scroll bar detached from DOM
88+
this._detached = true;
89+
} else if (this._detached && hasSize && this.isAttachedToDom) {
90+
// attached back now.
91+
this.restoreScroll();
92+
}
93+
}
94+
95+
protected restoreScroll() {}
96+
6397
public calculateScrollNativeSize() {
6498
const div = document.createElement('div');
6599
const style = div.style;

‎projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
1+
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone } from '@angular/core';
22
import { VirtualHelperBaseDirective } from './base.helper.component';
3+
import { DOCUMENT } from '@angular/common';
34

45
/**
56
* @hidden
@@ -14,7 +15,11 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
1415
@HostBinding('class')
1516
public cssClasses = 'igx-vhelper--horizontal';
1617

17-
constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
18-
super(elementRef, cdr);
19-
}
18+
constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
19+
super(elementRef, cdr, _zone, document);
20+
}
21+
22+
protected restoreScroll() {
23+
this.nativeElement.scrollLeft = this.scrollAmount;
24+
}
2025
}

‎projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
2-
ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
2+
ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
33
import { VirtualHelperBaseDirective } from './base.helper.component';
4+
import { DOCUMENT } from '@angular/common';
45

56
@Component({
67
selector: 'igx-virtual-helper',
@@ -20,11 +21,15 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
2021
@HostBinding('class')
2122
public cssClasses = 'igx-vhelper--vertical';
2223

23-
constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
24-
super(elementRef, cdr);
24+
constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
25+
super(elementRef, cdr, _zone, document);
2526
}
2627

2728
ngOnInit() {
2829
this.scrollWidth = this.scrollNativeSize;
2930
}
31+
32+
protected restoreScroll() {
33+
this.nativeElement.scrollTop = this.scrollAmount;
34+
}
3035
}

‎projects/igniteui-angular/src/lib/grids/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,8 @@ Here is a list of all public methods exposed by **igx-grid**:
311311
|`isExpandedGroup(group: IGroupByRecord )`| Returns if a group is expanded or not.
312312
|`toggleGroup(group: IGroupByRecord)`| Toggles the expansion state of a group.
313313
|`toggleAllGroupRows()`| Toggles the expansion state of all group rows recursively.
314+
|`selectAllRowsInGroup(group: IGroupByRecord, clearPrevSelection?: boolean)`| Select all rows within a group.
315+
|`deselectAllRowsInGroup(group: IGroupByRecord)`| Deselect all rows within a group.
314316
|`openAdvancedFilteringDialog()`| Opens the advanced filtering dialog.
315317
|`closeAdvancedFilteringDialog(applyChanges: boolean)`| Closes the advanced filtering dialog.
316318

0 commit comments

Comments
 (0)