Merge pull request #442 from UiPath/fix.scrollable_grid_fixes

Fix(scrollable-grid): styling fixes
UiPath · Dec 20, 2023 · be8eaa6 · be8eaa6
2 parents 8827ac6 + fc3888a
commit be8eaa6
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# v15.0.17 (2023-12-14)
+* **grid** add input for deficit receiving column
+* **grid** remove jitter caused by scrollbar
+* **grid** emit resize changes iff column exists
+
 # v15.0.16 (2023-12-14)
 * **file-picker** file dropzone directive
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "15.0.16",
+  "version": "15.0.17",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

diff --git a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts b/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts
@@ -286,7 +286,7 @@ export abstract class ResizeManager<T extends IGridDataEntry> {
 
     endResize() {
         const entries = [this.current!, this._previous!.neighbour, this._previous!.oppositeNeighbour];
-        this._emitNewColumnPercentages(entries.filter(e => e != null) as IResizeInfo<T>[]);
+        this._emitNewColumnPercentages(entries.filter(e => e != null && !!e.column) as IResizeInfo<T>[]);
         this._endResizeCommon(...entries);
 
         this.current = undefined;

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html
@@ -663,6 +663,8 @@
         <div *ngIf="!dataManager.pristine"
              class="ui-grid-row ui-grid-no-data-container"
              [class.ui-grid-no-content-available]="!header?.searchValue && !activeFilterCount"
+             [class.sticky-no-data]="isScrollable"
+             [style.width]="isScrollable ? containerWidth + 'px' : undefined"
              [class.ui-grid-border-none]="!footer">
             <mat-icon *ngIf="!header?.searchValue && !activeFilterCount">visibility_off</mat-icon>
             <p>{{ noDataMessage || intl.noDataMessageAlternative(header?.searchValue, activeFilterCount) }}</p>

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.scss b/projects/angular/components/ui-grid/src/ui-grid.component.scss
@@ -260,6 +260,12 @@ ui-grid {
                 }
             }
 
+            .sticky-no-data {
+                position: sticky;
+                left: 0;
+                top: 0;
+            }
+
             ui-grid-custom-paginator {
                 .mat-mdc-paginator-page-label {
                     font-size: $ui-grid-secondary-font-size;
@@ -446,6 +452,7 @@ ui-grid {
             mat-progress-bar.ui-grid-loader {
                 z-index: 2;
                 position: relative;
+                margin-bottom: -4px !important;
             }
 
             .ui-grid-header {

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.ts b/projects/angular/components/ui-grid/src/ui-grid.component.ts
@@ -807,6 +807,7 @@ export class UiGridComponent<T extends IGridDataEntry>
     }
 
     deficit$ = new BehaviorSubject(0);
+    containerWidth = 0;
 
     minWidth$ = defer(() => merge(
         this.visible$,
@@ -817,8 +818,8 @@ export class UiGridComponent<T extends IGridDataEntry>
     ).pipe(
         map(() => this._computeMinWidth()),
         tap(minWidth => {
-            const containerWidth = this._ref.nativeElement.getBoundingClientRect().width;
-            this.deficit$.next(Math.round(Math.max(0, containerWidth - minWidth)));
+            this.containerWidth = this._ref.nativeElement.getBoundingClientRect().width;
+            this.deficit$.next(Math.round(Math.max(0, this.containerWidth - minWidth)));
         }),
         tap(() => { this._cd.detectChanges(); }),
     )).pipe(

diff --git a/projects/angular/package.json b/projects/angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "15.0.16",
+    "version": "15.0.17",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",