[ADF-1547] tooltip fixes and enhancements (#2333)

* tooltip enhancements

* fix unit tests

ng2-components/ng2-alfresco-datatable/index.ts

@@ -30,10 +30,12 @@ export { DataRowActionEvent, DataRowActionModel } from './src/components/datatab
 
 import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 import { DataTableComponent } from './src/components/datatable/datatable.component';
+import { DateCellComponent } from './src/components/datatable/date-cell.component';
 import { EmptyListBodyDirective,
     EmptyListComponent,
     EmptyListFooterDirective,
     EmptyListHeaderDirective } from './src/components/datatable/empty-list.component';
+import { FileSizeCellComponent } from './src/components/datatable/filesize-cell.component';
 import { LocationCellComponent } from './src/components/datatable/location-cell.component';
 import { LoadingContentTemplateDirective } from './src/directives/loading-template.directive';
 import { NoContentTemplateDirective } from './src/directives/no-content-template.directive';
@@ -46,6 +48,8 @@ export function directives() {
         EmptyListBodyDirective,
         EmptyListFooterDirective,
         DataTableCellComponent,
+        DateCellComponent,
+        FileSizeCellComponent,
         LocationCellComponent,
         NoContentTemplateDirective,
         LoadingContentTemplateDirective
@@ -76,7 +80,9 @@ export function directives() {
     ]
 })
 export class DataTableModule {
+    /** @deprecated in 1.9.0 */
     static forRoot(): ModuleWithProviders {
+        console.log('DataTableModule.forRoot is deprecated and will be removed in future versions');
         return {
             ngModule: DataTableModule
         };

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts

@@ -15,13 +15,18 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { DataColumn, DataRow, DataTableAdapter } from '../../data/datatable-adapter';
 
 @Component({
     selector: 'adf-datatable-cell, alfresco-datatable-cell',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    template: '<ng-container>{{value}}</ng-container>'
+    template: `
+        <ng-container>
+            <span [title]="tooltip">{{value}}</span>
+        </ng-container>`,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-datatable-cell' }
 })
 export class DataTableCellComponent implements OnInit {
 
@@ -37,9 +42,16 @@ export class DataTableCellComponent implements OnInit {
     @Input()
     value: any;
 
+    @Input()
+    tooltip: string;
+
     ngOnInit() {
         if (!this.value && this.column && this.column.key && this.row && this.data) {
             this.value = this.data.getValue(this.row, this.column);
+
+            if (!this.tooltip) {
+                this.tooltip = this.value;
+            }
         }
     }
 

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -22,7 +22,7 @@
             (keyup.enter)="onColumnHeaderClick(col)"
             role="button"
             tabindex="0"
-            title="{{ col.title }}">
+            title="{{ col.title | translate }}">
             <span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
             <span *ngIf="col.title">{{ col.title | translate}}</span>
         </th>
@@ -88,24 +88,40 @@
                                  (error)="onImageLoadingError($event)">
                         </div>
                         <div *ngSwitchCase="'date'" class="cell-value"
-                            [mdTooltip]="getCellTooltip(row, col)"
                             [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                            <adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
+                            <adf-date-cell
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [tooltip]="getCellTooltip(row, col)">
+                            </adf-date-cell>
                         </div>
                         <div *ngSwitchCase="'location'" class="cell-value"
-                            [mdTooltip]="getCellTooltip(row, col)"
                             [attr.data-automation-id]="'location' + data.getValue(row, col)">
-                            <adf-location-cell [data]="data" [column]="col" [row]="row"></adf-location-cell>
+                            <adf-location-cell
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [tooltip]="getCellTooltip(row, col)">
+                            </adf-location-cell>
                         </div>
                         <div *ngSwitchCase="'fileSize'" class="cell-value"
-                            [mdTooltip]="getCellTooltip(row, col)"
                             [attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
-                            <adf-datatable-cell [value]="data.getValue(row, col) | adfFileSize"></adf-datatable-cell>
+                            <adf-filesize-cell
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [tooltip]="getCellTooltip(row, col)">
+                            </adf-filesize-cell>
                         </div>
                         <div *ngSwitchCase="'text'" class="cell-value"
-                            [mdTooltip]="getCellTooltip(row, col)"
                             [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                            <adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
+                            <adf-datatable-cell
+                                [data]="data"
+                                [column]="col"
+                                [row]="row"
+                                [tooltip]="getCellTooltip(row, col)">
+                            </adf-datatable-cell>
                         </div>
                     <span *ngSwitchDefault class="cell-value">
                     <!-- empty cell for unknown column type -->

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -30,6 +30,8 @@ import {
 } from './../../data/index';
 import { DataTableCellComponent } from './datatable-cell.component';
 import { DataTableComponent } from './datatable.component';
+import { DateCellComponent } from './date-cell.component';
+import { FileSizeCellComponent } from './filesize-cell.component';
 import { LocationCellComponent } from './location-cell.component';
 
 describe('DataTable', () => {
@@ -49,6 +51,8 @@ describe('DataTable', () => {
             declarations: [
                 DataTableCellComponent,
                 LocationCellComponent,
+                FileSizeCellComponent,
+                DateCellComponent,
                 DataTableComponent
             ]
         }).compileComponents();

ng2-components/ng2-alfresco-datatable/src/components/datatable/date-cell.component.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { DataTableCellComponent } from './datatable-cell.component';
+
+@Component({
+    selector: 'adf-date-cell',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <ng-container>
+            <span [title]="tooltip">{{value}}</span>
+        </ng-container>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-date-cell' }
+})
+export class DateCellComponent extends DataTableCellComponent {}

ng2-components/ng2-alfresco-datatable/src/components/datatable/filesize-cell.component.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { DataTableCellComponent } from './datatable-cell.component';
+
+@Component({
+    selector: 'adf-filesize-cell',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <ng-container>
+            <span [title]="tooltip">{{ value | adfFileSize }}</span>
+        </ng-container>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-filesize-cell' }
+})
+export class FileSizeCellComponent extends DataTableCellComponent {}

ng2-components/ng2-alfresco-datatable/src/components/datatable/location-cell.component.ts

@@ -34,9 +34,6 @@ import { DataTableCellComponent } from './datatable-cell.component';
 })
 export class LocationCellComponent extends DataTableCellComponent implements OnInit {
 
-    @Input()
-    tooltip: string = '';
-
     @Input()
     link: any[];
 
@@ -50,7 +47,10 @@ export class LocationCellComponent extends DataTableCellComponent implements OnI
             if (path) {
                 this.value = path;
                 this.displayText = path.name.split('/').pop();
+
+                if (!this.tooltip) {
                     this.tooltip = path.name;
+                }
 
                 const parent = path.elements[path.elements.length - 1];
                 this.link = [ this.column.format, parent.id ];

ng2-components/ng2-alfresco-datatable/src/directives/loading-template.directive.spec.ts

@@ -20,6 +20,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableCellComponent } from '../components/datatable/datatable-cell.component';
 import { DataTableComponent } from '../components/datatable/datatable.component';
+import { DateCellComponent } from '../components/datatable/date-cell.component';
+import { FileSizeCellComponent } from '../components/datatable/filesize-cell.component';
 import { LocationCellComponent } from '../components/datatable/location-cell.component';
 import { MaterialModule } from '../material.module';
 import { LoadingContentTemplateDirective } from './loading-template.directive';
@@ -40,7 +42,9 @@ describe('LoadingContentTemplateDirective', () => {
                 DataTableComponent,
                 DataTableCellComponent,
                 LocationCellComponent,
-                LoadingContentTemplateDirective
+                LoadingContentTemplateDirective,
+                DateCellComponent,
+                FileSizeCellComponent
             ]
         }).compileComponents();
     }));

ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.directive.spec.ts

@@ -20,6 +20,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableCellComponent } from '../components/datatable/datatable-cell.component';
 import { DataTableComponent } from '../components/datatable/datatable.component';
+import { DateCellComponent } from '../components/datatable/date-cell.component';
+import { FileSizeCellComponent } from '../components/datatable/filesize-cell.component';
 import { LocationCellComponent } from '../components/datatable/location-cell.component';
 import { MaterialModule } from '../material.module';
 import { NoContentTemplateDirective } from './no-content-template.directive';
@@ -39,8 +41,10 @@ describe('NoContentTemplateDirective', () => {
             declarations: [
                 DataTableComponent,
                 DataTableCellComponent,
+                DateCellComponent,
                 NoContentTemplateDirective,
-                LocationCellComponent
+                LocationCellComponent,
+                FileSizeCellComponent
             ]
         }).compileComponents();
     }));