Add popover component prep files

awx/ui/client/components/_index.less

@@ -1,5 +1,6 @@
 @import 'badge/_index';
 @import 'input/_index';
 @import 'panel/_index';
+@import 'popover/_index';
 @import 'toggle/_index';
 

awx/ui/client/components/index.js

@@ -1,11 +1,13 @@
 import badge from './badge/badge.directive';
 import form from './form/form.directive';
+import inputLabel from './input/label.directive';
 import inputSearch from './input/search.directive';
 import inputSelect from './input/select.directive';
 import inputText from './input/text.directive';
 import panel from './panel/panel.directive';
 import panelHeading from './panel/heading.directive';
 import panelBody from './panel/body.directive';
+import popover from './popover/popover.directive';
 import toggleButton from './toggle/button.directive';
 import toggleContent from './toggle/content.directive';
 
@@ -13,12 +15,14 @@ angular
     .module('at.components', [])
     .directive('atBadge', badge)
     .directive('atForm', form)
+    .directive('atInputLabel', inputLabel)
     .directive('atInputSearch', inputSearch)
     .directive('atInputSelect', inputSelect)
     .directive('atInputText', inputText)
     .directive('atPanel', panel)
     .directive('atPanelHeading', panelHeading)
     .directive('atPanelBody', panelBody)
+    .directive('atPopover', popover)
     .directive('atToggleButton', toggleButton)
     .directive('atToggleContent', toggleContent);
 

awx/ui/client/components/input/_index.less

@@ -1,5 +1,5 @@
 .at-Input {
-    .at-placeholder(@at-gray-dark);
+    .at-Placeholder(@at-gray-dark);
 
     background: @at-white;
     border-radius: @at-border-radius-md;
@@ -14,20 +14,6 @@
     }
 }
 
-.at-Input-label {
-    color: @at-gray-dark;
-    font-size: small;
-    font-weight: @at-font-weight-sm;
-    text-transform: uppercase;
-}
-
-.at-Input-label--required {
-    color: @at-danger;
-    font-weight: @at-font-weight-lg;
-    font-size: @at-font-lg;
-    line-height: 0.7;
-}
-
 .at-Input--placeholder {
     color: @at-gray;
 }
@@ -36,6 +22,21 @@
     border-color: @at-link;
 }
 
+.at-InputLabel {
+    color: @at-gray-dark;
+    font-size: @at-font-sm;
+    font-weight: @at-font-weight-sm;
+    text-transform: uppercase;
+}
+
+.at-InputLabel-required {
+    color: @at-danger;
+    font-weight: @at-font-weight-lg;
+    font-size: @at-font-lg;
+    line-height: @at-font-xs;
+    margin: @at-margin-xs @at-margin-xs 0 0;
+}
+
 .at-InputGroup {
     position: relative;
     width: 100%;
@@ -49,18 +50,18 @@
     }
 }
 
-.at-Select {
+.at-InputSelect {
     height: @at-input-height-md;
     position: relative;
 }
 
-.at-Select-input {
+.at-InputSelect-input {
     position: relative;
     z-index: 2;
     pointer-events: none;
 }
 
-.at-Select-select {
+.at-InputSelect-select {
     position: absolute;
     z-index: 1;
     top: 0;

awx/ui/client/components/input/label.directive.js

@@ -0,0 +1,15 @@
+function atInputLabel (pathService) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        templateUrl: pathService.getPartialPath('components/input/label'),
+        scope: {
+            config: '='
+        }
+    };
+}
+
+atInputLabel.$inject = ['PathService'];
+
+export default atInputLabel;

awx/ui/client/components/input/label.partial.html

@@ -0,0 +1,5 @@
+<label class="at-InputLabel at-u-flat">
+    <span ng-if="config.required" class="pull-left at-InputLabel-required">*</span>
+    <span class="pull-left">{{ config.text }}</span>
+    <at-popover class="pull-left" config="config.popover"></at-popover>
+</label>

awx/ui/client/components/input/select.partial.html

@@ -1,15 +1,12 @@
 <div class="col-sm-{{ col }}">
     <div class="form-group at-u-flat">
-        <label class="at-Input-label">
+        <at-input-label config="config.label"></at-input-label>
-            <span ng-if="config.required" class="at-Input-label--required">*</span>
+        <div class="at-InputGroup at-InputSelect">
-            <span>{{ config.label }}</span>
+            <input type="text" class="form-control at-Input at-InputSelect-input"
-        </label>
-        <div class="at-InputGroup at-Select">
-            <input type="text" class="form-control at-Input at-Select-input"
                    ng-attr-autofocus="{{ meta.autofocus || undefined }}"
                    placeholder="{{ config.placeholder | uppercase }}" ng-model="config.input" />
 
-            <select class="form-control at-Select-select" ng-model="config.input"
+            <select class="form-control at-InputSelect-select" ng-model="config.input"
                     tabindex="{{ meta.tabindex }}">
                 <optgroup ng-repeat="group in config.data" label="{{ group.category | uppercase }}">
                     <option ng-repeat="item in group.data" value="{{ item.name }}">

awx/ui/client/components/input/text.partial.html

@@ -1,9 +1,6 @@
 <div class="col-sm-{{ col }}">
     <div class="form-group at-u-flat">
-        <label class="at-Input-label">
+        <at-input-label config="config.label"></at-input-label>
-            <span ng-if="config.required" class="at-Input-label--required">*</span>
-            <span>{{ config.label | uppercase }}</span>
-        </label>
         <input type="text" class="form-control at-Input" ng-model="config.input"
                ng-attr-autofocus="{{ meta.autofocus || undefined }}" tabindex="{{ meta.tabindex }}" 
                placeholder="{{ config.placeholder }}" />

awx/ui/client/components/panel/_index.less

@@ -9,17 +9,8 @@
 }
 
 .at-Panel-dismiss {
-    line-height: 0.9;
+    .at-IconButton();
     text-align: right;
-    color: @at-gray-light;
-
-    & > i {
-        cursor: pointer;
-    }
-
-    & > i:hover {
-        color: @at-gray;
-    }
 }
 
 .at-Panel-body {

awx/ui/client/components/popover/_index.less

@@ -0,0 +1,17 @@
+.at-Popover-icon {
+    .at-IconButton();  
+    font-size: @at-font-md;
+    padding: 0 0 0 @at-padding-xxs;
+    margin: 0;
+}
+
+.at-Popover-container {
+    color: @at-white;
+    background-color: @at-gray-dark;
+    max-width: @at-popover-width;
+    height: 100%;
+    position: fixed;
+    top: 0px;
+    left: 5px;
+    z-index: 2000;
+}

awx/ui/client/components/popover/popover.directive.js

@@ -0,0 +1,33 @@
+function link (scope, el, attr) {
+    scope.show = false;
+
+    el.on('click', createPopover.bind(null, scope));
+}
+
+function createPopover (scope, event) {
+    scope.show = !scope.show;
+
+    let w = window.outerWidth;
+    let h = window.outerHeight;
+    let x = event.clientX;
+    let y = event.clientY;
+
+    console.log(event);
+}
+
+function atPopover (pathService) {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        templateUrl: pathService.getPartialPath('components/popover/popover'),
+        link,
+        scope: {
+            config: '='
+        }
+    };
+}
+
+atPopover.$inject = ['PathService'];
+
+export default atPopover;

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

@@ -0,0 +1,12 @@
+<div class="at-Popover">
+    <span ng-if="config" class="at-Popover-icon">
+        <i class="fa fa-question-circle"></i>
+    </span>
+    <div ng-show="show" class="at-Popover-container">
+        <div class="at-Popover-arrow">
+            <i class="fa fa-caret-left fa-2x"></i>
+        </div>
+        <div class="at-Popover-content">Bacon ipsum dolor amet cow shank tenderloin bresaola chicken picanha leberkas jerky shankle. Tri-tip t-bone bacon, flank jerky porchetta cow. Landjaeger ham tenderloin flank pork chop. Fatback landjaeger short ribs andouille meatloaf shank tri-tip. Flank chicken ham jerky leberkas.
+        </div>
+    </div>
+</div>

awx/ui/client/src/credentials/add-credentials.controller.js

@@ -2,12 +2,17 @@ function AddCredentialsController (credentialType) {
     let vm = this || {};
 
     vm.name = {
-        label: 'Name',
+        label: {
-        required: true
+            text: 'Name',
+            required: true,
+            popover: {}
+        }
     };
 
     vm.description = {
-        label: 'Description'
+        label: {
+            text: 'Description'
+        }
     };
 
     vm.heading = {
@@ -15,9 +20,12 @@ function AddCredentialsController (credentialType) {
     };
 
     vm.kind = {
-        label: 'Type',
+        label: {
+            text: 'Type',
+            required: true,
+            popover: {}
+        },
         placeholder: 'Select a Type',
-        required: true,
         text: 'kind',
         value: 'id',
         data: credentialType.categorizeByKind()

awx/ui/client/src/credentials/index.controller.js

@@ -1,31 +0,0 @@
-function IndexController () {
-    let vm = this;
-
-    vm.panel = {
-        heading: {
-            title: {
-                text: 'Credentials'
-            },
-            badge: {
-                text: 5
-            }
-        }
-    };
-
-    vm.key = {
-        id: 'key-group',
-        show: false,
-        button: {
-            text: 'Key'
-        },
-        content: {
-            text: 'Yadda yadda yadda'
-        }
-    };
-}
-
-IndexController.$inject = [
-
-];
-
-export default IndexController;

awx/ui/client/src/credentials/index.js

@@ -44,7 +44,7 @@ function config ($stateExtenderProvider, pathServiceProvider) {
         name: 'credentials.add',
         route: '/add',
         ncyBreadcrumb: {
-            label: N_('ADD')
+            label: N_('CREATE CREDENTIALS')
         },
         views: {
             'add@credentials': {

awx/ui/client/theme/_mixins.less

@@ -1,4 +1,17 @@
-.at-placeholder(@color) {
+.at-IconButton () {
+    line-height: 0.9;
+    color: @at-gray-light;
+
+    & > i {
+        cursor: pointer;
+    }
+
+    & > i:hover {
+        color: @at-gray;
+    }
+}
+
+.at-Placeholder (@color) {
     &:-moz-placeholder {
         color: @color;
     }
@@ -10,7 +23,7 @@
     }
 }
 
-.at-Button(@bg, @color) {
+.at-Button (@bg, @color) {
     color: @color;
     background-color: @bg;
     padding: @at-padding-xs @at-padding-md;

awx/ui/client/theme/_variables.less

@@ -11,7 +11,8 @@
 @at-success-dark: #449D44;
 @at-danger: #d9534f;
 
-@at-font-sm: 12px;
+@at-font-xs: 12px;
+@at-font-sm: 13px;
 @at-font-md: 14px;
 @at-font-lg: 16px;
 
@@ -24,9 +25,14 @@
 @at-padding-sm: 10px;
 @at-padding-md: 20px;
 
+@at-margin-xs: 4px;
 @at-margin-sm: 10px;
 @at-margin-md: 20px;
 
 @at-border-radius-md: 5px;
 
 @at-input-height-md: 34px;
+
+@at-line-height-md: 24px;
+
+@at-popover-width: 320px;