Refine popover functionality, add input secret style

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;
+}

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

awx/ui/client/lib/components/input/secret.partial.html

@@ -1,10 +1,15 @@
 <div class="col-sm-{{::col}}">
     <div class="form-group at-u-flat">
         <at-input-label state="state"></at-input-label>
-        <input type="text" class="form-control at-Input" ng-model="state.value"
+        <div class="input-group">
-               ng-attr-maxlength="{{ state.options.max_length || undefined }}"
+            <span class="input-group-btn">
-               ng-attr-tabindex="{{ tab || undefined }}"
+                <button class="btn at-ButtonHollow--white">SHOW</button>
-               ng-attr-placeholder="{{::state.placeholder || undefined }}"
+            </span>
-               ng-change="vm.check()" ng-disabled="state.disabled" />
+            <input type="{{ type }}" class="form-control at-Input" ng-model="state.value"
+                   ng-attr-maxlength="{{ state.options.max_length || undefined }}"
+                   ng-attr-tabindex="{{ tab || undefined }}"
+                   ng-attr-placeholder="{{::state.placeholder || undefined }}"
+                   ng-change="vm.check()" ng-disabled="state.disabled" />
+        </div>
     </div>
 </div>

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;
+}

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

awx/ui/client/lib/components/popover/popover.partial.html

@@ -6,6 +6,9 @@
         <div class="at-Popover-arrow">
             <i class="fa fa-caret-left fa-2x"></i>
         </div>
-        <div class="at-Popover-content">{{::state.help_text}}</div>
+        <div class="at-Popover-content">
+            <h4 class="at-Popover-title">{{::state.label}}</h4>
+            <p class="at-Popover-text">{{::state.help_text}}</p>
+        </div>
     </div>
 </div>

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

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;