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 index d3ebc87207..de48af077a 100644 --- 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,18 +5,20 @@ [title]="'SEARCH.BUTTON.TOOLTIP' | translate"> search - + - {{ 'SEARCH.INPUT.PLACEHOLDER' | translate }} + (keyup.enter)="searchSubmit($event)" + [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"> +
- arrow_drop_down + clear + arrow_drop_down
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 index b579e498c4..e261e3cc48 100644 --- 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; @@ -48,4 +48,9 @@ $top-margin: 12px; font-size: 24px; cursor: pointer; } + + .app-clear-icon { + font-size: 18px; + margin: 3px; + } } diff --git a/src/app/components/search/search-input/search-input.component.html b/src/app/components/search/search-input/search-input.component.html index b2a02add5d..c6dddd8629 100644 --- a/src/app/components/search/search-input/search-input.component.html +++ b/src/app/components/search/search-input/search-input.component.html @@ -1,16 +1,17 @@ -
+
- + - {{ 'SEARCH.INPUT.PLACEHOLDER' | translate }} + [value]="searchedWord" + [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
arrow_drop_down 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 index 766c58e147..7ef56c842e 100644 --- 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 { diff --git a/src/app/components/search/search-input/search-input.component.ts b/src/app/components/search/search-input/search-input.component.ts index ca480b03ce..dff74818f4 100644 --- a/src/app/components/search/search-input/search-input.component.ts +++ b/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 { diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index f624bdc0fd..a211c99884 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -390,7 +390,7 @@ "SEARCH": { "INPUT": { - "PLACEHOLDER": "Search everywhere", + "PLACEHOLDER": "Search", "FILES": "Files", "FOLDERS": "Folders", "LIBRARIES": "Libraries",