From 73c9d1b7a9e475815be99edbf7238e8424ceca75 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Mon, 18 Mar 2019 08:09:02 -0400
Subject: [PATCH] remove bootstrap fade from dialog component

This was breaking the fixed positioning of help popovers for form inputs
nested within the dialog so I'm replacing it.
---
 .../client/lib/components/dialog/_index.less  | 16 ++++++++++++++++
 .../lib/components/dialog/dialog.component.js | 19 ++++++++++++-------
 .../lib/components/dialog/dialog.partial.html |  2 +-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/awx/ui/client/lib/components/dialog/_index.less b/awx/ui/client/lib/components/dialog/_index.less
index a793d65a63..60ff25c935 100644
--- a/awx/ui/client/lib/components/dialog/_index.less
+++ b/awx/ui/client/lib/components/dialog/_index.less
@@ -1,3 +1,19 @@
+.at-Dialog {
+    display: block;
+    border: none;
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.3);
+    animation-name: at-DialogFadeIn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 0.3s;
+}
+
+@keyframes at-DialogFadeIn {
+    0%   { opacity: 0; background: rgba(0, 0, 0, 0); }
+    100% { opacity: 1; background: rgba(0, 0, 0, 0.3); }
+}
+
 .at-Dialog-body {
     font-size: @at-font-size;
     padding: @at-padding-panel 0;
diff --git a/awx/ui/client/lib/components/dialog/dialog.component.js b/awx/ui/client/lib/components/dialog/dialog.component.js
index 33edcf1783..663ccb9749 100644
--- a/awx/ui/client/lib/components/dialog/dialog.component.js
+++ b/awx/ui/client/lib/components/dialog/dialog.component.js
@@ -1,15 +1,20 @@
 const templateUrl = require('~components/dialog/dialog.partial.html');
 
-const overlaySelector = '.at-Dialog';
+const overlayClass = 'at-Dialog';
 
-function DialogController ($element) {
+function DialogController () {
     const vm = this || {};
 
-    vm.$onInit = () => {
-        const [el] = $element;
-        const overlay = el.querySelector(overlaySelector);
-        overlay.style.display = 'block';
-        overlay.style.opacity = 1;
+    vm.handleClick = ({ target }) => {
+        if (!vm.onClose) {
+            return;
+        }
+
+        const targetElement = $(target);
+
+        if (targetElement.hasClass(overlayClass)) {
+            vm.onClose();
+        }
     };
 }
 
diff --git a/awx/ui/client/lib/components/dialog/dialog.partial.html b/awx/ui/client/lib/components/dialog/dialog.partial.html
index 5173207f84..639a2fed97 100644
--- a/awx/ui/client/lib/components/dialog/dialog.partial.html
+++ b/awx/ui/client/lib/components/dialog/dialog.partial.html
@@ -1,4 +1,4 @@
-<div class="modal at-Dialog fade" tabindex="-1" role="dialog">
+<div class="modal at-Dialog" ng-click="vm.handleClick($event)" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content at-Dialog-window">
             <div class="Modal-header">