diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index fda8307819..602ffbdaf3 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -1,6 +1,7 @@ import actionGroup from './action/action-group.directive'; import form from './form/form.directive'; import formAction from './form/action.directive'; +import inputCheckbox from './input/checkbox.directive'; import inputGroup from './input/group.directive'; import inputLabel from './input/label.directive'; import inputMessage from './input/message.directive'; @@ -25,6 +26,7 @@ angular .directive('atActionGroup', actionGroup) .directive('atForm', form) .directive('atFormAction', formAction) + .directive('atInputCheckbox', inputCheckbox) .directive('atInputGroup', inputGroup) .directive('atInputLabel', inputLabel) .directive('atInputMessage', inputMessage) diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less index d5ea77dd3c..a396776a0d 100644 --- a/awx/ui/client/lib/components/input/_index.less +++ b/awx/ui/client/lib/components/input/_index.less @@ -15,6 +15,17 @@ } } +.at-Checkbox { + margin: 0; + padding: 0; + + & > input[type=checkbox] { + height: @at-input-height; + margin: 0; + padding: 0; + } +} + .at-InputGroup-button { height: 100%; } @@ -86,6 +97,7 @@ .at-InputLabel { display: inline-block; + width: 100%; } .at-InputLabel-name { @@ -103,6 +115,30 @@ line-height: @at-line-height-short; } +.at-InputLabel-checkbox { + margin: 0; + padding: 0; +} + +.at-InputLabel-checkboxLabel { + margin-bottom: 0; + + & > input[type=checkbox] { + margin: 0 @at-space 0 0; + position: relative; + top: @at-space; + } + + & > p { + font-size: @at-font-size; + color: @at-gray-dark-4x; + font-weight: @at-font-weight; + display: inline; + margin: 0; + padding: 0; + } +} + .at-InputMessage--rejected { font-size: @at-font-size; color: @at-red; diff --git a/awx/ui/client/lib/components/input/base.controller.js b/awx/ui/client/lib/components/input/base.controller.js index f534a51e21..626fe552a8 100644 --- a/awx/ui/client/lib/components/input/base.controller.js +++ b/awx/ui/client/lib/components/input/base.controller.js @@ -1,5 +1,6 @@ const REQUIRED_INPUT_MISSING_MESSAGE = 'Please enter a value.'; const DEFAULT_INVALID_INPUT_MESSAGE = 'Invalid input for this type.'; +const PROMPT_ON_LAUNCH = 'ASK'; function BaseInputController () { return function extend (type, scope, element, form) { @@ -11,6 +12,17 @@ function BaseInputController () { scope.state._isValid = scope.state.isValid || false; scope.state._disabled = scope.state.disabled || false; + if (scope.state.ask_at_runtime) { + scope.state._displayPromptOnLaunch = true; + + if (scope.state._value === 'ASK') { + scope.state._promptOnLaunch = true; + scope.state._disabled = true; + } else { + scope.state._promptOnLaunch = false; + } + } + form.register(type, scope); vm.validate = () => { @@ -48,6 +60,21 @@ function BaseInputController () { form.check(); } }; + + vm.togglePromptOnLaunch = () => { + if (scope.state._promptOnLaunch) { + scope.state._priorValue = scope.state._value; + scope.state._value = PROMPT_ON_LAUNCH; + scope.state._displayValue = ''; + scope.state._disabled = true; + } else { + scope.state._value = scope.state._priorValue; + scope.state._displayValue = scope.state._value; + scope.state._disabled = false; + } + + vm.check(); + }; }; } diff --git a/awx/ui/client/lib/components/input/checkbox.partial.html b/awx/ui/client/lib/components/input/checkbox.partial.html index e69de29bb2..86b64994ac 100644 --- a/awx/ui/client/lib/components/input/checkbox.partial.html +++ b/awx/ui/client/lib/components/input/checkbox.partial.html @@ -0,0 +1,14 @@ +