External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 02:19:58 -03:30
Code Issues Packages Projects Releases Wiki Activity

Add prompt on launch and checkbox

Browse Source
This commit is contained in:
gconsidine 2017-06-09 17:39:40 -04:00
parent 2b01c24dce
commit 2bd11f948a
11 changed files with 102 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/lib/components/index.js
View File

@ -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)

36
awx/ui/client/lib/components/input/_index.less
View File

@ -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;

27
awx/ui/client/lib/components/input/base.controller.js
View File

@ -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();
};
};
}

14
awx/ui/client/lib/components/input/checkbox.partial.html
View File

@ -0,0 +1,14 @@
<div class="col-sm-{{::col}}">
<div class="form-group at-u-flat">
<at-input-label></at-input-label>
<div class="checkbox at-Checkbox">
<input type="checkbox"
ng-class="{ 'at-Input--rejected': state.rejected }"
ng-model="state._value"
ng-attr-tabindex="{{ tab || undefined }}"
ng-change="vm.check()"
ng-disabled="state._disabled || form.disabled" />
</div>
<at-input-message></at-input-message>
</div>
</div>

2
awx/ui/client/lib/components/input/group.directive.js
View File

@ -94,6 +94,8 @@ function AtInputGroupController ($scope, $compile) {
}
} else if (input.type === 'number') {
config._component = 'at-input-number';
} else if (input.type === 'boolean') {
config._component = 'at-input-checkbox';
} else if (input.choices) {
config._component = 'at-input-select';
config._format = 'array';

8
awx/ui/client/lib/components/input/label.partial.html
View File

@ -3,4 +3,12 @@
<span class="at-InputLabel-name">{{::state.label}}</span>
<at-popover state="state"></at-popover>
<span ng-if="state._hint" class="at-InputLabel-hint">{{::state._hint}}</span>
<div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right">
<label class="at-InputLabel-checkboxLabel">
<input type="checkbox"
ng-model="state._promptOnLaunch"
ng-change="vm.togglePromptOnLaunch()" />
<p>Prompt on launch?</p>
</label>
</div>
</label>

10
awx/ui/client/lib/components/input/secret.directive.js
View File

@ -19,7 +19,7 @@ function AtInputSecretController (baseInputController) {
scope = _scope_;
if (!scope.state._value) {
if (!scope.state._value || scope.state._promptOnLaunch) {
scope.type = 'password';
scope.buttonText = 'SHOW';
@ -36,21 +36,23 @@ function AtInputSecretController (baseInputController) {
vm.check();
};
vm.updateModel = value => {
vm.updateValue = value => {
if (!scope.edit || scope.replace) {
scope.state._value = scope.displayModel;
scope.state._value = scope.state._displayValue;
}
vm.check();
};
vm.toggleEditState = () => {
scope.displayModel = '';
scope.state._dislpayValue = '';
if (scope.replace) {
scope.buttonText = 'REPLACE';
scope.state._disabled = true;
} else {
scope.buttonText = 'REVERT';
scope.state._disabled = false
}
scope.replace = !scope.replace;

6
awx/ui/client/lib/components/input/secret.partial.html
View File

@ -12,13 +12,13 @@
</span>
<input type="{{ type }}"
class="form-control at-Input"
ng-model="displayModel"
ng-model="state._displayValue"
ng-class="{ 'at-Input--rejected': state._rejected }"
ng-attr-maxlength="{{ state.max_length || undefined }}"
ng-attr-tabindex="{{ tab || undefined }}"
ng-attr-placeholder="{{::state._placeholder || undefined }}"
ng-change="vm.updateModel()"
ng-disabled="(state._disabled || form.disabled) || (state._encrypted && !replace)" />
ng-change="vm.updateValue()"
ng-disabled="state._disabled || form.disabled" />
</div>
<at-input-message></at-input-message>

3
awx/ui/client/lib/components/input/text.partial.html
View File

@ -2,8 +2,7 @@
<div class="form-group at-u-flat">
<at-input-label></at-input-label>
<input type="text"
class="form-control at-Input"
<input type="text" class="form-control at-Input"
ng-class="{ 'at-Input--rejected': state._rejected }"
ng-model="state._value"
ng-attr-maxlength="{{ state.max_length || undefined }}"

4
awx/ui/client/lib/models/Base.js
View File

@ -22,7 +22,7 @@ function httpGet (resource) {
return $q.resolve();
} else if (resource) {
req.url = `${this.path}/${resource}`;
req.url = `${this.path}${resource}/`;
}
return $http(req)
@ -62,7 +62,7 @@ function httpOptions (resource) {
};
if (resource) {
req.url = `${this.path}/${resource}`;
req.url = `${this.path}${resource}/`;
}
return $http(req)

2
awx/ui/client/lib/theme/_variables.less
View File

@ -62,9 +62,9 @@
// 4. Input ---------------------------------------------------------------------------------------
@at-input-button-width: 72px;
@at-input-height: 30px;
// 5. Misc ----------------------------------------------------------------------------------------
@at-border-radius: 5px;
@at-input-height: 30px;
@at-popover-width: 320px;
@at-inset-width: 5px;