diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index edc04afd2ba..3e34f7535a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -386,7 +386,7 @@ } @if $variant == 'indigo' { - %igx-icon-display { + igx-icon { --size: #{sizable(rem(14px), rem(14px), rem(16px))} } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 8bfc4c2fab8..941c98d461f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -174,14 +174,14 @@ // The wrapping element here is needed // in order to override the !important rule of .igx-icon--inactive. %igx-combo__case-icon { - .igx-icon { + igx-icon { // Important is needed since the .igx-icon--inactive has !important color: color($color: 'gray', $variant: 600) !important; } } %igx-combo__case-icon--active { - .igx-icon { + igx-icon { color: color($color: 'primary') } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 6d997143ea6..343bd37fd5b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -99,13 +99,9 @@ } } - igx-icon { - @if $variant == 'indigo' { - --component-size: 2; - } @else { - width: var(--igx-icon-size, #{rem(15px)}); - height: var(--igx-icon-size, #{rem(15px)}); - font-size: var(--igx-icon-size, #{rem(15px)}); + @if $variant != 'indigo' { + igx-icon { + --size: var(--igx-icon-size, #{rem(15px)}); } } } 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 c1fa45f8e6f..459ec6d5c27 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 @@ -1206,7 +1206,7 @@ } @else { padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - %igx-icon-display { + igx-icon { opacity: if($theme-variant == 'light', .75, .85); &:hover { @@ -1460,12 +1460,12 @@ } @else { padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - %igx-icon-display { + igx-icon { opacity: if($theme-variant == 'light', .75, .85); } &:hover { - %igx-icon-display { + igx-icon { opacity: 1; } } @@ -2037,13 +2037,10 @@ position: relative; display: flex; - igx-icon { - @if $variant == 'indigo' { - --component-size: 2; - } @else { - width: var(--igx-icon-size, #{rem(15px)}); - height: var(--igx-icon-size, #{rem(15px)}); - font-size: var(--igx-icon-size, #{rem(15px)}); + + @if $variant != 'indigo' { + igx-icon { + --size: var(--igx-icon-size, #{rem(15px)}); } } @@ -2149,7 +2146,7 @@ %grid-excel-icon { color: var-get($theme, 'header-selected-text-color'); - %igx-icon-display { + igx-icon { color: var-get($theme, 'header-selected-text-color'); } @@ -2157,7 +2154,7 @@ &:hover { color: var-get($theme, 'header-selected-text-color'); - %igx-icon-display { + igx-icon { color: var-get($theme, 'header-selected-text-color'); } } @@ -2501,7 +2498,7 @@ } %igx-group-label__icon { - &.igx-icon { + @at-root igx-icon#{&} { --component-size: #{if($variant == 'indigo', 2, 1)}; color: var-get($theme, 'group-label-icon'); @@ -3449,10 +3446,9 @@ } @if $variant == 'indigo' { - %igx-icon-display { + igx-icon { opacity: if($theme-variant == 'light', .75, .85); - &:hover { opacity: 1; cursor: pointer; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 6059ab22da9..b58b5f02b41 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -16,6 +16,7 @@ import { IgxAvatarComponent } from '../../avatar/avatar.component'; import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api'; import { Size } from "../common/enums"; import { setElementSize } from '../../test-utils/helper-utils.spec'; +import { IgxColumnResizerDirective } from '../resizing/resizer.directive'; describe('IgxGrid - Deferred Column Resizing #grid', () => { @@ -133,6 +134,27 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(grid.columnList.get(1).width).toEqual('70px'); })); + it('should calculate correctly resizer position and column width when grid is scaled and zoomed', fakeAsync(() => { + grid.nativeElement.style.transform = 'scale(1.2)'; + grid.nativeElement.style.setProperty('zoom', '1.05'); + fixture.detectChanges(); + headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0); + tick(200); + fixture.detectChanges(); + + const resizer = GridFunctions.getResizer(fixture); + const resizerDirective = resizer.componentInstance.resizer as IgxColumnResizerDirective; + const leftSetterSpy = spyOnProperty(resizerDirective, 'left', 'set').and.callThrough(); + UIInteractions.simulateMouseEvent('mousemove', resizer.nativeElement, 200, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer.nativeElement, 200, 5); + fixture.detectChanges(); + + expect(leftSetterSpy).toHaveBeenCalled(); + expect(parseInt(leftSetterSpy.calls.mostRecent().args[0].toFixed(0))).toEqual(200); + expect(parseInt(grid.columnList.get(1).headerCell.nativeElement.getBoundingClientRect().width.toFixed(0))).toEqual(173); + })); + it('should be able to resize column to the minWidth < defaultMinWidth', fakeAsync(() => { const column = grid.getColumnByName('ID'); column.minWidth = 'a'; diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html index 807f9b505ad..7da534bda24 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html @@ -4,5 +4,5 @@ [restrictHResizeMax]="colResizingService.restrictResizeMax" [restrictHResizeMin]="colResizingService.restrictResizeMin" [restrictResizerTop]="restrictResizerTop" - (resizeEnd)="colResizingService.resizeColumn($event)"> + (resizeEnd)="colResizingService.resizeColumn($event, resizer.ratio)"> diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts index 83b51c07298..9bf213f801e 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -41,8 +41,13 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { @Output() public resize = new Subject(); private _left: number; + private _ratio: number = 1; private _destroy = new Subject(); + public get ratio(): number { + return this._ratio; + } + constructor( public element: ElementRef, @Inject(DOCUMENT) public document, @@ -56,7 +61,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { .pipe( takeUntil(this._destroy), takeUntil(this.resizeEnd), - map((event) => event.clientX - offset), + map((event) => (event.clientX - offset) / (this._ratio)), )) ) .subscribe((pos) => { @@ -113,8 +118,12 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { public onMousedown(event: MouseEvent) { event.preventDefault(); const parent = this.element.nativeElement.parentElement.parentElement; - - this.left = this._left = event.clientX - parent.getBoundingClientRect().left; + const parentRectWidth = parent.getBoundingClientRect().width; + const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width); + if (Math.abs(parentRectWidth - parentComputedWidth) > 1) { + this._ratio = parentRectWidth / parentComputedWidth; + } + this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio; this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top; this.resizeStart.next(event); diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 2b6beae7418..b4106c80ede 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -35,7 +35,7 @@ export class IgxColumnResizingService { * @hidden */ public getColumnHeaderRenderedWidth() { - return this.column.headerCell.nativeElement.getBoundingClientRect().width; + return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); } /** @@ -101,9 +101,9 @@ export class IgxColumnResizingService { /** * Resizes the column regaridng to the column minWidth and maxWidth. */ - public resizeColumn(event: MouseEvent) { + public resizeColumn(event: MouseEvent, ratio: number = 1) { this.showResizer = false; - const diff = event.clientX - this.startResizePos; + const diff = (event.clientX - this.startResizePos) / ratio; const colWidth = this.column.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;