inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-23556 Fix search text input component styles (#9895)

Browse Source
This commit is contained in:
Ehsan Rezaei 2024-07-01 17:10:39 +02:00 committed by GitHub
parent df8404e1b0
commit 54b34f513e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,13 +27,10 @@
(ngModelChange)="inputChange($event)" (ngModelChange)="inputChange($event)"
[searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null" [searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null"
(keyup.enter)="searchSubmit($event)"> (keyup.enter)="searchSubmit($event)">
<button mat-icon-button matSuffix <mat-icon *ngIf="canShowClearSearch()" matSuffix
data-automation-id="adf-clear-search-button" data-automation-id="adf-clear-search-button"
class="adf-clear-search-button" class="adf-clear-search-button"
*ngIf="canShowClearSearch()" (mousedown)="resetSearch()">clear</mat-icon>
(mousedown)="resetSearch()">
<mat-icon>clear</mat-icon>
</button>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>

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

@ -21,12 +21,9 @@
line-height: normal; line-height: normal;
} }
&-input-form-field-divider { &-clear-search-button {
#{$mat-line-ripple} { font-size: var(--theme-button-font-size);
background-color: var(--adf-theme-primary-50); cursor: pointer;
}
font-size: var(--theme-subheading-2-font-size);
} }
} }

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

@ -99,7 +99,6 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
@Input() @Input()
placeholder: string = ''; placeholder: string = '';
/** Label text to show over the input field */ /** Label text to show over the input field */
@Input() @Input()
label: string = ''; label: string = '';
@ -144,11 +143,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
animationStates: SearchAnimationDirection = { animationStates: SearchAnimationDirection = {
ltr: { ltr: {
active: { value: 'active', params: { 'margin-left': 13 } }, active: { value: 'active', params: { 'margin-left': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(82%)' } } inactive: { value: 'inactive', params: { transform: 'translateX(95%)' } }
}, },
rtl: { rtl: {
active: { value: 'active', params: { 'margin-right': 13 } }, active: { value: 'active', params: { 'margin-right': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(-82%)' } } inactive: { value: 'inactive', params: { transform: 'translateX(-95%)' } }
} }
}; };
@ -202,11 +201,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
if (this.dir === 'ltr') { if (this.dir === 'ltr') {
return this.subscriptAnimationState.value === 'inactive' return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-left': 13 } } ? { value: 'active', params: { 'margin-left': 13 } }
: { value: 'inactive', params: { transform: 'translateX(82%)' } }; : { value: 'inactive', params: { transform: 'translateX(95%)' } };
} else { } else {
return this.subscriptAnimationState.value === 'inactive' return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-right': 13 } } ? { value: 'active', params: { 'margin-right': 13 } }
: { value: 'inactive', params: { transform: 'translateX(-82%)' } }; : { value: 'inactive', params: { transform: 'translateX(-95%)' } };
} }
} }