LP#1775466 Grid tooltips on overflow only / top-left

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
index 2fe7aad..3de90e4 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
@@ -1,13 +1,15 @@
 
 <span *ngIf="!column.cellTemplate"
-  ngbTooltip="{{context.getRowColumnValue(row, column)}}"
+  [ngbTooltip]="tooltipContent"
+  placement="top-left"
   class="{{context.cellClassCallback(row, column)}}"
   triggers="mouseenter:mouseleave">
   {{context.getRowColumnValue(row, column)}}
 </span>
 <span *ngIf="column.cellTemplate" 
   class="{{context.cellClassCallback(row, column)}}"
-  [ngbTooltip]="column.cellTemplate"
+  [ngbTooltip]="tooltipContent"
+  placement="top-left"
   #tooltip="ngbTooltip" 
   (mouseenter)="tooltip.open(column.getCellContext(row))"
   (mouseleave)="tooltip.close()" triggers="manual">

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
index ca31fe7..32dacae 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
@@ -1,4 +1,5 @@
-import {Component, Input, OnInit, TemplateRef} from '@angular/core';
+import {Component, Input, OnInit, AfterViewInit, 
+    TemplateRef, ElementRef, AfterContentChecked} from '@angular/core';
 import {GridContext, GridColumn, GridRowSelector,
     GridColumnSet, GridDataSource} from './grid';
 
@@ -7,16 +8,50 @@ import {GridContext, GridColumn, GridRowSelector,
   templateUrl: './grid-body-cell.component.html'
 })
 
-export class GridBodyCellComponent implements OnInit {
-
-    /** TODO: extract component text content for printing compiled cells */
+export class GridBodyCellComponent implements OnInit, AfterContentChecked {
 
     @Input() context: GridContext;
     @Input() row: any;
     @Input() column: GridColumn;
 
-    constructor() {}
+    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 = '';
+        }
+    }
 }