LP#1797007 Grid cell tooltips apply to all cells (Ang)
authorBill Erickson <berickxx@gmail.com>
Tue, 6 Nov 2018 14:42:17 +0000 (09:42 -0500)
committerGalen Charlton <gmc@equinoxinitiative.org>
Thu, 15 Nov 2018 15:42:57 +0000 (10:42 -0500)
Avoid excessive browser page re-flows, caused by checking cell
widths for rendering tooltips, by rendering tooltips for all cells
regardless of the size of the content.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jason Boyer <jboyer@library.in.gov>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts

index 3de90e4..578bef5 100644 (file)
@@ -1,6 +1,6 @@
 
 <span *ngIf="!column.cellTemplate"
-  [ngbTooltip]="tooltipContent"
+  [ngbTooltip]="context.getRowColumnValue(row, column)"
   placement="top-left"
   class="{{context.cellClassCallback(row, column)}}"
   triggers="mouseenter:mouseleave">
@@ -8,7 +8,7 @@
 </span>
 <span *ngIf="column.cellTemplate" 
   class="{{context.cellClassCallback(row, column)}}"
-  [ngbTooltip]="tooltipContent"
+  [ngbTooltip]="column.cellTemplate"
   placement="top-left"
   #tooltip="ngbTooltip" 
   (mouseenter)="tooltip.open(column.getCellContext(row))"
index 3d844f3..d1e88ba 100644 (file)
@@ -1,5 +1,5 @@
 import {Component, Input, OnInit, AfterViewInit,
-    TemplateRef, ElementRef, AfterContentChecked} from '@angular/core';
+    TemplateRef, ElementRef} from '@angular/core';
 import {GridContext, GridColumn, GridRowSelector,
     GridColumnSet, GridDataSource} from './grid';
 
@@ -8,50 +8,18 @@ import {GridContext, GridColumn, GridRowSelector,
   templateUrl: './grid-body-cell.component.html'
 })
 
-export class GridBodyCellComponent implements OnInit, AfterContentChecked {
+export class GridBodyCellComponent implements OnInit {
 
     @Input() context: GridContext;
     @Input() row: any;
     @Input() column: GridColumn;
 
     initDone: boolean;
-    tooltipContent: string | TemplateRef<any>;
 
     constructor(
         private elm: ElementRef
     ) {}
 
     ngOnInit() {}
-
-    ngAfterContentChecked() {
-        this.setTooltip();
-    }
-
-    // Returns true if the contents of this cell exceed the
-    // boundaries of its container.
-    cellOverflows(): boolean {
-        let node = this.elm.nativeElement;
-        if (node) {
-            node = node.parentNode;
-            return node && (
-                node.scrollHeight > node.clientHeight ||
-                node.scrollWidth > node.clientWidth
-            );
-        }
-        return false;
-    }
-
-    // Tooltips are only applied to cells whose contents exceed
-    // their container.
-    // Applying an empty string value prevents a tooltip from rendering.
-    setTooltip() {
-        if (this.cellOverflows()) {
-            this.tooltipContent = this.column.cellTemplate ||
-                this.context.getRowColumnValue(this.row, this.column);
-        } else {
-            // No tooltip
-            this.tooltipContent = '';
-        }
-    }
 }