diff --git a/demo-shell-ng2/app/components/files/files.component.css b/demo-shell-ng2/app/components/files/files.component.css index c75159ff4f..5ee034a195 100644 --- a/demo-shell-ng2/app/components/files/files.component.css +++ b/demo-shell-ng2/app/components/files/files.component.css @@ -20,11 +20,11 @@ height:900px; } -adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell { +adf-document-list >>> adf-datatable tr.is-selected .image-table-cell { position: relative; } -adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell::before { +adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before { content: "\E876"; /* "done" */ font-family: "Material Icons"; font-size: 24px; diff --git a/ng2-components/ng2-alfresco-core/styles/_mixins.scss b/ng2-components/ng2-alfresco-core/styles/_mixins.scss index e69de29bb2..737d639391 100644 --- a/ng2-components/ng2-alfresco-core/styles/_mixins.scss +++ b/ng2-components/ng2-alfresco-core/styles/_mixins.scss @@ -0,0 +1,28 @@ +@mixin no-select { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@mixin typo-icon() { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + word-wrap: normal; + font-feature-settings: 'liga'; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + +@mixin material-animation-default($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $animation-curve-default; +} diff --git a/ng2-components/ng2-alfresco-core/styles/_variables.scss b/ng2-components/ng2-alfresco-core/styles/_variables.scss index 3093a068c6..5c9578e7af 100644 --- a/ng2-components/ng2-alfresco-core/styles/_variables.scss +++ b/ng2-components/ng2-alfresco-core/styles/_variables.scss @@ -1,3 +1,7 @@ @import 'colors'; $ADF: adf; + +/* ANIMATION */ +$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; +$animation-curve-default: $animation-curve-fast-out-slow-in !default; diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css deleted file mode 100644 index 5fe1ddaa6d..0000000000 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css +++ /dev/null @@ -1,143 +0,0 @@ -:host .full-width { width: 100%; } - -:host .icon-cell { - font-size: 24px; - cursor: default; -} - -:host .image-cell { - width: 24px; - height: 24px; - cursor: default; -} - -:host .data-cell { - cursor: default; -} - -:host .column-header { - cursor: pointer; - user-select: none; - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE/Edge */ - -webkit-touch-callout: none; /* iOS Safari */ -} - -/* Empty folder */ - -:host .adf-no-content-container { - padding: 0 !important; -} - -:host .adf-no-content-container > img { - width: 100%; -} -/* Loading folder */ - -:host .adf-loading-content-container { - padding: 0 !important; -} - -:host .adf-loading-content-container > img { - width: 100%; -} - - -:host .ellipsis-cell .cell-container { - height: 1em; -} - -/* visible content */ -:host .ellipsis-cell .cell-value { - display: block; - position: absolute; - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: 1em; /* for vertical align of text */ -} - - -/* cell stretching content */ -:host .ellipsis-cell > div:after { - content: attr(title); - overflow: hidden; - height: 0; - display: block; -} - -/* Utils */ - -:host .non-selectable { - user-select: none; - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE/Edge */ - -webkit-touch-callout: none; /* iOS Safari */ -} - -:host .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0,0,0,0); - border: 0; -} - -.hidden { - display: none; -} - -/* small desktop */ -@media all and (max-width: 1200px) {} - -/* tablet */ -@media all and (max-width: 1024px) {} - -/* mobile phone */ -@media all and (max-width: 768px) { - .desktop-only { - display: none; - } -} - -@media (max-device-width: 768px){ - .desktop-only { - display: none; - } -} - -.mdl-data-table-fix-firefox { - border-collapse: unset; - border-spacing: 0; -} - -.alfresco-datatable__row:focus { - outline-offset: -1px; - outline-width: 1px; - outline-color: rgb(68,138,255); - outline-style: solid; -} - -.alfresco-datatable__row--selected, -.alfresco-datatable__row--selected:hover { - background-color: #e0e0e0; -} - -.adf-upload__dragging > td { - border-top: 1px dashed rgb(68,138,255); - border-bottom: 1px dashed rgb(68,138,255); -} - -.adf-upload__dragging > td:first-child { - border-left: 1px dashed rgb(68,138,255); -} - -.adf-upload__dragging > td:last-child { - border-right: 1px dashed rgb(68,138,255); -} 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 761ee50957..33977c76a1 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 @@ -1,28 +1,28 @@ + class="full-width adf-data-table"> - - - @@ -31,14 +31,13 @@ - - -
+ Actions {{col.srTitle}} {{col.title}} + Actions
+
- {{asIconValue(row, - col)}} + {{ asIconValue(row, col) }} {{ iconAltTextKey(data.getValue(row, col)) | translate }}
- {{ iconAltTextKey(data.getValue(row, col)) | translate }}
@@ -119,7 +115,7 @@
img { + width: 100%; + } + } + + /* Loading folder */ + .adf-loading-content-container { + padding: 0 !important; + + & > img { + width: 100%; + } + } + + .ellipsis-cell { + .cell-container { + height: 1em; + } + + /* visible content */ + .cell-value { + display: block; + position: absolute; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* for vertical align of text */ + line-height: 1em; + } + + /* cell stretching content */ + & > div:after { + content: attr(title); + overflow: hidden; + height: 0; + display: block; + } + } +} + +/* Utils */ + +/* [Accessibility] For screen reader only */ +:host .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +.hidden { + display: none; +} + +/* small desktop */ +@media all and (max-width: 1200px) {} + +/* tablet */ +@media all and (max-width: 1024px) {} + +/* mobile phone */ +@media all and (max-width: 768px) { + .desktop-only { + display: none; + } +} + +@media (max-device-width: 768px){ + .desktop-only { + display: none; + } +} + +.adf-upload__dragging { + & > td { + border-top: 1px dashed rgb(68,138,255); + border-bottom: 1px dashed rgb(68,138,255); + + &:first-child { + border-left: 1px dashed rgb(68,138,255); + } + + &:last-child { + border-right: 1px dashed rgb(68,138,255); + } + } +} diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts index d315002636..25611fe0ec 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts @@ -57,9 +57,6 @@ describe('DataTable', () => { }); beforeEach(() => { - // reset MDL handler - window['componentHandler'] = null; - eventMock = { preventDefault: function () { } @@ -191,7 +188,7 @@ describe('DataTable', () => { let headers = element.querySelectorAll('th'); expect(headers.length).toBe(4); - expect(headers[headers.length - 1].classList.contains('alfresco-datatable__actions-header')).toBeTruthy(); + expect(headers[headers.length - 1].classList.contains('actions-column')).toBeTruthy(); }); it('should put actions menu to the left', () => { @@ -206,7 +203,7 @@ describe('DataTable', () => { let headers = element.querySelectorAll('th'); expect(headers.length).toBe(4); - expect(headers[0].classList.contains('alfresco-datatable__actions-header')).toBeTruthy(); + expect(headers[0].classList.contains('actions-column')).toBeTruthy(); }); it('should initialize default adapter', () => { @@ -414,19 +411,6 @@ describe('DataTable', () => { }); - it('should upgrade MDL components on view checked', () => { - let handler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered']); - window['componentHandler'] = handler; - - dataTable.ngAfterContentInit(); - expect(handler.upgradeAllRegistered).toHaveBeenCalled(); - }); - - it('should upgrade MDL components only when component handler present', () => { - expect(window['componentHandler']).toBeNull(); - dataTable.ngAfterContentInit(); - }); - it('should invert "select all" status', () => { expect(dataTable.isSelectAllChecked).toBeFalsy(); dataTable.onSelectAllClick( { checked: true }); 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 0b17d49847..0ac4ba5829 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 @@ -16,7 +16,7 @@ */ import { - AfterContentInit, AfterViewInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input, + AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input, IterableDiffers, OnChanges, Optional, Output, SimpleChange, SimpleChanges, TemplateRef } from '@angular/core'; import { MdCheckboxChange } from '@angular/material'; @@ -31,10 +31,10 @@ declare var componentHandler; @Component({ selector: 'adf-datatable, alfresco-datatable', - styleUrls: ['./datatable.component.css'], + styleUrls: ['./datatable.component.scss'], templateUrl: './datatable.component.html' }) -export class DataTableComponent implements AfterContentInit, AfterViewInit, OnChanges, DoCheck { +export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck { @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent; @@ -120,20 +120,6 @@ export class DataTableComponent implements AfterContentInit, AfterViewInit, OnCh ngAfterContentInit() { this.setTableSchema(); - this.setupMaterialComponents(); - } - - ngAfterViewInit() { - this.setupMaterialComponents(); - } - - private setupMaterialComponents(): boolean { - // workaround for MDL issues with dynamic components - if (componentHandler) { - componentHandler.upgradeAllRegistered(); - return true; - } - return false; } ngOnChanges(changes: SimpleChanges) { diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index b14f4bd972..5348f9a335 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -228,11 +228,11 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column: Now your application can define custom styles to change the content of the column based on some other conditions, like selection state: ```css -adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell { +adf-document-list >>> adf-datatable tr.is-selected .image-table-cell { position: relative; } -adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell::before { +adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before { content: "\E876"; /* "done" */ font-family: "Material Icons"; font-size: 24px;