mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
AAE-40649 Material Design 3 migration (#11286)
* 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
co-authored by
Ehsan Rezaei
Ricardo Dias
Ehsan Rezaei
Ricardo Dias
parent
423c646bac
commit
64826c3a99
@@ -43,7 +43,7 @@
|
||||
"options": {
|
||||
"commands": [
|
||||
{
|
||||
"command": "stylelint lib/process-services-cloud/**/*.scss --config stylelint-config.json"
|
||||
"command": "stylelint \"lib/process-services-cloud/**/*.scss\" --config .stylelintrc.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
|
||||
position: relative;
|
||||
line-height: $line-height;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* stylelint-disable */
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
height: calc(0.99em * #{$line-height} * #{$lines});
|
||||
}
|
||||
|
||||
@supports not (-webkit-line-clamp: 1) {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* stylelint-enable */
|
||||
}
|
||||
|
||||
$tile-themes: (
|
||||
theme-1: (
|
||||
bg: #269abc,
|
||||
color: #168aac
|
||||
),
|
||||
theme-2: (
|
||||
bg: #7da9b0,
|
||||
color: #6d99a0
|
||||
),
|
||||
theme-3: (
|
||||
bg: #7689ab,
|
||||
color: #66799b
|
||||
),
|
||||
theme-4: (
|
||||
bg: #c74e3e,
|
||||
color: #b73e2e
|
||||
),
|
||||
theme-5: (
|
||||
bg: #fab96c,
|
||||
color: #eaa95c
|
||||
),
|
||||
theme-6: (
|
||||
bg: #759d4c,
|
||||
color: #658d3c
|
||||
),
|
||||
theme-7: (
|
||||
bg: #b1b489,
|
||||
color: #a1a479
|
||||
),
|
||||
theme-8: (
|
||||
bg: #a17299,
|
||||
color: #916289
|
||||
),
|
||||
theme-9: (
|
||||
bg: #696c67,
|
||||
color: #595c57
|
||||
),
|
||||
theme-10: (
|
||||
bg: #cabb33,
|
||||
color: #baab23
|
||||
)
|
||||
);
|
||||
|
||||
adf-cloud-app-details {
|
||||
.adf-app-listgrid {
|
||||
padding: 8px;
|
||||
display: block;
|
||||
|
||||
.adf-app-listgrid-item {
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
flex: unset;
|
||||
max-width: unset;
|
||||
|
||||
&-card {
|
||||
@for $i from 1 through 10 {
|
||||
&.theme-#{$i} {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
|
||||
background-color: map-get($tile-theme, bg);
|
||||
|
||||
.adf-app-listgrid-item-card-logo-icon {
|
||||
color: map-get($tile-theme, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
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;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
max-width: unset;
|
||||
|
||||
&: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);
|
||||
cursor: pointer;
|
||||
transform: scale(1.015);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
padding: 16px;
|
||||
z-index: 9;
|
||||
|
||||
.adf-app-listgrid-item-card-logo-icon {
|
||||
font-size: 70px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&-title:has(.adf-app-listgrid-item-card-title-text) {
|
||||
padding: 16px;
|
||||
margin-bottom: 0;
|
||||
z-index: 9999;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
width: 80%;
|
||||
font-size: var(--mat-sys-headline-small-size);
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle:has(.adf-line-clamp) {
|
||||
color: white;
|
||||
z-index: 9999;
|
||||
padding: 16px;
|
||||
flex: 1 0 auto;
|
||||
|
||||
.adf-line-clamp {
|
||||
@include adf-line-clamp(1.25, 3);
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding: 0 16px 16px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-icon {
|
||||
color: #e9f1f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,6 @@
|
||||
.adf-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
}
|
||||
|
||||
.adf-cloud-form {
|
||||
@@ -37,7 +36,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
background-color: var(--adf-theme-mat-grey-color-a400);
|
||||
background-color: var(--mat-sys-surface-container);
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
@@ -61,13 +60,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-toolbar ::ng-deep {
|
||||
#{ms.$mat-toolbar} {
|
||||
background-color: var(--adf-theme-background-card-color-087);
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-fullscreen-button {
|
||||
position: absolute;
|
||||
right: 70px;
|
||||
@@ -75,7 +67,7 @@
|
||||
}
|
||||
|
||||
&__display-name {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
font-size: var(--mat-sys-title-small-size);
|
||||
opacity: 0.87;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
@@ -87,7 +79,6 @@
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&__form-title {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<div class="adf-cloud-form-spinner">
|
||||
<div class="adf-cloud-form-spinner-content">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate"
|
||||
/>
|
||||
<span class="adf-cloud-form-spinner-content-message">
|
||||
|
||||
+1
-1
@@ -13,7 +13,7 @@
|
||||
align-items: center;
|
||||
|
||||
&-message {
|
||||
font-size: var(--theme-body-4-font-size);
|
||||
font-size: var(--mat-sys-body-large-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
-1
@@ -10,7 +10,6 @@
|
||||
(click)="openSelectDialog()"
|
||||
mat-raised-button
|
||||
class="adf-attach-widget__menu-upload__button"
|
||||
color="primary"
|
||||
[id]="field.id"
|
||||
[title]="field.tooltip">
|
||||
{{ 'FORM.FIELD.ATTACH' | translate }}
|
||||
|
||||
+3
-20
@@ -25,15 +25,6 @@
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
word-break: normal;
|
||||
|
||||
.adf-attach-widget__menu-upload__button {
|
||||
line-height: 28px;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
|
||||
button span {
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
&-attach-widget__input-type {
|
||||
@@ -55,14 +46,13 @@
|
||||
word-break: break-all;
|
||||
padding: 0.4375em;
|
||||
border-bottom: none;
|
||||
background: var(--adf-theme-mat-grey-color-a200);
|
||||
background: var(--mat-sys-surface-variant);
|
||||
min-height: 27px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.adf-label {
|
||||
width: 100%;
|
||||
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: normal;
|
||||
margin-left: 8px;
|
||||
@@ -71,13 +61,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-attach-widget__icon {
|
||||
font-size: var(--theme-adf-picture-1-font-size);
|
||||
height: var(--theme-adf-picture-1-font-size);
|
||||
width: var(--theme-adf-picture-1-font-size);
|
||||
line-height: calc(var(--theme-adf-picture-1-font-size) - 2px);
|
||||
}
|
||||
|
||||
&-attach-widget__reset {
|
||||
margin-top: -2px;
|
||||
}
|
||||
@@ -93,7 +76,7 @@
|
||||
&-attach-selected-file-row {
|
||||
> div:first-child {
|
||||
.adf-datatable-selected {
|
||||
color: var(--theme-primary-color);
|
||||
color: var(--mat-sys-primary);
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
.adf-file-properties-table-container {
|
||||
.adf-file-properties-table.adf-properties-table table {
|
||||
width: 100%;
|
||||
border: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border: 1px solid var(--mat-sys-outline-variant);
|
||||
box-shadow: none;
|
||||
|
||||
.adf-file {
|
||||
|
||||
-1
@@ -3,7 +3,6 @@
|
||||
}
|
||||
|
||||
.adf-preview-placeholder {
|
||||
background-color: var(--adf-theme-mat-grey-color-50);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
|
||||
-1
@@ -7,7 +7,6 @@
|
||||
}
|
||||
|
||||
&-preview {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
-9
@@ -1,19 +1,10 @@
|
||||
.adf-display-rich-text-widget {
|
||||
pre {
|
||||
min-height: 100px;
|
||||
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
color: #41314e;
|
||||
line-height: 1.6em;
|
||||
font-size: 12px;
|
||||
background: #f8f7fa;
|
||||
border: 1px solid #f1f1f4;
|
||||
box-shadow: none;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
overflow-x: auto;
|
||||
resize: vertical;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
-4
@@ -9,10 +9,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-select-filter {
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
}
|
||||
|
||||
&-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@ adf-properties-viewer-widget {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border: 1px solid var(--mat-sys-outline-variant);
|
||||
border-radius: 6px;
|
||||
|
||||
.adf-properties-viewer-wrapper-loading {
|
||||
|
||||
-1
@@ -16,7 +16,6 @@
|
||||
[value]="opt.id"
|
||||
[checked]="isChecked(opt)"
|
||||
(change)="onOptionClick(opt.id)"
|
||||
color="primary"
|
||||
class="adf-radio-button" *ngFor="let opt of field.options" >
|
||||
{{opt.name}}
|
||||
</mat-radio-button>
|
||||
|
||||
-9
@@ -1,13 +1,4 @@
|
||||
.adf {
|
||||
&-radio-buttons-widget-cloud {
|
||||
.adf-label {
|
||||
font-size: var(--adf-radio-buttons-font-size, var(--adf-form-label-font-size, var(--theme-caption-font-size)));
|
||||
font-weight: var(--adf-radio-buttons-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
|
||||
color: var(--adf-radio-buttons-color, var(--adf-form-label-color, var(--adf-theme-foreground-secondary-text-color)));
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&-radio-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -10,10 +10,8 @@
|
||||
|
||||
.adf-group-short-name {
|
||||
margin-right: 20px;
|
||||
background: var(--theme-primary-color);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,24 +20,15 @@
|
||||
width: 100%;
|
||||
|
||||
&-title {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
|
||||
&--focus {
|
||||
color: var(--theme-primary-color);
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&-option-active:not(&:disabled) {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&-option-not-active:not(&:active) {
|
||||
background: inherit;
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&-error {
|
||||
color: var(--theme-warn-color);
|
||||
color: var(--mat-sys-error);
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
||||
@@ -2,16 +2,11 @@
|
||||
&-people-cloud {
|
||||
width: 100%;
|
||||
|
||||
&-option-not-active:not(&:active) {
|
||||
background: inherit;
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
|
||||
&--focus {
|
||||
color: var(--theme-primary-color);
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,14 +16,6 @@
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-people-cloud-option-active:not(&:disabled) {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&-people-cloud-option-not-active:not(&:active) {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&-people-cloud-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -36,7 +23,7 @@
|
||||
}
|
||||
|
||||
&-people-cloud-pic {
|
||||
background: var(--theme-primary-color);
|
||||
background: var(--mat-sys-primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -58,10 +45,4 @@
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-error,
|
||||
&-error-text,
|
||||
&-error-icon {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -88,10 +88,10 @@
|
||||
[attr.data-automation-id]="'adf-cloud-edit-process-property-date-toggle-' + processFilterProperty.key" />
|
||||
<mat-datepicker #dateController [attr.data-automation-id]="'adf-cloud-edit-process-property-date-picker-' + processFilterProperty.key" />
|
||||
<div class="adf-edit-process-filter-date-error-container">
|
||||
<div *ngIf="hasError(processFilterProperty)">
|
||||
<mat-error *ngIf="hasError(processFilterProperty)">
|
||||
<div class="adf-error-text">{{'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.DATE' | translate}}</div>
|
||||
<mat-icon class="adf-error-icon" adf-icon="warning" />
|
||||
</div>
|
||||
</mat-error>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
-23
@@ -15,16 +15,8 @@
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
@@ -64,24 +56,9 @@
|
||||
&-header {
|
||||
height: 48px;
|
||||
|
||||
&__title {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
place-content: center space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&__text-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&__select-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+3
-3
@@ -3,14 +3,14 @@
|
||||
.adf-process-filters {
|
||||
&__entry-counter {
|
||||
padding: 0 5px;
|
||||
border-radius: var(--mat-sys-corner-large, 15px);
|
||||
border-radius: var(--mat-sys-corner-large);
|
||||
|
||||
&.adf-active {
|
||||
background-color: var(--mat-sys-secondary, var(--theme-accent-color));
|
||||
background-color: var(--mat-sys-secondary);
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary, var(--theme-accent-color-default-contrast))
|
||||
list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
-3
@@ -1,3 +0,0 @@
|
||||
.adf-process-header-cloud-card {
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
}
|
||||
-1
@@ -36,7 +36,6 @@ import { NgIf } from '@angular/common';
|
||||
imports: [CardViewComponent, MatCardModule, NgIf],
|
||||
templateUrl: './process-header-cloud.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styleUrls: ['./process-header-cloud.component.scss'],
|
||||
host: { class: 'adf-cloud-process-header' }
|
||||
})
|
||||
export class ProcessHeaderCloudComponent implements OnChanges, OnInit {
|
||||
|
||||
+1
-1
@@ -140,7 +140,7 @@
|
||||
</mat-card>
|
||||
} @else {
|
||||
<div class="adf-loading-container">
|
||||
<mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
|
||||
<mat-progress-spinner class="adf-loading" mode="indeterminate" />
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
-4
@@ -1,9 +1,5 @@
|
||||
.adf {
|
||||
&-start-process {
|
||||
.adf-start-process-input-label {
|
||||
color: var(--adf-theme-mat-grey-color-a200-dark);
|
||||
}
|
||||
|
||||
&-cloud-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
+3
-3
@@ -76,15 +76,15 @@
|
||||
<mat-datepicker #dateController
|
||||
[attr.data-automation-id]="'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key" />
|
||||
<div class="adf-edit-task-filter-date-error-container">
|
||||
<div *ngIf="hasError(taskFilterProperty)">
|
||||
<mat-error *ngIf="hasError(taskFilterProperty)">
|
||||
<div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</div>
|
||||
<mat-icon class="adf-error-icon" adf-icon="warning" />
|
||||
</div>
|
||||
</mat-error>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<div class="adf-edit-task-filter-checkbox"
|
||||
*ngIf="taskFilterProperty.type === 'checkbox'">
|
||||
<mat-checkbox color="primary"
|
||||
<mat-checkbox
|
||||
[formControlName]="taskFilterProperty.key"
|
||||
[attr.data-automation-id]="taskFilterProperty.key"
|
||||
>{{taskFilterProperty.label | translate}}</mat-checkbox>
|
||||
|
||||
-24
@@ -1,7 +1,6 @@
|
||||
@use '../../../../../flex' as flex;
|
||||
|
||||
.adf-edit-task-filter-checkbox {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
flex: 1 23%;
|
||||
@@ -22,16 +21,8 @@
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 16px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-dateRange mat-grid-list {
|
||||
@@ -74,24 +65,9 @@
|
||||
&-header {
|
||||
height: 48px;
|
||||
|
||||
&__title {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
place-content: center space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&__text-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&__select-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+3
-3
@@ -76,15 +76,15 @@
|
||||
<mat-datepicker #dateController
|
||||
[attr.data-automation-id]="'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key" />
|
||||
<div class="adf-edit-task-filter-date-error-container">
|
||||
<div *ngIf="hasError(taskFilterProperty)">
|
||||
<mat-error *ngIf="hasError(taskFilterProperty)">
|
||||
<div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</div>
|
||||
<mat-icon class="adf-error-icon" adf-icon="warning" />
|
||||
</div>
|
||||
</mat-error>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<div class="adf-edit-task-filter-checkbox"
|
||||
*ngIf="taskFilterProperty.type === 'checkbox'">
|
||||
<mat-checkbox color="primary"
|
||||
<mat-checkbox
|
||||
[formControlName]="taskFilterProperty.key"
|
||||
[attr.data-automation-id]="taskFilterProperty.key"
|
||||
>{{taskFilterProperty.label | translate}}</mat-checkbox>
|
||||
|
||||
-24
@@ -1,7 +1,6 @@
|
||||
@use '../../../../../flex' as flex;
|
||||
|
||||
.adf-edit-task-filter-checkbox {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
flex: 1 23%;
|
||||
@@ -22,16 +21,8 @@
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 16px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-dateRange mat-grid-list {
|
||||
@@ -74,24 +65,9 @@
|
||||
&-header {
|
||||
height: 48px;
|
||||
|
||||
&__title {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
place-content: center space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&__text-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&__select-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+8
-8
@@ -1,9 +1,9 @@
|
||||
.adf-task-filters {
|
||||
margin-right: calc(-1 * var(--adf-theme-spacing));
|
||||
margin-right: -16px;
|
||||
|
||||
&__entry {
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
font-size: var(--mat-sys-body-medium-size);
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -11,7 +11,7 @@
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: var(--adf-theme-spacing);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__entry-counter {
|
||||
@@ -27,13 +27,13 @@
|
||||
border-radius: 15px;
|
||||
|
||||
&.adf-active {
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
background-color: var(--mat-sys-secondary);
|
||||
color: var(--mat-sys-on-secondary);
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-active .adf-task-filters__entry-label {
|
||||
color: var(--theme-primary-color);
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
|
||||
-16
@@ -9,22 +9,6 @@
|
||||
&-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
|
||||
&.adf-task-assignment-filter-label--focus {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-option {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
|
||||
&.adf-task-assignment-filter-option--selected:not(&:disabled) {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-group-cloud-filter {
|
||||
|
||||
+3
-3
@@ -3,14 +3,14 @@
|
||||
.adf-task-filters {
|
||||
&__entry-counter {
|
||||
padding: 0 5px;
|
||||
border-radius: var(--mat-sys-corner-large, 15px);
|
||||
border-radius: var(--mat-sys-corner-large);
|
||||
|
||||
&.adf-active {
|
||||
background-color: var(--mat-sys-secondary, var(--theme-accent-color));
|
||||
background-color: var(--mat-sys-secondary);
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary, var(--theme-accent-color-default-contrast))
|
||||
list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+1
-2
@@ -83,8 +83,7 @@
|
||||
[taskId]="taskId"
|
||||
(success)="onCompleteTask(false, taskType)"
|
||||
(error)="onError($event)"
|
||||
color="primary"
|
||||
id="adf-form-complete"
|
||||
id="adf-form-complete"
|
||||
>
|
||||
{{ customCompleteButtonText || ('ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate) }}
|
||||
</button>
|
||||
|
||||
+2
-2
@@ -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-on-surface-variant);
|
||||
}
|
||||
|
||||
&-task-header-loading {
|
||||
|
||||
Reference in New Issue
Block a user