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;