Skip to content

N
nexpie-grafana-theme
Commit a64604de by Torkel Ödegaard
Options

UI improvements to search result list (larger click are for dashboard title… 

UI improvements to search result list (larger click are for dashboard title link, plus UI look polish), Closes #709
parent 1a3dac0c
Showing with 109 additions and 59 deletions
CHANGELOG.md
......@@ -4,6 +4,7 @@
- [Issue #578](https://github.com/grafana/grafana/issues/578). Dashboard: Row option to display row title even when the row is visible
- [Issue #672](https://github.com/grafana/grafana/issues/672). Dashboard: panel fullscreen & edit state is present in url, can now link to graph in edit & fullscreen mode.
- [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger
**Fixes**
- [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13)
......
src/app/controllers/dashboardNavCtrl.js
......@@ -87,7 +87,9 @@ function (angular, _, moment, config, store) {
});
};
$scope.deleteDashboard = function(id) {
$scope.deleteDashboard = function(id, $event) {
$event.stopPropagation();
if (!confirm('Are you sure you want to delete dashboard?')) {
return;
}
......
src/app/controllers/graphiteTarget.js
......@@ -289,7 +289,7 @@ function (angular, _, config, gfunc, Parser) {
this.expandable = options.expandable;
if (options.type === 'template') {
this.html = $sce.trustAsHtml("<span style='color: #ECEC09'>" + options.value + "</span>");
this.html = $sce.trustAsHtml(options.value);
}
else {
this.html = $sce.trustAsHtml(this.value);
......
src/app/controllers/search.js
......@@ -50,7 +50,12 @@ function (angular, _, config, $) {
}
};
$scope.shareDashboard = function(title, id) {
$scope.goToDashboard = function(id) {
$location.path("/dashboard/db/" + id);
};
$scope.shareDashboard = function(title, id, $event) {
$event.stopPropagation();
var baseUrl = window.location.href.replace(window.location.hash,'');
$scope.share = {
......
src/app/partials/search.html
......@@ -47,50 +47,46 @@
<h6 ng-hide="results.dashboards.length || results.metrics.length">No dashboards or metrics matching your query found</h6>
<table class="table table-condensed table-striped" ng-if="tagsOnly">
<tr ng-repeat="tag in results.tags" ng-class="{'selected-tag': $index === selectedIndex }">
<td>
<a ng-click="filterByTag(tag.term, $event)" class="label label-tag">
{{tag.term}} &nbsp;({{tag.count}})
</a>
</td>
<td style="width:100%;padding-left: 10px;font-weight: bold;">
</td>
</tr>
</table>
<div class="search-results-container" ng-if="tagsOnly">
<div ng-repeat="tag in results.tags"
class="search-result-item pointer"
ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)">
<a class="search-result-link" >
<i class="icon icon-tag"></i>
<span class="label label-tag">{{tag.term}} &nbsp;({{tag.count}})</span>
</a>
</div>
</div>
<div class="search-results-container" ng-if="!tagsOnly">
<div class="search-result-item pointer"
bindonce ng-repeat="row in results.dashboards"
ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)">
<a class="search-result-link" href="#/dashboard/db/{{row.id}}">
<i class="icon icon-th-large"></i>
<span bo-text="row.id"></span>
</a>
<div class="search-result-actions">
<a ng-click="shareDashboard(row.id, row.id, $event)" config-modal="app/partials/dashLoaderShare.html">
<i class="icon-share"></i> share &nbsp;&nbsp;&nbsp;
</a>
<a ng-click="deleteDashboard(row.id, $event)">
<i class="icon-remove"></i> delete
</a>
</div>
<div class="search-result-tags">
<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
{{tag}}
</a>
</div>
<table class="table table-condensed table-striped" ng-if="!tagsOnly">
<tbody style="max-height: 570px; overflow: auto; display: block">
<tr bindonce ng-repeat="row in results.metrics"
class="grafana-search-metric-result"
ng-class="{'selected': $index === selectedIndex }">
<td><span class="label label-info">metric</span></td>
<td class="grafana-search-metric-name">
{{row.id}}
</td>
<td style="width:100%;">
<div class="grafana-search-metric-actions">
<a ng-click="addMetricToCurrentDashboard(row.id)"><i class="icon-plus-sign"></i> Add to dashboard</a>
</div>
</td>
</tr>
</div>
</div>
<tr bindonce
ng-repeat="row in results.dashboards"
ng-class="{'selected': $index === selectedIndex }">
<td><a ng-click="deleteDashboard(row.id)"><i class="icon-remove"></i></a></td>
<td style="width:100%">
<a href="#/dashboard/db/{{row.id}}" bo-text="row.id"></a>
</td>
<td style="white-space: nowrap; text-align: right;">
<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
{{tag}}
</a>
</td>
<td><a><i class="icon-share" ng-click="shareDashboard(row.id, row.id)" config-modal="app/partials/dashLoaderShare.html"></i></a></td>
</tr>
</tbody>
</table>
</div>
</li>
......
src/app/services/dashboard/dashboardKeyBindings.js
......@@ -18,8 +18,8 @@ function(angular, $) {
keyboardManager.unbind('ctrl+s');
keyboardManager.unbind('ctrl+r');
keyboardManager.unbind('ctrl+z');
keyboardManager.unbind('esc');
});
keyboardManager.unbind('esc');
keyboardManager.bind('ctrl+f', function(evt) {
scope.emitAppEvent('open-search', evt);
......
src/css/less/grafana.less
......@@ -35,9 +35,8 @@
// Search
.grafana-search-panel {
padding: 6px 10px;
.search-field-wrapper {
padding: 6px 10px;
input {
width: 100%;
}
......@@ -50,25 +49,55 @@
padding-right: 25px;
}
}
}
.search-results-container {
.search-result-item a {
}
.search-result-item:hover, .search-result-item.selected {
.search-result-link, .icon {
color: @grafanaListHighlight;
}
.search-result-link .label {
background-color: @blue;
}
}
.selected td, tr.selected:nth-child(odd)>td {
background: @blue;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
a {
color: white;
.search-result-link {
color: @grafanaListMainLinkColor;
.icon {
padding-right: 10px;
color: @grafanaListHighlightContrast;
}
}
.selected-tag .label-tag {
background-color: @blue;
.search-result-item:nth-child(odd) {
background-color: @grafanaListAccent;
}
.search-result-item {
padding: 6px 10px;
white-space: nowrap;
border-top: 1px solid @grafanaListBorderTop;
border-bottom: 1px solid @grafanaListBorderBottom;
}
.search-result-tags {
float: right;
}
.search-result-actions {
float: right;
padding-left: 10px;
}
}
.search-tagview-switch {
position: absolute;
top: 15px;
right: 263px;
right: 266px;
color: darken(@linkColor, 30%);
&.active {
color: @linkColor;
......
src/css/less/variables.dark.less
......@@ -57,7 +57,7 @@
// Links
// -------------------------
@linkColor: darken(@white,5%);
@linkColor: darken(@white,11%);
@linkColorHover: @white;
......@@ -93,6 +93,14 @@
@borderRadiusLarge: 4px;
@borderRadiusSmall: 2px;
// Lists
@grafanaListBackground: transparent;
@grafanaListAccent: #232323;
@grafanaListBorderTop: #3E3E3E;
@grafanaListBorderBottom: #1c1919;
@grafanaListHighlight: @blue;
@grafanaListHighlightContrast: #4F4F4F;
@grafanaListMainLinkColor: @linkColor;
// Tables
// -------------------------
......
src/css/less/variables.light.less
......@@ -20,7 +20,7 @@
// Accent colors
// -------------------------
@blue: #01A6E6;
@blue: #007FFF;
@blueDark: #75CAEB;
@green: #28B62C;
@red: #FF4136;
......@@ -97,6 +97,15 @@
@borderRadiusLarge: 4px;
@borderRadiusSmall: 2px;
// Lists
@grafanaListBackground: transparent;
@grafanaListAccent: #f9f9f9;
@grafanaListBorderTop: #eee;
@grafanaListBorderBottom: #efefef;
@grafanaListHighlight: @blue;
@grafanaListHighlightContrast: #ddd;
@grafanaListMainLinkColor: @textColor;
// Tables
// -------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment