diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index a92b8fbdbf..66822ebcd0 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/awx/ui/client/lib/components/input/_index.less
@@ -1,6 +1,7 @@
.at-Input {
.at-mixin-Placeholder(@at-gray-dark-3x);
+ height: @at-input-height;
background: @at-white;
border-radius: @at-border-radius;
color: @at-gray-dark-5x;
@@ -44,13 +45,13 @@
position: absolute;
z-index: 3;
pointer-events: none;
+ top: 9px;
right: @at-space-4x;
- top: @at-space-4x;
+ color: @at-gray-dark-4x;
}
}
.at-InputSelect {
- height: @at-input-height;
position: relative;
}
@@ -61,8 +62,15 @@
}
.at-InputSelect-select {
+ height: @at-input-height;
cursor: pointer;
position: absolute;
z-index: 1;
top: 0;
}
+
+.at-Input-button {
+ background-color: @at-white;
+ border-color: @at-gray-dark-2x;
+ color: @at-gray-dark-5x;
+}
diff --git a/awx/ui/client/lib/components/input/secret.directive.js b/awx/ui/client/lib/components/input/secret.directive.js
index 6bf95c2021..1e798c81e9 100644
--- a/awx/ui/client/lib/components/input/secret.directive.js
+++ b/awx/ui/client/lib/components/input/secret.directive.js
@@ -15,6 +15,8 @@ function AtInputSecretController (baseInputController) {
vm.init = (scope, form) => {
baseInputController.call(vm, 'input', scope, form);
+ scope.type = 'password';
+
vm.check();
};
}
diff --git a/awx/ui/client/lib/components/input/secret.partial.html b/awx/ui/client/lib/components/input/secret.partial.html
index f9441e6ecc..5d00380d6a 100644
--- a/awx/ui/client/lib/components/input/secret.partial.html
+++ b/awx/ui/client/lib/components/input/secret.partial.html
@@ -1,10 +1,15 @@
diff --git a/awx/ui/client/lib/components/popover/_index.less b/awx/ui/client/lib/components/popover/_index.less
index 4c731079f0..a96c580c0c 100644
--- a/awx/ui/client/lib/components/popover/_index.less
+++ b/awx/ui/client/lib/components/popover/_index.less
@@ -1,7 +1,13 @@
+.at-Popover {
+ margin-top: 2px;
+ padding: 0 0 0 @at-space-3x;
+ line-height: @at-line-height-short;
+}
+
.at-Popover-icon {
.at-mixin-ButtonIcon();
font-size: @at-font-size-3x;
- padding: 0 0 0 @at-space-2x;
+ padding: 0;
margin: 0;
}
@@ -29,3 +35,15 @@
padding: 0;
margin: -@at-space 0 0 0;
}
+
+.at-Popover-title {
+ .at-mixin-Heading(@at-font-size-2x);
+ color: @at-white;
+ margin-bottom: @at-space-3x;
+}
+
+.at-Popover-text {
+ margin: 0;
+ padding: 0;
+ line-height: 1;
+}
diff --git a/awx/ui/client/lib/components/popover/popover.directive.js b/awx/ui/client/lib/components/popover/popover.directive.js
index 5881a93c68..82dcf1919a 100644
--- a/awx/ui/client/lib/components/popover/popover.directive.js
+++ b/awx/ui/client/lib/components/popover/popover.directive.js
@@ -23,6 +23,10 @@ function AtPopoverController () {
return event => {
event.stopPropagation();
+ if (vm.isClickWithinPopover(event, popover)) {
+ return;
+ }
+
vm.open = false;
popover.style.visibility = 'hidden';
@@ -33,6 +37,19 @@ function AtPopoverController () {
};
};
+ vm.isClickWithinPopover = (event, popover) => {
+ let box = popover.getBoundingClientRect();
+
+ let x = event.clientX;
+ let y = event.clientY;
+
+ if ((x <= box.right && x >= box.left) && (y >= box.top && y <= box.bottom)) {
+ return true;
+ }
+
+ return false;
+ };
+
vm.createDisplayListener = () => {
return event => {
if (vm.open) {
diff --git a/awx/ui/client/lib/components/popover/popover.partial.html b/awx/ui/client/lib/components/popover/popover.partial.html
index 613a722b58..29754c14c2 100644
--- a/awx/ui/client/lib/components/popover/popover.partial.html
+++ b/awx/ui/client/lib/components/popover/popover.partial.html
@@ -6,6 +6,9 @@
- {{::state.help_text}}
+
+
{{::state.label}}
+
{{::state.help_text}}
+
diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less
index a061874bc2..1cbcd52084 100644
--- a/awx/ui/client/lib/theme/_mixins.less
+++ b/awx/ui/client/lib/theme/_mixins.less
@@ -21,6 +21,7 @@
}
.at-mixin-Button () {
+ height: @at-input-height;
padding: @at-space-2x @at-space-4x;
}
diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less
index 0fe4d6100f..90c8cbc7aa 100644
--- a/awx/ui/client/lib/theme/_variables.less
+++ b/awx/ui/client/lib/theme/_variables.less
@@ -61,6 +61,6 @@
// 4. Misc --------------------------------------------------------------------------------------
@at-border-radius: 5px;
-@at-input-height: 34px;
+@at-input-height: 30px;
@at-popover-width: 320px;
@at-inset-width: 5px;