From 946afccbb5d44b507973ee3633abadad2548240d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 17 Feb 2015 18:20:47 +0100 Subject: [PATCH] Fixed dashboard search dropdown issue where it closes dashboard settings view if open, also fixed so that clicking outside dashboard search will close it, Fixes #1489 --- src/app/controllers/search.js | 8 +-- src/app/directives/dashEditLink.js | 1 - src/app/features/dashboard/all.js | 1 + .../features/dashboard/dashboardNavCtrl.js | 2 +- .../dashboard/directives/dashSearchView.js | 62 +++++++++++++++++++ src/app/features/dashboard/keybindings.js | 2 +- src/app/partials/dashboard.html | 4 +- src/app/partials/search.html | 4 +- src/css/less/bootswatch.dark.less | 4 +- src/css/less/search.less | 4 +- 10 files changed, 76 insertions(+), 16 deletions(-) create mode 100644 src/app/features/dashboard/directives/dashSearchView.js diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 6aa525b7f91..3819be3a2e7 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -2,9 +2,8 @@ define([ 'angular', 'lodash', 'config', - 'jquery' ], -function (angular, _, config, $) { +function (angular, _, config) { 'use strict'; var module = angular.module('grafana.controllers'); @@ -29,7 +28,7 @@ function (angular, _, config, $) { $scope.keyDown = function (evt) { if (evt.keyCode === 27) { - $scope.appEvent('hide-dash-editor'); + $scope.dismiss(); } if (evt.keyCode === 40) { $scope.moveSelection(1); @@ -50,9 +49,6 @@ function (angular, _, config, $) { if (selectedDash) { $location.search({}); $location.path("/dashboard/db/" + selectedDash.slug); - setTimeout(function() { - $('body').click(); // hack to force dropdown to close; - }); } } }; diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index 0933d3f96f2..1b5173671b0 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -118,5 +118,4 @@ function (angular, $) { } }; }); - }); diff --git a/src/app/features/dashboard/all.js b/src/app/features/dashboard/all.js index 8433ecc54ce..1ba0051adf3 100644 --- a/src/app/features/dashboard/all.js +++ b/src/app/features/dashboard/all.js @@ -11,4 +11,5 @@ define([ './playlistSrv', './timeSrv', './unsavedChangesSrv', + './directives/dashSearchView', ], function () {}); diff --git a/src/app/features/dashboard/dashboardNavCtrl.js b/src/app/features/dashboard/dashboardNavCtrl.js index 4955c2e5185..b256b24d6cf 100644 --- a/src/app/features/dashboard/dashboardNavCtrl.js +++ b/src/app/features/dashboard/dashboardNavCtrl.js @@ -80,7 +80,7 @@ function (angular, _, moment, config, store) { }; $scope.openSearch = function() { - $scope.appEvent('show-dash-editor', { src: 'app/partials/search.html', cssClass: 'search-container' }); + $scope.appEvent('show-dash-search'); }; $scope.saveDashboard = function() { diff --git a/src/app/features/dashboard/directives/dashSearchView.js b/src/app/features/dashboard/directives/dashSearchView.js new file mode 100644 index 00000000000..ad73b84043c --- /dev/null +++ b/src/app/features/dashboard/directives/dashSearchView.js @@ -0,0 +1,62 @@ +define([ + 'angular', + 'jquery' +], +function (angular, $) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('dashSearchView', function($compile, $timeout) { + return { + restrict: 'A', + link: function(scope, elem) { + var editorScope; + + function hookUpHideWhenClickedOutside() { + $timeout(function() { + $(document).bind('click.hide-search', function(evt) { + // some items can be inside container + // but then removed + if ($(evt.target).parents().length === 0) { + return; + } + + if ($(evt.target).parents('.search-container').length === 0) { + if (editorScope) { + editorScope.dismiss(); + } + } + }); + }); + } + + function showSearch() { + if (editorScope) { + editorScope.dismiss(); + return; + } + + editorScope = scope.$new(); + editorScope.dismiss = function() { + editorScope.$destroy(); + elem.empty(); + elem.unbind(); + editorScope = null; + $(document).unbind('click.hide-search'); + }; + + var view = $('
'); + + elem.append(view); + $compile(elem.contents())(editorScope); + + hookUpHideWhenClickedOutside(); + } + + scope.onAppEvent('show-dash-search', showSearch); + } + }; + }); + +}); diff --git a/src/app/features/dashboard/keybindings.js b/src/app/features/dashboard/keybindings.js index c0cddc5b493..15855c80bf4 100644 --- a/src/app/features/dashboard/keybindings.js +++ b/src/app/features/dashboard/keybindings.js @@ -40,7 +40,7 @@ function(angular, $) { }, { inputDisabled: true }); keyboardManager.bind('ctrl+f', function() { - scope.appEvent('show-dash-editor', { src: 'app/partials/search.html', cssClass: 'search-container' }); + scope.appEvent('show-dash-search'); }, { inputDisabled: true }); keyboardManager.bind('ctrl+o', function() { diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index b4c0c517968..b599f1e211d 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -8,8 +8,8 @@
-
-
+
+
diff --git a/src/app/partials/search.html b/src/app/partials/search.html index a595c2309f0..61c06229b04 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -7,11 +7,11 @@
- + starred | - + tags diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index fcdb05fef4d..28c48cb1cb5 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -26,11 +26,11 @@ blockquote { // ----------------------------------------------------- html { - min-height: 100%; + height: 100%; } body { - min-height: 100%; + height: 100%; //#gradient > .vertical (@bodyBackground, #252A30); //background: @bodyBackground; background: @bodyBackground; diff --git a/src/css/less/search.less b/src/css/less/search.less index a944b57caee..4798aadabda 100644 --- a/src/css/less/search.less +++ b/src/css/less/search.less @@ -1,4 +1,4 @@ -.gf-box.search-container { +.search-container { left: 52px; top: 33px; margin: 15px; @@ -7,6 +7,8 @@ width: 700px; box-shadow: 0px 0px 55px 0px black; padding: 10px; + background-color: @grafanaPanelBackground; + border: 1px solid @grafanaTargetFuncBackground; .label-tag { margin-left: 6px;