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

[ADF-2455] Fallback thumbnail fix (#3164)

Browse Source 
* Show default icon when thumbnail image is broken

* Remove thumbnails prop from demo-shell

* Unit test added
This commit is contained in:
Alex Bolboșenco 2018-04-10 20:27:21 +03:00 committed by Denys Vuika
parent c214054767
commit 12df7500da
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/datatable/components/datatable/datatable.component.html
View File

@ -99,7 +99,7 @@
<img *ngIf="!isIconValue(row, col) && !row.isSelected" <img *ngIf="!isIconValue(row, col) && !row.isSelected"
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}" alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
src="{{ data.getValue(row, col) }}" src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event)"> (error)="onImageLoadingError($event, row.obj.entry.content.mimeType)">
</div> </div>
<div *ngSwitchCase="'icon'" class="cell-value"> <div *ngSwitchCase="'icon'" class="cell-value">
<span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span> <span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>

11
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@ -739,6 +739,17 @@ describe('DataTable', () => {
expect(event.target.src).toBe(originalSrc); expect(event.target.src).toBe(originalSrc);
}); });
it('should replace image source with icon if fallback is not available and mimeType is provided', () => {
let event = <any> {
target: {
src: 'missing-image'
}
};
dataTable.onImageLoadingError(event, 'image/png');
expect(event.target.src).toBe('./assets/images/ft_ic_raster_image.svg');
});
it('should not get cell tooltip when row is not provided', () => { it('should not get cell tooltip when row is not provided', () => {
const col = <DataColumn> { key: 'name', type: 'text' }; const col = <DataColumn> { key: 'name', type: 'text' };
expect(dataTable.getCellTooltip(null, col)).toBeNull(); expect(dataTable.getCellTooltip(null, col)).toBeNull();

13
lib/core/datatable/components/datatable/datatable.component.ts
View File

@ -29,6 +29,7 @@ import { DataRowEvent } from '../../data/data-row-event.model';
import { DataRow } from '../../data/data-row.model'; import { DataRow } from '../../data/data-row.model';
import { DataSorting } from '../../data/data-sorting.model'; import { DataSorting } from '../../data/data-sorting.model';
import { DataTableAdapter } from '../../data/datatable-adapter'; import { DataTableAdapter } from '../../data/datatable-adapter';
import { ThumbnailService } from '../../../services';
import { ObjectDataRow } from '../../data/object-datarow.model'; import { ObjectDataRow } from '../../data/object-datarow.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter'; import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
@ -161,7 +162,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
private singleClickStreamSub: Subscription; private singleClickStreamSub: Subscription;
private multiClickStreamSub: Subscription; private multiClickStreamSub: Subscription;
constructor(private elementRef: ElementRef, differs: IterableDiffers) { constructor(
private elementRef: ElementRef,
differs: IterableDiffers,
private thumbnailService?: ThumbnailService
) {
if (differs) { if (differs) {
this.differ = differs.find([]).create(null); this.differ = differs.find([]).create(null);
} }
@ -421,7 +426,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
this.emitRowSelectionEvent(domEventName, row); this.emitRowSelectionEvent(domEventName, row);
} }
onImageLoadingError(event: Event) { onImageLoadingError(event: Event, mimeType?: string) {
if (mimeType && !this.fallbackThumbnail) {
this.fallbackThumbnail = this.thumbnailService.getMimeTypeIcon(mimeType);
}
if (event && this.fallbackThumbnail) { if (event && this.fallbackThumbnail) {
let element = <any> event.target; let element = <any> event.target;
element.src = this.fallbackThumbnail; element.src = this.fallbackThumbnail;