From 1d8003690b539d7e90ea834ba51d8221b062e8bc Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Tue, 23 Mar 2021 22:03:10 +0000
Subject: [PATCH] [new-UI | Admin]: 1. search-input.component.css: Set
 currentColor for border in classes ".bordered.focused" and #a3a3a3 in classes
 ".bordered:not(.focused)". 2. search-input.component.ts: 	a. Add class
 "focused" when "showSearch" is true. 	b. In search button add tooltip with
 value same as placeholder. 3. subscribers.component.html: Name of search
 button is (by default) "Search" and placeholder "Search subscribers".

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60706 d315682c-612b-4755-9ff5-7f18f6832af3
---
 dashboard/users/subscribers/subscribers.component.html   | 4 ++--
 sharedComponents/search-input/search-input.component.css | 5 ++++-
 sharedComponents/search-input/search-input.component.ts  | 8 +++++---
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/dashboard/users/subscribers/subscribers.component.html b/dashboard/users/subscribers/subscribers.component.html
index e1eb29de..b9ea015b 100644
--- a/dashboard/users/subscribers/subscribers.component.html
+++ b/dashboard/users/subscribers/subscribers.component.html
@@ -3,8 +3,8 @@
     <ng-content></ng-content>
     <div [class.uk-invisible]="loading"
          class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-      <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"
-           [bordered]="true" colorClass="uk-text-secondary" toggleTitle="locate subscribers"></div>
+      <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search subscribers"
+           [bordered]="true" colorClass="uk-text-secondary"></div>
       <div>
         <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle"
            [class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()">
diff --git a/sharedComponents/search-input/search-input.component.css b/sharedComponents/search-input/search-input.component.css
index 795f11ba..f673a600 100644
--- a/sharedComponents/search-input/search-input.component.css
+++ b/sharedComponents/search-input/search-input.component.css
@@ -12,9 +12,12 @@ input::placeholder {
 }
 
 @media only screen and (min-width: 960px) {
-  .bordered {
+  .bordered.focused {
     border-bottom: 1px solid currentColor !important;
   }
+  .bordered:not(.focused) {
+    border-bottom: 1px solid #a3a3a3 !important;
+  }
 }
 
 @media only screen and (max-width: 959px) {
diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts
index 7ed90262..e94dc47e 100644
--- a/sharedComponents/search-input/search-input.component.ts
+++ b/sharedComponents/search-input/search-input.component.ts
@@ -7,7 +7,7 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
   styleUrls: ['search-input.component.css'],
   template: `
     <div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">
-      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)">
+      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)" [class.focused]="showSearch">
         <form (ngSubmit)="search()">
           <input #input type="text" class="uk-width-1-1"
                  [class.uk-animation-slide-right-medium]="showSearch"
@@ -30,14 +30,16 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
         </div>
       </div>
       <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m"
-              (mousedown)="$event.preventDefault()" (click)="toggle()">
+              (mousedown)="$event.preventDefault()" (click)="toggle()" 
+              [attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">
         <span [ngClass]="colorClass" class="icon-bg">
           <icon class="uk-position-center" name="search"></icon>
         </span>
         <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
       </button>
       <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
-              (mousedown)="$event.preventDefault()" (click)="search()">
+              (mousedown)="$event.preventDefault()" (click)="search()"
+              [attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">
         <span [ngClass]="colorClass" class="icon-bg">
           <icon class="uk-position-center" name="search"></icon>
         </span>