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-8502] missing alignment for menu and search button (#10051)

Browse Source
This commit is contained in:
dominikiwanekhyland
2024-08-08 07:45:12 +02:00
committed by GitHub
parent d38e782fe3
commit 9a7ffe5e53
5 changed files with 88 additions and 102 deletions
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(95%)');
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(85%)');
});
it('should have negative transform translation ', () => {
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
fixture.detectChanges();
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-95%)');
expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-85%)');
});
});
});

7
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

@@ -25,11 +25,16 @@
flex: 0 0;
}
/* stylelint-disable-next-line selector-class-pattern */
#{$mat-drawer-content} {
@include flex-column;
position: unset;
overflow: auto;
}
.adf-layout-container-sidenav {
#{$mat-icon} {
vertical-align: sub;
}
}
}

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

@@ -1,19 +1,17 @@
@import 'styles/mat-selectors';
.adf-search-container:has(.adf-input-form-field-divider) {
.adf-search-container {
&:has(.adf-input-form-field-divider) {
overflow: hidden;
}
.adf-search-button {
left: -13px;
#{$mat-form-field-subscript-wrapper} {
display: none;
}
[dir='rtl'] .adf-search-button {
right: -13px;
}
[dir='ltr'] .adf-search-button {
left: -13px;
.adf-search-container-transition {
display: flex;
align-items: center;
}
.adf {
@@ -30,3 +28,4 @@
.adf-highlight {
color: var(--adf-theme-primary-900);
}
}

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

@@ -65,7 +65,7 @@ describe('SearchTextInputComponent', () => {
component.expandable = false;
});
it('search button should be hide', () => {
it('search button should be hidden', () => {
fixture.detectChanges();
const searchButton: any = element.querySelector('#adf-search-button');
expect(searchButton).toBe(null);
@@ -79,12 +79,15 @@ describe('SearchTextInputComponent', () => {
});
describe('search button', () => {
it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => {
let searchButton: DebugElement;
beforeEach(fakeAsync(() => {
fixture.detectChanges();
tick(100);
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton = debugElement.query(By.css('#adf-search-button'));
}));
it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => {
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
@@ -104,11 +107,6 @@ describe('SearchTextInputComponent', () => {
}));
it('click on the search button should open the input box when is close', fakeAsync(() => {
fixture.detectChanges();
tick(100);
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton.triggerEventHandler('click', null);
tick(100);
@@ -121,11 +119,6 @@ describe('SearchTextInputComponent', () => {
}));
it('Search button should not change the input state too often', fakeAsync(() => {
fixture.detectChanges();
tick(100);
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
@@ -150,10 +143,6 @@ describe('SearchTextInputComponent', () => {
}));
it('Search bar should close when user press ESC button', fakeAsync(() => {
fixture.detectChanges();
tick(100);
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
@@ -179,66 +168,59 @@ describe('SearchTextInputComponent', () => {
fixture.detectChanges();
});
/**
* function which finds Search Button and clicks it
*/
function clickSearchButton(): void {
fixture.detectChanges();
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton.triggerEventHandler('click', null);
tick(100);
fixture.detectChanges();
tick(100);
}
/**
* Runs a test for ltr/rtl margin values
*
* @param isLtr sets ltr or rtl value to test
*/
function testMarginValue(isLtr: boolean): void {
userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
clickSearchButton();
const expectedResult = isLtr ? { 'margin-left': 13 } : { 'margin-right': 13 };
expect(component.subscriptAnimationState.params).toEqual(expectedResult);
discardPeriodicTasks();
}
it('should have margin-left set when active and direction is ltr', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
fixture.detectChanges();
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton.triggerEventHandler('click', null);
tick(100);
fixture.detectChanges();
tick(100);
expect(component.subscriptAnimationState.params).toEqual({ 'margin-left': 13 });
discardPeriodicTasks();
}));
it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton.triggerEventHandler('click', null);
tick(100);
fixture.detectChanges();
tick(100);
expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(95%)' });
discardPeriodicTasks();
testMarginValue(true);
}));
it('should have margin-right set when active and direction is rtl', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
fixture.detectChanges();
testMarginValue(false);
}));
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton.triggerEventHandler('click', null);
tick(100);
fixture.detectChanges();
tick(100);
expect(component.subscriptAnimationState.params).toEqual({ 'margin-right': 13 });
/**
* Runs a test for ltr/rtl transform values
*
* @param isLtr sets ltr or rtl value to test
*/
function testTransformValue(isLtr: boolean): void {
userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
component.subscriptAnimationState.value = 'active';
clickSearchButton();
const expectedValue = isLtr ? 'translateX(85%)' : 'translateX(-85%)';
expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue });
discardPeriodicTasks();
}
it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => {
testTransformValue(true);
}));
it('should have negative transform translateX set when inactive and direction is rtl', fakeAsync(() => {
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
searchButton.triggerEventHandler('click', null);
tick(100);
fixture.detectChanges();
tick(100);
expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(-95%)' });
discardPeriodicTasks();
testTransformValue(false);
}));
it('should set browser autocomplete to on when configured', async () => {

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

@@ -143,11 +143,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
animationStates: SearchAnimationDirection = {
ltr: {
active: { value: 'active', params: { 'margin-left': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(95%)' } }
inactive: { value: 'inactive', params: { transform: 'translateX(85%)' } }
},
rtl: {
active: { value: 'active', params: { 'margin-right': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(-95%)' } }
inactive: { value: 'inactive', params: { transform: 'translateX(-85%)' } }
}
};
@@ -201,11 +201,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(95%)' } };
: { value: 'inactive', params: { transform: 'translateX(85%)' } };
} else {
return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-right': 13 } }
: { value: 'inactive', params: { transform: 'translateX(-95%)' } };
: { value: 'inactive', params: { transform: 'translateX(-85%)' } };
}
}