From abb8cd140568e859b171d58348740727d52e8a75 Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Fri, 7 Jul 2017 18:04:32 -0400
Subject: [PATCH] Fix flickering on mouseenter

---
 .../client/lib/components/popover/_index.less |  2 +-
 .../components/popover/popover.directive.js   | 30 ++++++++++++++++---
 .../components/popover/popover.partial.html   |  2 +-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/awx/ui/client/lib/components/popover/_index.less b/awx/ui/client/lib/components/popover/_index.less
index 7938fc77ea..3dd40de39a 100644
--- a/awx/ui/client/lib/components/popover/_index.less
+++ b/awx/ui/client/lib/components/popover/_index.less
@@ -10,7 +10,7 @@
     .at-mixin-ButtonIcon();  
     color: @at-color-icon-popover;
     font-size: @at-font-size-icon;
-    padding: 0;
+    padding: 1px;
     margin: 0;
 }
 
diff --git a/awx/ui/client/lib/components/popover/popover.directive.js b/awx/ui/client/lib/components/popover/popover.directive.js
index 2087940ba4..1e882b06af 100644
--- a/awx/ui/client/lib/components/popover/popover.directive.js
+++ b/awx/ui/client/lib/components/popover/popover.directive.js
@@ -5,6 +5,7 @@ const DEFAULT_ALIGNMENT = 'inline';
 const DEFAULT_ARROW_HEIGHT = 16;
 const DEFAULT_PADDING = 10;
 const DEFAULT_REFRESH_DELAY = 50;
+const DEFAULT_RESET_ON_EXIT = false;
 
 function atPopoverLink (scope, el, attr, controllers) {
     let popoverController = controllers[0];
@@ -39,6 +40,12 @@ function AtPopoverController () {
         scope.popover.position = scope.popover.position || DEFAULT_POSITION;
         scope.popover.icon = scope.popover.icon || DEFAULT_ICON;
         scope.popover.on = scope.popover.on || DEFAULT_ACTION;
+        scope.popover.resetOnExit = scope.popover.resetOnExit || DEFAULT_RESET_CONTENT;
+
+        if (scope.popover.resetOnExit) {
+            scope.originalText = scope.popover.text;
+            scope.originalTitle = scope.popover.title;
+        }
 
         icon.addEventListener(scope.popover.on, vm.createDisplayListener());
 
@@ -59,12 +66,22 @@ function AtPopoverController () {
 
             vm.dismiss();
 
-            window.removeEventListener(scope.popover.on, vm.dismissListener);
+            if (scope.popover.on === 'mouseenter') {
+                icon.removeEventListener('mouseleave', vm.dismissListener);
+            } else {
+                window.addEventListener(scope.popover.on, vm.dismissListener);
+            }
+
             window.removeEventListener('resize', vm.dismissListener);
         };
     };
 
-    vm.dismiss = () => {
+    vm.dismiss = (refresh) => {
+        if (refresh && scope.popover.resetOnExit) {
+            scope.popover.text = scope.originalText;
+            scope.popover.title = scope.originalTitle;
+        }
+
         vm.open = false;
 
         popover.style.visibility = 'hidden';
@@ -96,7 +113,12 @@ function AtPopoverController () {
 
             vm.dismissListener = vm.createDismissListener(event);
 
-            window.addEventListener(scope.popover.on, vm.dismissListener);
+            if (scope.popover.on === 'mouseenter') {
+                icon.addEventListener('mouseleave', vm.dismissListener);
+            } else {
+                window.addEventListener(scope.popover.on, vm.dismissListener);
+            }
+
             window.addEventListener('resize', vm.dismissListener);
         };
     };
@@ -106,7 +128,7 @@ function AtPopoverController () {
             return;
         }
 
-        vm.dismiss();
+        vm.dismiss(true);
         window.setTimeout(vm.display, DEFAULT_REFRESH_DELAY);
     };
 
diff --git a/awx/ui/client/lib/components/popover/popover.partial.html b/awx/ui/client/lib/components/popover/popover.partial.html
index b9eaee6f22..0aa71a84ff 100644
--- a/awx/ui/client/lib/components/popover/popover.partial.html
+++ b/awx/ui/client/lib/components/popover/popover.partial.html
@@ -1,6 +1,6 @@
 <div ng-show="popover.text" class="at-Popover" ng-class="{ 'at-Popover--inline': popover.inline }">
     <span class="at-Popover-icon"
-          ng-class="{'at-Popover-icon--defaultCursor': popover.on === 'mouseover'}">
+          ng-class="{ 'at-Popover-icon--defaultCursor': popover.on === 'mouseenter' && !popover.click }">
         <i class="fa {{ popover.icon }}"></i>
     </span>
     <div class="at-Popover-container">