inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15198] - Using reference vars to style form fields in base task (#8651)

Browse Source 
* [AAE-15198] - Using reference vars to style form fields in base task filter component

* AAE-15198: Fixed lint errors
This commit is contained in:
Ehsan Rezaei
2023-06-12 17:54:02 +02:00
committed by GitHub
parent 924cc37c79
commit 1870214bac
4 changed files with 49 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/src/lib/styles/_components-variables.scss
View File

@@ -4,6 +4,10 @@
$defaults: ( $defaults: (
--adf-edit-task-and-service-filter-header-title-color: $adf-ref-edit-task-and-service-filter-header-title-color, --adf-edit-task-and-service-filter-header-title-color: $adf-ref-edit-task-and-service-filter-header-title-color,
--adf-edit-task-and-service-filter-header-description-color: $adf-ref-edit-task-and-service-filter-header-description-color, --adf-edit-task-and-service-filter-header-description-color: $adf-ref-edit-task-and-service-filter-header-description-color,
--adf-edit-task-and-service-filter-content-text-input-color: $adf-ref-edit-task-and-service-filter-content-text-input-color,
--adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-edit-task-and-service-filter-content-text-label-color,
--adf-edit-task-and-service-filter-content-select-input-color: $adf-ref-edit-task-and-service-filter-content-select-input-color,
--adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-edit-task-and-service-filter-content-select-label-color,
--adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height, --adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height,
); );

6
lib/core/src/lib/styles/_reference-variables.scss
View File

@@ -1,3 +1,7 @@
$adf-ref-edit-task-and-service-filter-header-title-color: rgba(0, 0, 0, 0.87); $adf-ref-edit-task-and-service-filter-header-title-color: rgba(0, 0, 0, 0.87);
$adf-ref-edit-task-and-service-filter-header-description-color: rgba(0, 0, 0, 0.54); $adf-ref-edit-task-and-service-filter-header-description-color: rgba(0, 0, 0, 0.54);
$adf-ref-edit-task-and-service-filter-header-height: 48px; $adf-ref-edit-task-and-service-filter-header-height: 48px;
$adf-ref-edit-task-and-service-filter-content-text-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-edit-task-and-service-filter-content-text-input-color: rgba(0, 0, 0, 0.87);
$adf-ref-edit-task-and-service-filter-content-select-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-edit-task-and-service-filter-content-select-input-color: rgba(0, 0, 0, 0.87);

33
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
View File

@@ -27,30 +27,33 @@
</ng-template> </ng-template>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-container *ngIf="!isLoading;"> <ng-container *ngIf="!isLoading;">
<form *ngIf="editTaskFilterForm" [formGroup]="editTaskFilterForm"> <form *ngIf="editTaskFilterForm" [formGroup]="editTaskFilterForm" class="adf-edit-task-filter-content">
<div class="adf-edit-task-filter-form"> <div class="adf-edit-task-filter-form">
<ng-container *ngFor="let taskFilterProperty of taskFilterProperties"> <ng-container *ngFor="let taskFilterProperty of taskFilterProperties">
<mat-form-field [floatLabel]="'auto'" <mat-form-field [floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'select'" *ngIf="taskFilterProperty.type === 'select'"
[attr.data-automation-id]="taskFilterProperty.key"> [attr.data-automation-id]="taskFilterProperty.key">
<mat-select placeholder="{{taskFilterProperty.label | translate}}" <mat-label class="adf-edit-task-filter-content__select-label">{{taskFilterProperty.label | translate}}</mat-label>
[formControlName]="taskFilterProperty.key" <mat-select
[attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key" [formControlName]="taskFilterProperty.key"
(selectionChange)="onStatusChange($event)"> class="adf-edit-task-filter-content__select-input"
<mat-option *ngFor="let propertyOption of taskFilterProperty.options" [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key"
[value]="propertyOption.value" (selectionChange)="onStatusChange($event)">
[attr.data-automation-id]="'adf-cloud-edit-task-property-options-' + taskFilterProperty.key"> <mat-option *ngFor="let propertyOption of taskFilterProperty.options"
{{ propertyOption.label | translate }} [value]="propertyOption.value"
</mat-option> [attr.data-automation-id]="'adf-cloud-edit-task-property-options-' + taskFilterProperty.key">
{{ propertyOption.label | translate }}
</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field [floatLabel]="'auto'" <mat-form-field [floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'text'" *ngIf="taskFilterProperty.type === 'text'"
[attr.data-automation-id]="taskFilterProperty.key"> [attr.data-automation-id]="taskFilterProperty.key">
<mat-label class="adf-edit-task-filter-content__text-label">{{taskFilterProperty.label | translate}}</mat-label>
<input matInput <input matInput
[formControlName]="taskFilterProperty.key" [formControlName]="taskFilterProperty.key"
type="text" type="text"
placeholder="{{taskFilterProperty.label | translate}}" class="adf-edit-task-filter-content__text-input"
[attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key" /> [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key" />
</mat-form-field> </mat-form-field>
<mat-form-field [floatLabel]="'auto'" <mat-form-field [floatLabel]="'auto'"

22
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
View File

@@ -82,5 +82,27 @@
place-content: center space-between; place-content: center space-between;
} }
} }
&-content {
&__text-input {
&.mat-input-element {
color: var(--adf-edit-task-and-service-filter-content-text-input-color);
}
}
&__text-label {
color: var(--adf-edit-task-and-service-filter-content-text-label-color);
}
&__select-input {
.mat-select-value {
color: var(--adf-edit-task-and-service-filter-content-select-input-color);
}
}
&__select-label {
color: var(--adf-edit-task-and-service-filter-content-select-label-color);
}
}
} }
} }