inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-31 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-1968] Search input tunings (#817)

Browse Source 
* [ACA-1968] clear & placeholder changes

* [ACA-1968] auto focus input

* [ACA-1968] don't float placeholder on click
This commit is contained in:
Suzana Dirla
2018-11-21 18:10:53 +02:00
committed by Denys Vuika
parent 43b55102be
commit 54892e71d4
6 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/search/search-input-control/search-input-control.component.html
View File

@@ -5,18 +5,20 @@
[title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field">
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
<input matInput #searchInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[type]="inputType"
id="app-control-input"
[(ngModel)]="searchTerm"
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)">
<mat-placeholder class="placeholder" *ngIf="!searchTerm.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
(keyup.enter)="searchSubmit($event)"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>
<mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
<mat-icon *ngIf="!searchTerm.length">arrow_drop_down</mat-icon>
</div>
</mat-form-field>
</div>

13
src/app/components/search/search-input-control/search-input-control.component.scss
View File

@@ -11,6 +11,10 @@ $top-margin: 12px;
.mat-form-field-label-wrapper {
cursor: text;
}
// fixes pointer event on FF
&.searchMenuTrigger .mat-form-field-label-wrapper {
pointer-events: auto;
}
@@ -23,10 +27,6 @@ $top-margin: 12px;
}
}
.mat-focused .placeholder {
color: transparent;
}
.app-search-button.mat-icon-button {
top: -2px;
left: -8px;
@@ -48,4 +48,9 @@ $top-margin: 12px;
font-size: 24px;
cursor: pointer;
}
.app-clear-icon {
font-size: 18px;
margin: 3px;
}
}

9
src/app/components/search/search-input/search-input.component.html
View File

@@ -1,16 +1,17 @@
<div class="app-search-container" [matMenuTriggerFor]="searchOptionsMenu">
<div class="app-search-container searchMenuTrigger" [matMenuTriggerFor]="searchOptionsMenu"
(menuOpened)="onMenuOpened()">
<button mat-icon-button
class="app-search-button"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field">
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
<input matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[type]="'text'"
[disabled]="true"
[value]="searchedWord">
<mat-placeholder class="placeholder" *ngIf="!searchedWord.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
[value]="searchedWord"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>

4
src/app/components/search/search-input/search-input.component.theme.scss
View File

@@ -21,6 +21,10 @@ $top-margin: 12px;
}
}
}
.mat-focused label.mat-form-field-label {
display: none;
}
}
.app-search-options-menu {

6
src/app/components/search/search-input/search-input.component.ts
View File

@@ -143,6 +143,10 @@ export class SearchInputComponent implements OnInit, OnDestroy {
this.onDestroy$.complete();
}
onMenuOpened() {
this.searchInputControl.searchInput.nativeElement.focus();
}
/**
* Called when the user submits the search, e.g. hits enter or clicks submit
*
@@ -160,6 +164,8 @@ export class SearchInputComponent implements OnInit, OnDestroy {
onSearchChange(searchTerm: string) {
this.has400LibraryError = false;
this.searchedWord = searchTerm;
if (this.hasOneChange) {
this.hasNewChange = true;
} else {