From 371fd7023760079d99f4f43363a997f16cffe7e5 Mon Sep 17 00:00:00 2001 From: Aleksandyr Date: Mon, 21 Jun 2021 15:45:43 +0300 Subject: [PATCH 1/9] feat(toolbar): allow passing position strategy through every action Closes #9065 --- .../lib/grids/toolbar/grid-toolbar.base.ts | 42 +++++++++++-------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index 6fac2e649dd..78b79b2638e 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -6,6 +6,7 @@ import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, + IPositionStrategy, OverlaySettings, PositionSettings, VerticalAlignment @@ -41,6 +42,12 @@ export abstract class BaseToolbarDirective implements OnDestroy { @Input() public prompt: string; + /** + * Position overlay strategy + */ + @Input() + public positionStrategy: IPositionStrategy; + /** * Emits an event before the toggle container is opened. */ @@ -73,6 +80,23 @@ export abstract class BaseToolbarDirective implements OnDestroy { private $destroyer = new Subject(); private $sub: Subscription; + private _positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom, + verticalStartPoint: VerticalAlignment.Bottom + }; + + private get _overlaySettings() { + const positionStrategy = this.positionStrategy ? this.positionStrategy : new ConnectedPositioningStrategy(this._positionSettings); + return { + positionStrategy, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: false, + closeOnEscape: true, + closeOnOutsideClick: true + }; + } /** * Returns the grid containing this component. @@ -94,7 +118,7 @@ export abstract class BaseToolbarDirective implements OnDestroy { const setHeight = () => actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight, 200)}px`; toggleRef.onOpening.pipe(first()).subscribe(setHeight); } - toggleRef.toggle({ ..._makeOverlaySettings(), ...{ target: anchorElement, outlet: this.grid.outlet, + toggleRef.toggle({ ...this.positionStrategy, ...{ target: anchorElement, outlet: this.grid.outlet, excludeFromOutsideClick: [anchorElement] }}); } @@ -160,19 +184,3 @@ export abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirec this.columnActionsUI.uncheckAllColumns(); } } - -const _makeOverlaySettings = (): OverlaySettings => { - const positionSettings: PositionSettings = { - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Bottom - }; - return { - positionStrategy: new ConnectedPositioningStrategy(positionSettings), - scrollStrategy: new AbsoluteScrollStrategy(), - modal: false, - closeOnEscape: true, - closeOnOutsideClick: true - }; -}; From 64d2032c9ae3fd81bd55ee6eb80f19079639fba0 Mon Sep 17 00:00:00 2001 From: Aleksandyr Date: Tue, 22 Jun 2021 09:51:47 +0300 Subject: [PATCH 2/9] fix(toolbar): pass positionStrategy input to the toggle overlay settings --- .../igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index 78b79b2638e..8bd75edbf78 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -118,7 +118,7 @@ export abstract class BaseToolbarDirective implements OnDestroy { const setHeight = () => actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight, 200)}px`; toggleRef.onOpening.pipe(first()).subscribe(setHeight); } - toggleRef.toggle({ ...this.positionStrategy, ...{ target: anchorElement, outlet: this.grid.outlet, + toggleRef.toggle({ ...this._overlaySettings, ...{ target: anchorElement, outlet: this.grid.outlet, excludeFromOutsideClick: [anchorElement] }}); } From dcc23179a24a92931781fcc725b73e01f04bb4fb Mon Sep 17 00:00:00 2001 From: Aleksandyr Date: Tue, 22 Jun 2021 15:17:38 +0300 Subject: [PATCH 3/9] fix(toolbar): expose all column actions overlay settings prop --- .../column-actions.component.ts | 2 +- .../src/lib/grids/grid-base.directive.ts | 9 ++-- ...-toolbar-advanced-filtering.component.html | 2 +- ...id-toolbar-advanced-filtering.component.ts | 6 ++- .../lib/grids/toolbar/grid-toolbar.base.ts | 44 ++++++++++--------- 5 files changed, 35 insertions(+), 28 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts index 3d2b875387c..e6525f760a3 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts @@ -13,7 +13,7 @@ import { import { IgxColumnComponent } from '../columns/column.component'; import { ColumnDisplayOrder } from '../common/enums'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; -import { IgxCheckboxComponent, IChangeCheckboxEventArgs } from '../../checkbox/checkbox.component'; +import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IColumnToggledEventArgs } from '../common/events'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { DeprecateProperty } from '../../core/deprecateDecorators'; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 513441b0b61..3470d63cd55 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -50,7 +50,7 @@ import { ConnectedPositioningStrategy, ContainerPositionStrategy, StateUpdateEvent, - TransactionEventOrigin + TransactionEventOrigin, } from '../services/public_api'; import { GridBaseAPIService } from './api.service'; import { IgxGridCellComponent } from './cell.component'; @@ -5914,7 +5914,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements /** * Opens the advanced filtering dialog. */ - public openAdvancedFilteringDialog() { + public openAdvancedFilteringDialog(overlaySettings?: OverlaySettings) { + const settings = overlaySettings ? overlaySettings : this._advancedFilteringOverlaySettings; if (!this._advancedFilteringOverlayId) { this._advancedFilteringOverlaySettings.target = (this as any).rootGrid ? (this as any).rootGrid.nativeElement : this.nativeElement; @@ -5922,12 +5923,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements this._advancedFilteringOverlayId = this.overlayService.attach( IgxAdvancedFilteringDialogComponent, - this._advancedFilteringOverlaySettings, + settings, { injector: this.viewRef.injector, componentFactoryResolver: this.resolver }); - this.overlayService.show(this._advancedFilteringOverlayId, this._advancedFilteringOverlaySettings); + this.overlayService.show(this._advancedFilteringOverlayId); } } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html index 8f434732699..2d4f8f11db4 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html @@ -1,6 +1,6 @@