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

Add toggle switch for YAML,JSON selection

Browse Source
This commit is contained in:
Greg Considine
2017-03-21 11:43:39 -04:00
parent 44775f691b
commit 10a51c72f0
3 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
awx/ui/client/legacy-styles/ansible-ui.less
View File

@@ -2296,3 +2296,4 @@ html input[disabled] {
.CodeMirror--disabled .CodeMirror-cursors { .CodeMirror--disabled .CodeMirror-cursors {
display: none; display: none;
} }

22
awx/ui/client/legacy-styles/forms.less
View File

@@ -478,6 +478,28 @@ input[type='radio']:checked:before {
width: 100%; width: 100%;
display: block !important; display: block !important;
} }
.Form-inputLabelContainer[for=variables] {
width: auto;
display: inline-block !important;
}
.FormToggle {}
.FormToggle-container {
float: right;
margin: 0 0 0 10px;
padding-bottom: 5px;
.btn.btn-xs {
padding: 0px 10px;
}
input {
visibility: hidden;
position: absolute;
}
}
.Form-inputLabel{ .Form-inputLabel{
text-transform: uppercase; text-transform: uppercase;
color: @default-interface-txt; color: @default-interface-txt;

28
awx/ui/client/src/shared/form-generator.js
View File

@@ -659,14 +659,26 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += (field.hintText) ? "\n\t\t<span class=\"label-hint-text\">\n\t\t\t<i class=\"fa fa-info-circle\">\n\t\t\t</i>\n\t\t\tHint: " + field.hintText + "\n\t\t</span>" : ""; html += (field.hintText) ? "\n\t\t<span class=\"label-hint-text\">\n\t\t\t<i class=\"fa fa-info-circle\">\n\t\t\t</i>\n\t\t\tHint: " + field.hintText + "\n\t\t</span>" : "";
// Variable editing // Variable editing
if (fld === "variables" || fld === "extra_vars" || _.last(fld.split('_')) === 'variables' || fld === 'source_vars') { if (fld === "variables" || fld === "extra_vars" || _.last(fld.split('_')) === 'variables' || fld === 'source_vars') {
html += "<div class=\"parse-selection\" id=\"" + form.name + "_" + fld + "_parse_type\">" + let parseTypeId = `${form.name}_${fld}_parse_type`;
"<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\""; let parseTypeName = field.parseTypeName || 'parseType';
html += (field.parseTypeName) ? field.parseTypeName : 'parseType'; let getToggleClass = (primary, secondary) => `{
html += "\" value=\"yaml\" ng-change=\"parseTypeChange('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType') + "', '" + fld + "'" + ")\"> <span class=\"parse-label\">YAML</span>\n"; 'btn-primary': ${parseTypeName} === '${primary}',
html += "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\""; 'btn-default' : ${parseTypeName} === '${secondary}'
html += (field.parseTypeName) ? field.parseTypeName : 'parseType'; }`;
html += "\" value=\"json\" ng-change=\"parseTypeChange('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType')+ "', '" + fld + "'" + ")\"> <span class=\"parse-label\">JSON</span>\n"; let toggleLeftClass = getToggleClass('yaml', 'json');
html += "</div>\n"; let toggleRightClass = getToggleClass('json', 'yaml');
html += `
<div class="FormToggle-container" id="${parseTypeId}">
<div class="btn-group">
<label ng-class="${toggleLeftClass}" class="btn btn-xs">
<input type="radio" value="yaml" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />YAML
</label>
<label ng-class="${toggleRightClass}" class="btn btn-xs btn-default">
<input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
</label>
</div>
</div>`;
} }
if (field.labelAction) { if (field.labelAction) {