[ACS-5171] Facets section - UI changes (#8563)

This commit is contained in:
Nikita Maliarchuk
2023-05-18 10:18:42 +02:00
committed by GitHub
parent b10a4370c1
commit c431d0c6f5
5 changed files with 14 additions and 8 deletions

View File

@@ -332,7 +332,8 @@
},
"ARIA-LABEL": {
"SEARCH_FILTER": "Search Filter List"
}
},
"ANY": "Any"
},
"ICONS": {
"ft_ic_raster_image": "Image file",

View File

@@ -11,13 +11,13 @@
#menuTrigger="matMenuTrigger">
<span class="adf-search-filter-placeholder">
<span class="adf-search-filter-ellipsis">{{ field.label | translate }}</span>
<ng-container *ngIf="facetField.displayValue$ | async">:</ng-container>
<span class="adf-search-filter-ellipsis">{{ field.label | translate }}:</span>
</span>
<span class="adf-search-filter-ellipsis" *ngIf="facetField.displayValue$ | async as displayValue">
<span class="adf-search-filter-ellipsis adf-filter-value" *ngIf="facetField.displayValue$ | async as displayValue; else showAny">
&nbsp; {{ displayValue | translate }}
</span>
<ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
<mat-icon>keyboard_arrow_down</mat-icon>
</mat-chip>

View File

@@ -42,6 +42,11 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 300;
}
.adf-filter-value {
font-weight: 500;
}
.mat-icon {

View File

@@ -249,7 +249,7 @@ describe('SearchFilterChipsComponent', () => {
expect(chips.length).toBe(2);
const titleElements = fixture.debugElement.queryAll(By.css('.adf-search-filter-placeholder'));
expect(titleElements.map(title => title.nativeElement.innerText.trim())).toEqual(['Name', 'Type']);
expect(titleElements.map(title => title.nativeElement.innerText.trim())).toEqual(['Name:', 'Type:']);
});
it('should be update the search query when name changed', async () => {

View File

@@ -10,12 +10,12 @@
[attr.title]="widget.getDisplayValue() | async"
#menuTrigger="matMenuTrigger">
<span class="adf-search-filter-placeholder">
<span class="adf-search-filter-ellipsis">{{ category.name | translate }}</span>
<ng-container *ngIf="widget.getDisplayValue() | async">:</ng-container>
<span class="adf-search-filter-ellipsis">{{ category.name | translate }}:</span>
</span>
<span class="adf-search-filter-ellipsis" *ngIf="widget.getDisplayValue() | async as displayValue">
<span class="adf-search-filter-ellipsis adf-filter-value" *ngIf="widget.getDisplayValue() | async as displayValue; else showAny">
&nbsp;{{ displayValue | translate }}
</span>
<ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
<mat-icon>keyboard_arrow_down</mat-icon>
</mat-chip>