[Staging-branch] 3.4.0 (#4839)

* next 3.4.0

* next 3.4.0

* [ADF-4426] Move CSS overrides from ACA to ADF - 2nd round (#4837)

* [ADF-4426] align toolbar icon color with design

* [ADF-4426] clean-up style - it is never applied

* [ADF-4426] display title for name location cell - useful for long names

* [ADF-4426] move content-node-selector cell fix from ACA

- fixes https://github.com/Alfresco/alfresco-ng2-components/issues/4686

* [ADF-4426] move content-node-selector cell fix from ACA

- fixes https://github.com/Alfresco/alfresco-ng2-components/issues/4686

* [ADF-4426] move image width fix from ACA

* [ADF-4426] allow more customization of data-table borders

* [ADF-4426] move fix from ACA

[ACA-2363] fixes issue with text being visible underneath the info drawer

* [ADF-4426] get adf-datatable-link style from ACA

* [ADF-4426] allow set of DL selected row icon color

* [ADF-4426] allow more document list customization

- code moved from ACA
- more css variables
- removed non used and duplicated outline styles
- some code clean-up...

* [ADF-4635] The Status drop-down is looking different for Processes than for Tasks (#4822)

README.md

@@ -14,7 +14,7 @@
   <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
      <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
   </a>
-</p>
+</p
 
 ## Introduction
 

demo-shell/src/app/app.component.scss

@@ -15,18 +15,3 @@ router-outlet[name='overlay'] + * {
 [dir='rtl'] .mat-icon {
     transform: scale(-1, 1);
 }
-
-@media (max-width: 425px) {
-    adf-content-node-selector {
-        .adf-content-node-selector-content-list {
-            .adf-datatable-cell {
-                display: none;
-            }
-
-            .adf-datatable-cell:first-child,
-            .adf-datatable-cell:nth-child(2) {
-                display: table-cell;
-            }
-        }
-    }
-}

lib/content-services/content-node-selector/content-node-selector-panel.component.scss

@@ -2,6 +2,7 @@
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
+    $content-node-selector-thumbnail-width: 35px !default;
 
     .adf-search-results-label {
         font-weight: 600;
@@ -108,13 +109,27 @@
                     }
 
                     .adf-datatable-cell {
+                        &--image {
+                            min-width: $content-node-selector-thumbnail-width;
+                            width: $content-node-selector-thumbnail-width;
+                            max-width: $content-node-selector-thumbnail-width;
+                        }
 
-                        & .adf-name-location-cell-location {
+                        &:nth-child(2) {
+                            flex: 1 0 95px;
+                        }
+
+                        .adf-name-location-cell-location {
                             display: none;
                         }
 
                         &.adf-content-selector-visibility-cell {
-                            display: none;
+                            flex: 0 1 auto;
+                            min-width: 1px;
+
+                            .adf-datatable-cell-value {
+                                padding: 0;
+                            }
                         }
                     }
 
@@ -145,14 +160,13 @@
                         min-height: 65px !important;
 
                         .adf-datatable-cell {
-
+                            .adf-name-location-cell-location {
-                            & .adf-name-location-cell-location {
+                                padding: 0 10px;
-                                padding: 0;
                                 display: block;
                             }
 
-                            & .adf-name-location-cell-name {
+                            .adf-name-location-cell-name {
-                                padding: 5px 0 2px;
+                                padding: 5px 10px 2px;
                             }
 
                             &.adf-content-selector-modified-cell {

lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts

@@ -21,7 +21,7 @@ import { DataRow } from '@alfresco/adf-core';
 @Component({
     selector: 'adf-name-location-cell',
     template: `
-        <div class="adf-name-location-cell-name adf-datatable-cell-value">{{ name }}</div>
+        <div class="adf-name-location-cell-name adf-datatable-cell-value" [title]="name">{{ name }}</div>
         <div class="adf-name-location-cell-location adf-datatable-cell-value" [title]="path">{{ path }}</div>
     `,
     styleUrls: ['./name-location-cell.component.scss'],

lib/content-services/document-list/components/document-list.component.scss

@@ -4,6 +4,15 @@
     $accent: map-get($theme, accent);
     $primary: map-get($theme, primary);
 
+    $document-list-selection-color: mat-color($accent) !default;
+    $document-list-background: mat-color($background, background) !default;
+
+    .adf-document-list {
+        min-height: 0;
+        height: 100%;
+        background-color: $document-list-background;
+    }
+
     .mat-icon.adf-datatable-selected {
         height: 100%;
         width: 100%;
@@ -17,7 +26,7 @@
     }
 
     .adf-datatable-selected > svg {
-        fill: mat-color($accent);
+        fill: $document-list-selection-color;
         width: 32px;
         height: 32px;
     }

lib/content-services/document-list/components/document-list.component.ts

@@ -64,7 +64,7 @@ import { DocumentLoaderNode } from '../models/document-folder.model';
     styleUrls: ['./document-list.component.scss'],
     templateUrl: './document-list.component.html',
     encapsulation: ViewEncapsulation.None,
-    host: { class: '.adf-document-list' }
+    host: { class: 'adf-document-list' }
 })
 export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent, NavigableComponentInterface {
 

lib/core/datatable/components/datatable/datatable.component.scss

@@ -9,20 +9,32 @@
     $data-table-header-color: mat-color($foreground, text) !default;
     $data-table-header-sorted-color: mat-color($foreground, text) !default;
     $data-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
+    $data-table-cell-text-color: mat-color($foreground, text) !default;
+    $data-table-cell-link-hover-color: mat-color($alfresco-ecm-blue, 500) !default;
+    $data-table-cell-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
     $data-table-divider-color: mat-color($foreground, text, 0.07) !default;
     $data-table-hover-color: mat-color($background, 'hover') !default;
     $data-table-selection-color: mat-color($background, 'selected-button') !default;
     $data-table-dividers: 1px solid $data-table-divider-color !default;
+    $data-table-dividers-edge-row: $data-table-dividers !default;
+    $data-table-dividers-wrapper-border: $data-table-dividers !default;
     $data-table-row-height: 56px !default;
     $data-table-column-spacing: 36px !default;
     $data-table-column-padding: $data-table-column-spacing / 2;
     $data-table-card-padding: 24px !default;
     $data-table-cell-top: $data-table-card-padding / 2;
-    $data-table-drag-border: 1px dashed rgb(68, 138, 255);
+    $data-table-drag-border: 1px dashed mat-color($alfresco-ecm-blue, A200);
     $data-table-thumbnail-width: 50px !default;
+    $data-table-cell-min-width: 50px !default;
+    $data-table-cell-min-width--no-grow: 100px !default;
+    $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
+
+    .adf-datatable {
+        overflow-y: scroll;
+        height: 100%;
+    }
 
     .adf-datatable-card {
-
         border: 1px solid mat-color($foreground, divider);
 
         .adf-datatable-body {
@@ -130,9 +142,7 @@
                 margin: 8px;
                 padding: 4px;
                 overflow: visible;
-                border-bottom-color: mat-color($foreground, divider);
+                border-bottom: 1px solid mat-color($foreground, divider);
-                border-bottom-width: 1px;
-                border-bottom-style: solid;
 
                 .adf-datatable-cell-container {
                     float: left;
@@ -167,40 +177,43 @@
         display: flex;
         flex-direction: column;
         background-color: mat-color($background, card);
-        border: $data-table-dividers;
+        border: $data-table-dividers-wrapper-border;
         box-sizing: border-box;
 
-            @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-                .adf-datatable-center-size-column-ie {
+            .adf-datatable-center-size-column-ie {
-                    padding-top: 17px;
+                padding-top: 17px;
-                }
-
-                .adf-datatable-center-actions-column-ie {
-                    padding-top: 7px !important;
-                }
-
-                .adf-datatable-center-date-column-ie {
-                    position: relative !important;
-
-                    .adf-datatable-cell-value {
-                        width: 100%;
-                    }
-                }
-
-                .adf-datatable-center-img-ie {
-                    padding:0;
-                    min-width: 0;
-                    width: 24px;
-                    height: 56px;
-                }
-
             }
 
+            .adf-datatable-center-actions-column-ie {
+                padding-top: 7px !important;
+            }
+
+            .adf-datatable-center-date-column-ie {
+                position: relative !important;
+
+                .adf-datatable-cell-value {
+                    width: 100%;
+                }
+            }
+
+            .adf-datatable-center-img-ie {
+                padding:0;
+                min-width: 0;
+                width: 24px;
+                height: 56px;
+            }
+        }
+
         .adf-datatable-header {
             display: flex;
             flex-direction: column;
         }
 
+        .adf-datatable-cell {
+            color: $data-table-cell-text-color;
+        }
+
         .adf-datatable-body {
             display: flex;
             flex-direction: column;
@@ -215,7 +228,7 @@
 
                 @include adf-no-select;
 
-                &:hover {
+                &:hover, &:focus {
                     background-color: $data-table-hover-color;
                 }
 
@@ -224,7 +237,7 @@
                 }
 
                 &:last-child {
-                    border-bottom: $data-table-dividers;
+                    border-bottom: $data-table-dividers-edge-row;
                 }
             }
         }
@@ -251,6 +264,7 @@
         .adf-datatable-cell, .adf-datatable-cell-header {
             text-align: left;
             box-sizing: border-box;
+            min-width: $data-table-cell-min-width;
 
             &--text {
                 text-align: left;
@@ -271,11 +285,10 @@
                 width: $data-table-thumbnail-width;
                 min-width: $data-table-thumbnail-width;
                 text-align: left;
-
             }
 
-            &:focus {
+            &--fileSize {
-                outline-width: 0;
+                min-width: $data-table-cell-min-width--fileSize;
             }
         }
 
@@ -294,13 +307,6 @@
             padding-bottom: 8px;
             box-sizing: border-box;
 
-            &:focus {
-                outline-offset: -1px;
-                outline-width: 1px;
-                outline-color: rgb(68, 138, 255);
-                outline-style: solid;
-            }
-
             &.adf-sortable {
                 @include adf-no-select;
                 &:hover {
@@ -356,7 +362,7 @@
 
         .adf-datatable-cell-header.adf-no-grow-cell, .adf-datatable-cell.adf-no-grow-cell {
             flex-grow: 0;
-            min-width: 100px;
+            min-width: $data-table-cell-min-width--no-grow;
         }
 
         .adf-datatable-cell, .adf-datatable-cell-header {
@@ -386,7 +392,7 @@
 
             &:focus {
                 outline-offset: -1px;
-                outline: #448aff solid 1px;
+                outline: $data-table-cell-outline;
             }
         }
 
@@ -409,10 +415,10 @@
         .adf-location-cell {
             a {
                 text-decoration: none;
-                color: mat-color($foreground, text);
+                color: $data-table-cell-text-color;
 
                 &:hover {
-                    color: #2196f3;
+                    color: $data-table-cell-link-hover-color;
                     text-decoration: underline;
                 }
             }
@@ -436,18 +442,34 @@
 
         .adf-datatable-link {
             text-decoration: none;
-            color: mat-color($foreground, text);
+            color: $data-table-cell-text-color;
 
             &:hover {
-                color: #2196f3;
+                color: $data-table-cell-link-hover-color;
                 text-decoration: underline;
             }
         }
 
+        .adf-dynamic-column .adf-datatable-link:hover {
+            text-decoration: none;
+
+            .adf-datatable-cell-value {
+                text-decoration: underline;
+            }
+        }
+
+        .adf-datatable-cell,
+        .adf-datatable-cell-header {
+            .adf-datatable-link .adf-datatable-cell-value {
+                padding: 0 10px;
+            }
+        }
+
         .adf-ellipsis-cell {
             position: sticky;
             text-overflow: ellipsis;
             white-space: nowrap;
+            overflow: hidden;
 
             &.adf-datatable-cell-header,
             .adf-datatable-content-cell {
@@ -568,16 +590,13 @@
         & > div {
             border-top: $data-table-drag-border !important;
             border-bottom: $data-table-drag-border !important;
-            border-color: $data-table-drag-border;
 
             &:first-child {
                 border-left: $data-table-drag-border;
-                border-color: $data-table-drag-border;
             }
 
             &:last-child {
                 border-right: $data-table-drag-border !important;
-                border-color: $data-table-drag-border;
             }
         }
     }

lib/core/toolbar/toolbar.component.scss

@@ -4,6 +4,7 @@
     $adf-toolbar-single-row-height: 64px !default;
     $adf-toolbar-font-size: 14px !default;
     $adf-toolbar-padding: 16px !default;
+    $adf-toolbar-icon-color: mat-color($foreground, text, 0.54) !default;
 
     .adf-toolbar {
         &--spacer {
@@ -19,6 +20,7 @@
         .mat-toolbar {
             min-height: $adf-toolbar-height;
             border: 1px solid mat-color($foreground, text, 0.07);
+            color: $adf-toolbar-icon-color;
         }
 
         .mat-toolbar-row {
@@ -40,12 +42,4 @@
             }
         }
     }
-
-    .adf-viewer {
-        .adf-toolbar {
-            .mat-toolbar {
-                color: mat-color($foreground, text, 0.54);
-            }
-        }
-    }
 }

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts

@@ -30,7 +30,7 @@ import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
 import { EditTaskFilterCloudComponent } from './edit-task-filter-cloud.component';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
-import { fakeFilter } from '../mock/task-filters-cloud.mock';
+import { fakeFilter, fakeAllTaskFilter } from '../mock/task-filters-cloud.mock';
 import { AbstractControl } from '@angular/forms';
 import moment from 'moment-es6';
 
@@ -194,6 +194,27 @@ describe('EditTaskFilterCloudComponent', () => {
             });
         }));
 
+        it('should select \'All\' option in Task Status if All filter is set', async(() => {
+
+            getTaskFilterSpy.and.returnValue(fakeAllTaskFilter);
+
+            const taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
+            component.ngOnChanges({ 'id': taskFilterIDchange});
+            fixture.detectChanges();
+
+            const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
+            expansionPanel.click();
+            fixture.detectChanges();
+
+            const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-status"]');
+            stateElement.click();
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(stateElement.textContent.trim()).toBe('ALL');
+            });
+        }));
+
         it('should display sort drop down', async(() => {
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');

lib/process-services-cloud/src/lib/task/task-filters/mock/task-filters-cloud.mock.ts

@@ -55,3 +55,15 @@ export let fakeFilter = new TaskFilterCloudModel({
     order: 'ASC',
     sort: 'id'
 });
+
+export let fakeAllTaskFilter = new TaskFilterCloudModel({
+    name: 'AllTasks',
+    icon: 'adjust',
+    id: 'mock-task-filter-id',
+    status: '',
+    appName: 'mock-app-name',
+    processDefinitionId: 'process-def-id',
+    assignee: 'fake-involved',
+    order: 'ASC',
+    sort: 'id'
+});

lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts

@@ -115,7 +115,7 @@ export class TaskFilterProperties {
         if (obj) {
             this.label = obj.label || null;
             this.type = obj.type || null;
-            this.value = obj.value || null;
+            this.value = obj.value || '';
             this.key = obj.key || null;
             this.options = obj.options || null;
         }