From d57919b3b9cea117ab3f54fcba81ee5803a91d9e Mon Sep 17 00:00:00 2001 From: AMishev Date: Mon, 18 Jun 2018 16:09:18 +0300 Subject: [PATCH 01/10] docs(IgxInputGroup): add API docs for IgxInputGroup --- .../lib/input-group/input-group.component.ts | 146 +++++++++++++++++- 1 file changed, 145 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 73b8f6dd0ad..e1588f80da2 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -32,62 +32,131 @@ enum IgxInputGroupType { export class IgxInputGroupComponent { private _type = IgxInputGroupType.LINE; + /** + * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated. + * ```html + * + * ``` + */ @HostBinding('attr.id') @Input() public id = `igx-input-group-${NEXT_ID++}`; + /** + * Property that enables/disables the autogenerated class of the `IgxInputGroupComponent`. + * By default applied the class is applied. + *```typescript + *@ViewChild("MyInputGroup") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + *this.inputGroup.defaultClass = false; + *``` + *} + */ @HostBinding('class.igx-input-group') public defaultClass = true; + /** + * @hidden + */ @HostBinding('class.igx-input-group--placeholder') public hasPlaceholder = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--required') public isRequired = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--focused') public isFocused = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--filled') public isFilled = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--box') public isBox = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--border') public isBorder = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--search') public isSearch = false; + /** + * An @Input property that disables the `IgxInputGroupComponent`. + * ```html + * + * ``` + */ @HostBinding('class.igx-input-group--disabled') @Input() public disabled = false; + /** + * @hidden + */ @HostBinding('class.igx-input-group--valid') public get validClass(): boolean { return this.input.valid === IgxInputState.VALID; } + /** + * @hidden + */ @HostBinding('class.igx-input-group--invalid') public get invalidClass(): boolean { return this.input.valid === IgxInputState.INVALID; } + /** + * @hidden + */ @HostBinding('class.igx-input-group--warning') public hasWarning = false; + /** + * @hidden + */ @ContentChildren(IgxHintDirective, { read: IgxHintDirective }) protected hints: QueryList; + /** + * @hidden + */ @ContentChild(IgxInputDirective, { read: IgxInputDirective }) protected input: IgxInputDirective; + /** + *@hidden + */ @HostListener('click', ['$event']) public onClick(event) { this.input.focus(); } + /** + * An @Input property that sets how the input will be styled. + * The allowed values are `line`, `box`, `border` and `search`. The default is `line`. + * ```html + * + * ``` + */ @Input('type') set type(value: string) { const type: IgxInputGroupType = (IgxInputGroupType as any)[value.toUpperCase()]; @@ -109,39 +178,114 @@ export class IgxInputGroupComponent { this._type = type; } } + + /** + * Returns the type of the `IgxInputGroupComponent`. How the input is styled. + * Values are `line` - 0, `box` - 1, `border` - 2 and `search` - 3. The default is `line`. + * ```typescript + *@ViewChild("MyInputGroup") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let inputType = this.inputGroup.type; + *} + * ``` + */ get type() { return this._type.toString(); } - constructor(public element: ElementRef) { + constructor(private element: ElementRef) { } + /** + * Returns whether the `IgxInputGroupComponent` has hints. + * ```typescript + *@ViewChild("MyInputGroup") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let inputHints = this.inputGroup.hasHints; + *} + * ``` + */ get hasHints() { return this.hints.length > 0; } + /** + * Returns whether the `IgxInputGroupComponent` has border. + * ```typescript + *@ViewChild("MyInputGroup") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let inputBroder = this.inputGroup.hasBorder; + *} + * ``` + */ get hasBorder() { return this._type === IgxInputGroupType.LINE || this._type === IgxInputGroupType.BOX; } + /** + * Returns whether the `IgxInputGroupComponent` type is line. + * ```typescript + *@ViewChild("MyInputGroup1") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let isTypeLine = this.inputGroup.isTypeLine; + *} + * ``` + */ public get isTypeLine(): boolean { return this._type === IgxInputGroupType.LINE; } + /** + * Returns whether the `IgxInputGroupComponent` type is box. + * ```typescript + *@ViewChild("MyInputGroup1") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let isTypeBox = this.inputGroup.isTypeBox; + *} + *``` + */ get isTypeBox() { return this._type === IgxInputGroupType.BOX; } + /** + * Returns whether the `IgxInputGroupComponent` type is border. + * ```typescript + *@ViewChild("MyInputGroup1") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let isTypeBorder = this.inputGroup.isTypeBorder; + *} + * ``` + */ get isTypeBorder() { return this._type === IgxInputGroupType.BORDER; } + /** + * Returns whether the `IgxInputGroupComponent` type is search. + * ```typescript + *@ViewChild("MyInputGroup1") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let isTypeSearch = this.inputGroup.isTypeSearch; + *} + * ``` + */ get isTypeSearch() { return this._type === IgxInputGroupType.SEARCH; } } +/** + * The IgxInputGroupModule provides the {@link IgxInputGroupComponent} inside your application. + */ @NgModule({ declarations: [IgxInputGroupComponent, IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective], exports: [IgxInputGroupComponent, IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective], From 3910fcbcd218dede98d9cadff44620cf8df25690 Mon Sep 17 00:00:00 2001 From: AMishev Date: Mon, 18 Jun 2018 17:21:22 +0300 Subject: [PATCH 02/10] docs(IgxDatePicker): Property 'element' is private --- .../src/lib/input-group/input-group.component.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index e1588f80da2..fd7f12b2a73 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -32,6 +32,11 @@ enum IgxInputGroupType { export class IgxInputGroupComponent { private _type = IgxInputGroupType.LINE; + /** + * An ElementRef property of the `IgxInputGroupComponent`. + */ + public element: ElementRef; + /** * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated. * ```html @@ -194,7 +199,8 @@ export class IgxInputGroupComponent { return this._type.toString(); } - constructor(private element: ElementRef) { + constructor(private _element: ElementRef) { + this.element = _element; } /** From 626af8db9096262ea57571ac7ad2fdd7fd432246 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 20 Jun 2018 16:43:20 +0300 Subject: [PATCH 03/10] feat(grid-theme): add alternating row colors through theming Closes 1491 --- .../grid-summary/_grid-summary-theme.scss | 2 +- .../components/grid/_grid-component.scss | 12 +++ .../styles/components/grid/_grid-theme.scss | 78 +++++++++++++++---- .../src/lib/grid/cell.component.html | 2 +- .../src/lib/grid/grid.component.ts | 18 ++--- .../grid-summaries/grid-summaries.sample.html | 4 +- 6 files changed, 91 insertions(+), 25 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index b01ecd85a50..224b2ed7d31 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -160,7 +160,7 @@ %igx-grid-summary__result { color: --var($theme, 'result-color'); - font-weight: 800; + font-weight: 600; flex: 1 1 auto; text-align: right; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss index d377142eac2..7522d4153e6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss @@ -63,6 +63,14 @@ } } + @include e(tr, $m: odd) { + @extend %grid-row--odd !optional; + } + + @include e(tr, $m: even) { + @extend %grid-row--even !optional; + } + @include e(tr, $m: selected) { @extend %grid-row--selected !optional; } @@ -137,6 +145,10 @@ @extend %grid-cell--fixed-width !optional; } + @include e(td-text) { + @extend %grid-cell-text !optional; + } + @include e(cbx-selection) { @extend %grid__cbx-selection !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index ad1e34c2247..f327fe2ebd7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -13,9 +13,14 @@ /// @param {Color} $ghost-header-background [null] - The dragged header background color. /// @param {Color} $content-background [null] - The table body background color. /// @param {Color} $content-text-color [null] - The table body text color. +/// @param {Color} $row-odd-background [null] - The background color of odd rows. +/// @param {Color} $row-even-background [null] - The background color of even rows. +/// @param {Color} $row-odd-text-color [null] - The text color of odd rows. +/// @param {Color} $row-even-text-color [null] - The text color of even rows. /// @param {Color} $row-selected-background [null] - The selected row background color. /// @param {Color} $row-selected-text-color [null] - The selected row text color. /// @param {Color} $row-hover-background [null] - The hover row background color. +/// @param {Color} $row-hover-text-color [null] - The hover row text color. /// @param {Color} $row-border-color [null] - The row bottom border color. /// @param {Color} $pinned-border-width [null] - The border width of the pinned border. /// @param {Color} $pinned-border-style [null] - The CSS border style of the pinned border. @@ -42,9 +47,14 @@ $ghost-header-icon-color: null, $ghost-header-background: null, + $row-odd-background: null, + $row-even-background: null, + $row-odd-text-color: null, + $row-even-text-color: null, $row-selected-background: null, $row-selected-text-color: null, $row-hover-background: null, + $row-hover-text-color: null, $row-border-color: null, $pinned-border-width: null, @@ -71,9 +81,14 @@ ghost-header-icon-color: igx-color($palette, 'grays'), ghost-header-background: #fff, + row-odd-background: #fff, + row-even-background: #fff, + row-odd-text-color: inherit, + row-even-text-color: inherit, row-selected-background: hexrgba(igx-color($palette, 'grays', 800)), row-selected-text-color: igx-contrast-color($palette, 'grays', 900), row-hover-background: hexrgba(igx-color($palette, 'grays', 100)), + row-hover-text-color: igx-color($palette, 'grays', 800), row-border-color: igx-color($palette, 'grays', 300), pinned-border-width: 2px, @@ -105,6 +120,26 @@ $content-text-color: text-contrast($content-background); } + @if not($row-odd-background) and $content-background { + $row-odd-background: $content-background; + } + + @if not($row-even-background) and $content-background { + $row-even-background: $content-background; + } + + @if not($row-odd-text-color) and $row-odd-background { + $row-odd-text-color: text-contrast($row-odd-background); + } + + @if not($row-even-text-color) and $row-even-background { + $row-even-text-color: text-contrast($row-even-background); + } + + @if not($row-hover-text-color) and $row-hover-background { + $row-hover-text-color: text-contrast($row-hover-background); + } + @if not($cell-selected-text-color) and $cell-selected-background { $cell-selected-text-color: text-contrast($cell-selected-background); } @@ -138,9 +173,14 @@ content-background: $content-background, content-text-color: $content-text-color, + row-odd-background: $row-odd-background, + row-even-background: $row-even-background, + row-odd-text-color: $row-odd-text-color, + row-even-text-color: $row-even-text-color, row-selected-background: $row-selected-background, row-selected-text-color: $row-selected-text-color, row-hover-background: $row-hover-background, + row-hover-text-color: $row-hover-text-color, row-border-color: $row-border-color, pinned-border-width: $pinned-border-width, @@ -152,7 +192,6 @@ cell-selected-text-color: $cell-selected-text-color, resize-line-color: $resize-line-color, - drop-indicator-color: $drop-indicator-color )); } @@ -242,9 +281,11 @@ %grid-row { background: inherit; + color: inherit; &:hover { background: inherit; + color: inherit; } } } @@ -317,15 +358,27 @@ &:hover { background-color: --var($theme, 'row-hover-background'); + color: --var($theme, 'row-hover-text-color'); } } + %grid-row--odd { + background: --var($theme, 'row-odd-background'); + color: --var($theme, 'row-odd-text-color'); + } + + %grid-row--even { + background: --var($theme, 'row-even-background'); + color: --var($theme, 'row-even-text-color'); + } + %grid-row--selected { color: --var($theme, 'row-selected-text-color'); background-color: --var($theme, 'row-selected-background'); &:hover { background-color: --var($theme, 'row-selected-background'); + color: --var($theme, 'row-selected-text-color'); } } @@ -339,9 +392,10 @@ line-height: $grid-cell-lh; color: inherit; text-align: left; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + } + + %grid-cell-text { + @include ellipsis(); } %grid-cell-display--cosy { @@ -364,8 +418,7 @@ %grid-cell--editing { background-color: --var($theme, 'cell-editing-background') !important; - border: 1px solid --var($theme, 'cell-selected-background'); - box-shadow: igx-elevation($elevations, 2); + border: 2px solid --var($theme, 'cell-selected-background'); igx-input-group { width: 100%; @@ -381,6 +434,10 @@ %grid-cell--pinned-last { border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important; + + &%grid-cell--editing { + border-right: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important; + } } %grid-cell-header { @@ -394,10 +451,6 @@ padding: map-get($grid-header-padding, 'comfortable'); border-right: 1px dotted igx-color($palette, 'grays', 400); overflow: visible; - - &:last-of-type { - border-right: transparent; - } } %grid-cell-header--cosy { @@ -452,13 +505,12 @@ } %grid__cbx-selection { - padding: 0 rem(24px); display: flex; justify-content: center; align-items: center; - z-index: 1; - position: relative; + padding: 0 rem(24px); background: inherit; + z-index: 1; } %grid__resize-handle { diff --git a/projects/igniteui-angular/src/lib/grid/cell.component.html b/projects/igniteui-angular/src/lib/grid/cell.component.html index 4e94d0265b5..e07b1137b04 100644 --- a/projects/igniteui-angular/src/lib/grid/cell.component.html +++ b/projects/igniteui-angular/src/lib/grid/cell.component.html @@ -1,6 +1,6 @@ -
{{ formatter ? formatter(value) : value }}
+
{{ formatter ? formatter(value) : value }}
 diff --git a/projects/igniteui-angular/src/lib/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grid/grid.component.ts index 25dec6d1fd2..f0c0b52cd1b 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.component.ts @@ -253,7 +253,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af this._columnHiding = value; if (this.gridAPI.get(this.id)) { this.markForCheck(); - } + } } public get displayDensity(): DisplayDensity | string { @@ -327,10 +327,10 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af } @Input() - public evenRowCSS = ''; + public evenRowCSS = 'igx-grid__tr--even'; @Input() - public oddRowCSS = ''; + public oddRowCSS = 'igx-grid__tr--odd'; @Input() public rowHeight: number; @@ -1275,9 +1275,9 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af } let toolbarHeight = 0; - if (this.showToolbar && this.toolbarHtml != null) { - toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ? - this.toolbarHtml.nativeElement.offsetHeight : 0; + if (this.showToolbar && this.toolbarHtml != null) { + toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ? + this.toolbarHtml.nativeElement.offsetHeight : 0; } let pagingHeight = 0; @@ -1294,7 +1294,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af if (this._height && this._height.indexOf('%') !== -1) { /*height in %*/ this.calcHeight = this._calculateGridBodyHeight( - parseInt(computed.getPropertyValue('height'), 10), toolbarHeight, pagingHeight); + parseInt(computed.getPropertyValue('height'), 10), toolbarHeight, pagingHeight); } else { this.calcHeight = this._calculateGridBodyHeight( parseInt(this._height, 10), toolbarHeight, pagingHeight); @@ -1302,7 +1302,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af } protected _calculateGridBodyHeight(gridHeight: number, - toolbarHeight: number, pagingHeight: number) { + toolbarHeight: number, pagingHeight: number) { const footerBordersAndScrollbars = this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight; @@ -1759,7 +1759,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af const searchText = caseSensitive ? this.lastSearchInfo.searchText : this.lastSearchInfo.searchText.toLowerCase(); const data = this.filteredSortedData; const columnItems = this.visibleColumns.sort((c1, c2) => c1.visibleIndex - c2.visibleIndex). - map((c) => ({ columnName: c.field, columnSearchable: c.searchable }) ); + map((c) => ({ columnName: c.field, columnSearchable: c.searchable })); data.forEach((dataRow, i) => { const rowIndex = this.paging ? i % this.perPage : i; diff --git a/src/app/grid-summaries/grid-summaries.sample.html b/src/app/grid-summaries/grid-summaries.sample.html index 8ced439a916..b8cd84fcd82 100644 --- a/src/app/grid-summaries/grid-summaries.sample.html +++ b/src/app/grid-summaries/grid-summaries.sample.html @@ -11,7 +11,9 @@ - {{val['__deferred']['uri']}} +
+ {{val['__deferred']['uri']}} +
From da0b39ff3a5dfbc32f8560a45187da98852e82af Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Wed, 20 Jun 2018 18:50:31 +0300 Subject: [PATCH 04/10] fix(tabs): Fixes for tabs group content resizing #1616 --- .../src/lib/tabs/tab-item.component.ts | 2 -- .../src/lib/tabs/tabs-group.component.ts | 28 +++++++++---------- .../src/lib/tabs/tabs.component.ts | 5 ---- 3 files changed, 13 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts index 948a8b091e2..ad21661e558 100644 --- a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts @@ -1,7 +1,5 @@ -import { CommonModule } from '@angular/common'; import { Component, - ContentChild, ElementRef, forwardRef, HostBinding, diff --git a/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts index 555f8035916..9f4cb797375 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts @@ -1,16 +1,15 @@ -import { CommonModule } from '@angular/common'; import { AfterContentInit, AfterViewChecked, Component, ContentChild, - Directive, ElementRef, forwardRef, HostBinding, Inject, Input, - TemplateRef + TemplateRef, + HostListener } from '@angular/core'; import { IgxTabItemComponent } from './tab-item.component'; @@ -23,10 +22,6 @@ import { IgxTabItemTemplateDirective } from './tabs.directives'; }) export class IgxTabsGroupComponent implements AfterContentInit, AfterViewChecked { - private _itemStyle = 'igx-tabs-group'; - /** - * @hidden - */ public isSelected = false; /** @@ -71,13 +66,6 @@ export class IgxTabsGroupComponent implements AfterContentInit, AfterViewChecked return 'igx-tabs__group'; } - /** - *@hidden - */ - public get itemStyle(): string { - return this._itemStyle; - } - /** * An accessor that returns the `IgxTabItemComponent` component. * ```typescript @@ -138,6 +126,16 @@ export class IgxTabsGroupComponent implements AfterContentInit, AfterViewChecked private _element: ElementRef) { } + + @HostListener('window:resize', ['$event']) + public onResize(event) { + if (this.isSelected) { + const contentOffset = this._tabs.tabsContainer.nativeElement.offsetWidth * this.index; + this._tabs.contentsContainer.nativeElement.style.transitionDuration = `0s`; + this._tabs.contentsContainer.nativeElement.style.transform = `translate(${-contentOffset}px)`; + } + } + /** * @hidden */ @@ -163,7 +161,6 @@ export class IgxTabsGroupComponent implements AfterContentInit, AfterViewChecked *public tab : IgxTabsGroupComponent; *ngAfterViewInit(){ * this.tab.select(); - * this.cdr.detectChanges(); *} *``` * @param focusDelay A number representing the expected delay. @@ -196,6 +193,7 @@ export class IgxTabsGroupComponent implements AfterContentInit, AfterViewChecked } const contentOffset = this._tabs.tabsContainer.nativeElement.offsetWidth * this.index; + this._tabs.contentsContainer.nativeElement.style.transitionDuration = `0.2s`; this._tabs.contentsContainer.nativeElement.style.transform = `translate(${-contentOffset}px)`; this._tabs.selectedIndicator.nativeElement.style.width = `${tabElement.offsetWidth}px`; diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs.component.ts index 3cb348efe72..24c4fd80303 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs.component.ts @@ -2,16 +2,12 @@ import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, - ContentChild, ContentChildren, - Directive, ElementRef, EventEmitter, forwardRef, - Host, HostBinding, HostListener, - Inject, Input, NgModule, Output, @@ -151,7 +147,6 @@ export class IgxTabsComponent implements AfterViewInit { if (group) { group.select(50, true); } - } }, 0); } From ec63e8cd76488aebb85a02697c5cc66284aa2ca1 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 21 Jun 2018 16:45:17 +0300 Subject: [PATCH 05/10] chore(changelog): add alternating grid row colors description --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7781897ca6a..49c11ae9a98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -56,6 +56,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand { ``` For more information, please head over to `igxGrid`'s [ReadMe](https://github.com/IgniteUI/igniteui-angular/blob/master/src/grid/README.md) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_groupby.html). +- `igxGrid` theme now has support for alternating grid row background and text colors. - `igxColumn` changes: - **Breaking change** filteringExpressions property is removed. From 47909a5e999f28d09c0f15661eb372ffe3fa1d23 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 22 Jun 2018 10:16:13 +0300 Subject: [PATCH 06/10] test(sorting): Adding back the skipped sorting test #1408 --- .../src/lib/grid/grid.sorting.spec.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grid/grid.sorting.spec.ts index 7896744efc6..5605c7e21ba 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.sorting.spec.ts @@ -237,7 +237,7 @@ describe('IgxGrid - Grid Sorting', () => { }); // sort now allows only params of type ISortingExpression hence it is not possible to pass invalid expressions - xit(`Grid sort by mixed valid and invalid expressions should update the + it(`Grid sort by mixed valid and invalid expressions should update the data only by valid ones (through API)`, () => { const fixture = TestBed.createComponent(GridDeclaredColumnsComponent); fixture.detectChanges(); @@ -253,16 +253,16 @@ describe('IgxGrid - Grid Sorting', () => { fixture.detectChanges(); - let expectedResult = 'Brad'; + let expectedResult = 'Rick'; expect(grid.getCellByColumn(0, secondColumn).value).toEqual(expectedResult); - expectedResult = 'Williams'; + expectedResult = 'Jones'; expect(grid.getCellByColumn(0, thirdColumn).value).toEqual(expectedResult); - expect(grid.getCellByColumn(0, firstColumn).value).toEqual(1); - expectedResult = 'Rick'; + expect(grid.getCellByColumn(0, firstColumn).value).toEqual(6); + expectedResult = 'ALex'; expect(grid.getCellByColumn(grid.data.length - 1, secondColumn).value).toEqual(expectedResult); - expectedResult = 'BRown'; + expectedResult = 'Smith'; expect(grid.getCellByColumn(grid.data.length - 1, thirdColumn).value).toEqual(expectedResult); - expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(7); + expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(5); }); // UI Tests From efdb6b616a2ecfb7d815c3fc35ad2d804b4eeb52 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Fri, 22 Jun 2018 10:24:19 +0300 Subject: [PATCH 07/10] test(igx-grid): silence flickering groupby test. #1260 --- projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts index 0e31217d19c..e572f88aedf 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts @@ -1615,7 +1615,7 @@ describe('IgxGrid - GroupBy', () => { expect(groupRows[1].expanded).toEqual(true); }); - it('should remove expansion state when reordering chips', (done) => { + xit('should remove expansion state when reordering chips', (done) => { const fix = TestBed.createComponent(GroupableGridComponent); const grid = fix.componentInstance.instance; fix.componentInstance.data = [ From 10bc09bf007ae43bce69df9e4e9d273f22ff3dd1 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 22 Jun 2018 11:17:17 +0300 Subject: [PATCH 08/10] fix(themes): fix uninitialized theme variables Closes 1599 --- .../lib/core/styles/components/button/_button-theme.scss | 4 ++-- .../components/grid-filtering/_grid-filtering-theme.scss | 6 ++++-- .../src/lib/core/styles/components/list/_list-theme.scss | 2 ++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 129056e7f29..2cf673d7dc5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -110,8 +110,8 @@ fab-text-color: igx-contrast-color($palette, 'secondary', 500), fab-background: igx-color($palette, 'secondary', 500), - fab-hover-text-color: null, - fab-hover-background: null, + fab-hover-text-color: igx-contrast-color($palette, 'secondary', 500), + fab-hover-background: igx-color($palette, 'secondary', 400), fab-focus-background: igx-color($palette, 'secondary', 500), fab-focus-text-color: igx-contrast-color($palette, 'secondary', 500), diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss index 45fc15b7640..2b280eb14a3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss @@ -51,6 +51,7 @@ ) { $default-theme: ( name: 'igx-grid-filtering', + toggle-background: transparent, toggle-icon-color: inherit, toggle-icon-hover-color: #fff, toggle-icon-active-color: igx-contrast-color($palette, 'secondary'), @@ -60,7 +61,8 @@ toggle-filtered-background: transparent, menu-background: #fff, menu-text-color: igx-color($palette, 'grays', 900), - menu-button-text-color: igx-color($palette, 'secondary') + menu-button-text-color: igx-color($palette, 'secondary'), + menu-button-disabled-text-color: initial ); @if not($menu-text-color) and $menu-background { @@ -213,7 +215,7 @@ color: --var($theme, 'menu-button-text-color'); &:disabled { - color: --var($theme, 'menu-button-text-color'); + color: --var($theme, 'menu-button-disabled-text-color'); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 215113ea1ae..cf3569c6150 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -32,7 +32,9 @@ $default-theme: ( name: 'igx-list', background: #fff, + header-background: #fff, header-text-color: igx-color($palette, 'secondary'), + item-background: #fff, item-text-color: igx-color($palette, 'grays', 800), item-background-active: igx-color($palette, 'grays', 100), item-text-color-active: igx-color($palette, 'grays', 800) From 97ffc632b0d1f5c44e201442aeaed7c8c3bca921 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 22 Jun 2018 11:28:32 +0300 Subject: [PATCH 09/10] test(grid): update grid row selection test after grouping --- .../igniteui-angular/src/lib/grid/grid.groupby.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts index 0e31217d19c..bad06bb662f 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts @@ -1351,7 +1351,7 @@ describe('IgxGrid - GroupBy', () => { fix.detectChanges(); let chips = fix.nativeElement.querySelectorAll('igx-chip'); // click grouping direction arrow - const event = {owner: {id: 'ProductName'}}; + const event = { owner: { id: 'ProductName' } }; grid.onChipClicked(event); chips = fix.nativeElement.querySelectorAll('igx-chip'); expect(chips.length).toBe(1); @@ -1427,7 +1427,7 @@ describe('IgxGrid - GroupBy', () => { checkBoxElement.dispatchEvent(new Event('click')); setTimeout(() => { expect(grid.selectedRows().length).toEqual(1); - expect(rows[0].element.nativeElement.className).toEqual('igx-grid__tr igx-grid__tr--selected'); + expect(rows[0].element.nativeElement.className).toEqual('igx-grid__tr igx-grid__tr--odd igx-grid__tr--selected'); done(); }, 100); }, 100); @@ -1803,8 +1803,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); // there should be 3 groups at top level const groupsRecords = grid.groupsRecords; From 934d6e2c145c686a53888b269d9d32331d8e1fdb Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 22 Jun 2018 12:01:23 +0300 Subject: [PATCH 10/10] Update CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fd9bf0cc6c..9825eb47d00 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -74,6 +74,9 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand { - `onClose` event renamed to `onClosed`. - **Breaking change** All properties that were named `isDisabled` have been renamed to `disabled` in order to acheive consistency across our component suite. This affects: date-picker, input directive, input-group, dropdown-item, tabbar and time-picker. +## 6.0.3 +- **igxGrid** exposing the `filteredSortedData` method publicly - returns the grid data with current filtering and sorting applied. + ## 6.0.2 - **igxGrid** Improve scrolling on mac [#1563](https://github.com/IgniteUI/igniteui-angular/pull/1563) - The `ng update igniteui-angular` migration schematics now also update the theme import path in SASS files. [#1582](https://github.com/IgniteUI/igniteui-angular/issues/1582)