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-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

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-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">

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);
}
&-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);
}
}
}
}