[AAE-15228] process filter component styles configurable (#8657)

* Rebasing * AAE-15228: Removed unused style
Alfresco · Jun 14, 2023 · caaf04b · caaf04b
1 parent 64f9d04
commit caaf04b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
@@ -13,6 +13,11 @@
         --adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
         --adf-about-panel-header-height: $adf-ref-height-48,
         --adf-about-panel-header-title-color: $adf-ref-title-color,
+        --adf-edit-process-filter-header-height: $adf-ref-height-48,
+        --adf-edit-process-filter-header-title-color: $adf-ref-title-color,
+        --adf-edit-process-filter-header-description-color: $adf-ref-description-color,
+        --adf-edit-process-filter-content-text-label-color: $adf-ref-text-field-label-color,
+        --adf-edit-process-filter-content-select-label-color: $adf-ref-select-field-label-color,
     );
 
     // propagates SCSS variables into the CSS variables scope

diff --git a/...cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html b/...cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
@@ -1,9 +1,10 @@
-<mat-accordion [hideToggle]="isLoading">
+<mat-accordion [hideToggle]="isLoading" class="adf-edit-process-filter">
     <mat-expansion-panel (afterExpand)="onExpand()" (closed)="onClose()">
-        <mat-expansion-panel-header *ngIf="processFilter" id="adf-edit-process-filter-expansion-header">
+        <mat-expansion-panel-header *ngIf="processFilter" id="adf-edit-process-filter-expansion-header" class="adf-edit-process-filter-header">
             <ng-container *ngIf="!isLoading; else loadingTemplate">
-                <mat-panel-title *ngIf="showProcessFilterName" id="adf-edit-process-filter-title-id">{{processFilter.name | translate}}</mat-panel-title>
-                <mat-panel-description class="adf-edit-process-filter-description" id="adf-edit-process-filter-sub-title-id">
+                <mat-panel-title *ngIf="showProcessFilterName" id="adf-edit-process-filter-title-id" class="adf-edit-process-filter-header__title">
+                    {{processFilter.name | translate}}</mat-panel-title>
+                <mat-panel-description  class="adf-edit-process-filter-header__description" id="adf-edit-process-filter-sub-title-id">
                     <span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">
@@ -21,12 +22,12 @@
             </ng-template>
         </mat-expansion-panel-header>
         <ng-container *ngIf="!isLoading">
-            <form [formGroup]="editProcessFilterForm" *ngIf="editProcessFilterForm">
+            <form [formGroup]="editProcessFilterForm" *ngIf="editProcessFilterForm" class="adf-edit-process-filter-content">
                 <div class="adf-edit-process-filter-form">
                     <ng-container *ngFor="let processFilterProperty of processFilterProperties">
                         <mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
+                            <mat-label class="adf-edit-process-filter-content__select-label">{{processFilterProperty.label | translate}}</mat-label>
                             <mat-select
-                                placeholder="{{processFilterProperty.label | translate}}"
                                 [formControlName]="processFilterProperty.key"
                                 [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
                                 <mat-option
@@ -48,10 +49,10 @@
                             </mat-select>
                         </mat-form-field>
                         <mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
+                            <mat-label class="adf-edit-process-filter-content__text-label">{{processFilterProperty.label | translate}}</mat-label>
                             <input matInput
                                 [formControlName]="processFilterProperty.key"
                                 type="text"
-                                placeholder="{{processFilterProperty.label | translate}}"
                                 [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
                         </mat-form-field>
                         <mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">

diff --git a/...cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss b/...cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss
@@ -31,10 +31,6 @@
         margin-right: calc((100% - 100px) / 2);
     }
 
-    &-edit-process-filter-description {
-        place-content: center space-between;
-    }
-
     &-edit-process-filter-form {
         flex-flow: row wrap;
         display: flex;
@@ -61,4 +57,29 @@
             }
         }
     }
+
+    &-edit-process-filter {
+        &-header {
+            height: var(--adf-edit-process-filter-header-height);
+
+            &__title {
+                color: var(--adf-edit-process-filter-header-title-color);
+            }
+
+            &__description {
+                color: var(--adf-edit-process-filter-header-description-color);
+                place-content: center space-between;
+            }
+        }
+
+        &-content {
+            &__text-label {
+                color: var(--adf-edit-process-filter-content-text-label-color);
+            }
+
+            &__select-label {
+                color: var(--adf-edit-process-filter-content-select-label-color);
+            }
+        }
+    }
 }