From 4b6ad356329526d9739b4ee1de2575479083f3b4 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 8 Nov 2024 10:41:35 +0200 Subject: [PATCH 1/9] fix(grid): column resizing line positioned correctly --- .../src/lib/grids/resizing/resizer.component.html | 2 +- .../src/lib/grids/resizing/resizer.directive.ts | 15 ++++++++++++--- .../src/lib/grids/resizing/resizing.service.ts | 4 ++-- 3 files changed, 15 insertions(+), 6 deletions(-) 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..bca00b4e6ca 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 (parentRectWidth && parentComputedWidth && 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..dbbeb536f39 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -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; From a3e5b3e5eb5857cde8c5c8733919a42704662c17 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 12 Nov 2024 11:44:19 +0200 Subject: [PATCH 2/9] fix(resizing): calculating the position of the resizing line --- .../src/lib/grids/resizing/resizer.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bca00b4e6ca..eaab146adf5 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -123,7 +123,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { if (parentRectWidth && parentComputedWidth && parentRectWidth / parentComputedWidth !== 1) { this._ratio = parentRectWidth / parentComputedWidth; } - this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / (this._ratio); + 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); From f344b87ee7eb01481825a5551ece238b5a346dc1 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 12 Nov 2024 15:25:40 +0200 Subject: [PATCH 3/9] fix(grid): using computed style for restrict resize --- .../src/lib/grids/resizing/resizing.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 dbbeb536f39..c59ae1c7e0e 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -61,7 +61,7 @@ export class IgxColumnResizingService { * Returns the minimal possible width to which the column can be resized. */ public get restrictResizeMin(): number { - const actualWidth = this.getColumnHeaderRenderedWidth(); + const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth; return actualWidth - minWidth; @@ -71,7 +71,7 @@ export class IgxColumnResizingService { * Returns the maximal possible width to which the column can be resized. */ public get restrictResizeMax(): number { - const actualWidth = this.getColumnHeaderRenderedWidth(); + const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); const maxWidth = this.column.maxWidthPx; if (this.column.maxWidth) { return maxWidth - actualWidth; From 0eabbcc75a8533311cb629e97a4ea13042aa4658 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 13 Nov 2024 16:36:11 +0200 Subject: [PATCH 4/9] fix(grid): test to check for correct calculations when grid is scaled --- .../lib/grids/grid/column-resizing.spec.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) 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..fa7a44525ba 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 correct 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'; From f1f5a9ff5fc217a13247c59efffb35907c55399e Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 13 Nov 2024 16:50:50 +0200 Subject: [PATCH 5/9] fix(grid): test appropriate naming --- .../igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 fa7a44525ba..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 @@ -134,7 +134,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(grid.columnList.get(1).width).toEqual('70px'); })); - it('should calculate correct resizer position and column width when grid is scaled and zoomed', fakeAsync(() => { + 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(); From ca37ac7736d98ff54238acf72b5709d268a3a7d7 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 13 Nov 2024 17:02:59 +0200 Subject: [PATCH 6/9] fix(resizing): update the getter to use width from the computed styles --- .../src/lib/grids/resizing/resizing.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 c59ae1c7e0e..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); } /** @@ -61,7 +61,7 @@ export class IgxColumnResizingService { * Returns the minimal possible width to which the column can be resized. */ public get restrictResizeMin(): number { - const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); + const actualWidth = this.getColumnHeaderRenderedWidth(); const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth; return actualWidth - minWidth; @@ -71,7 +71,7 @@ export class IgxColumnResizingService { * Returns the maximal possible width to which the column can be resized. */ public get restrictResizeMax(): number { - const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); + const actualWidth = this.getColumnHeaderRenderedWidth(); const maxWidth = this.column.maxWidthPx; if (this.column.maxWidth) { return maxWidth - actualWidth; From a055b310bcda72c72b4ccbb64cbfbc960ee152df Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 Nov 2024 10:37:28 +0200 Subject: [PATCH 7/9] fix(resizing): no taking into account bellow a pixel --- .../src/lib/grids/resizing/resizer.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 eaab146adf5..9bf213f801e 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -120,7 +120,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { const parent = this.element.nativeElement.parentElement.parentElement; const parentRectWidth = parent.getBoundingClientRect().width; const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width); - if (parentRectWidth && parentComputedWidth && parentRectWidth / parentComputedWidth !== 1) { + if (Math.abs(parentRectWidth - parentComputedWidth) > 1) { this._ratio = parentRectWidth / parentComputedWidth; } this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio; From 70f38319699ecc014fc46ef080e0054cedd589f0 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Fri, 10 Jan 2025 10:17:13 +0200 Subject: [PATCH 8/9] fix(checkbox/switch/radio): inconsistent cursor (#15227) --- .../lib/core/styles/components/checkbox/_checkbox-theme.scss | 3 +-- .../src/lib/core/styles/components/radio/_radio-theme.scss | 2 -- .../src/lib/core/styles/components/switch/_switch-theme.scss | 2 -- 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 40362179022..4f8f632a66e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -175,6 +175,7 @@ flex-flow: row nowrap; align-items: center; outline-style: none; + cursor: pointer; } %cbx-display--disabled { @@ -211,7 +212,6 @@ %cbx-composite { position: relative; display: inline-block; - cursor: pointer; width: $size; height: $size; min-width: $size; @@ -500,7 +500,6 @@ %cbx-label { display: inline-block; color: var-get($theme, 'label-color'); - cursor: pointer; user-select: none; word-wrap: break-all; transition: color .2s $ease-out-quad; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index dcaa588157d..b12f4ddaed9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -212,7 +212,6 @@ height: $size; min-width: $size; line-height: $size; - cursor: pointer; color: var-get($theme, 'label-color'); user-select: none; @@ -400,7 +399,6 @@ %radio-label { color: var-get($theme, 'label-color'); - cursor: pointer; user-select: none; word-wrap: break-all; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 0b005a2e730..519623f8f29 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -290,7 +290,6 @@ border: rem(1px) solid var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius-track'); background: var-get($theme, 'track-off-color'); - cursor: pointer; user-select: none; transition: $input-transition; @@ -557,7 +556,6 @@ %switch-label { display: inline-block; color: var-get($theme, 'label-color'); - cursor: pointer; user-select: none; word-wrap: break-all; From 06959f3f8c857a07a03f2cdb02c216aef1e4f316 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 10 Jan 2025 10:18:22 +0200 Subject: [PATCH 9/9] fix(themes): igx-icon gets overridden multiple themes (#15220) --- .../styles/components/chip/_chip-theme.scss | 2 +- .../styles/components/combo/_combo-theme.scss | 4 +-- .../grid/_excel-filtering-theme.scss | 10 +++---- .../styles/components/grid/_grid-theme.scss | 26 ++++++++----------- 4 files changed, 17 insertions(+), 25 deletions(-) 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 6cacc77cb74..bbb6609e09d 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 @@ -384,7 +384,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 fccb690fe53..90ce37cda12 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 @@ -1204,7 +1204,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 { @@ -1458,12 +1458,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; } } @@ -2035,13 +2035,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)}); } } @@ -2147,7 +2144,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'); } @@ -2155,7 +2152,7 @@ &:hover { color: var-get($theme, 'header-selected-text-color'); - %igx-icon-display { + igx-icon { color: var-get($theme, 'header-selected-text-color'); } } @@ -2499,7 +2496,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'); @@ -3447,10 +3444,9 @@ } @if $variant == 'indigo' { - %igx-icon-display { + igx-icon { opacity: if($theme-variant == 'light', .75, .85); - &:hover { opacity: 1; cursor: pointer;