From: Bill Erickson <berickxx@gmail.com> Date: Tue, 6 Nov 2018 14:42:17 +0000 (-0500) Subject: LP#1797007 Grid cell tooltips apply to all cells (Ang) X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=8fabb9ea5d360a5d03ec69c2e1f8fdc9c5cb4c25;p=evergreen%2Fequinox.git LP#1797007 Grid cell tooltips apply to all cells (Ang) 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> --- 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 3de90e41aa..578bef5e9c 100644 --- 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,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))" 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 3d844f380f..d1e88ba425 100644 --- 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,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 = ''; - } - } }