mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-11885] adjust task list and process list to make it stylable for hxp (#8437)
* [AAE-11885] adjust task list html and css to use material components * [AAE-11885] adjust process list and tests * [ci:force] * [AAE-11885] add variable for spacing * [ci:force]
This commit is contained in:
Kasia Biernat
GitHub
@@ -1,17 +1,29 @@
|
||||
|
||||
<ng-container *ngIf="filters$ | async as filterList; else loading">
|
||||
<div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<button (click)="onFilterClick(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.key + '_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="showIcons" [value]="filter.icon"></adf-icon>
|
||||
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<mat-nav-list class="adf-process-filters" *ngIf="filters$ | async as filterList; else loading">
|
||||
<button
|
||||
*ngFor="let filter of filterList"
|
||||
mat-list-item
|
||||
(click)="onFilterClick(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.key + '_filter'"
|
||||
[class.adf-active]="currentFilter === filter"
|
||||
>
|
||||
<div class="adf-process-filters__entry">
|
||||
<adf-icon
|
||||
data-automation-id="adf-filter-icon"
|
||||
*ngIf="showIcons"
|
||||
[value]="filter.icon">
|
||||
</adf-icon>
|
||||
<span
|
||||
data-automation-id="adf-filter-label"
|
||||
class="adf-filter-action-button__label">
|
||||
{{ filter.name | translate }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</mat-nav-list>
|
||||
<ng-template #loading>
|
||||
<ng-container>
|
||||
<div class="adf-app-list-spinner">
|
||||
|
||||
@@ -1,27 +1,23 @@
|
||||
.adf {
|
||||
&-filters__entry {
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: var(--theme-body-1-font-size) !important;
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
.adf-process-filters {
|
||||
margin-right: calc(-1 * var(--adf-theme-spacing));
|
||||
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
&__entry {
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
gap: var(--adf-theme-spacing);
|
||||
|
||||
.adf-filter-action-button .adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
|
||||
&.adf-active,
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-active {
|
||||
.adf-process-filters__entry {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
|
||||
const filters = fixture.debugElement.queryAll(By.css('.adf-process-filters__entry'));
|
||||
expect(component.filters.length).toBe(3);
|
||||
expect(filters.length).toBe(3);
|
||||
expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
|
||||
|
||||
@@ -1,29 +1,33 @@
|
||||
<ng-container *ngIf="filters$ | async as filterList; else loading">
|
||||
<div *ngFor="let filter of filterList"
|
||||
class="adf-task-filters__entry">
|
||||
<button (click)="onFilterClick(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.key + '_filter'"
|
||||
mat-button
|
||||
[class.adf-active]="currentFilter === filter"
|
||||
class="adf-filter-action-button adf-full-width"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<adf-icon data-automation-id="adf-filter-icon"
|
||||
*ngIf="showIcons"
|
||||
[value]="filter.icon"></adf-icon>
|
||||
<span data-automation-id="adf-filter-label"
|
||||
class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
|
||||
|
||||
<mat-nav-list class="adf-task-filters" *ngIf="filters$ | async as filterList; else loading">
|
||||
<button
|
||||
*ngFor="let filter of filterList"
|
||||
mat-list-item
|
||||
(click)="onFilterClick(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.key + '_filter'"
|
||||
[class.adf-active]="currentFilter === filter"
|
||||
>
|
||||
<div class="adf-task-filters__entry">
|
||||
<div class="adf-task-filters__entry-label">
|
||||
<adf-icon data-automation-id="adf-filter-icon"
|
||||
*ngIf="showIcons"
|
||||
[value]="filter.icon"
|
||||
></adf-icon>
|
||||
<span data-automation-id="adf-filter-label">
|
||||
{{ filter.name | translate }}
|
||||
</span>
|
||||
</div>
|
||||
<span *ngIf="counters$[filter.key]"
|
||||
[attr.data-automation-id]="filter.key + '_filter-counter'"
|
||||
class="adf-task-filters__entry-counter"
|
||||
[class.adf-active]="wasFilterUpdated(filter.key)">
|
||||
{{ counters$[filter.key] | async }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<span *ngIf="counters$[filter.key]"
|
||||
[attr.data-automation-id]="filter.key + '_filter-counter'"
|
||||
class="adf-filter-action-button__counter"
|
||||
[class.adf-active]=wasFilterUpdated(filter.key)>
|
||||
{{ counters$[filter.key] | async }}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</mat-nav-list>
|
||||
<ng-template #loading>
|
||||
<ng-container>
|
||||
<div class="adf-app-list-spinner">
|
||||
|
||||
@@ -1,58 +1,39 @@
|
||||
.adf {
|
||||
&-task-filters__entry {
|
||||
.adf-task-filters {
|
||||
margin-right: calc(-1 * var(--adf-theme-spacing));
|
||||
|
||||
&__entry {
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
display: flex;
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
font-size: var(--theme-body-1-font-size) !important;
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-filter-action-button {
|
||||
opacity: 0.54;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-filter-action-button__counter {
|
||||
opacity: 0.54;
|
||||
margin-left: 10px;
|
||||
margin-top: 6px;
|
||||
padding: 0 5px;
|
||||
|
||||
&.adf-active {
|
||||
margin-left: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
border-radius: 15px;
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--adf-theme-mat-grey-color-50);
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
|
||||
.adf-filter-action-button__counter,
|
||||
.adf-filter-action-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-active {
|
||||
color: var(--theme-primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__entry-label {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: var(--adf-theme-spacing);
|
||||
}
|
||||
|
||||
&__entry-counter {
|
||||
padding: 0 5px;
|
||||
border-radius: 15px;
|
||||
|
||||
&.adf-active {
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--adf-theme-mat-grey-color-50);
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-active .adf-task-filters__entry-label {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,7 +276,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const filterCounters = fixture.debugElement.queryAll(By.css('.adf-filter-action-button__counter'));
|
||||
const filterCounters = fixture.debugElement.queryAll(By.css('.adf-task-filters__entry-counter'));
|
||||
expect(component.filters.length).toBe(3);
|
||||
expect(filterCounters.length).toBe(1);
|
||||
expect(filterCounters[0].nativeElement.innerText).toContain('11');
|
||||
|
||||
Reference in New Issue
Block a user