From a64604de6bdc6a39bdb478096642b2a57c63f5cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Aug 2014 16:38:04 +0200 Subject: [PATCH] UI improvements to search result list (larger click are for dashboard title link, plus UI look polish), Closes #709 --- CHANGELOG.md | 1 + src/app/controllers/dashboardNavCtrl.js | 4 +- src/app/controllers/graphiteTarget.js | 2 +- src/app/controllers/search.js | 7 +- src/app/partials/search.html | 80 +++++++++---------- .../dashboard/dashboardKeyBindings.js | 2 +- src/css/less/grafana.less | 51 +++++++++--- src/css/less/variables.dark.less | 10 ++- src/css/less/variables.light.less | 11 ++- 9 files changed, 109 insertions(+), 59 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7ffc6bebf5..793a0740e4e 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index 7fe6e03f78b..a58a2647945 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/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; } diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 6b74455f59c..935ee1aeef0 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/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("" + options.value + ""); + this.html = $sce.trustAsHtml(options.value); } else { this.html = $sce.trustAsHtml(this.value); diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index fd4e97e836d..de0ec44045a 100644 --- a/src/app/controllers/search.js +++ b/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 = { diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 651928488e2..e1c9f158e0b 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -47,50 +47,46 @@
No dashboards or metrics matching your query found
- - - - - -
- - {{tag.term}}  ({{tag.count}}) - - -
+
+
+ + + {{tag.term}}  ({{tag.count}}) + +
+
- - - - - - - +
+
+ + + + + + +
+ + share     + + + delete + +
+ +
+ + {{tag}} + +
+ +
+
- - - - - - - -
metric - {{row.id}} - -
- Add to dashboard -
-
- - - - {{tag}} - -
diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index f4e2b6f0df7..da285e48809 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/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); diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 0be54a23adc..0fc9c72bf2f 100644 --- a/src/css/less/grafana.less +++ b/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; } } +} - .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-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-tag .label-tag { - background-color: @blue; + + .search-result-link { + color: @grafanaListMainLinkColor; + .icon { + padding-right: 10px; + color: @grafanaListHighlightContrast; + } + } + + .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; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 3f4551ee4c5..3397ceed020 100644 --- a/src/css/less/variables.dark.less +++ b/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 // ------------------------- diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index a54218ebd4a..562114a9e54 100644 --- a/src/css/less/variables.light.less +++ b/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 // -------------------------