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

Alfresco · Nov 21, 2018 · 3061bc4 · 3061bc4
1 parent 853f658
commit 3061bc4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/app/components/search/search-input-control/search-input-control.component.html b/src/app/components/search/search-input-control/search-input-control.component.html
@@ -5,15 +5,16 @@
             [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 *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>

diff --git a/src/app/components/search/search-input-control/search-input-control.component.scss b/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;

diff --git a/src/app/components/search/search-input/search-input.component.html b/src/app/components/search/search-input/search-input.component.html
@@ -1,17 +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>

diff --git a/src/app/components/search/search-input/search-input.component.theme.scss b/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 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,10 @@ $top-margin: 12px; @@
             }
           }
         }
+        .mat-focused label.mat-form-field-label {
+          display: none;
+        }
       }
       .app-search-options-menu {
@@ Expand Down @@