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-1649] [Document List] IE11 select icon is not aligned (#2594)

Browse Source 
* [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
This commit is contained in:
Eugenio Romano 2017-11-02 16:17:35 +00:00 committed by GitHub
parent 5ca66bb75f
commit 861d44f021
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 168 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
demo-shell-ng2/src/app/components/datatable/datatable.component.css → demo-shell-ng2/src/app/components/datatable/datatable.component.scss
View File

2
demo-shell-ng2/src/app/components/datatable/datatable.component.ts
View File

@ -23,7 +23,7 @@ import { Observable } from 'rxjs/Rx';
@Component({ @Component({
selector: 'datatable', selector: 'datatable',
templateUrl: './datatable.component.html', templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.css'] styleUrls: ['./datatable.component.scss']
}) })
export class DataTableComponent { export class DataTableComponent {

22
demo-shell-ng2/src/app/components/files/files.component.scss
View File

@ -22,10 +22,6 @@ $minimumDocumentListWidth: 425px;
height:900px; 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 { adf-document-list ::ng-deep adf-datatable tr.document-list__create {
background: green !important; background: green !important;
} }
@ -34,22 +30,8 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
background: red !important; background: red !important;
} }
adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before { 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 {
content: "\E876"; /* "done" */ fill: #00bcd4;
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-site-container-style { .adf-site-container-style {

43
demo-shell-ng2/src/index.html
View File

@ -11,34 +11,29 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style> <style>
body, html { body, html {
height: 100%; height: 100%;
} }
.loader-container { .loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: flex;
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ flex-direction: row;
display: -webkit-flex; /* NEW - Chrome */ height:100%;
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
.loader-item { align-items: center;
margin: auto; justify-content: center;
max-height:100px; }
max-width:300px;
}
.loader-text{ .loader-item {
white-space: nowrap; max-height:100px;
text-align: center; max-width:300px;
position: relative; }
}
.loader-text{
white-space: nowrap;
text-align: center;
position: relative;
}
</style> </style>
</head> </head>
<body class="adf-background-color"> <body class="adf-background-color">

22
docs/data-column.component.md
View File

@ -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: Now your application can define styles to change the content of the column based on conditions such as the selection state:
```css ```css
adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell { 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 {
position: relative; fill: #00bcd4;
}
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;
} }
``` ```

6
ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
View File

@ -3,7 +3,7 @@
<div> <div>
<span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span> <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"> <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}} Browse {{selectedFolderSiteName}}
</button> </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> <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'> <ul class='mdl-list'>
<li class="mdl-list__item" *ngFor="let node of selectedFolderNodes"> <li class="mdl-list__item" *ngFor="let node of selectedFolderNodes">
<span class="mdl-list__item-primary-content" *ngIf="node.folder"> <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> <a (click)="selectFolder(node, $event)">{{node.title}}</a>
</span> </span>
<span class="mdl-list__item-primary-content" *ngIf="!node.folder"> <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> <a (click)="selectFile(node, $event)">{{node.title}}</a>
</span> </span>
</li> </li>

2
ng2-components/ng2-activiti-form/src/components/widgets/content/content.widget.html
View File

@ -4,7 +4,7 @@
<img id="thumbnailPreview" class="adf-img-upload-widget" [src]="content.thumbnailUrl" alt="{{content.name}}"> <img id="thumbnailPreview" class="adf-img-upload-widget" [src]="content.thumbnailUrl" alt="{{content.name}}">
</div> </div>
<div *ngIf="!content.isThumbnailSupported()"> <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 id="unsupported-thumbnail" class="adf-content-widget-preview-text">{{ 'FORM.PREVIEW.IMAGE_NOT_AVAILABLE' | translate }}
</div> </div>
</div> </div>

2
ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html
View File

@ -1,7 +1,7 @@
<div class="adf-error-text-container"> <div class="adf-error-text-container">
<div *ngIf="error.isActive()" [@transitionMessages]="_subscriptAnimationState"> <div *ngIf="error.isActive()" [@transitionMessages]="_subscriptAnimationState">
<div class="adf-error-text">{{error.message | translate:translateParameters}}</div> <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>
<div *ngIf="required" [@transitionMessages]="_subscriptAnimationState"> <div *ngIf="required" [@transitionMessages]="_subscriptAnimationState">
<div class="adf-error-text">{{required}}</div> <div class="adf-error-text">{{required}}</div>

4
ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css
View File

@ -12,10 +12,6 @@
top: -2px; top: -2px;
} }
.material-icons {
cursor: pointer;
}
.list-wrap { .list-wrap {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;

4
ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css
View File

@ -28,10 +28,6 @@
top: -2px; top: -2px;
} }
.material-icons:hover {
color: rgb(255, 152, 0);
}
.task-details-dialog { .task-details-dialog {
position: fixed; position: fixed;
top: 50%; top: 50%;

4
ng2-components/ng2-alfresco-core/src/assets/images/ft_ic_selected.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 281 B

6
ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts
View File

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

67
ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts
View File

@ -16,6 +16,8 @@
*/ */
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { AlfrescoContentService } from './alfresco-content.service'; import { AlfrescoContentService } from './alfresco-content.service';
declare var require: any; 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.pages': require('../assets/images/ft_ic_document.svg'),
'application/vnd.apple.numbers': require('../assets/images/ft_ic_spreadsheet.svg'), 'application/vnd.apple.numbers': require('../assets/images/ft_ic_spreadsheet.svg'),
'folder': require('../assets/images/ft_ic_folder.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')));
} }
/** /**

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

@ -75,18 +75,20 @@
<div *ngIf="!col.template" class="cell-container"> <div *ngIf="!col.template" class="cell-container">
<ng-container [ngSwitch]="col.type"> <ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="cell-value"> <div *ngSwitchCase="'image'" class="cell-value">
<i *ngIf="isIconValue(row, col)" class="material-icons">{{ asIconValue(row, col) }}</i> <mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
<img *ngIf="!isIconValue(row, col)" <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 }}" alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
src="{{ data.getValue(row, col) }}" src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event)"> (error)="onImageLoadingError($event)">
</div> </div>
<div *ngSwitchCase="'icon'" class="cell-value"> <div *ngSwitchCase="'icon'" class="cell-value">
<img alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}" <span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
src="{{ data.getValue(row, col) }}" <mat-icon>{{ data.getValue(row, col) }}</mat-icon>
(error)="onImageLoadingError($event)">
</div> </div>
<div *ngSwitchCase="'date'" class="cell-value" <div *ngSwitchCase="'date'" class="cell-value"
[attr.data-automation-id]="'date_' + data.getValue(row, col)"> [attr.data-automation-id]="'date_' + data.getValue(row, col)">
<adf-date-cell <adf-date-cell
[data]="data" [data]="data"

13
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
View File

@ -152,6 +152,7 @@
.adf-data-table-cell { .adf-data-table-cell {
text-align: left; text-align: left;
height: 100%;
&--text { &--text {
text-align: left; text-align: left;
@ -166,11 +167,15 @@
} }
&--image { &--image {
.cell-value {
height: 24px;
}
text-align: left; text-align: left;
img { img {
width: 24px; height: 100%;
height: 24px;
} }
} }
} }
@ -199,7 +204,7 @@
.ellipsis-cell { .ellipsis-cell {
.cell-container { .cell-container {
height: 1em; height: 100%;
} }
.cell-container > * { .cell-container > * {
@ -215,7 +220,7 @@
/* visible content */ /* visible content */
.cell-value { .cell-value {
display: block; display: block;
position: absolute; position: relative;
max-width: calc(100% - 2em); max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

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

@ -17,7 +17,7 @@
import { import {
AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input, AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input,
IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation
} from '@angular/core'; } from '@angular/core';
import { MatCheckboxChange } from '@angular/material'; import { MatCheckboxChange } from '@angular/material';
import { DataColumnListComponent } from 'ng2-alfresco-core'; import { DataColumnListComponent } from 'ng2-alfresco-core';
@ -35,7 +35,8 @@ import { DataRowActionEvent } from './data-row-action.event';
@Component({ @Component({
selector: 'adf-datatable', selector: 'adf-datatable',
styleUrls: ['./datatable.component.scss'], styleUrls: ['./datatable.component.scss'],
templateUrl: './datatable.component.html' templateUrl: './datatable.component.html',
encapsulation: ViewEncapsulation.None
}) })
export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck { export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck {
@ -386,7 +387,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
} }
iconAltTextKey(value: string): string { 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 { isColumnSorted(col: DataColumn, direction: string): boolean {

5
ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts
View File

@ -15,12 +15,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, Directive } from '@angular/core'; import { Component, Directive, ViewEncapsulation } from '@angular/core';
@Component({ @Component({
selector: 'adf-empty-list', selector: 'adf-empty-list',
styleUrls: ['./empty-list.component.scss'], styleUrls: ['./empty-list.component.scss'],
templateUrl: './empty-list.component.html' templateUrl: './empty-list.component.html',
encapsulation: ViewEncapsulation.None
}) })
export class EmptyListComponent {} export class EmptyListComponent {}

4
ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html
View File

@ -15,9 +15,9 @@
{{ item.name | translate }} {{ item.name | translate }}
</div> </div>
<i class="material-icons adf-breadcrumb-item-chevron" *ngIf="!last"> <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
chevron_right chevron_right
</i> </mat-icon>
</li> </li>
</div> </div>
<div *ngIf="!folderNode && hasRoot"> <div *ngIf="!folderNode && hasRoot">

4
ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.html
View File

@ -7,7 +7,7 @@
data-automation-id="dropdown-breadcrumb-trigger"> data-automation-id="dropdown-breadcrumb-trigger">
<mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon> <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
</button> </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 <mat-select
*ngIf="hasPreviousNodes()" *ngIf="hasPreviousNodes()"
@ -29,4 +29,4 @@
class="adf-current-folder" class="adf-current-folder"
[class.isRoot]="!hasPreviousNodes()" [class.isRoot]="!hasPreviousNodes()"
data-automation-id="current-folder">{{ currentNode.name }}</span> data-automation-id="current-folder">{{ currentNode.name }}</span>
</ng-container> </ng-container>

17
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
View File

@ -1,5 +1,14 @@
@mixin adf-document-list-theme($theme) { @mixin adf-document-list-theme($theme) {
$foreground: map-get($theme, foreground); $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 { .document-list_empty_template {
text-align: center; text-align: center;
@ -49,13 +58,7 @@
.adf-document-list-loading-container { .adf-document-list-loading-container {
min-height: 300px; min-height: 300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: flex;
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;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
} }

58
ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
View File

@ -83,7 +83,7 @@ export class ShareDataTableAdapter implements DataTableAdapter {
if (col.type === 'date') { if (col.type === 'date') {
try { try {
const result = this.formatDate(col, value); const result = this.formatDate(col, value);
return dataRow.cacheValue(col.key, result); return dataRow.cacheValue(col.key, result);
} catch (err) { } catch (err) {
console.error(`Error parsing date ${value} to format ${col.format}`); console.error(`Error parsing date ${value} to format ${col.format}`);
@ -91,6 +91,30 @@ export class ShareDataTableAdapter implements DataTableAdapter {
} }
} }
if (col.key === '$thumbnail') {
const node = (<ShareDataRow> row).node;
if (node.entry.isFolder) {
return this.documentListService.getMimeTypeIcon('folder');
}
if (node.entry.isFile) {
if (this.thumbnails) {
return this.documentListService.getDocumentThumbnailUrl(node);
}
}
if (node.entry.content) {
const mimeType = node.entry.content.mimeType;
if (mimeType) {
return this.documentListService.getMimeTypeIcon(mimeType);
}
}
return this.documentListService.getDefaultMimeTypeIcon();
}
if (col.type === 'image') { if (col.type === 'image') {
if (this.imageResolver) { if (this.imageResolver) {
@ -99,30 +123,6 @@ export class ShareDataTableAdapter implements DataTableAdapter {
return resolved; return resolved;
} }
} }
if (col.key === '$thumbnail') {
const node = (<ShareDataRow> row).node;
if (node.entry.isFolder) {
return this.documentListService.getMimeTypeIcon('folder');
}
if (node.entry.isFile) {
if (this.thumbnails) {
return this.documentListService.getDocumentThumbnailUrl(node);
}
}
if (node.entry.content) {
const mimeType = node.entry.content.mimeType;
if (mimeType) {
return this.documentListService.getMimeTypeIcon(mimeType);
}
}
return this.documentListService.getDefaultMimeTypeIcon();
}
} }
return dataRow.cacheValue(col.key, value); return dataRow.cacheValue(col.key, value);
@ -148,14 +148,8 @@ export class ShareDataTableAdapter implements DataTableAdapter {
} }
setSorting(sorting: DataSorting): void { setSorting(sorting: DataSorting): void {
const options: Intl.CollatorOptions = {};
this.sorting = sorting; this.sorting = sorting;
if (sorting.key && sorting.key.includes('sizeInBytes')) {
options.numeric = true;
}
this.sortRows(this.rows, this.sorting); this.sortRows(this.rows, this.sorting);
} }
@ -182,7 +176,7 @@ export class ShareDataTableAdapter implements DataTableAdapter {
if (sorting && sorting.key && rows && rows.length > 0) { if (sorting && sorting.key && rows && rows.length > 0) {
if (sorting.key.includes('sizeInBytes') || sorting.key === 'name') { if (sorting.key.includes('sizeInBytes') || sorting.key === 'name') {
options.numeric = true; options.numeric = true;
} }
rows.sort((a: ShareDataRow, b: ShareDataRow) => { rows.sort((a: ShareDataRow, b: ShareDataRow) => {