From f861b94de4df7875ea475e06899b21f4d98a4f94 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 20 Jun 2019 12:32:41 +0100 Subject: [PATCH] [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 | 2 +- demo-shell/src/app/app.component.scss | 15 --- ...content-node-selector-panel.component.scss | 28 +++- .../name-location-cell.component.ts | 2 +- .../components/document-list.component.scss | 11 +- .../components/document-list.component.ts | 2 +- .../datatable/datatable.component.scss | 121 ++++++++++-------- lib/core/toolbar/toolbar.component.scss | 10 +- .../edit-task-filter-cloud.component.spec.ts | 23 +++- .../mock/task-filters-cloud.mock.ts | 12 ++ .../task-filters/models/filter-cloud.model.ts | 2 +- 11 files changed, 141 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index 3579f2e550..58e5f3d4e9 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ license -

+

{{ name }} +
{{ name }}
{{ path }}
`, styleUrls: ['./name-location-cell.component.scss'], diff --git a/lib/content-services/document-list/components/document-list.component.scss b/lib/content-services/document-list/components/document-list.component.scss index 356b195391..55c42c0739 100644 --- 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; } diff --git a/lib/content-services/document-list/components/document-list.component.ts b/lib/content-services/document-list/components/document-list.component.ts index 9346cf9c4b..de19441c90 100644 --- 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 { diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index dfa95c29d8..387115f206 100644 --- 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; } } } diff --git a/lib/core/toolbar/toolbar.component.scss b/lib/core/toolbar/toolbar.component.scss index 31b911d36e..1f85cb8d6a 100644 --- 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); - } - } - } } diff --git 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 index 85b526109c..d4f3147038 100644 --- 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'); diff --git 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 index 4272581f9b..dc84ffdcce 100644 --- 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' +}); diff --git 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 index 08d441a858..882aafb2ac 100644 --- 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; }