diff --git a/awx/ui/client/components/_index.less b/awx/ui/client/components/_index.less index b863e39645..068cb5f609 100644 --- a/awx/ui/client/components/_index.less +++ b/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'; diff --git a/awx/ui/client/components/index.js b/awx/ui/client/components/index.js index bdcccc1470..6877297d62 100644 --- a/awx/ui/client/components/index.js +++ b/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); diff --git a/awx/ui/client/components/input/_index.less b/awx/ui/client/components/input/_index.less index 79492ed1da..1c15dca610 100644 --- a/awx/ui/client/components/input/_index.less +++ b/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; diff --git a/awx/ui/client/components/input/label.directive.js b/awx/ui/client/components/input/label.directive.js new file mode 100644 index 0000000000..c2dc7a08b9 --- /dev/null +++ b/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; diff --git a/awx/ui/client/components/input/label.partial.html b/awx/ui/client/components/input/label.partial.html new file mode 100644 index 0000000000..6c008fd771 --- /dev/null +++ b/awx/ui/client/components/input/label.partial.html @@ -0,0 +1,5 @@ + diff --git a/awx/ui/client/components/input/select.partial.html b/awx/ui/client/components/input/select.partial.html index 98d708954e..eb57c7b9e2 100644 --- a/awx/ui/client/components/input/select.partial.html +++ b/awx/ui/client/components/input/select.partial.html @@ -1,15 +1,12 @@
- -
- +
+ - diff --git a/awx/ui/client/components/panel/_index.less b/awx/ui/client/components/panel/_index.less index 13889adf45..fca076deb3 100644 --- a/awx/ui/client/components/panel/_index.less +++ b/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 { diff --git a/awx/ui/client/components/popover/_index.less b/awx/ui/client/components/popover/_index.less new file mode 100644 index 0000000000..27631b0d6e --- /dev/null +++ b/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; +} diff --git a/awx/ui/client/components/popover/popover.directive.js b/awx/ui/client/components/popover/popover.directive.js index e69de29bb2..fe13a12517 100644 --- a/awx/ui/client/components/popover/popover.directive.js +++ b/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; diff --git a/awx/ui/client/components/popover/popover.partial.html b/awx/ui/client/components/popover/popover.partial.html new file mode 100644 index 0000000000..68294215fe --- /dev/null +++ b/awx/ui/client/components/popover/popover.partial.html @@ -0,0 +1,12 @@ +
+ + + +
+
+ +
+
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. +
+
+
diff --git a/awx/ui/client/src/credentials/add-credentials.controller.js b/awx/ui/client/src/credentials/add-credentials.controller.js index 406a02d79c..f088a3cd27 100644 --- a/awx/ui/client/src/credentials/add-credentials.controller.js +++ b/awx/ui/client/src/credentials/add-credentials.controller.js @@ -2,12 +2,17 @@ function AddCredentialsController (credentialType) { let vm = this || {}; vm.name = { - label: 'Name', - required: true + label: { + 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() diff --git a/awx/ui/client/src/credentials/index.controller.js b/awx/ui/client/src/credentials/index.controller.js deleted file mode 100644 index 8136969a49..0000000000 --- a/awx/ui/client/src/credentials/index.controller.js +++ /dev/null @@ -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; diff --git a/awx/ui/client/src/credentials/index.js b/awx/ui/client/src/credentials/index.js index 2ff69704ed..51ad39b57a 100644 --- a/awx/ui/client/src/credentials/index.js +++ b/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': { diff --git a/awx/ui/client/theme/_mixins.less b/awx/ui/client/theme/_mixins.less index ff1f16b95e..ab8627e33f 100644 --- a/awx/ui/client/theme/_mixins.less +++ b/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; diff --git a/awx/ui/client/theme/_variables.less b/awx/ui/client/theme/_variables.less index f8a10a27ea..0a35a57e1f 100644 --- a/awx/ui/client/theme/_variables.less +++ b/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;