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

Merge pull request #5927 from gconsidine/uxi/templates

Browse Source 
Uxi/templates
This commit is contained in:
Greg Considine 2017-04-05 15:40:22 -04:00 committed by GitHub
commit bfe502f5fc
8 changed files with 213 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -490,9 +490,9 @@ input[type='radio']:checked:before {
.FormToggle {}
.FormToggle-container {
float: right;
margin: 0 0 0 10px;
padding-bottom: 5px;
display: initial;
label {
&:first-child {
@ -513,6 +513,16 @@ input[type='radio']:checked:before {
}
}
.Form-inputLabelContainer {
width: 100%;
display: block !important;
}
.Form-inputLabelContainer[for=variables] {
width: 100%;
display: inline-block !important;
}
.Form-inputLabel{
text-transform: uppercase;
color: @default-interface-txt;
@ -614,6 +624,10 @@ input[type='radio']:checked:before {
max-width: 100% !important;
}
.Form-checkbox {
float: right;
}
.Form-subCheckbox {
margin-top: 5px;
font-size: small;

4
awx/ui/client/src/shared/Utilities.js
View File

@ -665,6 +665,10 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
// Don't toggle the dropdown when a multiselect option is
// being removed
if (multiple) {
if (params.disabledOptions) {
$(element).on('select2:selecting', e => e.preventDefault());
}
$(element).on('select2:opening', (e) => {
var unselecting = $(e.target).data('select2-unselecting');
if (unselecting === true) {

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

@ -639,7 +639,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
return html;
}
function label() {
function label(options) {
var html = '';
if (field.label || field.labelBind) {
html += "<label class=\"";
@ -681,6 +681,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
</div>`;
}
if (options && options.checkbox) {
html += createCheckbox(options.checkbox);
}
if (field.labelAction) {
let action = field.labelAction;
let href = action.href || "";
@ -697,6 +701,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "\n\t</label>\n";
}
return html;
}
@ -770,7 +775,21 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
//text fields
if (field.type === 'text' || field.type === 'password' || field.type === 'email') {
html += label();
let labelOptions = {};
if (field.subCheckbox) {
labelOptions.checkbox = {
id: `${this.form.name}_${fld}_ask_chbox`,
ngShow: field.subCheckbox.ngShow,
ngChange: field.subCheckbox.ngChange,
ngModel: field.subCheckbox.variable,
ngDisabled: field.ngDisabled,
text: field.subCheckbox.text || ''
};
}
html += label(labelOptions);
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
@ -821,19 +840,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
"<i class=\"fa fa-magic\"></i></button></span>\n</div>\n";
}
if (field.subCheckbox) {
html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
html += ">";
html += "<input type=\"checkbox\" ng-model=\"" + field.subCheckbox.variable + "\" ";
html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
html += ">";
html += field.subCheckbox.text ? field.subCheckbox.text : "";
html += "</label>";
}
// Add error messages
if (field.required || field.awRequiredWhen) {
error_message = i18n._('Please enter a value.');
@ -930,24 +936,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "</div>\n";
if (field.subCheckbox) {
html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
html += ">";
html += "<input type=\"checkbox\" ng-model=\"" +
field.subCheckbox.variable + "\" ";
html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
if (field.subCheckbox.ngDisabled !== undefined) {
html += "ng-disabled='" + field.subCheckbox.ngDisabled + "'";
} else {
html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
}
html += ">";
html += field.subCheckbox.text ? field.subCheckbox.text : "";
html += "</label>";
}
// Add error messages
if (field.required || field.awRequiredWhen) {
error_message = i18n._("Please enter a value.");
@ -1006,8 +994,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
//textarea fields
if (field.type === 'textarea') {
let labelOptions = {};
html += label();
if (field.subCheckbox) {
labelOptions.checkbox = {
id: `${this.form.name}_${fld}_ask_chbox`,
ngModel: field.subCheckbox.variable,
ngShow: field.subCheckbox.ngShow,
ngChange: field.subCheckbox.ngChange,
ngDisabled: field.ngDisabled || field.subCheckbox.ngDisabled,
text: field.subCheckbox.text || ''
};
}
html += label(labelOptions);
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@ -1038,23 +1038,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
html += "aw-watch ></textarea>\n";
if (field.subCheckbox) {
html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
html += ">";
html += "<input type=\"checkbox\" ng-model=\"" +
field.subCheckbox.variable + "\" ";
html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
if (field.subCheckbox.ngDisabled) {
html += "ng-disabled='" + field.subCheckbox.ngDisabled + "'";
}
html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
html += ">";
html += field.subCheckbox.text ? field.subCheckbox.text : "";
html += "</label>";
}
// Add error messages
if (field.required) {
html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@ -1066,8 +1049,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
//select field
if (field.type === 'select') {
let labelOptions = {};
html += label();
if (field.subCheckbox) {
labelOptions.checkbox = {
id: `${this.form.name}_${fld}_ask_chbox`,
ngShow: field.subCheckbox.ngShow,
ngModel: field.subCheckbox.variable,
ngChange: field.subCheckbox.ngChange,
ngDisabled: field.subCheckbox.ngDisabled,
text: field.subCheckbox.text
};
}
html += label(labelOptions);
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@ -1106,23 +1101,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "</select>\n";
html += "</div>\n";
if (field.subCheckbox) {
html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
html += ">";
html += "<input type=\"checkbox\" ng-model=\"" +
field.subCheckbox.variable + "\" ";
html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
if (field.subCheckbox.ngDisabled) {
html += "ng-disabled='" + field.subCheckbox.ngDisabled + "'";
}
html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
html += ">";
html += field.subCheckbox.text ? field.subCheckbox.text : "";
html += "</label>";
}
// Add error messages
if (field.required || field.awRequiredWhen) {
html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@ -1142,8 +1120,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
//number field
if (field.type === 'number') {
let labelOptions = {};
html += label();
if (field.subCheckbox) {
labelOptions.checkbox = {
id: `${this.form.name}_${fld}_ask_chbox`,
ngShow: field.subCheckbox.ngShow,
ngChange: field.subCheckbox.ngChange,
ngModel: field.subCheckbox.variable,
ngDisabled: field.ngDisabled,
text: field.subCheckbox.text || ''
};
}
html += label(labelOptions);
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@ -1178,20 +1168,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
html += " >\n";
if (field.subCheckbox) {
html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
html += ">";
html += "<input type=\"checkbox\" ng-model=\"" +
field.subCheckbox.variable + "\" ";
html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
html += ">";
html += field.subCheckbox.text ? field.subCheckbox.text : "";
html += "</label>";
}
// Add error messages
if (field.required) {
html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@ -1362,7 +1338,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
//lookup type fields
if (field.type === 'lookup') {
let defaultLookupNgClick = `$state.go($state.current.name + '.${field.sourceModel}', {selected: ${field.sourceModel}})`;
html += label();
let labelOptions = {};
if (field.subCheckbox) {
labelOptions.checkbox = {
id: `${this.form.name}_${fld}_ask_chbox`,
ngShow: field.subCheckbox.ngShow,
ngChange: field.subCheckbox.ngChange,
ngModel: field.subCheckbox.variable,
ngDisabled: field.ngDisabled,
text: field.subCheckbox.text || ''
};
}
html += label(labelOptions);
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@ -1404,20 +1393,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += " awlookup >\n";
html += "</div>\n";
if (field.subCheckbox) {
html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
html += ">";
html += "<input type=\"checkbox\" ng-model=\"" +
field.subCheckbox.variable + "\" ";
html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
html += ">";
html += field.subCheckbox.text ? field.subCheckbox.text : "";
html += "</label>";
}
// Add error messages
if (field.required || field.awRequiredWhen) {
html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" +
@ -2022,7 +1997,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += `<paginate base-path="${collection.basePath}" dataset="${collection.iterator}_dataset" collection="${collection.iterator}s" iterator="${collection.iterator}" ng-hide="hidePagination">`;
return html;
}
},
};
function createCheckbox (options) {
let ngChange = options.ngChange ? `ng-change="${options.ngChange}"` : '';
let ngDisabled = options.ngDisabled ? `ng-disabled="${options.ngDisabled}"` : '';
let ngModel = options.ngModel ? `ng-model="${options.ngModel}"` : '';
let ngShow = options.ngShow ? `ng-show="${options.ngShow}"` : '';
return `
<label class="checkbox-inline Form-checkbox" ${ngShow}>
<input type="checkbox" id="${options.id}" ${ngModel} ${ngChange} ${ngDisabled} />
${options.text}
</label> `;
}
}
]);

6
awx/ui/client/src/templates/survey-maker/render/multiple-choice.directive.js
View File

@ -2,7 +2,6 @@
import {templateUrl} from '../../../shared/template-url/template-url.factory';
function link($timeout, CreateSelect2, scope, element, attrs, ngModel) {
$timeout(function() {
// select2-ify the dropdown. If the preview flag is passed here
@ -13,12 +12,13 @@ function link($timeout, CreateSelect2, scope, element, attrs, ngModel) {
// and we don't actually need the dropdown portion. Note that the custom
// dropdown adapter is used to get the dropdown contents to show up in
// a modal.
CreateSelect2({
element: element.find('select'),
multiple: scope.isMultipleSelect(),
customDropdownAdapter: scope.preview ? false : true
customDropdownAdapter: scope.preview ? false : true,
disabledOptions: true
});
});
}

4
awx/ui/client/src/templates/survey-maker/render/survey-question.partial.html
View File

@ -10,9 +10,7 @@
question="question"
choices="choices"
ng-required="isRequired === 'true'"
ng-model="defaultValue"
ng-disabled="isDisabled === 'true'"
preview="preview">
ng-model="defaultValue">
</multiple-choice>
</div>
<div ng-if="question.type === 'password'" class="input_area input-group">

70
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
View File

@ -151,9 +151,7 @@
color: @default-interface-txt;
}
.WorkflowLegend-maker--left {
display: flex;
flex: 1 0 auto;
padding-left: 20px;
}
.WorkflowLegend-maker--right {
flex: 0 0 215px;
@ -213,16 +211,20 @@
padding-right: 20px;
position:relative;
}
.Key-menuIcon,
.WorkflowMaker-manualControlsIcon {
color: @default-icon;
vertical-align: middle;
font-size: 1.2em;
margin-left: 10px;
}
.Key-menuIcon:hover,
.WorkflowMaker-manualControlsIcon:hover {
color: @default-link-hov;
cursor: pointer;
}
.Key-menuIcon--active,
.WorkflowMaker-manualControlsIcon--active {
color: @default-link-hov;
}
@ -248,3 +250,67 @@
.WorkflowMaker-formTab {
margin-right: 10px;
}
.Key-list {
margin: 0;
padding: 20px;
position: absolute;
background-color: @default-bg;
border: 1px solid @default-list-header-bg;
}
.Key-listItem {
display: flex;
padding: 0;
margin: 5px 0 0 0;
}
.Key-listItemContent {
margin: 0;
line-height: 20px;
}
.Key-listItemContent--circle {
line-height: 28px;
}
.Key-icon {
height: 3px;
width: 20px;
margin: 9px 5px 9px 0px;
}
.Key-heading {
font-weight: 700;
margin: 0 0 10px;
line-height: 0;
padding: 0;
}
.Key-icon--success {
background-color: @submit-button-bg;
}
.Key-icon--fail {
background-color: @default-err;
}
.Key-icon--always {
background-color: @default-link;
}
.Key-icon--warning {
background: @default-warning;
}
.Key-icon--default {
background: @default-icon;
}
.Key-icon--circle {
border-radius: 50%;
width: 20px;
height: 20px;
color: @default-bg;
text-align: center;
line-height: 20px;
margin: 4px 5px 5px 0px;
}
.Key-details {
display: flex;
height: 40px;
line-height: 40px;
padding-left: 20px;
border: 1px solid @default-no-items-bord;
margin-top:10px;
}

4
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js
View File

@ -35,6 +35,10 @@ export default ['$scope', 'WorkflowService', 'GetBasePath', 'TemplatesService',
$scope.associateRequests = [];
$scope.disassociateRequests = [];
$scope.showKey = false;
$scope.toggleKey = () => $scope.showKey = !$scope.showKey;
$scope.keyClassList = `{ 'Key-menuIcon--active': showKey }`;
function init() {
let allNodes = [];

51
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
View File

@ -33,27 +33,36 @@
<div class="WorkflowMaker-contentLeft">
<div class="WorkflowLegend-maker">
<div class="WorkflowLegend-maker--left">
<div class="WorkflowLegend-legendItem">KEY:</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-onSuccessLegend"></div>
<div>On Success</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-onFailLegend"></div>
<div>On Fail</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-alwaysLegend"></div>
<div>Always</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-letterCircle">P</div>
<div>Project Sync</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-letterCircle">I</div>
<div>Inventory Sync</div>
</div>
<i ng-class="{{ keyClassList }}" class="fa fa-key Key-menuIcon" ng-click="toggleKey()"></i>
<ul ng-show="showKey" class="Key-list noselect">
<li class="Key-listItem">
<p class="Key-heading">KEY</p>
</li>
<li class="Key-listItem">
<div class="Key-icon Key-icon--success"></div>
<p class="Key-listItemContent">On Success</p>
</li>
<li class="Key-listItem">
<div class="Key-icon Key-icon--fail"></div>
<p class="Key-listItemContent">On Fail</p>
</li>
<li class="Key-listItem">
<div class="Key-icon Key-icon--always"></div>
<p class="Key-listItemContent">Always</p>
</li>
<li class="Key-listItem">
<div class="Key-icon Key-icon--circle Key-icon--default">P</div>
<p class="Key-listItemContent Key-listItemContent--circle">Project Sync</p>
</li>
<li class="Key-listItem">
<div class="Key-icon Key-icon--circle Key-icon--default">I</div>
<p class="Key-listItemContent Key-listItemContent--circle">Inventory Sync</p>
</li>
<li class="Key-listItem">
<div class="Key-icon Key-icon--circle Key-icon--warning">!</div>
<p class="Key-listItemContent Key-listItemContent--circle">Warning</p>
</li>
</ul>
</div>
<div class="WorkflowLegend-maker--right">
<span class="WorkflowMaker-totalJobs">TOTAL TEMPLATES</span>