inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-40649 Material Design 3 migration (#11286)

Browse Source 
* AAE-38957 Cleanup code from color assignments on Material elements (#11266)

* AAE-38646   cleanup core lib from custom variables (#11259)

* AAE-38646 General cleanup of custom variables from core lib

* AAE-38646 Cleanup some of the remaining variables

* AAE-38646 Last color-mix removal

* AAE-38646 Reduce amount of customizations

* AAE-38646 apply overrides, reduce customization

* AAE-38646 modify remaining styles

* AAE-38646 Fix override assignemnts

* AAE-38646 Address comments, cleanup unused

* AAE-38978 Cleanup process-services-cloud lib from custom css variables (#11295)

* AAE-38978 Cleanup custom variables inside process-services-cloud lib

* AAE-38978 Adjust rich text widget styling

* AAE-38978 Comment fixes

* AAE-38980 Cleanup insights lib from custom css variables (#11314)

* AAE-38980 Cleanup insights lib from custom css variables

* AAE-38980 Removed unnecessarily specific selector

* AAE-38979 Cleanup content-services lib from custom css variables (#11313)

* AAE-38979 Remove/replace variable and hardcoded customizations

* AAE-38979 Cleanup unused @use and @import statements

* AAE-39159 Cleanup process-services lib from custom css variables (#11316)

* AAE-39159 Cleanup process-services lib from custom css variables

* AAE-39159 Fix import and build

* Fix build

* Remove leftover button customization

* fix missing brace

* AAE-39748 Pagination font size match md3

* fix incorrect html templates after rebase

* swap leftover variables

* fix units

* copilot comments

* visual regression result fixes

* CSX-204 Update card view components (#11358)

* CSX-535 Update background color on readonly for card view selectitem (#11799)

* remove invalid color test

* add stylelint rule

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: Ricardo Dias <ricardo.dias@hyland.com>
This commit is contained in:
Wojciech Duda
2026-04-22 10:02:17 +01:00
committed by GitHub
co-authored by Ehsan Rezaei Ricardo Dias
parent 423c646bac
commit 64826c3a99
236 changed files with 838 additions and 1780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/process-services/src/lib/app-list/apps-list.component.scss
+6 -9
View File
@@ -103,12 +103,14 @@ $tile-themes: (
outline: none;
flex-direction: column;
display: flex;
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
transition:
transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 200px;
padding: 0;
&:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
box-shadow: var(--mat-sys-level3);
cursor: pointer;
transform: scale(1.015);
}
@@ -134,9 +136,8 @@ $tile-themes: (
h1 {
width: 80%;
font-size: var(--theme-headline-font-size);
font: var(--mat-sys-headline-medium);
margin: 0;
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -159,7 +160,7 @@ $tile-themes: (
&-actions:has(.adf-app-listgrid-item-card-actions-icon) {
padding: 0 16px 16px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid var(--mat-sys-outline-variant);
min-height: 48px;
box-sizing: border-box;
margin-left: 0;
@@ -168,10 +169,6 @@ $tile-themes: (
&:last-child {
margin-bottom: 0;
}
.adf-app-listgrid-item-card-actions-icon {
color: #e9f1f3;
}
}
}
}
lib/process-services/src/lib/attachment/create-process-attachment/create-process-attachment.component.html
-1
View File
@@ -1,6 +1,5 @@
<button
id="add_new_process_content_button"
color="primary"
mat-button
class="adf-create-attachment"
[adf-upload]="true"
lib/process-services/src/lib/attachment/create-task-attachment/create-task-attachment.component.html
-1
View File
@@ -1,5 +1,4 @@
<button
color="primary"
mat-button
class="adf-create-attachment"
[adf-upload]="true"
lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss
+6 -12
View File
@@ -7,18 +7,14 @@
.adf-empty-list-header {
height: 32px;
opacity: 0.26;
font-size: var(--theme-headline-font-size);
line-height: 1.33;
letter-spacing: -1px;
color: var(--mat-sys-on-secondary-container);
font: var(--mat-sys-headline-medium);
}
.adf-empty-list-drag_drop {
min-height: 56px;
opacity: 0.54;
font-size: 56px;
line-height: 1;
letter-spacing: -2px;
color: var(--mat-sys-on-surface);
font: var(--mat-sys-headline-large);
margin-top: 40px;
word-break: break-all;
white-space: pre-line;
@@ -26,10 +22,8 @@
.adf-empty-list__any-files-here-to-add {
min-height: 24px;
opacity: 0.54;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.4px;
color: var(--mat-sys-on-surface);
font: var(--mat-sys-body-large);
margin-top: 17px;
word-break: break-all;
white-space: pre-line;
lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss
+5 -12
View File
@@ -7,18 +7,13 @@
.adf-empty-list-header {
height: 32px;
opacity: 0.26;
font-size: var(--theme-headline-font-size);
line-height: 1.33;
letter-spacing: -1px;
color: var(--mat-sys-on-secondary-container);
font: var(--mat-sys-headline-medium);
}
.adf-empty-list-drag_drop {
min-height: 56px;
opacity: 0.54;
font-size: 56px;
line-height: 1;
letter-spacing: -2px;
font: var(--mat-sys-headline-large);
margin-top: 40px;
word-break: break-all;
white-space: pre-line;
@@ -30,10 +25,8 @@
.adf-empty-list__any-files-here-to-add {
min-height: 24px;
opacity: 0.54;
font-size: var(--theme-subheading-2-font-size);
line-height: 1.5;
letter-spacing: -0.4px;
color: var(--mat-sys-on-surface);
font: var(--mat-sys-body-large);
margin-top: 17px;
word-break: break-all;
white-space: pre-line;
lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.spec.ts
+5 -6
View File
@@ -205,12 +205,11 @@ describe('TaskAttachmentList', () => {
component.ngOnChanges({ taskId: change });
component.disabled = true;
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual(
'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'
);
});
fixture.detectChanges();
await fixture.whenStable();
const header = fixture.nativeElement.querySelector('div[adf-empty-list-header]');
expect(header.innerText.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER');
});
it('should not show the empty list component when the attachments list is not empty for completed task', async () => {
lib/process-services/src/lib/form/start-form/start-form.component.scss
+5 -22
View File
@@ -18,11 +18,7 @@
}
& #{ms.$mat-tab-label-text} {
font-size: var(--theme-subheading-2-font-size);
line-height: var(--theme-headline-line-height);
letter-spacing: -0.4px;
text-align: left;
color: var(--adf-theme-foreground-text-color-064);
text-transform: uppercase;
}
@@ -38,7 +34,7 @@
.adf-form-container-card {
.adf {
&-form-title {
font-size: var(--theme-title-font-size);
font: var(--mat-sys-title-medium);
}
&-form-debug-container {
@@ -50,10 +46,6 @@
cursor: pointer;
}
&-form-debug-container .adf-debug-toggle-text:hover {
font-weight: bold;
}
&-form-reload-button {
position: absolute;
right: 12px;
@@ -64,10 +56,10 @@
position: absolute;
right: 50px;
top: 39px;
color: var(--theme-accent-color);
color: var(--mat-sys-primary);
& .adf-invalid-color {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
}
@@ -82,8 +74,7 @@
&-label {
width: 32px;
height: 16px;
font-size: var(--theme-caption-font-size);
line-height: var(--theme-headline-line-height);
font: var(--mat-sys-body-small);
text-align: left;
white-space: nowrap;
}
@@ -101,9 +92,7 @@
& #{ms.$mat-button-label} {
width: 58px;
height: 20px;
opacity: 0.54;
font-size: var(--theme-body-2-font-size);
font-weight: bold;
font: var(--mat-sys-body-large);
}
}
}
@@ -111,12 +100,6 @@
form-field {
width: 100%;
#{ms.$mat-input-element} {
font-size: var(--theme-body-2-font-size);
padding-top: 8px;
line-height: normal;
}
}
[dir='rtl'] .adf-form-validation-button {
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss
-13
View File
@@ -2,24 +2,11 @@
.adf-attach-file-widget-dialog {
#{ms.$mat-dialog-actions} {
background-color: var(--theme-background-color);
display: flex;
justify-content: flex-end;
color: var(--adf-theme-foreground-text-color);
button {
text-transform: uppercase;
font-weight: normal;
}
.adf-choose-action {
&[disabled] {
color: var(--adf-theme-foreground-secondary-text-color);
}
&:enabled {
color: var(--theme-primary-color);
}
}
}
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html
+2 -2
View File
@@ -5,14 +5,14 @@
</label>
<div class="adf-attach-widget-container">
<div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">
<a mat-raised-button color="primary">
<a mat-raised-button>
{{ 'FORM.FIELD.UPLOAD' | translate }}
<mat-icon>file_upload</mat-icon>
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.id" (change)="onAttachFileChanged($event)" />
</a>
</div>
<div class="adf-attach-widget__menu-upload" (focusout)="markAsTouched()" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
<button mat-raised-button [matMenuTriggerFor]="menu" [id]="field.id">
<mat-icon>attach_file</mat-icon>
{{ 'FORM.FIELD.UPLOAD' | translate }}
</button>
lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.html
-1
View File
@@ -16,7 +16,6 @@
<div *ngIf="!hasFolder && !field.readOnly">
<button
mat-raised-button
color="primary"
(click)="openSelectDialogFromFileSource()"
[id]="'folder-' + field?.id + '-button'"
class="adf-attach-folder-menu-trigger"
lib/process-services/src/lib/form/widgets/document/content.widget.scss
+3 -3
View File
@@ -2,9 +2,9 @@
&-img-upload-widget {
width: 100%;
height: 100%;
border: 1px solid rgba(117, 117, 117, 0.57);
box-shadow: 1px 1px 2px #ddd;
background-color: #fff;
border: 1px solid var(--mat-sys-outline-variant);
box-shadow: var(--mat-sys-level2);
background-color: var(--mat-sys-surface);
}
&-content-widget-preview-text {
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss
-6
View File
@@ -1,5 +1,3 @@
@use '../../../styles/mat-selectors' as ms;
.adf {
&-dropdown-widget {
width: 100%;
@@ -9,10 +7,6 @@
width: 100%;
}
#{ms.$mat-select-value-text} {
font-size: var(--theme-body-1-font-size);
}
&-select {
width: 100%;
}
lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss
+21 -38
View File
@@ -1,17 +1,14 @@
/* stylelint-disable no-descending-specificity */
@use '../../../../../../core/src/lib/styles/mixins' as *;
@use 'styles/mixins' as mixins;
$dynamic-table-font-size: var(--theme-body-1-font-size) !default;
$dynamic-table-header-font-size: var(--theme-caption-font-size) !default;
$dynamic-table-font-size: var(--mat-sys-body-medium-size) !default;
$dynamic-table-header-font-size: var(--mat-sys-body-small-size) !default;
$dynamic-table-header-sort-icon-size: 16px !default;
$dynamic-table-hover-color: #eee !default;
$dynamic-table-selection-color: #e0f7fa !default;
$dynamic-table-row-height: 56px !default;
$dynamic-table-column-spacing: 36px !default;
$dynamic-table-column-padding: 18px !default;
$dynamic-table-card-padding: 24px !default;
$dynamic-table-cell-top: 12px !default;
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
dynamic-table-widget .adf-label {
width: auto;
@@ -26,7 +23,7 @@ dynamic-table-widget .adf-label {
&-dynamic-table {
width: 100%;
position: relative;
border: 1px solid var(--adf-theme-foreground-text-color-007);
border: 1px solid var(--mat-sys-outline-variant);
white-space: nowrap;
font-size: $dynamic-table-font-size;
@@ -42,23 +39,20 @@ dynamic-table-widget .adf-label {
tr {
position: relative;
height: $dynamic-table-row-height;
@include material-animation-default(0.28s);
transition-property: background-color;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
background-color: $dynamic-table-hover-color;
background-color: var(--mat-sys-surface-dim);
}
&.adf-is-selected,
&.adf-is-selected:hover {
background-color: $dynamic-table-selection-color;
background-color: var(--mat-sys-secondary-container);
}
&:focus {
outline-offset: -1px;
outline: rgb(68, 138, 255) solid 1px;
outline: var(--mat-sys-primary) solid 1px;
}
}
}
@@ -78,63 +72,52 @@ dynamic-table-widget .adf-label {
}
td {
color: var(--adf-theme-foreground-text-color);
@include mixins.adf-no-select;
color: var(--mat-sys-on-surface);
position: relative;
vertical-align: middle;
height: $dynamic-table-row-height;
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
border-top: 1px solid var(--mat-sys-outline-variant);
border-bottom: 1px solid var(--mat-sys-outline-variant);
padding-top: $dynamic-table-cell-top;
box-sizing: border-box;
@include adf-no-select;
cursor: default;
}
th {
@include adf-no-select;
@include mixins.adf-no-select;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
font-weight: var(--mat-sys-label-large-weight);
line-height: var(--mat-sys-label-large-line-height);
letter-spacing: 0;
height: $dynamic-table-row-height;
font-size: $dynamic-table-header-font-size;
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
padding-bottom: 8px;
box-sizing: border-box;
&.adf-sortable {
@include adf-no-select;
@include mixins.adf-no-select;
&:hover {
cursor: pointer;
}
cursor: pointer;
}
&.adf-dynamic-table__header--sorted-asc,
&.adf-dynamic-table__header--sorted-desc {
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
&::before {
@include typo-icon;
@include mixins.typo-icon;
font-size: $dynamic-table-header-sort-icon-size;
content: '\e5d8';
margin-right: 5px;
vertical-align: sub;
}
&:hover {
cursor: pointer;
&::before {
color: var(--adf-theme-foreground-disabled-text-color);
}
}
}
lib/process-services/src/lib/form/widgets/dynamic-table/editors/boolean/boolean.editor.html
-1
View File
@@ -1,6 +1,5 @@
<label [attr.for]="column.id">
<mat-checkbox
color="primary"
[id]="column.id"
[checked]="table.getCellValue(row, column)"
[required]="column.required"
lib/process-services/src/lib/form/widgets/dynamic-table/editors/boolean/boolean.editor.scss
+1 -2
View File
@@ -2,8 +2,7 @@
&-checkbox-label {
position: relative;
cursor: pointer;
font-size: var(--theme-subheading-2-font-size);
line-height: 24px;
font: var(--mat-sys-body-large);
margin: 0;
}
}
lib/process-services/src/lib/form/widgets/dynamic-table/editors/row-editor/row.editor.css
+2 -1
View File
@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
.row-editor {
padding: 8px;
}
@@ -8,6 +9,6 @@
.row-editor__invalid .row-editor__validation-summary {
padding: 8px 16px;
color: #d50000;
color: var(--mat-sys-error);
visibility: visible;
}
lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.scss
+2 -2
View File
@@ -4,9 +4,9 @@
.adf-group-widget-field {
.adf-group-widget-field-chip {
border: 1px solid var(--adf-chip-border-color);
border: 1px solid var(--mat-sys-outline);
border-radius: 10px;
background-color: var(--theme-primary-color-default-contrast);
background-color: var(--mat-sys-secondary);
height: auto;
word-break: break-word;
padding: 4px 0;
lib/process-services/src/lib/form/widgets/people/people.widget.scss
+8 -13
View File
@@ -1,18 +1,14 @@
@use '../../../styles/mat-selectors' as ms;
.adf {
&-people-widget {
width: 100%;
#{ms.$mat-form-field-label} {
top: 10px;
}
.adf-people-widget-field {
top: 10px;
.adf-people-widget-field-chip {
border: 1px solid var(--adf-chip-border-color);
border: 1px solid var(--mat-sys-outline);
border-radius: 10px;
background-color: var(--theme-primary-color-default-contrast);
background-color: var(--mat-sys-secondary);
height: auto;
word-break: break-word;
padding: 4px 0;
@@ -31,23 +27,22 @@
}
&-people-widget-pic {
background: var(--theme-primary-color);
background: var(--mat-sys-primary);
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100px;
color: var(--adf-theme-foreground-text-color);
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
color: var(--mat-sys-on-surface);
font: var(--mat-sys-label-large);
text-transform: uppercase;
}
&-people-widget-image {
margin-left: -44px;
left: 21px;
background: var(--adf-theme-background-dialog-color);
background: var(--mat-sys-surface-container-high);
border-radius: 100px;
width: 40px;
height: 40px;
lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html
-1
View File
@@ -11,7 +11,6 @@
[value]="opt.id"
[checked]="field.value === opt.id"
(change)="onOptionClick(opt.id)"
color="primary"
class="adf-radio-button"
*ngFor="let opt of field.options"
>
lib/process-services/src/lib/form/widgets/upload/upload.widget.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
<button mat-raised-button color="primary" (click)="uploadFiles.click()">
<button mat-raised-button (click)="uploadFiles.click()">
{{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.id" (change)="onFileChanged($event)" />
</button>
lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.scss
+3 -4
View File
@@ -20,14 +20,13 @@
}
.adf-people-pic {
background: var(--theme-primary-color);
background: var(--mat-sys-primary);
width: 30px;
padding: 10px 5px;
border-radius: 90%;
color: #fff;
color: var(--mat-sys-on-primary);
text-align: center;
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
font: var(--mat-sys-label-large);
text-transform: uppercase;
vertical-align: text-bottom;
}
lib/process-services/src/lib/people/components/people-search/people-search.component.scss
+4 -4
View File
@@ -15,17 +15,17 @@
}
.adf-search-list-action-container {
border-top: 1px solid #eee;
border-top: 1px solid var(--mat-sys-outline-variant);
text-align: right;
padding: 5px 0;
margin-top: 5px;
> button {
opacity: 0.54;
font-weight: bolder;
color: var(--mat-sys-on-surface-variant);
font: var(--mat-sys-label-large);
&:hover {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
}
lib/process-services/src/lib/people/components/people/people.component.scss
+7 -9
View File
@@ -1,7 +1,7 @@
@use '../../../styles/mat-selectors' as ms;
.adf-assignment-header {
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
border-bottom: 1px solid var(--mat-sys-outline-variant);
padding: 6px 20px;
}
@@ -18,16 +18,15 @@
float: right;
padding: 8px;
height: 26px;
opacity: 0.54;
cursor: pointer;
&:hover {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
.adf-assignment-top-container#{ms.$mat-card} {
border-top: 1px solid var(--adf-theme-foreground-divider-color);
border-top: 1px solid var(--mat-sys-outline-variant);
margin: 0;
padding: 0;
display: flex;
@@ -45,7 +44,7 @@
.adf-assignment-container {
padding: 10px 20px;
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
border-bottom: 1px solid var(--mat-sys-outline-variant);
max-width: 100%;
}
@@ -80,14 +79,13 @@ adf-people-list adf-datatable {
}
.adf-people-search-people-pic {
background: var(--theme-primary-color);
background: var(--mat-sys-primary);
width: 30px;
padding: 10px 5px;
border-radius: 100px;
color: #fff;
color: var(--mat-sys-on-primary);
text-align: center;
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
font: var(--mat-sys-label-large);
text-transform: uppercase;
vertical-align: text-bottom;
}
lib/process-services/src/lib/process-list/components/process-filters/process-filters.component.scss
+2 -5
View File
@@ -3,9 +3,6 @@ adf-process-instance-filters {
&-filters__entry:has(.adf-filter-action-button) {
padding: 0;
width: 100%;
cursor: pointer;
font-size: var(--theme-body-1-font-size);
font-weight: bold;
.adf-full-width {
display: flex;
@@ -20,13 +17,13 @@ adf-process-instance-filters {
.adf-filter-action-button__label {
padding-left: 20px;
margin: 0 8px;
color: var(--theme-action-button-text-color);
font: var(--mat-sys-body-large);
}
}
&.adf-active {
.adf-filter-action-button__label {
color: var(--adf-sidenav-active-text-color);
color: var(--mat-sys-primary);
}
}
}
lib/process-services/src/lib/process-list/components/process-instance-tasks/process-instance-tasks.component.css
+2 -9
View File
@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
:host {
width: 100%;
}
@@ -57,15 +58,7 @@
.no-results {
margin-left: 9px;
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
color: rgba(0, 0, 0, 0.54);
font: var(--mat-sys-body-medium);
display: block;
padding: 12px;
}
.process-tasks__task-item {
cursor: pointer;
}
lib/process-services/src/lib/process-list/components/process-instance-tasks/process-instance-tasks.component.html
+2 -2
View File
@@ -8,7 +8,7 @@
<mat-chip-listbox>
<span class="adf-chip-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>
<mat-chip-option class="adf-process-badge" color="accent" selected="true">{{activeTasks?.length}}</mat-chip-option>
<mat-chip-option class="adf-process-badge" selected="true">{{activeTasks?.length}}</mat-chip-option>
</mat-chip-listbox>
<div class="menu-container" *ngIf="activeTasks?.length > 0" data-automation-id="active-tasks">
@@ -50,7 +50,7 @@
<!-- COMPLETED FORM -->
<mat-chip-listbox>
<span class="adf-chip-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>
<mat-chip-option class="adf-process-badge" color="accent" selected="true">{{completedTasks?.length}}</mat-chip-option>
<mat-chip-option class="adf-process-badge" selected="true">{{completedTasks?.length}}</mat-chip-option>
</mat-chip-listbox>
<div class="menu-container" *ngIf="completedTasks?.length > 0" data-automation-id="completed-tasks">
lib/process-services/src/lib/process-list/components/process-list/process-list.component.css
+2 -4
View File
@@ -3,10 +3,8 @@
margin-right: calc((100% - 100px) / 2);
}
/* stylelint-disable-next-line selector-class-pattern */
.no-content-message {
font-size: var(--theme-subheading-2-font-size);
font-weight: bold;
font: var(--mat-sys-title-small);
text-align: center;
opacity: 0.54;
color: #000;
}
lib/process-services/src/lib/process-list/components/process-list/process-list.component.html
-1
View File
@@ -22,7 +22,6 @@
<mat-progress-spinner
*ngIf="!customLoadingContent"
class="adf-process-list-loading-margin"
color="primary"
mode="indeterminate" />
<ng-content select="adf-custom-loading-content-template" />
</ng-template>
lib/process-services/src/lib/process-list/components/start-process/start-process.component.html
-1
View File
@@ -127,7 +127,6 @@
{{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
</button>
<button
color="primary"
mat-button
*ngIf="!hasStartForm()"
[disabled]="!validateForm()"
lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss
-4
View File
@@ -12,10 +12,6 @@
width: 100%;
}
#{ms.$mat-form-field-label} {
color: var(--adf-theme-mat-grey-color-a200-dark);
}
&-content-actions {
padding-bottom: 16px;
padding-right: 16px;
lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.html
+2 -2
View File
@@ -24,11 +24,11 @@
<mat-card-actions class="adf-attach-form-mat-card-actions">
<div>
<button mat-button id="adf-attach-form-remove-button" color="warn" *ngIf="formKey" (click)="onRemoveButtonClick()">{{ 'ADF_TASK_LIST.ATTACH_FORM.REMOVE_FORM' | translate }}</button>
<button mat-button id="adf-attach-form-remove-button" *ngIf="formKey" (click)="onRemoveButtonClick()">{{ 'ADF_TASK_LIST.ATTACH_FORM.REMOVE_FORM' | translate }}</button>
</div>
<div>
<button mat-button id="adf-attach-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
<button mat-button id="adf-attach-form-attach-button" [disabled]="disableSubmit" color="primary" (click)="onAttachFormButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
<button mat-button id="adf-attach-form-attach-button" [disabled]="disableSubmit" (click)="onAttachFormButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
</div>
</mat-card-actions>
</mat-card>
lib/process-services/src/lib/task-list/components/checklist/checklist.component.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="adf-checklist-control">
<mat-chip-listbox data-automation-id="checklist-label">
<span class="adf-activiti-label">{{ 'ADF_TASK_LIST.DETAILS.LABELS.CHECKLIST' | translate }}</span>
<mat-chip-option class="adf-process-badge" color="accent" selected="true">{{checklist?.length}}</mat-chip-option>
<mat-chip-option class="adf-process-badge" selected="true">{{checklist?.length}}</mat-chip-option>
</mat-chip-listbox>
lib/process-services/src/lib/task-list/components/start-task/start-task.component.html
-1
View File
@@ -82,7 +82,6 @@
{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}
</button>
<button
color="primary"
mat-button
class="adf-uppercase"
[disabled]="!isFormValid()"
lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
+15 -29
View File
@@ -1,15 +1,9 @@
@use '../../../styles/mat-selectors' as ms;
@use '../../../styles/flex' as flex;
/* stylelint-disable no-descending-specificity */
.adf-new-task-heading {
padding-top: 12px;
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
#{ms.$mat-card-title} {
font-weight: bold;
font-size: var(--theme-adf-task-title-font-size);
}
border-bottom: 1px solid var(--mat-sys-outline-variant);
}
.adf-new-task-layout-card {
@@ -57,8 +51,8 @@
.adf-new-task-footer {
padding: 4px;
font-size: var(--theme-adf-task-footer-font-size);
border-top: 1px solid #eee;
font: var(--mat-sys-body-medium);
border-top: 1px solid var(--mat-sys-outline-variant);
display: flex;
place-content: flex-end;
align-items: flex-end;
@@ -69,20 +63,16 @@
}
adf-start-task {
#{ms.$mat-button}.adf-uppercase {
button.adf-uppercase {
text-transform: uppercase;
}
people-widget.adf-people-widget-content {
width: 100%;
#{ms.$mat-form-field-label} {
top: -14px;
}
}
.adf-people-widget-content {
#{ms.$mat-form-field} {
.adf-people-widget-field {
width: 100%;
}
@@ -96,7 +86,7 @@ adf-start-task {
}
.adf {
&-start-task-input-container #{ms.$mat-form-field-wrapper} {
&-start-task-input-container {
padding-top: 8px;
}
@@ -116,39 +106,35 @@ adf-start-task {
&-error-text {
padding-right: 8px;
height: 16px;
font-size: var(--theme-caption-font-size);
font: var(--mat-sys-body-small);
line-height: 1.33;
color: var(--theme-warn-color);
color: var(--mat-sys-error);
width: auto;
}
&-error-icon {
font-size: var(--theme-adf-icon-1-font-size);
color: var(--theme-warn-color);
font: var(--mat-sys-body-medium);
color: var(--mat-sys-error);
}
&-label {
color: rgb(186, 186, 186);
color: var(--mat-sys-outline);
}
&-invalid {
.adf-file {
border-color: var(--theme-warn-color);
}
#{ms.$mat-form-field-prefix} {
color: var(--theme-warn-color);
border-color: var(--mat-sys-error);
}
.adf-input {
border-color: var(--theme-warn-color);
border-color: var(--mat-sys-error);
}
.adf-label {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
&::after {
background-color: var(--theme-warn-color);
background-color: var(--mat-sys-error);
}
}
}
lib/process-services/src/lib/task-list/components/start-task/start-task.component.spec.ts
-12
View File
@@ -20,15 +20,11 @@ import { of, throwError } from 'rxjs';
import { TaskListService } from '../../services/tasklist.service';
import { StartTaskComponent } from './start-task.component';
import { taskDetailsMock } from '../../../testing/mock/task/task-details.mock';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatButtonHarness } from '@angular/material/button/testing';
import { TaskRepresentation } from '@alfresco/js-api';
describe('StartTaskComponent', () => {
let component: StartTaskComponent;
let fixture: ComponentFixture<StartTaskComponent>;
let loader: HarnessLoader;
let service: TaskListService;
let element: HTMLElement;
let getFormListSpy: jasmine.Spy;
@@ -54,7 +50,6 @@ describe('StartTaskComponent', () => {
fixture = TestBed.createComponent(StartTaskComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
service = TestBed.inject(TaskListService);
@@ -294,13 +289,6 @@ describe('StartTaskComponent', () => {
expect(element.querySelector('#button-start').textContent).toContain('ADF_TASK_LIST.START_TASK.FORM.ACTION.START');
});
it('should render start task button with primary color', async () => {
fixture.detectChanges();
const buttonEl = await (await loader.getHarness(MatButtonHarness.with({ selector: '#button-start' }))).host();
expect(await buttonEl.getAttribute('color')).toBe('primary');
});
it('should render task buttons with uppercase text', () => {
fixture.detectChanges();
lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss
+1 -20
View File
@@ -1,4 +1,3 @@
@use '../../../styles/mat-selectors' as ms;
@use '../../../styles/flex' as flex;
adf-task-details {
@@ -7,9 +6,7 @@ adf-task-details {
.adf-activiti-task-details__header {
align-self: flex-end;
display: flex;
font-size: var(--theme-headline-font-size);
font-weight: 300;
line-height: normal;
font: var(--mat-sys-headline-small);
overflow: hidden;
margin: 8px 0 16px;
cursor: pointer;
@@ -75,22 +72,6 @@ adf-task-details {
display: flex;
flex-direction: column;
padding: 20px 0;
#{ms.$mat-slide-toggle} {
margin-left: auto;
& + div {
background-color: black;
padding: 20px;
clear: both;
margin-top: 30px;
color: white;
}
}
}
& #{ms.$mat-tab-label-text} {
flex-grow: 1;
}
}
}
lib/process-services/src/lib/task-list/components/task-filters/task-filters.component.scss
+3 -4
View File
@@ -4,8 +4,7 @@ adf-task-filters {
padding: 0;
width: 100%;
cursor: pointer;
font-size: var(--theme-body-1-font-size);
font-weight: bold;
font: var(--mat-sys-body-medium);
.adf-full-width {
display: flex;
@@ -20,13 +19,13 @@ adf-task-filters {
.adf-filter-action-button__label {
padding-left: 20px;
margin: 0 8px;
color: var(--theme-action-button-text-color);
color: var(--mat-sys-on-surface);
}
}
&.adf-active {
.adf-filter-action-button__label {
color: var(--adf-sidenav-active-text-color);
color: var(--mat-sys-primary);
}
}
}
lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
-1
View File
@@ -60,7 +60,6 @@
<ng-template [ngTemplateOutlet]="taskFormButtons" />
<button mat-button
*ngIf="!isCompletedTask()" id="adf-no-form-complete-button"
color="primary"
class="adf-task-form-actions-button"
[disabled]="canCompleteNoFormTask()"
(click)="onCompleteTask()">
lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss
+2 -3
View File
@@ -18,9 +18,8 @@
& #{ms.$mat-button-label} {
width: 58px;
height: 20px;
opacity: 0.54;
font-size: var(--theme-body-2-font-size);
font-weight: bold;
font: var(--mat-sys-title-small);
color: var(--mat-sys-on-surface-variant);
}
}
}
lib/process-services/src/lib/task-list/components/task-header/task-header.component.scss
+2 -2
View File
@@ -14,12 +14,12 @@
&-switch-to-edit-mode,
&-save-edit-mode {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
&-cancel-edit-mode,
&-claim-controls {
color: rgb(131, 131, 131);
color: var(--mat-sys-secondary);
}
&-card-container {
lib/process-services/src/lib/task-list/components/task-list/task-list.component.html
+1 -1
View File
@@ -20,7 +20,7 @@
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner *ngIf="!customLoadingContent" class="adf-task-list-loading-margin" color="primary" mode="indeterminate" />
<mat-progress-spinner *ngIf="!customLoadingContent" class="adf-task-list-loading-margin" mode="indeterminate" />
<ng-content select="adf-custom-loading-content-template" />
</ng-template>
</adf-loading-content-template>
lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.html
+1 -1
View File
@@ -21,7 +21,7 @@
<button mat-button *ngIf="hasAttachFormButton()" id="adf-no-form-attach-form-button" (click)="onShowAttachForm()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
<div class="adf-no-form-mat-card-actions-container">
<button mat-button *ngIf="hasCancelButton()" id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
<button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" color="primary" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
<button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
</div>
</mat-card-actions>
</mat-card>
lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss
+5 -15
View File
@@ -1,5 +1,3 @@
@use '../../../styles/mat-selectors' as ms;
.adf-message-card {
width: 60%;
box-sizing: border-box;
@@ -7,7 +5,7 @@
padding: 8px 8px 0;
.adf-no-form-mat-card-actions {
border-top: solid 1px var(--adf-theme-background-status-bar-color);
border-top: solid 1px var(--mat-sys-outline-variant);
}
.adf {
@@ -25,17 +23,15 @@
&-no-form-message {
padding-bottom: 10px;
font-size: var(--theme-display-1-font-size);
line-height: 36px;
letter-spacing: -1.3px;
opacity: 0.54;
font: var(--mat-sys-headline-small);
color: var(--mat-sys-on-surface-variant);
margin: auto;
width: fit-content;
}
&-no-form-submessage {
font-size: var(--theme-subheading-2-font-size);
opacity: 0.54;
font: var(--mat-sys-title-small);
color: var(--mat-sys-on-surface-variant);
margin: auto;
width: fit-content;
}
@@ -48,12 +44,6 @@
text-transform: uppercase;
border-radius: 5px;
}
& #{ms.$mat-button-label} {
opacity: 0.54;
font-size: var(--theme-button-font-size);
font-weight: bold;
}
}
}
}