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-15228] process filter component styles configurable (#8657)

Browse Source 
* Rebasing

* AAE-15228: Removed unused style
This commit is contained in:
Ehsan Rezaei
2023-06-14 10:07:50 +02:00
committed by GitHub
parent 64f9d0414d
commit caaf04b5ea
3 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,11 @@
--adf-edit-task-and-service-filter-header-height: $adf-ref-height-48, --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-height: $adf-ref-height-48,
--adf-about-panel-header-title-color: $adf-ref-title-color, --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 // propagates SCSS variables into the CSS variables scope

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

@@ -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 (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"> <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-title *ngIf="showProcessFilterName" id="adf-edit-process-filter-title-id" class="adf-edit-process-filter-header__title">
<mat-panel-description class="adf-edit-process-filter-description" id="adf-edit-process-filter-sub-title-id"> {{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> <span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
<div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions"> <div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions">
<ng-container *ngIf="toggleFilterActions"> <ng-container *ngIf="toggleFilterActions">
@@ -21,12 +22,12 @@
</ng-template> </ng-template>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-container *ngIf="!isLoading"> <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"> <div class="adf-edit-process-filter-form">
<ng-container *ngFor="let processFilterProperty of processFilterProperties"> <ng-container *ngFor="let processFilterProperty of processFilterProperties">
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key"> <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 <mat-select
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key" [formControlName]="processFilterProperty.key"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"> [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
<mat-option <mat-option
@@ -48,10 +49,10 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key"> <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 <input matInput
[formControlName]="processFilterProperty.key" [formControlName]="processFilterProperty.key"
type="text" type="text"
placeholder="{{processFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/> [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
</mat-form-field> </mat-form-field>
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key"> <mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">

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

@@ -31,10 +31,6 @@
margin-right: calc((100% - 100px) / 2); margin-right: calc((100% - 100px) / 2);
} }
&-edit-process-filter-description {
place-content: center space-between;
}
&-edit-process-filter-form { &-edit-process-filter-form {
flex-flow: row wrap; flex-flow: row wrap;
display: flex; 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);
}
}
}
} }