inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-25888 Offset SearchTextInput expansion based on search icon width (#10213)

Browse Source 
* AAE-25888 use negative margin and transform by full width

* AAE-25888 update tests

* AAE-25888 add adf-search-button-inactive to manage search icon offset

* AAE-25888 remove scss variable

* AAE-25888 adjust peer unit tests
This commit is contained in:
Wojciech Duda 2024-09-19 17:31:08 +02:00 committed by GitHub
parent 1ff5e8f43c
commit 4998bddfde
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/content-services/src/lib/search/components/search-control.component.spec.ts
View File

@ -415,13 +415,13 @@ describe('SearchControlComponent', () => {
it('should have positive transform translation', () => {
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
fixture.detectChanges();
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(85%)');
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(100%)');
});
it('should have negative transform translation ', () => {
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
fixture.detectChanges();
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-85%)');
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-100%)');
});
});
});

1
lib/core/src/lib/search-text/search-text-input.component.html
View File

@ -6,6 +6,7 @@
*ngIf="expandable"
id="adf-search-button"
class="adf-search-button"
[ngClass]="{'adf-search-button-inactive': subscriptAnimationState.value === 'inactive'}"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
(click)="toggleSearchBar()"
(keyup.enter)="toggleSearchBar()">

4
lib/core/src/lib/search-text/search-text-input.component.scss
View File

@ -15,6 +15,10 @@
}
.adf {
&-search-button-inactive {
margin-left: -48px;
}
&-search-fixed-text {
line-height: normal;
}

9
lib/core/src/lib/search-text/search-text-input.component.spec.ts
View File

@ -210,7 +210,7 @@ describe('SearchTextInputComponent', () => {
userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
component.subscriptAnimationState.value = 'active';
clickSearchButton();
const expectedValue = isLtr ? 'translateX(85%)' : 'translateX(-85%)';
const expectedValue = isLtr ? 'translateX(100%)' : 'translateX(-100%)';
expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue });
discardPeriodicTasks();
}
@ -223,6 +223,13 @@ describe('SearchTextInputComponent', () => {
testTransformValue(false);
}));
it('should have an inactive class when input is collapsed', fakeAsync(() => {
component.subscriptAnimationState.value = 'inactive';
fixture.detectChanges();
expect(component.subscriptAnimationState.value).toBe('inactive');
expect(element.querySelector('.adf-search-button-inactive')).toBeTruthy();
}));
it('should set browser autocomplete to on when configured', async () => {
component.autocomplete = true;

22
lib/core/src/lib/search-text/search-text-input.component.ts
View File

@ -16,7 +16,7 @@
*/
import { Direction } from '@angular/cdk/bidi';
import { NgIf } from '@angular/common';
import { NgClass, NgIf } from '@angular/common';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
@ -38,7 +38,17 @@ import { SearchTriggerDirective } from './search-trigger.directive';
styleUrls: ['./search-text-input.component.scss'],
animations: [searchAnimation],
encapsulation: ViewEncapsulation.None,
imports: [MatButtonModule, MatIconModule, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, SearchTriggerDirective, NgIf],
imports: [
MatButtonModule,
MatIconModule,
TranslateModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
SearchTriggerDirective,
NgIf,
NgClass
],
host: {
class: 'adf-search-text-input'
}
@ -143,11 +153,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
animationStates: SearchAnimationDirection = {
ltr: {
active: { value: 'active', params: { 'margin-left': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(85%)' } }
inactive: { value: 'inactive', params: { transform: 'translateX(100%)' } }
},
rtl: {
active: { value: 'active', params: { 'margin-right': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(-85%)' } }
inactive: { value: 'inactive', params: { transform: 'translateX(-100%)' } }
}
};
@ -201,11 +211,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
if (this.dir === 'ltr') {
return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-left': 13 } }
: { value: 'inactive', params: { transform: 'translateX(85%)' } };
: { value: 'inactive', params: { transform: 'translateX(100%)' } };
} else {
return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-right': 13 } }
: { value: 'inactive', params: { transform: 'translateX(-85%)' } };
: { value: 'inactive', params: { transform: 'translateX(-100%)' } };
}
}