IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Magnifying glass on search fields #10188 (#10206)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/components/manage_dashboards/manage_dashboards.html
View File

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

10
public/app/features/admin/partials/users.html
View File

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

6
public/app/features/org/partials/orgUsers.html
View File

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

11
public/app/features/org/partials/teams.html
View File

@ -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()">

10
public/app/features/plugins/partials/ds_list.html
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

6
public/app/features/plugins/partials/plugin_list.html
View File

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

22
public/sass/components/_gf-form.scss
View File

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