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

[ACS-5347] New styles for facets and filters states (#8661)

Browse Source 
* [ACS-5347] New styles for facets and filters states

* [ACS-5347] Move ACA specific colors to ACA

* [ACS-5347] CR fixes
This commit is contained in:
MichalKinas
2023-06-14 13:37:43 +02:00
committed by GitHub
parent 0a3cc5634e
commit afbf87788f
9 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
View File

@@ -19,7 +19,7 @@
  {{ 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 *ngIf="isPopulated(); else disabledIcon">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="isPopulated(); else disabledIcon">{{ chipIcon }}</mat-icon>
<ng-template #disabledIcon>
<mat-icon>remove</mat-icon>
</ng-template>
@@ -38,8 +38,8 @@
<adf-search-facet-field [field]="field" #facetField></adf-search-facet-field>
</ng-container>
<ng-container ngProjectAs="filter-actions">
<button mat-flat-button class="adf-search-action-button" color="accent" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.REMOVE' | translate }}
<button mat-button class="adf-search-action-button" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR' | translate }}
</button>
<button mat-flat-button class="adf-search-action-button" color="primary" (click)="onApply()" id="apply-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.APPLY' | translate }}

8
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts
View File

@@ -73,6 +73,14 @@ describe('SearchFacetChipComponent', () => {
expect(icon).toEqual('keyboard_arrow_down');
});
it('should display arrow up icon when menu is opened', () => {
component.field.buckets.items = [{ count: 1, label: 'test', filterQuery: '' }];
component.onMenuOpen();
fixture.detectChanges();
const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
expect(icon).toEqual('keyboard_arrow_up');
});
it('should display remove icon and disable facet when no items are loaded', () => {
const chip = fixture.debugElement.query(By.css('mat-chip'));
const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;

3
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts
View File

@@ -41,6 +41,7 @@ export class SearchFacetChipComponent {
facetFieldComponent: SearchFacetFieldComponent;
focusTrap: ConfigurableFocusTrap;
chipIcon = 'keyboard_arrow_down';
constructor(private focusTrapFactory: ConfigurableFocusTrapFactory) {}
@@ -48,11 +49,13 @@ export class SearchFacetChipComponent {
if (this.menuContainer && !this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement);
}
this.chipIcon = 'keyboard_arrow_up';
}
onClosed() {
this.focusTrap.destroy();
this.focusTrap = null;
this.chipIcon = 'keyboard_arrow_down';
}
onRemove() {

2
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

@@ -25,7 +25,7 @@
&.adf-search-toggle-chip {
background: var(--adf-theme-background-card-color);
border: 2px solid var(--theme-accent-color);
border: 2px solid var(--theme-primary-color);
&.mat-chip::after {
background: unset;

6
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
View File

@@ -16,7 +16,7 @@
&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-icon>{{ chipIcon }}</mat-icon>
</mat-chip>
<mat-menu #menu="matMenu" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">
@@ -39,8 +39,8 @@
</ng-container>
<ng-container ngProjectAs="filter-actions">
<button mat-flat-button class="adf-search-action-button" color="accent" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.REMOVE' | translate }}
<button mat-button class="adf-search-action-button" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR' | translate }}
</button>
<button mat-flat-button class="adf-search-action-button" color="primary" (click)="onApply()" id="apply-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.APPLY' | translate }}

36
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.spec.ts
View File

@@ -30,13 +30,13 @@ describe('SearchWidgetChipComponent', () => {
let fixture: ComponentFixture<SearchWidgetChipComponent>;
let queryBuilder: SearchQueryBuilderService;
setupTestBed( {
imports: [
MatMenuModule,
TranslateModule.forRoot(),
ContentTestingModule
]
});
setupTestBed({
imports: [
MatMenuModule,
TranslateModule.forRoot(),
ContentTestingModule
]
});
beforeEach(() => {
queryBuilder = TestBed.inject(SearchQueryBuilderService);
@@ -46,23 +46,35 @@ describe('SearchWidgetChipComponent', () => {
component.category = simpleCategories[1];
fixture.detectChanges();
});
});
it('should update search query on apply click', () => {
it('should update search query on apply click', () => {
const chip = fixture.debugElement.query(By.css('mat-chip'));
chip.triggerEventHandler('click', { stopPropagation: () => null });
fixture.detectChanges();
const applyButton = fixture.debugElement.query(By.css('#apply-filter-button'));
applyButton.triggerEventHandler('click', {});
expect(queryBuilder.update).toHaveBeenCalled();
});
});
it('should update search query on cancel click', () => {
it('should update search query on cancel click', () => {
const chip = fixture.debugElement.query(By.css('mat-chip'));
chip.triggerEventHandler('click', { stopPropagation: () => null });
fixture.detectChanges();
const applyButton = fixture.debugElement.query(By.css('#cancel-filter-button'));
applyButton.triggerEventHandler('click', {});
expect(queryBuilder.update).toHaveBeenCalled();
});
});
it('should display arrow down icon', () => {
const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
expect(icon).toEqual('keyboard_arrow_down');
});
it('should display arrow up icon when menu is opened', () => {
component.onMenuOpen();
fixture.detectChanges();
const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
expect(icon).toEqual('keyboard_arrow_up');
});
});

3
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
View File

@@ -41,6 +41,7 @@ export class SearchWidgetChipComponent {
widgetContainerComponent: SearchWidgetContainerComponent;
focusTrap: ConfigurableFocusTrap;
chipIcon = 'keyboard_arrow_down';
constructor(private focusTrapFactory: ConfigurableFocusTrapFactory) {}
@@ -48,11 +49,13 @@ export class SearchWidgetChipComponent {
if (this.menuContainer && !this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement);
}
this.chipIcon = 'keyboard_arrow_up';
}
onClosed() {
this.focusTrap.destroy();
this.focusTrap = null;
this.chipIcon = 'keyboard_arrow_down';
}
onRemove() {

9
lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
View File

@@ -14,13 +14,4 @@
[onReset]="resetObservable"
(phrasesChanged)="onPhraseChange($event, LogicalSearchFields.EXCLUDE)">
</adf-search-chip-input>
<div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">
<button mat-button color="primary" data-automation-id="logical-filter-btn-clear" (click)="reset()">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>
<button mat-button color="primary" data-automation-id="logical-filter-btn-apply" (click)="submitValues()">
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
</button>
</div>
</div>

19
lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts
View File

@@ -64,12 +64,6 @@ describe('SearchLogicalFilterComponent', () => {
fixture.detectChanges();
}
function clickApplyBtn() {
const applyBtn: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="logical-filter-btn-apply"]')).nativeElement;
applyBtn.click();
fixture.detectChanges();
}
it('should update display value on init', () => {
spyOn(component.displayValue$, 'next');
component.ngOnInit();
@@ -122,14 +116,13 @@ describe('SearchLogicalFilterComponent', () => {
expect(component.displayValue$.next).toHaveBeenCalled();
});
it('should reset value and display value when reset button is clicked', () => {
it('should reset value and display value when reset is called', () => {
const searchCondition: LogicalSearchCondition = { matchAll: ['test1'], matchAny: ['test2'], exclude: ['test3'] };
component.setValue(searchCondition);
fixture.detectChanges();
spyOn(component.context, 'update');
spyOn(component.displayValue$, 'next');
const resetBtn: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="logical-filter-btn-clear"]')).nativeElement;
resetBtn.click();
component.reset();
expect(component.context.queryFragments[component.id]).toBe('');
expect(component.context.update).toHaveBeenCalled();
expect(component.getCurrentValue()).toEqual({ matchAll: [], matchAny: [], exclude: [] });
@@ -140,7 +133,7 @@ describe('SearchLogicalFilterComponent', () => {
spyOn(component.context, 'update');
enterNewPhrase('test1', 0);
enterNewPhrase('test2', 0);
clickApplyBtn();
component.submitValues();
expect(component.context.update).toHaveBeenCalled();
expect(component.context.queryFragments[component.id]).toBe('((field1:"test1" AND field1:"test2") OR (field2:"test1" AND field2:"test2"))');
});
@@ -149,7 +142,7 @@ describe('SearchLogicalFilterComponent', () => {
spyOn(component.context, 'update');
enterNewPhrase('test3', 1);
enterNewPhrase('test4', 1);
clickApplyBtn();
component.submitValues();
expect(component.context.update).toHaveBeenCalled();
expect(component.context.queryFragments[component.id]).toBe('((field1:"test3" OR field1:"test4") OR (field2:"test3" OR field2:"test4"))');
});
@@ -158,7 +151,7 @@ describe('SearchLogicalFilterComponent', () => {
spyOn(component.context, 'update');
enterNewPhrase('test5', 2);
enterNewPhrase('test6', 2);
clickApplyBtn();
component.submitValues();
expect(component.context.update).toHaveBeenCalled();
expect(component.context.queryFragments[component.id]).toBe('((NOT field1:"test5" AND NOT field1:"test6") AND (NOT field2:"test5" AND NOT field2:"test6"))');
});
@@ -168,7 +161,7 @@ describe('SearchLogicalFilterComponent', () => {
enterNewPhrase('test1', 0);
enterNewPhrase('test2', 1);
enterNewPhrase('test3', 2);
clickApplyBtn();
component.submitValues();
const subQuery1 = '((field1:"test1") OR (field2:"test1"))';
const subQuery2 = '((field1:"test2") OR (field2:"test2"))';
const subQuery3 = '((NOT field1:"test3") AND (NOT field2:"test3"))';