From 15759b65aa6a9163758526da5290cf5819c4ad70 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Thu, 25 May 2017 15:08:59 -0400 Subject: [PATCH] Add partial implementation of tabs and tab groups --- .../credentials/add-credentials.controller.js | 5 +- .../credentials/add-credentials.view.html | 9 ++-- awx/ui/client/lib/components/_index.less | 1 + .../lib/components/form/form.directive.js | 6 +-- awx/ui/client/lib/components/index.js | 4 ++ .../client/lib/components/input/_index.less | 7 ++- .../lib/components/input/group.directive.js | 2 +- .../lib/components/panel/body.directive.js | 5 +- awx/ui/client/lib/components/tabs/_index.less | 26 ++++++++++ .../lib/components/tabs/group.directive.js | 49 +++++++++++++++++++ .../lib/components/tabs/group.partial.html | 3 ++ .../tabs/tab-navigation.directive.js | 0 .../lib/components/tabs/tab.directive.js | 42 ++++++++++++++++ .../lib/components/tabs/tab.partial.html | 5 ++ awx/ui/client/lib/theme/_common.less | 9 +--- awx/ui/client/lib/theme/_mixins.less | 22 +++++---- awx/ui/client/lib/theme/_variables.less | 2 +- 17 files changed, 166 insertions(+), 31 deletions(-) create mode 100644 awx/ui/client/lib/components/tabs/_index.less create mode 100644 awx/ui/client/lib/components/tabs/group.directive.js create mode 100644 awx/ui/client/lib/components/tabs/group.partial.html delete mode 100644 awx/ui/client/lib/components/tabs/tab-navigation.directive.js create mode 100644 awx/ui/client/lib/components/tabs/tab.partial.html diff --git a/awx/ui/client/features/credentials/add-credentials.controller.js b/awx/ui/client/features/credentials/add-credentials.controller.js index c9fd966f45..c04bacd0ba 100644 --- a/awx/ui/client/features/credentials/add-credentials.controller.js +++ b/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; diff --git a/awx/ui/client/features/credentials/add-credentials.view.html b/awx/ui/client/features/credentials/add-credentials.view.html index 8e0d0039ae..284c5f44ad 100644 --- a/awx/ui/client/features/credentials/add-credentials.view.html +++ b/awx/ui/client/features/credentials/add-credentials.view.html @@ -1,10 +1,11 @@ New Credential - - - - + + Details + Permissions + Notifications + diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index d14b865d80..943a2ecd20 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -2,3 +2,4 @@ @import 'input/_index'; @import 'panel/_index'; @import 'popover/_index'; +@import 'tabs/_index'; diff --git a/awx/ui/client/lib/components/form/form.directive.js b/awx/ui/client/lib/components/form/form.directive.js index d198febca9..2a4db42808 100644 --- a/awx/ui/client/lib/components/form/form.directive.js +++ b/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; diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index b40db446ed..0439ac8d72 100644 --- a/awx/ui/client/lib/components/index.js +++ b/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); diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less index c227aa59fb..3be3213b18 100644 --- a/awx/ui/client/lib/components/input/_index.less +++ b/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; } } diff --git a/awx/ui/client/lib/components/input/group.directive.js b/awx/ui/client/lib/components/input/group.directive.js index 58c985bdbd..d33bf6009f 100644 --- a/awx/ui/client/lib/components/input/group.directive.js +++ b/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); } diff --git a/awx/ui/client/lib/components/panel/body.directive.js b/awx/ui/client/lib/components/panel/body.directive.js index da38d9ad76..6011a81d92 100644 --- a/awx/ui/client/lib/components/panel/body.directive.js +++ b/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: '=' + } }; } diff --git a/awx/ui/client/lib/components/tabs/_index.less b/awx/ui/client/lib/components/tabs/_index.less new file mode 100644 index 0000000000..50aa5af247 --- /dev/null +++ b/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; + } +} diff --git a/awx/ui/client/lib/components/tabs/group.directive.js b/awx/ui/client/lib/components/tabs/group.directive.js new file mode 100644 index 0000000000..3a4ea488c7 --- /dev/null +++ b/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; diff --git a/awx/ui/client/lib/components/tabs/group.partial.html b/awx/ui/client/lib/components/tabs/group.partial.html new file mode 100644 index 0000000000..8f4e538da4 --- /dev/null +++ b/awx/ui/client/lib/components/tabs/group.partial.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/awx/ui/client/lib/components/tabs/tab-navigation.directive.js b/awx/ui/client/lib/components/tabs/tab-navigation.directive.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/awx/ui/client/lib/components/tabs/tab.directive.js b/awx/ui/client/lib/components/tabs/tab.directive.js index e69de29bb2..0168b7ac28 100644 --- a/awx/ui/client/lib/components/tabs/tab.directive.js +++ b/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; diff --git a/awx/ui/client/lib/components/tabs/tab.partial.html b/awx/ui/client/lib/components/tabs/tab.partial.html new file mode 100644 index 0000000000..9cad7c1020 --- /dev/null +++ b/awx/ui/client/lib/components/tabs/tab.partial.html @@ -0,0 +1,5 @@ + diff --git a/awx/ui/client/lib/theme/_common.less b/awx/ui/client/lib/theme/_common.less index 35317df60c..e3fc391fbf 100644 --- a/awx/ui/client/lib/theme/_common.less +++ b/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 { diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less index 1cbcd52084..ef02f84c3b 100644 --- a/awx/ui/client/lib/theme/_mixins.less +++ b/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; } } diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index 90c8cbc7aa..14191a5e35 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/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;