From b012131050b7cb9ace01148d0fb8f26639503afd Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes80@polyester.se>
Date: Thu, 14 Dec 2017 12:46:00 +0100
Subject: [PATCH] Magnifying glass on search fields #10188 (#10206)

* ux: Add magnifying glass icon to search input and remove the text label (#10188)

* ux: Add new look on search field to manage dashboards, users, teams, data sources, plugins. Change to use our own icon class instead of .fa (#10188)

* ux: Add new search look on org/users (#10188)
---
 .../manage_dashboards/manage_dashboards.html  |  6 ++---
 public/app/features/admin/partials/users.html | 10 ++++-----
 .../app/features/org/partials/orgUsers.html   |  6 ++---
 public/app/features/org/partials/teams.html   | 11 ++++------
 .../features/plugins/partials/ds_list.html    | 10 ++++-----
 .../plugins/partials/plugin_list.html         |  6 ++---
 public/sass/components/_gf-form.scss          | 22 +++++++++++++++++++
 7 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html
index a4def0dc55e..1345a62e97d 100644
--- a/public/app/core/components/manage_dashboards/manage_dashboards.html
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.html
@@ -1,8 +1,8 @@
 <div class="page-action-bar" ng-hide="!ctrl.hasFilters && ctrl.sections.length === 0">
-  <div class="gf-form gf-form--grow">
-    <label class="gf-form-label">Search</label>
+  <label class="gf-form gf-form--grow gf-form--has-input-icon">
     <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
-  </div>
+    <i class="gf-form-input-icon fa fa-search"></i>
+  </label>
   <div class="page-action-bar__spacer"></div>
   <a class="btn btn-success" href="/dashboard/new?folderId={{ctrl.folderId}}">
     <i class="fa fa-plus"></i>
diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html
index e98299eac64..15a38f73c13 100644
--- a/public/app/features/admin/partials/users.html
+++ b/public/app/features/admin/partials/users.html
@@ -2,11 +2,11 @@
 
 <div class="page-container page-body">
 	<div class="page-action-bar">
-		<div class="gf-form">
-			<label class="gf-form-label">Search</label>
-			<input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
-		</div>
-		<div class="page-action-bar__spacer"></div>
+    <label class="gf-form gf-form--grow gf-form--has-input-icon">
+      <input type="text" class="gf-form-input max-width-30" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
+      <i class="gf-form-input-icon fa fa-search"></i>
+    </label>
+    <div class="page-action-bar__spacer"></div>
     <a class="btn btn-success" href="admin/users/create">
       <i class="fa fa-plus"></i>
       Add new user
diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html
index 42d27706f96..4531f99e4e4 100644
--- a/public/app/features/org/partials/orgUsers.html
+++ b/public/app/features/org/partials/orgUsers.html
@@ -2,10 +2,10 @@
 
 <div class="page-container page-body">
   <div class="page-action-bar">
-    <div class="gf-form">
-      <label class="gf-form-label">Search</label>
+    <label class="gf-form gf-form--grow gf-form--has-input-icon">
       <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" give-focus="true" placeholder="Filter by username or email" />
-    </div>
+      <i class="gf-form-input-icon fa fa-search"></i>
+    </label>
 
     <div class="page-action-bar__spacer"></div>
 
diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html
index 67d24b1f94b..a7cef1a2128 100644
--- a/public/app/features/org/partials/teams.html
+++ b/public/app/features/org/partials/teams.html
@@ -2,13 +2,10 @@
 
 <div class="page-container page-body">
 	<div class="page-action-bar">
-
-    <div class="gf-form gf-form--grow">
-      <label class="gf-form-label">Search</label>
-      <input type="text" class="gf-form-input max-width-20" placeholder="Find Team by name" tabindex="1" give-focus="true"
-          ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
-    </div>
-
+    <label class="gf-form gf-form--grow gf-form--has-input-icon">
+      <input type="text" class="gf-form-input max-width-20" placeholder="Find Team by name" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
+      <i class="gf-form-input-icon fa fa-search"></i>
+    </label>
     <div class="page-action-bar__spacer"></div>
 
     <a class="btn btn-success" ng-click="ctrl.openTeamModal()">
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html
index 401eb4eac6c..936ecbc6e64 100644
--- a/public/app/features/plugins/partials/ds_list.html
+++ b/public/app/features/plugins/partials/ds_list.html
@@ -3,13 +3,11 @@
 <div class="page-container page-body">
 	<div ng-if="ctrl.unfiltered.length">
 		<div class="page-action-bar">
-      <div class="gf-form">
-        <label class="gf-form-label">Search</label>
-        <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" give-focus="true" placeholder="Filter by name or type" />
-      </div>
-
+			<label class="gf-form gf-form--grow gf-form--has-input-icon">
+				<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" give-focus="true" placeholder="Filter by name or type" />
+				<i class="gf-form-input-icon fa fa-search"></i>
+			</label>
 			<div class="page-action-bar__spacer"></div>
-
 			<a class="page-header__cta btn btn-success" href="datasources/new">
 				<i class="fa fa-plus"></i>
 				Add data source
diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html
index e4550171220..ec4d7fd2bae 100644
--- a/public/app/features/plugins/partials/plugin_list.html
+++ b/public/app/features/plugins/partials/plugin_list.html
@@ -2,10 +2,10 @@
 
 <div class="page-container page-body">
   <div class="page-action-bar">
-    <div class="gf-form">
-      <label class="gf-form-label">Search</label>
+    <label class="gf-form gf-form--grow gf-form--has-input-icon">
       <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by name or type" />
-    </div>
+      <i class="gf-form-input-icon fa fa-search"></i>
+    </label>
 
     <div class="page-action-bar__spacer"></div>
     <a class="btn btn-success" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 0571df226cb..7e134cddfa5 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -1,6 +1,7 @@
 $gf-form-margin: 3px;
 $input-border: 1px solid $input-border-color;
 
+
 .gf-form {
   margin-bottom: $gf-form-margin;
   display: flex;
@@ -31,6 +32,27 @@ $input-border: 1px solid $input-border-color;
   }
 }
 
+.gf-form--has-input-icon {
+  position: relative;
+
+  .gf-form-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -9px;
+    font-size: $font-size-lg;
+    left: 10px;
+    color: $input-color-placeholder;
+  }
+
+  > input {
+    padding-left: 30px;
+
+    &:focus + .gf-form-input-icon {
+      color: $gray-4;
+    }
+  }
+}
+
 .gf-form-disabled {
   color: $text-color-weak;