inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* tooltip enhancements

* fix unit tests
This commit is contained in:
Denys Vuika
2017-09-13 17:31:00 +01:00
committed by Eugenio Romano
parent eafe884a9d
commit 1fd23cfd40
9 changed files with 127 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ng2-components/ng2-alfresco-datatable/index.ts
View File

@@ -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
};

16
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts
View File

@@ -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;
}
}
}

34
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

@@ -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 -->

4
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
View File

@@ -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();

32
ng2-components/ng2-alfresco-datatable/src/components/datatable/date-cell.component.ts Normal file
View File

@@ -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 {}

32
ng2-components/ng2-alfresco-datatable/src/components/datatable/filesize-cell.component.ts Normal file
View File

@@ -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 {}

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

@@ -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();
this.tooltip = path.name;
if (!this.tooltip) {
this.tooltip = path.name;
}
const parent = path.elements[path.elements.length - 1];
this.link = [ this.column.format, parent.id ];

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

@@ -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();
}));

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

@@ -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();
}));