Skip to content

Commit 12b7d81

Browse files
author
Radko Kolev
committed
Merge branch 'rkolev/treeGridTests' of https://github.com/IgniteUI/igniteui-angular into rkolev/treeGridTests
2 parents 0fc6e78 + acead4f commit 12b7d81

17 files changed

+1256
-91
lines changed

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

+47-19
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
/// @param {Color} $drop-area-icon-color [rgba(0, 0, 0, .38)] - The drop area icon color.
5353
/// @param {Color} $drop-area-background [rgba(0, 0, 0, .04)] - The drop area background color.
5454
/// @param {Color} $drop-area-on-drop-background [rgba(0, 0, 0, .08)] - The drop area background on drop color.
55-
/// @param {Color} $treegrid-filtered-text-color [rgba(0, 0, 0, .04)] - grouping row background color on focus.
55+
/// @param {Color} $tree-filtered-text-color [rgba(0, 0, 0, .04)] - grouping row background color on focus.
5656
///
5757
/// @requires igx-color
5858
/// @requires igx-contrast-color
@@ -126,7 +126,7 @@
126126
$drop-area-background: null,
127127
$drop-area-on-drop-background: null,
128128
129-
$treegrid-filtered-text-color: null
129+
$tree-filtered-text-color: null
130130
) {
131131
$default-theme: (
132132
name: 'igx-grid',
@@ -193,13 +193,16 @@
193193

194194
group-row-background: hexrgba(igx-color($palette, 'grays', 100)),
195195
group-row-selected-background: hexrgba(igx-color($palette, 'grays', 200)),
196-
treegrid-filtered-text-color: igx-color($palette, grays, 500)
196+
tree-filtered-text-color: igx-color($palette, grays, 500)
197197
);
198198

199199
@if $preset {
200200
$default-theme: map-get($preset, map-get($default-theme, 'name'));
201201
}
202202

203+
$tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($default-theme, 'row-selected-background')), .5);
204+
$tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($default-theme, 'cell-selected-background')), .5);
205+
203206
@if not($ghost-header-icon-color) and $ghost-header-background {
204207
$ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);
205208
}
@@ -264,7 +267,6 @@
264267
$group-row-background: $header-background
265268
}
266269

267-
///////
268270
@if not($expand-icon-color) and $group-row-background {
269271
$expand-icon-color: text-contrast($group-row-background)
270272
}
@@ -280,8 +282,6 @@
280282
@if not($group-count-background) and $group-row-selected-background {
281283
$group-count-background: text-contrast($group-row-selected-background);
282284
}
283-
////////
284-
285285

286286
@if not($expand-all-icon-color) and $header-background {
287287
$expand-all-icon-color: rgba(text-contrast($header-background), .87);
@@ -383,7 +383,9 @@
383383
drop-area-icon-color: $drop-area-icon-color,
384384
drop-area-on-drop-background: $drop-area-on-drop-background,
385385
drop-area-background: $drop-area-background,
386-
treegrid-filtered-text-color: $treegrid-filtered-text-color
386+
tree-filtered-text-color: $tree-filtered-text-color,
387+
tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
388+
tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color
387389
));
388390
}
389391

@@ -414,8 +416,6 @@
414416
$transition: all 120ms $ease-in-out-cubic;
415417

416418
// Cell
417-
// $grid-cell-padding: 0 rem(24px);
418-
// $grid-cell-padding--e: 0 rem(24px);
419419
$grid-cell-align-num: right;
420420
$grid-cell-fs: rem(13px);
421421
$grid-cell-lh: rem(16px);
@@ -655,10 +655,10 @@
655655
}
656656

657657
%igx-grid__tree-grouping-indicator {
658-
color: rgba(text-contrast(--var($theme, 'row-selected-background')), .5);
658+
color: --var($theme, 'row-selected-text-color');
659659

660660
&:hover {
661-
color: text-contrast(--var($theme, 'row-selected-background'));
661+
color: --var($theme, 'row-selected-text-color');
662662
}
663663
}
664664
}
@@ -708,29 +708,55 @@
708708

709709
%igx-grid-row--filtered {
710710
%grid-cell-text {
711-
color: --var($theme, 'treegrid-filtered-text-color');
711+
color: --var($theme, 'tree-filtered-text-color');
712+
}
713+
714+
%igx-grid__tree-grouping-indicator {
715+
color: --var($theme, 'tree-filtered-text-color');
716+
717+
&:hover {
718+
color: --var($theme, 'tree-filtered-text-color');
719+
}
720+
}
721+
722+
%grid-cell--selected {
723+
%grid-cell-text {
724+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
725+
}
726+
727+
%igx-grid__tree-grouping-indicator {
728+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
729+
730+
&:hover {
731+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
732+
}
733+
}
712734
}
713735
}
714736

715737
%grid-row--selected--filtered {
716738
%grid-cell-text {
717-
color: rgba(text-contrast(--var($theme, 'row-selected-background')), .5);
739+
color: --var($theme, 'tree-selected-filtered-row-text-color');
718740
}
719741

720742
%igx-grid__tree-grouping-indicator {
721-
color: rgba(text-contrast(--var($theme, 'row-selected-background')), .5);
743+
color: --var($theme, 'tree-selected-filtered-row-text-color');
722744

723745
&:hover {
724-
color: text-contrast(--var($theme, 'row-selected-background'));
746+
color: --var($theme, 'tree-selected-filtered-row-text-color');
725747
}
726748
}
727749

728750
%grid-cell--selected {
751+
%grid-cell-text {
752+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
753+
}
754+
729755
%igx-grid__tree-grouping-indicator {
730-
color: rgba(text-contrast(--var($theme, 'cell-selected-background')), .5);
756+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
731757

732758
&:hover {
733-
color: text-contrast(--var($theme, 'cell-selected-background'));
759+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
734760
}
735761
}
736762
}
@@ -740,6 +766,8 @@
740766
display: flex;
741767
align-items: center;
742768
justify-content: center;
769+
user-select: none;
770+
outline-style: none;
743771
margin-right: rem(8);
744772
cursor: pointer;
745773

@@ -791,10 +819,10 @@
791819
border-bottom: 0;
792820

793821
%igx-grid__tree-grouping-indicator {
794-
color: rgba(text-contrast(--var($theme, 'cell-selected-background')), .5);
822+
color: --var($theme, 'cell-selected-text-color');
795823

796824
&:hover {
797-
color: text-contrast(--var($theme, 'cell-selected-background'));
825+
color: --var($theme, 'cell-selected-text-color');
798826
}
799827
}
800828
}

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
229229
}
230230
}
231231

232-
public submit_value(gridId, detectChanges = true) {
232+
public submit_value(gridId) {
233233
const editableCell = this.get_cell_inEditMode(gridId);
234234
if (editableCell) {
235235
if (!editableCell.cell.column.inlineEditorTemplate && editableCell.cell.column.dataType === 'number') {
@@ -245,9 +245,6 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
245245
this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, editableCell.cell.editValue);
246246
}
247247
this.escape_editMode(gridId, editableCell.cellID);
248-
if (detectChanges) {
249-
this.get(gridId).cdr.detectChanges();
250-
}
251248
}
252249
}
253250

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
</ng-template>
1010
<ng-template #inlineEditor let-cell="cell">
1111
<ng-container *ngIf="column.dataType === 'string'">
12-
<igx-input-group>
12+
<igx-input-group displayDensity="compact">
1313
<input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused">
1414
</igx-input-group>
1515
</ng-container>
1616
<ng-container *ngIf="column.dataType === 'number'">
17-
<igx-input-group>
17+
<igx-input-group displayDensity="compact">
1818
<input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" type="number">
1919
</igx-input-group>
2020
</ng-container>

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

+20-2
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,13 @@
1212
ViewChild
1313
} from '@angular/core';
1414
import { IgxSelectionAPIService } from '../core/selection';
15-
import { DataType } from '../data-operations/data-util';
1615
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
1716
import { GridBaseAPIService } from './api.service';
1817
import { IgxColumnComponent } from './column.component';
1918
import { isNavigationKey, valToPxlsUsingRange } from '../core/utils';
2019
import { State } from '../services/index';
2120
import { IgxGridBaseComponent } from './grid-base.component';
22-
21+
import { first } from 'rxjs/operators';
2322
/**
2423
* Providing reference to `IgxGridCellComponent`:
2524
* ```typescript
@@ -713,6 +712,21 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
713712
event.stopPropagation();
714713
}
715714

715+
if (event.altKey) {
716+
if (this.row.nativeElement.tagName.toLowerCase() === 'igx-tree-grid-row' && this.isToggleKey(key)) {
717+
const collapse = (this.row as any).expanded && (key === 'left' || key === 'arrowleft');
718+
const expand = !(this.row as any).expanded && (key === 'right' || key === 'arrowright');
719+
if (collapse) {
720+
(this.gridAPI as any).trigger_row_expansion_toggle(
721+
this.gridID, this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
722+
} else if (expand) {
723+
(this.gridAPI as any).trigger_row_expansion_toggle(
724+
this.gridID, this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
725+
}
726+
return;
727+
}
728+
}
729+
716730
const args = {cell: this, groupRow: null, event: event, cancel: false };
717731
this.grid.onFocusChange.emit(args);
718732
if (args.cancel) {
@@ -878,4 +892,8 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
878892
return Math.max(...Array.from(this.nativeElement.children)
879893
.map((child) => valToPxlsUsingRange(range, child)));
880894
}
895+
896+
private isToggleKey(key) {
897+
return ['left', 'right', 'arrowleft', 'arrowright'].indexOf(key.toLowerCase()) !== -1;
898+
}
881899
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1966,7 +1966,7 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
19661966

19671967
private keydownHandler(event) {
19681968
const key = event.key.toLowerCase();
1969-
if (isNavigationKey(key) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
1969+
if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
19701970
event.preventDefault();
19711971
if (key === 'pagedown') {
19721972
this.verticalScrollContainer.scrollNextPage();
@@ -4321,7 +4321,7 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
43214321
const rowObject = row ? this.getRowByKey(row.rowID) : null;
43224322
const cellInEdit = this.gridAPI.get_cell_inEditMode(this.id);
43234323
if (cellInEdit) {
4324-
this.gridAPI.submit_value(this.id, commit);
4324+
this.gridAPI.submit_value(this.id);
43254325
}
43264326
this.endRowTransaction(commit, true, row, rowObject);
43274327
const currentCell = (row && cellInEdit) ? this.gridAPI.get_cell_by_index(this.id, row.rowIndex, cellInEdit.cellID.columnID) : null;

0 commit comments

Comments
 (0)