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

* [ACA-1968] clear & placeholder changes

* [ACA-1968] auto focus input

* [ACA-1968] don't float placeholder on click

src/app/components/search/search-input-control/search-input-control.component.html

@@ -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)">
+            (keyup.enter)="searchSubmit($event)"
-        <mat-placeholder class="placeholder" *ngIf="!searchTerm.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
+            [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>

src/app/components/search/search-input-control/search-input-control.component.scss

@@ -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;
+  }
 }

src/app/components/search/search-input/search-input.component.html

@@ -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">
+               [value]="searchedWord"
-        <mat-placeholder class="placeholder" *ngIf="!searchedWord.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
+               [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
 
         <div matSuffix class="app-suffix-search-icon-wrapper">
             <mat-icon>arrow_drop_down</mat-icon>

src/app/components/search/search-input/search-input.component.theme.scss

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

src/app/components/search/search-input/search-input.component.ts

@@ -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 {

src/assets/i18n/en.json

@@ -390,7 +390,7 @@
 
     "SEARCH": {
         "INPUT": {
-          "PLACEHOLDER": "Search everywhere",
+          "PLACEHOLDER": "Search",
           "FILES": "Files",
           "FOLDERS": "Folders",
           "LIBRARIES": "Libraries",