feat(grid): display margin shadow if scrollable

Author: CatalinB7

projects/angular/components/ui-grid/src/_ui-grid-variables.scss

@@ -6,3 +6,4 @@ $ui-grid-header-pressed-color: var(--color-data-grid-pressed, #EAECED);
 $header-background-color:  var(--color-background-secondary, #f4f5f7);
 $grid-actions-box-shadow: var(--color-background, #ffffff);
 $highlighted-entity-color: var(--color-primary, #0067df);
+$scroll-margin-shadow-color: var(--color-background-inverse, #182027);

projects/angular/components/ui-grid/src/_ui-grid.theme.scss

@@ -215,6 +215,18 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
                     background-color: $ui-grid-row-hover-color;
                 }
             }
+
+            .grid-margin-shadow {
+                position: sticky;
+                right: 0;
+                height: 100%;
+
+                @if $is-dark {
+                    box-shadow: -7px 20px 20px 4px #000000;
+                } @else {
+                    box-shadow: -3px 5px 20px 1.6px $scroll-margin-shadow-color;
+                }
+            }
         }
 
         .ui-grid-sort-icon {

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -283,6 +283,7 @@
                          class="ui-grid-header-cell ui-grid-scroll-size-compensation-cell ui-grid-feature-cell">
                     </div>
                     <div *ngIf="refreshable"
+                         [class.refresh-shadow]="shouldDisplayContainerShadow$ | async"
                          class="ui-grid-header-cell ui-grid-refresh-cell ui-grid-feature-cell"
                          role="columnheader">
                         <button [matTooltip]="intl.refreshTooltip"
@@ -565,9 +566,13 @@
              class="ui-grid-cell ui-grid-refresh-cell ui-grid-feature-cell">
         </div>
 
+        <div *ngIf="!actions && (shouldDisplayContainerShadow$ | async)"
+             class="grid-margin-shadow ui-grid-feature-cell"></div>
+
         <div *ngIf="!isProjected &&
                     !!actions"
              [class.ui-grid-sticky-element]="isScrollable"
+             [class.grid-margin-shadow]="shouldDisplayContainerShadow$ | async"
              role="gridcell"
              class="ui-grid-cell ui-grid-action-cell ui-grid-feature-cell">
             <div [class.sticky-grid-action-cell-container]="isScrollable"

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -693,6 +693,10 @@ ui-grid {
                 &.ui-grid-refresh-cell {
                     position: sticky;
                     right: 0;
+
+                    &.refresh-shadow {
+                        box-shadow: -16px 0px 16px -4px $ui-grid-row-hover-color;
+                    }
                 }
 
                 &.ui-grid-action-cell {

projects/angular/components/ui-grid/src/ui-grid.component.spec.ts

@@ -4856,6 +4856,13 @@ describe('Component: UiGrid', () => {
                 expect(gridTable.nativeElement.style.minWidth).toBe(columnWidthSum + 'px');
             }));
 
+            it('should display margin shadow when the grid has horizontal scroll', fakeAsync(() => {
+                const widths = [250, 1000, 330, 400, 100, 100]; // large enough too cause overflow
+                beforeConfig({ widths });
+                const tableMarginShadowDivs = fixture.debugElement.queryAll(By.css('.grid-margin-shadow'));
+                expect(tableMarginShadowDivs.length).toBe(widths.length);
+            }));
+
             it('should increase the width of last column if default column width sum does not fill the table', fakeAsync(() => {
                 const widths = [50, 50, 0, 50, 50, 50];
                 const lastColumnIdx = 4; // refresh btn & 1 missing column
@@ -5028,13 +5035,13 @@ describe('Component: UiGrid', () => {
                     expect(+newMinWidth.replace('px', '')).toBeLessThan(+startingMinWidth.replace('px', ''));
                 }));
 
-                it(`should set overflow to visible if total width of columns does not exceed container width`, fakeAsync(() => {
+                it(`should set overflow to visible and hide margin shadow if total width of columns does not exceed container width`, fakeAsync(() => {
                     const gridTable = fixture.debugElement.query(By.css('.ui-grid-table'));
                     const options = fixture.debugElement
                         .queryAll(By.css('.ui-grid-toggle-panel .mat-mdc-option:not(.mdc-list-item--disabled)'));
 
                     expect(gridTable.styles.overflow).toEqual('visible');
-
+                    expect(fixture.debugElement.queryAll(By.css('.grid-margin-shadow')).length).toBe(6);
                     options.forEach(o => {
                         const checkbox = o.query(By.css('.mat-pseudo-checkbox'));
                         checkbox.nativeElement.dispatchEvent(EventGenerator.click);
@@ -5044,6 +5051,7 @@ describe('Component: UiGrid', () => {
                     fixture.detectChanges();
 
                     expect(gridTable.styles.overflow).toEqual('hidden');
+                    expect(fixture.debugElement.queryAll(By.css('.grid-margin-shadow')).length).toBe(0);
                 }));
             });
 

projects/angular/components/ui-grid/src/ui-grid.component.ts

@@ -5,6 +5,8 @@ import {
     BehaviorSubject,
     combineLatest,
     defer,
+    fromEvent,
+    iif,
     merge,
     Observable,
     of,
@@ -25,6 +27,7 @@ import {
     take,
     takeUntil,
     tap,
+    throttleTime,
 } from 'rxjs/operators';
 
 import {
@@ -110,6 +113,7 @@ const EXCLUDED_ROW_SELECTION_ELEMENTS = ['a', 'button', 'input', 'textarea', 'se
 const REFRESH_WIDTH = 50;
 const DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE = 48;
 const DEFAULT_VIRTUAL_SCROLL_HIGH_DENSITY_ITEM_SIZE = 32;
+const SCROLL_LIMIT_FOR_DISPLAYING_SHADOW = 10;
 
 @Component({
     selector: 'ui-grid',
@@ -827,6 +831,20 @@ export class UiGridComponent<T extends IGridDataEntry>
         shareReplay(1),
     );
 
+    shouldDisplayContainerShadow$ = defer(() => merge(
+        fromEvent(this._ref.nativeElement.querySelector('.ui-grid-table-container')!, 'scroll').pipe(
+            throttleTime(50, undefined, { trailing: true }),
+            map((event: any) => {
+                const { scrollWidth, scrollLeft, clientWidth } = event.target;
+                return Math.abs(scrollWidth - clientWidth - scrollLeft) >= SCROLL_LIMIT_FOR_DISPLAYING_SHADOW;
+            }),
+        ),
+        this.isOverflown$,
+    )).pipe(
+        distinctUntilChanged(),
+        shareReplay(),
+    );
+
     areFilersCollapsed$: Observable<boolean>;
 
     /**
@@ -862,10 +880,10 @@ export class UiGridComponent<T extends IGridDataEntry>
         shareReplay(1),
     );
 
-    isOverflown$ = this.minWidth$.pipe(
+    isOverflown$ = iif(() => this.isScrollable, this.minWidth$.pipe(
         map(minWidth => this._isOverflown(minWidth)),
         distinctUntilChanged(),
-    );
+    ), of(false));
 
     tableOverflowStyle$ = this.isOverflown$.pipe(
         map(value => value ? 'visible' : 'hidden'),
@@ -1342,7 +1360,6 @@ export class UiGridComponent<T extends IGridDataEntry>
         }, 0);
 
         return widthsPxSum + this._otherActionsWidth;
-
     }
 
     private get _otherActionsWidth() {