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)
This commit is contained in:
Johannes Schill
2017-12-14 12:46:00 +01:00
committed by Torkel Ödegaard
parent 776c39fd79
commit b012131050
7 changed files with 44 additions and 27 deletions

View File

@@ -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