Add partial implementation of tabs and tab groups

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

@@ -1,4 +1,4 @@
-function AddCredentialsController (models) {
+function AddCredentialsController (models, $state) {
     let vm = this || {};
 
     let credential = models.credential;
@@ -25,7 +25,8 @@ function AddCredentialsController (models) {
 }
 
 AddCredentialsController.$inject = [
-    'resolvedModels'
+    'resolvedModels',
+    '$state'
 ];
 
 export default AddCredentialsController;

awx/ui/client/features/credentials/add-credentials.view.html

@@ -1,10 +1,11 @@
 <at-panel>
     <at-panel-heading>New Credential</at-panel-heading>
 
-    <at-tab-navigation>
-        <at-tab></at-tab>
-        <at-tab></at-tab>
-    </at-tab-navigation>
+    <at-tab-group>
+        <at-tab to="details">Details</at-tab>
+        <at-tab to="permissions">Permissions</at-tab>
+        <at-tab to="notifications">Notifications</at-tab>
+    </at-tab-group>
 
     <at-panel-body>
         <at-form state="vm.form">

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

@@ -2,3 +2,4 @@
 @import 'input/_index';
 @import 'panel/_index';
 @import 'popover/_index';
+@import 'tabs/_index';

awx/ui/client/lib/components/form/form.directive.js

@@ -64,14 +64,14 @@ function AtFormController (eventService) {
                 }
 
                 if (component.state._key && typeof component.state._value === 'object') {
-                    values[component.state._id] = component.state._value[component.state._key];
+                    values[component.state.id] = component.state._value[component.state._key];
                 } else if (component.state._group) {
                     values[component.state._key] = values[component.state._key] || [];
                     values[component.state._key].push({
-                        [component.state._id]: component.state._value
+                        [component.state.id]: component.state._value
                     });
                 } else {
-                    values[component.state._id] = component.state._value;
+                    values[component.state.id] = component.state._value;
                 }
 
                 return values;

awx/ui/client/lib/components/index.js

@@ -13,6 +13,8 @@ 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 tab from './tabs/tab.directive';
+import tabGroup from './tabs/group.directive';
 
 import BaseInputController from './input/base.controller';
 
@@ -33,6 +35,8 @@ angular
     .directive('atPanelHeading', panelHeading)
     .directive('atPanelBody', panelBody)
     .directive('atPopover', popover)
+    .directive('atTab', tab)
+    .directive('atTabGroup', tabGroup)
     .service('BaseInputController', BaseInputController);
 
 

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

@@ -1,5 +1,5 @@
 .at-Input {
-    .at-mixin-Placeholder(@at-gray-dark-2x);
+    .at-mixin-Placeholder(@at-gray-dark-3x);
 
     height: @at-input-height;
     background: @at-white;
@@ -7,7 +7,7 @@
     color: @at-gray-dark-5x;
 
     &, &:active {
-        border-color: @at-gray-dark-2x;
+        border-color: @at-gray-dark-3x;
     }
 
     &:focus {
@@ -19,7 +19,10 @@
     width: 72px;
 
     &, &:active, &:hover, &:focus {
+        color: @at-gray-dark-3x;
+        border-color: @at-gray-dark-3x;
         background-color: @at-white;
+        cursor: pointer;
     }
 }
 

awx/ui/client/lib/components/input/group.directive.js

@@ -2,7 +2,7 @@ function atInputGroupLink (scope, el, attrs, controllers) {
     let groupController = controllers[0];
     let formController = controllers[1];
     let element = el[0].getElementsByClassName('at-InputGroup-container')[0];
-
+    
     groupController.init(scope, formController, element);
 }
 

awx/ui/client/lib/components/panel/body.directive.js

@@ -3,7 +3,10 @@ function atPanelBody (pathService) {
         restrict: 'E',
         replace: true,
         transclude: true,
-        templateUrl: pathService.getPartialPath('components/panel/body')
+        templateUrl: pathService.getPartialPath('components/panel/body'),
+        scope: {
+            state: '='
+        }
     };
 }
 

awx/ui/client/lib/components/tabs/_index.less

@@ -0,0 +1,26 @@
+.at-TabGroup {
+    margin-top: @at-space-6x;
+}
+
+.at-Tab {
+    margin: 0 @at-space-5x 0 0;
+}
+
+.at-Tab--active {
+    &, &:hover, &:active, &:focus {
+        color: @at-white;
+        background-color: @at-gray-dark-2x;
+        border-color: @at-gray-dark-2x;
+        cursor: default;
+    }
+}
+
+.at-Tab--disabled {
+    &, &:hover, &:active, &:focus {
+        background-color: @at-white;
+        color: @at-gray-dark-3x;
+        border-color: @at-gray-dark-3x;
+        opacity: 0.65;
+        cursor: not-allowed;
+    }
+}

awx/ui/client/lib/components/tabs/group.directive.js

@@ -0,0 +1,49 @@
+function atTabGroupLink (scope, el, attrs, controllers) {
+    let groupController = controllers[0];
+
+    groupController.init(scope, el);
+}
+
+function AtTabGroupController ($state) {
+    let vm = this;
+
+    vm.tabs = [];
+
+    let scope;
+    let el;
+
+    vm.init = (_scope_, _el_) => {
+        scope = _scope_;
+        el = _el_;
+    };
+
+    vm.register = tab => {
+        if (vm.tabs.length === 0) {
+            tab.active = true;
+        } else {
+            tab.disabled = true;
+        }
+
+        vm.tabs.push(tab);
+    };
+}
+
+AtTabGroupController.$inject = ['$state'];
+
+function atTabGroup (pathService, _$animate_) {
+    return {
+        restrict: 'E',
+        replace: true,
+        require: ['atTabGroup'],
+        transclude: true,
+        templateUrl: pathService.getPartialPath('components/tabs/group'),
+        controller: AtTabGroupController,
+        controllerAs: 'vm',
+        link: atTabGroupLink,
+        scope: true
+    };
+}
+
+atTabGroup.$inject = ['PathService'];
+
+export default atTabGroup;

awx/ui/client/lib/components/tabs/group.partial.html

@@ -0,0 +1,3 @@
+<div class="at-TabGroup">
+    <ng-transclude></ng-transclude>
+</div>

awx/ui/client/lib/components/tabs/tab.directive.js

@@ -0,0 +1,42 @@
+function atTabLink (scope, el, attrs, controllers) {
+    let groupController = controllers[0];
+    let tabController = controllers[1];
+
+    tabController.init(scope, el, groupController);
+}
+
+function AtTabController ($state) {
+    let vm = this;
+
+    let scope;
+    let el;
+    let group;
+
+    vm.init = (_scope_, _el_, _group_) => {
+        scope = _scope_;
+        el = _el_;
+        group = _group_;
+
+        group.register(scope);
+    };
+}
+
+AtTabController.$inject = ['$state'];
+
+function atTab (pathService, _$animate_) {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        require: ['^^atTabGroup', 'atTab'],
+        templateUrl: pathService.getPartialPath('components/tabs/tab'),
+        controller: AtTabController,
+        controllerAs: 'vm',
+        link: atTabLink,
+        scope: true
+    };
+}
+
+atTab.$inject = ['PathService'];
+
+export default atTab;

awx/ui/client/lib/components/tabs/tab.partial.html

@@ -0,0 +1,5 @@
+<button class="btn at-ButtonHollow--white at-Tab"
+        ng-attr-disabled="{{ disabled || undefined }}"
+        ng-class="{ 'at-Tab--active': active, 'at-Tab--disabled': disabled }">
+    <ng-transclude></ng-transclude>
+</button>

awx/ui/client/lib/theme/_common.less

@@ -24,14 +24,7 @@
 
 .at-ButtonHollow--white { 
     .at-mixin-Button();
-    .at-mixin-ButtonHollow('at-gray-dark-4x', 'at-gray-dark-2x');
-
-    border-color: @at-gray-dark-2x;
-
-    &:hover, &:focus {
-        color: @at-gray-dark-4x;
-        background-color: @at-white--hover;
-    }
+    .at-mixin-ButtonHollow('at-gray-dark-3x', 'at-gray-dark-2x');
 }
 
 .at-ButtonIcon {

awx/ui/client/lib/theme/_mixins.less

@@ -41,22 +41,26 @@
     }
 }
 
-.at-mixin-ButtonHollow (@color, @hover: '@{color}--hover') {
+.at-mixin-ButtonHollow (@color, @accent) {
     background-color: @at-white;
-
     color: @@color;
     border-color: @@color;
 
-    &:hover, &:focus {
-        color: @@hover;
-        border-color: @@hover;
-        background-color: @at-white;
+    &:hover, &:active {
+        color: @@color;
+        background-color: @at-white--hover;
+        box-shadow: none;
+    }
+
+    &:focus {
+        color: @at-white;
+        background-color: @@accent;
+        border-color: @@accent;
+        cursor: default;
     }
 
     &[disabled] {
-        background-color: fade(@@color, 30%);
-        border-color: fade(@@color, 30%);
-        color: @at-white;
+        opacity: 0.65;
     }
 }
 

awx/ui/client/lib/theme/_variables.less

@@ -16,7 +16,7 @@
 @at-gray: #e1e1e1;
 @at-gray-dark: #d7d7d7;
 @at-gray-dark-2x: #b7b7b7;
-@at-gray-dark-3x: #8f8992;
+@at-gray-dark-3x: #848992;
 @at-gray-dark-4x: #707070;
 @at-gray-dark-5x: #161b1f;