Fixed dashboard search dropdown issue where it closes dashboard settings view if…

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

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

src/app/directives/dashEditLink.js

@@ -118,5 +118,4 @@ function (angular, $) {
         }
       };
     });
-
 });

src/app/features/dashboard/all.js

@@ -11,4 +11,5 @@ define([
   './playlistSrv',
   './timeSrv',
   './unsavedChangesSrv',
+  './directives/dashSearchView',
 ], function () {});

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() {

src/app/features/dashboard/directives/dashSearchView.js

+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 = $('<div class="search-container" ng-include="\'app/partials/search.html\'"></div>');
+
+            elem.append(view);
+            $compile(elem.contents())(editorScope);
+
+            hookUpHideWhenClickedOutside();
+          }
+
+          scope.onAppEvent('show-dash-search', showSearch);
+        }
+      };
+    });
+
+});

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() {

src/app/partials/dashboard.html

@@ -8,8 +8,8 @@
 
   <div class="clearfix"></div>
 
-	<div dash-editor-view>
-	</div>
+	<div dash-editor-view></div>
+	<div dash-search-view></div>
 
 	<div class="main-view-container">
 		<div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>

src/app/partials/search.html

@@ -7,11 +7,11 @@
 		</span>
 		<div class="search-switches">
 			<i class="fa fa-filter"></i>
-			<a class="pointer" href="javascript:void();" ng-click="showStarred()" tabindex="2">
+			<a class="pointer" href="javascript:void 0;" ng-click="showStarred()" tabindex="2">
 				<i class="fa fa-remove" ng-show="query.starred"></i>
 				starred
 			</a> |
-			<a class="pointer" href="javascript:void();" ng-click="showTags()" tabindex="3">
+			<a class="pointer" href="javascript:void 0;" ng-click="showTags()" tabindex="3">
 				<i class="fa fa-remove" ng-show="query.tagcloud"></i>
 				tags
 			</a>

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;

src/css/less/search.less

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