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)

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 gf-form--grow gf-form--has-input-icon">
-    <label class="gf-form-label">Search</label>
     <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>

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 gf-form--grow gf-form--has-input-icon">
-			<label class="gf-form-label">Search</label>
+      <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()" />
-			<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()" />
+      <i class="gf-form-input-icon fa fa-search"></i>
-		</div>
+    </label>
-		<div class="page-action-bar__spacer"></div>
+    <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

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 gf-form--grow gf-form--has-input-icon">
-      <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 username or email" />
-    </div>
+      <i class="gf-form-input-icon fa fa-search"></i>
+    </label>
 
     <div class="page-action-bar__spacer"></div>
 

public/app/features/org/partials/teams.html

@@ -2,13 +2,10 @@
 
 <div class="page-container page-body">
 	<div class="page-action-bar">
-
+    <label class="gf-form gf-form--grow gf-form--has-input-icon">
-    <div class="gf-form gf-form--grow">
+      <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()" />
-      <label class="gf-form-label">Search</label>
+      <i class="gf-form-input-icon fa fa-search"></i>
-      <input type="text" class="gf-form-input max-width-20" placeholder="Find Team by name" tabindex="1" give-focus="true"
+    </label>
-          ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
-    </div>
-
     <div class="page-action-bar__spacer"></div>
 
     <a class="btn btn-success" ng-click="ctrl.openTeamModal()">

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 gf-form--grow gf-form--has-input-icon">
-        <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" />
-        <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>
-      </div>
+			</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

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 gf-form--grow gf-form--has-input-icon">
-      <label class="gf-form-label">Search</label>
       <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">

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;