mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-5103] FE - Process/task filter - Backporting the components styles to ADF (#5614)
* * New Filters style * * Improved css * * Fixed wrong css selector * * Fixed failing unit tests * * Fixed failing tests ests * * FIXED E2E PROCESS-SERVICE TESTS * * Fixed failing e2e * * FIxed process-service cloud e2e * * Removed xpath locator * * New Filters style * * Improved css
This commit is contained in:
siva kumar
GitHub
@@ -1,9 +1,11 @@
|
||||
<div class="menu-container">
|
||||
<mat-list class="adf-menu-list">
|
||||
<mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
|
||||
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<button (click)="selectFilter(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.name + '_filter'"
|
||||
mat-button
|
||||
class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
|
||||
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,30 +2,31 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
|
||||
&-filters__entry {
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 14px!important;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
padding-left: 30px;
|
||||
|
||||
.mat-list-item-content {
|
||||
height: 34px;
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
&.adf-active, &:hover {
|
||||
|
||||
.adf-filter-action-button .adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
&-filters__entry {
|
||||
&.adf-active,
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-filters__entry-icon {
|
||||
padding-right: 12px !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
&-menu-list {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -287,7 +287,7 @@ describe('ProcessFiltersComponent', () => {
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(filterList.filters.length).toBe(3);
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
|
||||
expect(filters.length).toBe(3);
|
||||
expect(filters[0].nativeElement.innerText).toContain('dashboard');
|
||||
expect(filters[1].nativeElement.innerText).toContain('shuffle');
|
||||
@@ -304,7 +304,7 @@ describe('ProcessFiltersComponent', () => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
|
||||
expect(filters.length).toBe(0);
|
||||
done();
|
||||
});
|
||||
|
||||
@@ -69,6 +69,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
|
||||
currentFilter: ProcessInstanceFilterRepresentation;
|
||||
|
||||
filters: UserProcessInstanceFilterRepresentation [] = [];
|
||||
active = false;
|
||||
|
||||
private iconsMDL: IconModel;
|
||||
|
||||
@@ -147,6 +148,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
|
||||
*/
|
||||
selectFilter(filter: ProcessInstanceFilterRepresentation) {
|
||||
this.currentFilter = filter;
|
||||
this.active = true;
|
||||
this.filterClick.emit(filter);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<div class="menu-container">
|
||||
<mat-list class="adf-menu-list">
|
||||
<mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filters"
|
||||
class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
|
||||
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<button (click)="selectFilterAndEmit(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.name + '_filter'"
|
||||
mat-button
|
||||
class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<ng-container *ngIf="showIcon">
|
||||
<adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
|
||||
</ng-container>
|
||||
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -2,33 +2,31 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
|
||||
&-filters__entry {
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 14px!important;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
padding-left: 30px;
|
||||
|
||||
.mat-list-item-content {
|
||||
height: 34px;
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-filter-action-button .adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-filters__entry-icon {
|
||||
padding-right: 12px !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
&-filters__entry {
|
||||
&.adf-active, &:hover {
|
||||
&.adf-active,
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu-list {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -321,7 +321,7 @@ describe('TaskFiltersComponent', () => {
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(component.filters.length).toBe(3);
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
|
||||
expect(filters.length).toBe(3);
|
||||
expect(filters[0].nativeElement.innerText).toContain('format_align_left');
|
||||
expect(filters[1].nativeElement.innerText).toContain('check_circle');
|
||||
@@ -338,7 +338,7 @@ describe('TaskFiltersComponent', () => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
|
||||
const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
|
||||
expect(filters.length).toBe(0);
|
||||
done();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user