diff --git a/demo-shell-ng2/src/app/components/datatable/datatable.component.css b/demo-shell-ng2/src/app/components/datatable/datatable.component.scss similarity index 100% rename from demo-shell-ng2/src/app/components/datatable/datatable.component.css rename to demo-shell-ng2/src/app/components/datatable/datatable.component.scss diff --git a/demo-shell-ng2/src/app/components/datatable/datatable.component.ts b/demo-shell-ng2/src/app/components/datatable/datatable.component.ts index 02310a023e..8c03f37976 100644 --- 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 { diff --git a/demo-shell-ng2/src/app/components/files/files.component.scss b/demo-shell-ng2/src/app/components/files/files.component.scss index 9a31f63c36..1e06fcd5e0 100644 --- 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 { diff --git a/demo-shell-ng2/src/index.html b/demo-shell-ng2/src/index.html index c975e830ee..ee8117b5f4 100644 --- a/demo-shell-ng2/src/index.html +++ b/demo-shell-ng2/src/index.html @@ -11,34 +11,29 @@ diff --git a/docs/data-column.component.md b/docs/data-column.component.md index 65dd8a38d0..ed7ecef344 100644 --- 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; } ``` diff --git 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 index 4f754f1986..ea31aecc0b 100644 --- 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 @@
{{getLinkedFileName()}} @@ -16,11 +16,11 @@
- image + image
{{ 'FORM.PREVIEW.IMAGE_NOT_AVAILABLE' | translate }}
diff --git 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 index b683987faa..c9b8e9490a 100644 --- 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 @@
{{error.message | translate:translateParameters}}
- warning + warning
{{required}}
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css index 5ba8b69fa0..614e3f266b 100644 --- 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; diff --git 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 index 1ad9c6a407..864e93cbcf 100644 --- 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%; diff --git 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 new file mode 100644 index 0000000000..1c806cd84c --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/assets/images/ft_ic_selected.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts b/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts index c01bbf5a25..2a03d92ef1 100644 --- 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(); })); diff --git a/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts b/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts index 914dcc3918..d864b10b0b 100644 --- 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'))); } /** diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html index 0ad11e0af9..2a74fac397 100644 --- 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,18 +75,20 @@
- {{ asIconValue(row, col) }} - {{ asIconValue(row, col) }} + + + + {{ iconAltTextKey(data.getValue(row, col)) | translate }}
-
- {{ iconAltTextKey(data.getValue(row, col)) | translate }} +
+ {{ iconAltTextKey(data.getValue(row, col)) | translate }} + {{ data.getValue(row, col) }}
-
* { @@ -215,7 +220,7 @@ /* visible content */ .cell-value { display: block; - position: absolute; + position: relative; max-width: calc(100% - 2em); white-space: nowrap; overflow: hidden; diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index 06f00bd6a9..fa2e24523d 100644 --- 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 { diff --git 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 index 31d2c21f54..f948b88e2e 100644 --- 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 {} diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html index 5f3186f70b..57b5c6833a 100644 --- 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 }}
- + chevron_right - +
diff --git 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 index e6cc9b530a..824ce75ba0 100644 --- 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"> folder - chevron_right + chevron_right {{ currentNode.name }} - \ No newline at end of file + diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss index 63f8e72e37..32227d7a5d 100644 --- 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%; } diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts index e7d84912d5..3bd232c4b6 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -83,7 +83,7 @@ export class ShareDataTableAdapter implements DataTableAdapter { if (col.type === 'date') { try { - const result = this.formatDate(col, value); + const result = this.formatDate(col, value); return dataRow.cacheValue(col.key, result); } catch (err) { 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 = ( 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 (this.imageResolver) { @@ -99,30 +123,6 @@ export class ShareDataTableAdapter implements DataTableAdapter { return resolved; } } - - if (col.key === '$thumbnail') { - const node = ( 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); @@ -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); } @@ -182,7 +176,7 @@ export class ShareDataTableAdapter implements DataTableAdapter { if (sorting && sorting.key && rows && rows.length > 0) { if (sorting.key.includes('sizeInBytes') || sorting.key === 'name') { - options.numeric = true; + options.numeric = true; } rows.sort((a: ShareDataRow, b: ShareDataRow) => {