[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)
2025-07-24 17:32:15 +00:00 · 2019-06-20 12:32:41 +01:00
parent f063d94316
commit f861b94de4
11 changed files with 141 additions and 87 deletions
--- a/README.md
+++ b/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

--- a/demo-shell/src/app/app.component.scss
+++ b/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;
-            }
-        }
-    }
-}
--- a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
+++ b/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 {
-                                padding: 0;
+                            .adf-name-location-cell-location {
+                                padding: 0 10px;
                                display: block;
                            }

-                            & .adf-name-location-cell-name {
-                                padding: 5px 0 2px;
+                            .adf-name-location-cell-name {
+                                padding: 5px 10px 2px;
                            }

                            &.adf-content-selector-modified-cell {
--- a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
+++ b/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'],
--- a/lib/content-services/document-list/components/document-list.component.scss
+++ b/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;
    }
--- a/lib/content-services/document-list/components/document-list.component.ts
+++ b/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 {

--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/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-width: 1px;
-                border-bottom-style: solid;
+                border-bottom: 1px solid mat-color($foreground, divider);

                .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) {
-                .adf-datatable-center-size-column-ie {
-                    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;
-                }
-
+        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+            .adf-datatable-center-size-column-ie {
+                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-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 {
-                outline-width: 0;
+            &--fileSize {
+                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;
            }
        }
    }
--- a/lib/core/toolbar/toolbar.component.scss
+++ b/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);
-            }
-        }
-    }
 }
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts
+++ b/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');
--- a/lib/process-services-cloud/src/lib/task/task-filters/mock/task-filters-cloud.mock.ts
+++ b/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'
+});
--- a/lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts
+++ b/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;
        }