inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6821] Adjust the search filter icon in document list (#11528)

Browse Source 
* [ACS-6821] Adjust the search filter icon in document list

* [ACS-6821] Sonarqube fix

* [ACS-6821] CR fix
This commit is contained in:
Michal Kinas
2026-01-16 10:54:14 +01:00
committed by GitHub
parent 4bf065561a
commit 219f52a361
6 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/assets/images/custom_filter.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 4C21 3.448 20.553 3 20 3H4C3.447 3 3 3.448 3 4V7C3 7.13 3.027 7.26 3.077 7.382C3.128 7.505 3.201 7.615 3.294 7.707L9 13.413V19.999C9 20.01 9.006 20.018 9.006 20.029C9.008 20.096 9.03 20.16 9.046 20.226C9.061 20.291 9.07 20.357 9.097 20.416C9.102 20.426 9.1 20.437 9.105 20.446C9.152 20.54 9.214 20.622 9.284 20.694C9.298 20.709 9.316 20.719 9.331 20.732C9.403 20.797 9.481 20.849 9.567 20.891C9.596 20.905 9.625 20.918 9.656 20.929C9.766 20.97 9.88 20.998 9.998 20.998H10C10.118 20.998 10.236 20.97 10.351 20.927C10.37 20.92 10.389 20.915 10.408 20.907C10.421 20.901 10.434 20.899 10.447 20.893L14.447 18.893C14.492 18.87 14.521 18.832 14.561 18.804C14.62 18.763 14.68 18.726 14.729 18.673C14.773 18.625 14.802 18.569 14.836 18.514C14.869 18.46 14.906 18.41 14.929 18.349C14.955 18.281 14.961 18.21 14.972 18.137C14.979 18.089 15 18.047 15 17.998V13.412L20.706 7.706C20.799 7.614 20.872 7.503 20.923 7.38C20.974 7.258 21 7.128 21 6.998V4.48C21 4.395 20.972 4.318 20.951 4.239C20.971 4.16 21 4.083 21 3.998V4ZM13.294 12.292C13.201 12.384 13.128 12.495 13.077 12.618C13.026 12.74 13 12.87 13 13V17.382L11 18.382V13C11 12.87 10.974 12.74 10.923 12.618C10.872 12.495 10.799 12.385 10.706 12.292L5 6.586V5H19V6.586L13.294 12.292Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

lib/content-services/src/lib/assets/images/custom_filter_filled.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 4C21 3.448 20.553 3 20 3H4C3.447 3 3 3.448 3 4V7C3 7.13 3.027 7.26 3.077 7.382C3.128 7.505 3.201 7.615 3.294 7.707L9 13.413V19.999C9 20.01 9.006 20.018 9.006 20.029C9.008 20.096 9.03 20.16 9.046 20.226C9.061 20.291 9.07 20.357 9.097 20.416C9.102 20.426 9.1 20.437 9.105 20.446C9.152 20.54 9.214 20.622 9.284 20.694C9.298 20.709 9.316 20.719 9.331 20.732C9.403 20.797 9.481 20.849 9.567 20.891C9.596 20.905 9.625 20.918 9.656 20.929C9.766 20.97 9.88 20.998 9.998 20.998H10C10.118 20.998 10.236 20.97 10.351 20.927C10.37 20.92 10.389 20.915 10.408 20.907C10.421 20.901 10.434 20.899 10.447 20.893L14.447 18.893C14.492 18.87 14.521 18.832 14.561 18.804C14.62 18.763 14.68 18.726 14.729 18.673C14.773 18.625 14.802 18.569 14.836 18.514C14.869 18.46 14.906 18.41 14.929 18.349C14.955 18.281 14.961 18.21 14.972 18.137C14.979 18.089 15 18.047 15 17.998V13.412L20.706 7.706C20.799 7.614 20.872 7.503 20.923 7.38C20.974 7.258 21 7.128 21 6.998V4.48C21 4.395 20.972 4.318 20.951 4.239C20.971 4.16 21 4.083 21 3.998V4ZM13.294 12.292C13.201 12.384 13.128 12.495 13.077 12.618C13.026 12.74 13 12.87 13 13V17.382L11 18.382V13C11 12.87 10.974 12.74 10.923 12.618C10.872 12.495 10.799 12.385 10.706 12.292L5 6.586V5H19V6.586L13.294 12.292Z" fill="currentColor"/>
<path d="M4.5 7.5V4.5H19.5V7.5L14 13V17.1906L10 19.5V13L4.5 7.5Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
+1 -4
View File
@@ -12,12 +12,9 @@
[title]="getTooltipTranslation(col?.title)"
>
<adf-icon
value="filter_list"
[value]="isActive() ? 'adf:custom_filter_filled' : 'adf:custom_filter'"
[ngClass]="{ 'adf-icon-active': isActive() || menuTrigger.menuOpen }"
class="adf-filter-icon"
matBadge="filter"
matBadgeColor="warn"
[matBadgeHidden]="!isActive()"
/>
</button>
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.spec.ts
+30 -19
View File
@@ -19,16 +19,17 @@ import { Subject } from 'rxjs';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchService } from '../../services/search.service';
import { SearchHeaderQueryBuilderService } from '../../services/search-header-query-builder.service';
import { By } from '@angular/platform-browser';
import { By, DomSanitizer } from '@angular/platform-browser';
import { SearchFilterContainerComponent } from './search-filter-container.component';
import { SearchCategory } from '../../models/search-category.interface';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatMenuHarness } from '@angular/material/menu/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
import { MatBadgeHarness } from '@angular/material/badge/testing';
import { MatInputHarness } from '@angular/material/input/testing';
import { provideRouter } from '@angular/router';
import { IconComponent, UnitTestingUtils } from '@alfresco/adf-core';
import { MatIconRegistry } from '@angular/material/icon';
const mockCategory: SearchCategory = {
id: 'queryName',
@@ -51,6 +52,9 @@ describe('SearchFilterContainerComponent', () => {
let fixture: ComponentFixture<SearchFilterContainerComponent>;
let component: SearchFilterContainerComponent;
let queryBuilder: SearchHeaderQueryBuilderService;
let unitTestingUtils: UnitTestingUtils;
let matIconRegistry: MatIconRegistry;
let sanitizer: DomSanitizer;
const searchMock: any = {
dataLoaded: new Subject()
@@ -68,6 +72,9 @@ describe('SearchFilterContainerComponent', () => {
spyOn(queryBuilder, 'getCategoryForColumn').and.returnValue(mockCategory);
fixture.detectChanges();
loader = TestbedHarnessEnvironment.loader(fixture);
unitTestingUtils = new UnitTestingUtils(fixture.debugElement, loader);
matIconRegistry = TestBed.inject(MatIconRegistry);
sanitizer = TestBed.inject(DomSanitizer);
});
afterEach(() => {
@@ -79,7 +86,7 @@ describe('SearchFilterContainerComponent', () => {
await fixture.whenStable();
fixture.detectChanges();
expect(queryBuilder.isFilterServiceActive()).toBe(true);
const element = fixture.nativeElement.querySelector('.adf-filter');
const element = unitTestingUtils.getByCSS('.adf-filter');
expect(element).not.toBeNull();
expect(element).not.toBeUndefined();
});
@@ -142,26 +149,30 @@ describe('SearchFilterContainerComponent', () => {
expect(eventRaised).toBe(true);
});
it('should hide the red dot after the filter is cleared', async () => {
const badge = await loader.getHarness(MatBadgeHarness);
expect(await badge.isHidden()).toBe(true);
const menu = await loader.getHarness(MatMenuHarness);
await menu.open();
component.widgetContainer.componentRef.instance.value = 'searchText';
const widgetContainer = fixture.debugElement.query(By.css('adf-search-widget-container'));
widgetContainer.triggerEventHandler('keypress', { key: 'Enter' });
it('should display correct icon based on active state of the filter', () => {
component.isActive = () => false;
fixture.detectChanges();
await fixture.whenStable();
expect(await badge.isHidden()).toBe(false);
await menu.open();
const inactiveIcon: IconComponent = unitTestingUtils.getByCSS('.adf-filter-icon').componentInstance;
expect(inactiveIcon.value).toBe('adf:custom_filter');
const clearButton = await menu.getHarness(MatButtonHarness.with({ selector: '#clear-filter-button' }));
await clearButton.click();
component.isActive = () => true;
fixture.detectChanges();
expect(await badge.isHidden()).toBe(true);
const activeIcon: IconComponent = unitTestingUtils.getByCSS('.adf-filter-icon').componentInstance;
expect(activeIcon.value).toBe('adf:custom_filter_filled');
});
it('should register custom icons when component is initialized', () => {
spyOn(sanitizer, 'bypassSecurityTrustResourceUrl').and.callThrough();
spyOn(matIconRegistry, 'addSvgIconInNamespace').and.callThrough();
component.ngOnInit();
expect(sanitizer.bypassSecurityTrustResourceUrl).toHaveBeenCalledWith('./assets/images/custom_filter.svg');
expect(sanitizer.bypassSecurityTrustResourceUrl).toHaveBeenCalledWith('./assets/images/custom_filter_filled.svg');
expect(matIconRegistry.addSvgIconInNamespace).toHaveBeenCalledWith('adf', 'custom_filter', jasmine.any(Object));
expect(matIconRegistry.addSvgIconInNamespace).toHaveBeenCalledWith('adf', 'custom_filter_filled', jasmine.any(Object));
});
describe('Accessibility', () => {
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts
+16 -14
View File
@@ -25,22 +25,14 @@ import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import { FilterSearch } from '../../models/filter-search.interface';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';
import { TranslatePipe } from '@ngx-translate/core';
import { MatDialogModule } from '@angular/material/dialog';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';
@Component({
selector: 'adf-search-filter-container',
imports: [
CommonModule,
MatButtonModule,
MatMenuModule,
IconComponent,
MatBadgeModule,
SearchWidgetContainerComponent,
TranslatePipe,
MatDialogModule
],
imports: [CommonModule, MatButtonModule, MatMenuModule, IconComponent, SearchWidgetContainerComponent, TranslatePipe, MatDialogModule],
templateUrl: './search-filter-container.component.html',
styleUrls: ['./search-filter-container.component.scss'],
encapsulation: ViewEncapsulation.None
@@ -69,12 +61,15 @@ export class SearchFilterContainerComponent implements OnInit {
initialValue: any;
constructor(
private searchFilterQueryBuilder: SearchHeaderQueryBuilderService,
private translationService: TranslationService,
private focusTrapFactory: ConfigurableFocusTrapFactory
private readonly searchFilterQueryBuilder: SearchHeaderQueryBuilderService,
private readonly translationService: TranslationService,
private readonly focusTrapFactory: ConfigurableFocusTrapFactory,
private readonly matIconRegistry: MatIconRegistry,
private readonly sanitizer: DomSanitizer
) {}
ngOnInit() {
this.registerFilterIcon();
this.category = this.searchFilterQueryBuilder.getCategoryForColumn(this.col.key);
this.initialValue = this.value?.[this.category?.id];
}
@@ -129,4 +124,11 @@ export class SearchFilterContainerComponent implements OnInit {
this.focusTrap.destroy();
this.focusTrap = null;
}
private registerFilterIcon(): void {
const filterIcon = this.sanitizer.bypassSecurityTrustResourceUrl('./assets/images/custom_filter.svg');
const filterIconFilled = this.sanitizer.bypassSecurityTrustResourceUrl('./assets/images/custom_filter_filled.svg');
this.matIconRegistry.addSvgIconInNamespace('adf', 'custom_filter', filterIcon);
this.matIconRegistry.addSvgIconInNamespace('adf', 'custom_filter_filled', filterIconFilled);
}
}
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
-6
View File
@@ -243,12 +243,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
&--fileSize {
min-width: $data-table-cell-min-width-file-size;
}
button {
#{ms.$mat-icon} {
margin-top: -10px;
}
}
}
.adf-datatable-cell-header.adf-expand-cell-1,