[ADF-1649] [Document List] IE11 select icon is not aligned (#2594)

* [Document List] IE11 select icon is not aligned [Document List] Login is not aligned Register Alfresco file type icons within the mat-icon remove old material-icons pice of code * fix lint 180 in thumbnailservice * remove unnecessary duplicate code * fix thumbnail test
2025-05-26 17:24:56 +00:00 · 2017-11-02 16:17:35 +00:00 · 2017-11-02 16:17:35 +00:00 · 861d44f021
commit 861d44f021
parent 5ca66bb75f
21 changed files with 168 additions and 140 deletions
--- a/demo-shell-ng2/src/app/components/datatable/datatable.component.scss
+++ b/demo-shell-ng2/src/app/components/datatable/datatable.component.scss
--- a/demo-shell-ng2/src/app/components/datatable/datatable.component.ts
+++ b/demo-shell-ng2/src/app/components/datatable/datatable.component.ts
@ -23,7 +23,7 @@ import { Observable } from 'rxjs/Rx';
@Component({
    selector: 'datatable',
    templateUrl: './datatable.component.html',
-    styleUrls: ['./datatable.component.css']
+    styleUrls: ['./datatable.component.scss']
 })
 export class DataTableComponent {

--- a/demo-shell-ng2/src/app/components/files/files.component.scss
+++ b/demo-shell-ng2/src/app/components/files/files.component.scss
@ -22,10 +22,6 @@ $minimumDocumentListWidth: 425px;
    height:900px;
 }

-adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
-    position: relative;
-}
-
 adf-document-list ::ng-deep adf-datatable tr.document-list__create {
    background: green !important;
 }
@ -34,22 +30,8 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
    background: red !important;
 }

-adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
-    content: "\E876"; /* "done" */
-    font-family: "Material Icons";
-    font-size: 24px;
-    line-height: 32px;
-    text-align: center;
-    color: white;
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    top: 50%;
-    left: 50%;
-    margin-top: -16px;
-    margin-left: -12px;
-    border-radius: 100%;
-    background: #00bcd4;
+adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+    fill: #00bcd4;
 }

 .adf-site-container-style {
--- a/demo-shell-ng2/src/index.html
+++ b/demo-shell-ng2/src/index.html
@ -16,19 +16,15 @@
      }

      .loader-container {
-      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-      display: -webkit-flex;     /* NEW - Chrome */
-      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-      -webkit-box-flex-direction: row;
-      -moz-box-flex-direction: row;
-      -webkit-flex-direction: row;
+          display: flex;
          flex-direction: row;
          height:100%;
+
+          align-items: center;
+          justify-content: center;
      }

      .loader-item {
-      margin: auto;
          max-height:100px;
          max-width:300px;
      }
@ -38,7 +34,6 @@
          text-align: center;
          position: relative;
      }
-
  </style>
 </head>
 <body class="adf-background-color">
--- a/docs/data-column.component.md
+++ b/docs/data-column.component.md
@ -204,26 +204,8 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
 Now your application can define styles to change the content of the column based on conditions such as the selection state:

 ```css
-adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
-    position: relative;
-}
-
-adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
-    content: "\E876"; /* "done" */
-    font-family: "Material Icons";
-    font-size: 24px;
-    line-height: 32px;
-    text-align: center;
-    color: white;
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    top: 50%;
-    left: 50%;
-    margin-top: -16px;
-    margin-left: -14px;
-    border-radius: 100%;
-    background: #00bcd4;
+adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+    fill: #00bcd4;
 }
 ```

--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
@ -3,7 +3,7 @@
    <div>
        <span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span>
        <button #browseFile [disabled]="field.readOnly" (click)="showDialog();" class="mdl-button mdl-jsm-button mdl-js-ripple-effect attach-widget__browser">
-            <i class="material-icons">image</i>
+            <mat-icon>image</mat-icon>
            Browse {{selectedFolderSiteName}}
        </button>
        <button *ngIf="hasFile" [disabled]="field.readOnly" (click)="reset(file);" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__reset">Clear</button>
@ -16,11 +16,11 @@
        <ul class='mdl-list'>
            <li class="mdl-list__item" *ngFor="let node of selectedFolderNodes">
            <span class="mdl-list__item-primary-content" *ngIf="node.folder">
-            <i class="material-icons mdl-list__item-icon">folder</i>
+            <mat-icon class="mdl-list__item-icon">folder</mat-icon>
            <a (click)="selectFolder(node, $event)">{{node.title}}</a>
            </span>
            <span class="mdl-list__item-primary-content" *ngIf="!node.folder">
-            <i class="material-icons mdl-list__item-icon">description</i>
+            <mat-icon class="mdl-list__item-icon">description</mat-icon>
            <a (click)="selectFile(node, $event)">{{node.title}}</a>
            </span>
            </li>
--- a/ng2-components/ng2-activiti-form/src/components/widgets/content/content.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/content/content.widget.html
@ -4,7 +4,7 @@
            <img id="thumbnailPreview" class="adf-img-upload-widget" [src]="content.thumbnailUrl" alt="{{content.name}}">
        </div>
        <div *ngIf="!content.isThumbnailSupported()">
-            <i class="material-icons">image</i>
+            <mat-icon>image</mat-icon>
            <div id="unsupported-thumbnail" class="adf-content-widget-preview-text">{{ 'FORM.PREVIEW.IMAGE_NOT_AVAILABLE' | translate }}
            </div>
        </div>
--- a/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html
@ -1,7 +1,7 @@
 <div class="adf-error-text-container">
    <div *ngIf="error.isActive()" [@transitionMessages]="_subscriptAnimationState">
        <div class="adf-error-text">{{error.message | translate:translateParameters}}</div>
-        <i class="material-icons adf-error-icon">warning</i>
+        <mat-icon class="adf-error-icon">warning</mat-icon>
    </div>
    <div *ngIf="required" [@transitionMessages]="_subscriptAnimationState">
            <div class="adf-error-text">{{required}}</div>
--- a/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css
@ -12,10 +12,6 @@
    top: -2px;
 }

-.material-icons {
-    cursor: pointer;
-}
-
 .list-wrap {
    word-wrap: break-word;
    word-break: break-all;
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css
@ -28,10 +28,6 @@
    top: -2px;
 }

-.material-icons:hover {
-    color: rgb(255, 152, 0);
-}
-
 .task-details-dialog {
    position: fixed;
    top: 50%;
--- a/ng2-components/ng2-alfresco-core/src/assets/images/ft_ic_selected.svg
+++ b/ng2-components/ng2-alfresco-core/src/assets/images/ft_ic_selected.svg
@ -0,0 +1,4 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+</svg>
--- a/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts
@ -17,6 +17,8 @@

 import { async, TestBed } from '@angular/core/testing';
 import { HttpModule } from '@angular/http';
+import { MatIconRegistry } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
@ -57,7 +59,9 @@ describe('ThumbnailService', () => {
                AlfrescoApiService,
                AlfrescoSettingsService,
                StorageService,
-                LogService
+                LogService,
+                DomSanitizer,
+                MatIconRegistry
            ]
        }).compileComponents();
    }));
--- a/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts
@ -16,6 +16,8 @@
 */

 import { Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
 import { AlfrescoContentService } from './alfresco-content.service';

 declare var require: any;
@ -53,10 +55,71 @@ export class ThumbnailService {
        'application/vnd.apple.pages': require('../assets/images/ft_ic_document.svg'),
        'application/vnd.apple.numbers': require('../assets/images/ft_ic_spreadsheet.svg'),
        'folder': require('../assets/images/ft_ic_folder.svg'),
-        'disable/folder': require('../assets/images/ft_ic_folder_disable.svg')
+        'disable/folder': require('../assets/images/ft_ic_folder_disable.svg'),
+        'selected': require('../assets/images/ft_ic_selected.svg')
    };

-    constructor(public contentService: AlfrescoContentService) {
+    constructor(public contentService: AlfrescoContentService, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
+        matIconRegistry.addSvgIcon('image/png',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_raster_image.svg')));
+        matIconRegistry.addSvgIcon('image/jpeg',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_raster_image.svg')));
+        matIconRegistry.addSvgIcon('image/gif',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_raster_image.svg')));
+        matIconRegistry.addSvgIcon('application/pdf',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_pdf.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.ms-excel',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_excel.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_excel.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_excel.svg')));
+        matIconRegistry.addSvgIcon('application/msword',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_word.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_word.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.wordprocessingml.template',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_word.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.ms-powerpoint',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_powerpoint.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.presentationml.presentation',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_powerpoint.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.presentationml.template',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_powerpoint.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.openxmlformats-officedocument.presentationml.slideshow',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_ms_powerpoint.svg')));
+        matIconRegistry.addSvgIcon('video/mp4',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_video.svg')));
+        matIconRegistry.addSvgIcon('text/plain',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_document.svg')));
+        matIconRegistry.addSvgIcon('application/x-javascript',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_document.svg')));
+        matIconRegistry.addSvgIcon('application/json',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_document.svg')));
+        matIconRegistry.addSvgIcon('image/svg+xml',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_vector_image.svg')));
+        matIconRegistry.addSvgIcon('text/html',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_website.svg')));
+        matIconRegistry.addSvgIcon('application/x-compressed',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_archive.svg')));
+        matIconRegistry.addSvgIcon('application/x-zip-compressed',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_archive.svg')));
+        matIconRegistry.addSvgIcon('application/zip',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_archive.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.apple.keynote',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_presentation.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.apple.pages',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_document.svg')));
+        matIconRegistry.addSvgIcon('application/vnd.apple.numbers',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_spreadsheet.svg')));
+        matIconRegistry.addSvgIcon('folder',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_folder.svg')));
+        matIconRegistry.addSvgIcon('disable/folder',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_folder_disable.svg')));
+        matIconRegistry.addSvgIcon('selected',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_selected.svg')));
+        matIconRegistry.addSvgIcon('default',
+            sanitizer.bypassSecurityTrustResourceUrl(require('../assets/images/ft_ic_miscellaneous.svg')));
    }

    /**
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@ -75,16 +75,18 @@
                <div *ngIf="!col.template" class="cell-container">
                    <ng-container [ngSwitch]="col.type">
                        <div *ngSwitchCase="'image'" class="cell-value">
-                            <i *ngIf="isIconValue(row, col)" class="material-icons">{{ asIconValue(row, col) }}</i>
-                            <img *ngIf="!isIconValue(row, col)"
+                            <mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
+                            <mat-icon *ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected" >
+                            </mat-icon>
+
+                            <img *ngIf="!isIconValue(row, col) && !row.isSelected"
                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                 src="{{ data.getValue(row, col) }}"
                                 (error)="onImageLoadingError($event)">
                        </div>
                        <div *ngSwitchCase="'icon'"  class="cell-value">
-                            <img alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                                 src="{{ data.getValue(row, col) }}"
-                                 (error)="onImageLoadingError($event)">
+                            <span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
+                            <mat-icon>{{ data.getValue(row, col) }}</mat-icon>
                        </div>
                        <div *ngSwitchCase="'date'"  class="cell-value"
                            [attr.data-automation-id]="'date_' + data.getValue(row, col)">
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
@ -152,6 +152,7 @@

        .adf-data-table-cell {
            text-align: left;
+            height: 100%;

            &--text {
                text-align: left;
@ -166,11 +167,15 @@
            }

            &--image {
+
+                .cell-value {
+                    height: 24px;
+                }
+
                text-align: left;

                img {
-                    width: 24px;
-                    height: 24px;
+                    height: 100%;
                }
            }
        }
@ -199,7 +204,7 @@

        .ellipsis-cell {
            .cell-container {
-                height: 1em;
+                height: 100%;
            }

            .cell-container > * {
@ -215,7 +220,7 @@
            /* visible content */
            .cell-value {
                display: block;
-                position: absolute;
+                position: relative;
                max-width: calc(100% - 2em);
                white-space: nowrap;
                overflow: hidden;
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@ -17,7 +17,7 @@

 import {
    AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input,
-    IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef
+    IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation
 } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material';
 import { DataColumnListComponent } from 'ng2-alfresco-core';
@ -35,7 +35,8 @@ import { DataRowActionEvent } from './data-row-action.event';
@Component({
    selector: 'adf-datatable',
    styleUrls: ['./datatable.component.scss'],
-    templateUrl: './datatable.component.html'
+    templateUrl: './datatable.component.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck {

@ -386,7 +387,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
    }

    iconAltTextKey(value: string): string {
-        return 'ICONS.' + value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '');
+        return value ? 'ICONS.' + value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '') : '';
    }

    isColumnSorted(col: DataColumn, direction: string): boolean {
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts
@ -15,12 +15,13 @@
 * limitations under the License.
 */

-import { Component, Directive } from '@angular/core';
+import { Component, Directive, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'adf-empty-list',
    styleUrls: ['./empty-list.component.scss'],
-    templateUrl: './empty-list.component.html'
+    templateUrl: './empty-list.component.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class EmptyListComponent {}

--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html
@ -15,9 +15,9 @@
            {{ item.name | translate }}
        </div>

-        <i class="material-icons adf-breadcrumb-item-chevron" *ngIf="!last">
+        <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
            chevron_right
-        </i>
+        </mat-icon>
    </li>
 </div>
 <div *ngIf="!folderNode && hasRoot">
--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.html
@ -7,7 +7,7 @@
        data-automation-id="dropdown-breadcrumb-trigger">
        <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
    </button>
-    <i class="material-icons adf-dropddown-breadcrumb-item-chevron">chevron_right</i>
+    <mat-icon class="adf-dropddown-breadcrumb-item-chevron">chevron_right</mat-icon>

    <mat-select
        *ngIf="hasPreviousNodes()"
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
@ -1,5 +1,14 @@
@mixin adf-document-list-theme($theme) {
    $foreground: map-get($theme, foreground);
+    $accent: map-get($theme, accent);
+
+    adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+        fill: mat-color($accent);
+        margin-top: -4px;
+        margin-left: -4px;
+        width: 32px;
+        height: 32px;
+    }

    .document-list_empty_template {
        text-align: center;
@ -49,13 +58,7 @@

    .adf-document-list-loading-container {
        min-height: 300px;
-        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-        display: -webkit-flex; /* NEW - Chrome */
-        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-        -webkit-box-flex-direction: row;
-        -moz-box-flex-direction: row;
-        -webkit-flex-direction: row;
+        display: flex;
        flex-direction: row;
        height: 100%;
    }
--- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
@ -91,15 +91,6 @@ export class ShareDataTableAdapter implements DataTableAdapter {
            }
        }

-        if (col.type === 'image') {
-
-            if (this.imageResolver) {
-                let resolved = this.imageResolver(row, col);
-                if (resolved) {
-                    return resolved;
-                }
-            }
-
        if (col.key === '$thumbnail') {
            const node = (<ShareDataRow> row).node;

@ -123,6 +114,15 @@ export class ShareDataTableAdapter implements DataTableAdapter {
            return this.documentListService.getDefaultMimeTypeIcon();
        }

+
+        if (col.type === 'image') {
+
+            if (this.imageResolver) {
+                let resolved = this.imageResolver(row, col);
+                if (resolved) {
+                    return resolved;
+                }
+            }
        }

        return dataRow.cacheValue(col.key, value);
@ -148,14 +148,8 @@ export class ShareDataTableAdapter implements DataTableAdapter {
    }

    setSorting(sorting: DataSorting): void {
-        const options: Intl.CollatorOptions = {};
-
        this.sorting = sorting;

-        if (sorting.key && sorting.key.includes('sizeInBytes')) {
-            options.numeric =  true;
-        }
-
        this.sortRows(this.rows, this.sorting);
    }