mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 10:00:01 -03:30
AC-457 dynamic help panel widget
This commit is contained in:
chouseknecht
parent
d44722e4ae
commit
460ec55cee
@ -21,7 +21,7 @@ angular.module('OrganizationFormDefinition', [])
|
||||
type: 'text',
|
||||
addRequired: true,
|
||||
editRequired: true,
|
||||
capitalize: true
|
||||
capitalize: false
|
||||
},
|
||||
description: {
|
||||
label: 'Description',
|
||||
|
||||
@ -28,7 +28,7 @@ angular.module('PermissionFormDefinition', [])
|
||||
type: 'text',
|
||||
addRequired: true,
|
||||
editRequired: true,
|
||||
capitalize: true
|
||||
capitalize: false
|
||||
},
|
||||
description: {
|
||||
label: 'Description',
|
||||
|
||||
@ -22,7 +22,7 @@ angular.module('ProjectFormDefinition', [])
|
||||
type: 'text',
|
||||
addRequired: true,
|
||||
editRequired: true,
|
||||
capitalize: true
|
||||
capitalize: false
|
||||
},
|
||||
description: {
|
||||
label: 'Description',
|
||||
@ -96,16 +96,29 @@ angular.module('ProjectFormDefinition', [])
|
||||
label: 'SCM URL',
|
||||
type: 'text',
|
||||
ngShow: "scm_type !== '' && scm_type !== null",
|
||||
//awValidUrl: true,
|
||||
awRequiredWhen: { variable: "scm_type", init: "true" }
|
||||
/*awPopOver: "<p>Provide the URL to your SCM server. The value should begin with the protocol https:\/\/, http:\/\/ or ssh:\/\/.</p>" +
|
||||
"<p>Do not inlcude username or password values. Use the authentication settings instead.</p>" +
|
||||
"<p>Examples include:</p>" +
|
||||
"<p>ssh:\/\/github.com:ansible/ansible-examples.git</p>" +
|
||||
"<p>https:\/\/github.com/ansible/ansible-examples.git</p>",
|
||||
dataTitle: 'SCM URL',
|
||||
dataPlacement: 'right',
|
||||
dataContainer: 'body'*/
|
||||
awRequiredWhen: { variable: "scm_type", init: "true" },
|
||||
helpCollapse: [
|
||||
{ hdr: 'GIT URLs',
|
||||
content: '<p>Example URLs for GIT SCM include:</p><ul class=\"no-bullets\"><li>https://github.com/ansible/ansible.git</li>' +
|
||||
'<li>git@github.com:ansible/ansible.git</li><li>git://servername.example.com/ansible.git</li></ul>' +
|
||||
'<p><strong>Note:</strong> If using SSH protocol for github or bitbucket, enter in the SSH key only, ' +
|
||||
'do not enter a username (other than git) and password authentication is not supported. GIT read only ' +
|
||||
'protocol (git://) does not use username or password information.',
|
||||
show: "scm_type.value == 'git'" },
|
||||
{ hdr: 'SVN URLs',
|
||||
content: '<p>Example URLs for Subversion SCM include:</p>' +
|
||||
'<ul class=\"no-bullets\"><li>https://github.com/ansible/ansible</li><li>svn://servername.example.com/path</li>' +
|
||||
'<li>svn+ssh://servername.example.com/path</li></ul>',
|
||||
show: "scm_type.value == 'svn'" },
|
||||
{ hdr: 'Mercurial URLs',
|
||||
content: '<p>Example URLs for Mercurial SCM include:</p>' +
|
||||
'<ul class=\"no-bullets\"><li>https://bitbucket.org/username/project</li><li>ssh://hg@bitbucket.org/username/project</li>' +
|
||||
'<li>ssh://server.example.com/path</li></ul>' +
|
||||
'<p><strong>Note:</strong> Mercurial does not support password authentication for SSH. ' +
|
||||
'If applicable, add the username, password and key below. Do not put the username and key in the URL. ' +
|
||||
'If using Bitbucket and SSH, do not supply your Bitbucket username.',
|
||||
show: "scm_type.value == 'hg'" }
|
||||
]
|
||||
},
|
||||
scm_branch: {
|
||||
labelBind: "scmBranchLabel",
|
||||
|
||||
@ -25,7 +25,7 @@ angular.module('TeamFormDefinition', [])
|
||||
type: 'text',
|
||||
addRequired: true,
|
||||
editRequired: true,
|
||||
capitalize: true
|
||||
capitalize: false
|
||||
},
|
||||
description: {
|
||||
label: 'Description',
|
||||
|
||||
@ -14,10 +14,11 @@ angular.module('UserFormDefinition', [])
|
||||
editTitle: '{{ username }}', //Legend in edit mode
|
||||
name: 'user', //Form name attribute
|
||||
well: true, //Wrap the form with TB well
|
||||
collapse: true,
|
||||
/*collapse: true,
|
||||
collapseTitle: 'User Settings',
|
||||
collapseMode: 'edit',
|
||||
collapseOpen: true,
|
||||
collapseOpen: true,*/
|
||||
forceListeners: true,
|
||||
|
||||
fields: {
|
||||
first_name: {
|
||||
|
||||
@ -27,6 +27,7 @@ body {
|
||||
.pad-right-sm { padding-right: 10px; }
|
||||
.pad-left-lg { padding-left: 50px; }
|
||||
.normal-weight { font-weight: normal; }
|
||||
.no-bullets { list-style: none; }
|
||||
|
||||
/* Working... spinner */
|
||||
.spinny {
|
||||
@ -90,6 +91,19 @@ hr {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* help collapse */
|
||||
h4.panel-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel-heading:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-default>.panel-heading .collapse-help-icon {
|
||||
color: @grey;
|
||||
}
|
||||
|
||||
th.actions-column,
|
||||
td.actions {
|
||||
white-space: nowrap;
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
|
||||
angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
.factory('GenerateForm', [ '$location', '$cookieStore', '$compile', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon', 'Column',
|
||||
'NavigationLink',
|
||||
function($location, $cookieStore, $compile, SearchWidget, PaginateWidget, Attr, Icon, Column, NavigationLink) {
|
||||
'NavigationLink', 'HelpCollapse',
|
||||
function($location, $cookieStore, $compile, SearchWidget, PaginateWidget, Attr, Icon, Column, NavigationLink, HelpCollapse) {
|
||||
return {
|
||||
|
||||
setForm: function(form) {
|
||||
@ -22,6 +22,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
|
||||
icon: Icon,
|
||||
|
||||
accordion_count: 0,
|
||||
|
||||
has: function(key) {
|
||||
return (this.form[key] && this.form[key] != null && this.form[key] != undefined) ? true : false;
|
||||
},
|
||||
@ -197,6 +199,16 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.scope.accordionToggle = function(selector) {
|
||||
$(selector).collapse('toggle');
|
||||
if ( $(selector + '-icon').hasClass('icon-minus') ) {
|
||||
$(selector + '-icon').removeClass('icon-minus').addClass('icon-plus');
|
||||
}
|
||||
else {
|
||||
$(selector + '-icon').removeClass('icon-plus').addClass('icon-minus')
|
||||
}
|
||||
}
|
||||
|
||||
$('.jqui-accordion').each( function(index) {
|
||||
|
||||
var active = false;
|
||||
@ -289,6 +301,21 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
|
||||
navigationLink: NavigationLink,
|
||||
|
||||
|
||||
buildHelpCollapse: function(collapse_array) {
|
||||
var html = '';
|
||||
var params = {};
|
||||
for (var i=0; i < collapse_array.length; i++) {
|
||||
params.hdr = collapse_array[i].hdr;
|
||||
params.content = collapse_array[i].content;
|
||||
params.idx = this.accordion_count++;
|
||||
params.show = (collapse_array[i].show) ? collapse_array[i].show : null;
|
||||
html += HelpCollapse(params);
|
||||
}
|
||||
return html;
|
||||
},
|
||||
|
||||
|
||||
buildField: function(fld, field, options, form) {
|
||||
|
||||
function getFieldWidth() {
|
||||
@ -326,7 +353,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
x = "col-lg-2";
|
||||
}
|
||||
return x;
|
||||
}
|
||||
}
|
||||
|
||||
function buildCheckbox(field, fld) {
|
||||
var html='';
|
||||
@ -348,7 +375,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
html += (field.awPopOver) ? Attr(field, 'awPopOver', fld) : "";
|
||||
html += "</label>\n";
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
var html = '';
|
||||
|
||||
@ -456,36 +483,45 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
html += "<div class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld +
|
||||
".$error.awvalidurl\">URL must begin with ssh, http or https and may not contain '@'</div>\n";
|
||||
}
|
||||
|
||||
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
|
||||
|
||||
if (field.chkPass) {
|
||||
// complexity error
|
||||
html += "<div class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld +
|
||||
".$error.complexity\">Password must be stronger</div>\n";
|
||||
|
||||
// progress bar
|
||||
html += "<div class=\"pw-progress\">\n";
|
||||
html += "<div class=\"progress progress-striped\">\n";
|
||||
html += "<div id=\"progbar\" class=\"progress-bar\" role=\"progress\"></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "<div class=\"panel panel-default\">\n";
|
||||
html += "<div class=\"panel-heading\"><h5>Password Strength</h5></div>\n";
|
||||
html += "<div class=\"panel-body\">\n";
|
||||
html += "<p>A password with reasonable strength is required. As you type the password " +
|
||||
"a progress bar will measure the strength. Sufficient strength is reached when the bar turns green.</p>" +
|
||||
"<p>Password strength is judged using the following:</p>";
|
||||
html += "<ul class=\"pwddetails\">\n";
|
||||
html += "<li>Minimum 8 characters in length</li>\n";
|
||||
html += "<li>Contains a sufficient combination of the following items:\n";
|
||||
html += "<ul>\n";
|
||||
html += "<li>UPPERCASE letters</li>\n";
|
||||
html += "<li>Numbers</li>\n";
|
||||
html += "<li>Symbols _!@#$%^&*()</li>\n";
|
||||
html += "</ul>\n";
|
||||
html += "</li>\n";
|
||||
html += "</ul>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
// help panel
|
||||
html += HelpCollapse({
|
||||
hdr: 'Password Complexity',
|
||||
content: "<p>A password with reasonable strength is required. As you type the password " +
|
||||
"a progress bar will measure the strength. Sufficient strength is reached when the bar turns green.</p>" +
|
||||
"<p>Password strength is judged using the following:</p>" +
|
||||
"<ul class=\"pwddetails\">" +
|
||||
"<li>Minimum 8 characters in length</li>\n" +
|
||||
"<li>Contains a sufficient combination of the following items:\n" +
|
||||
"<ul>\n" +
|
||||
"<li>UPPERCASE letters</li>\n" +
|
||||
"<li>Numbers</li>\n" +
|
||||
"<li>Symbols _!@#$%^&*()</li>\n" +
|
||||
"</ul>\n" +
|
||||
"</li>\n" +
|
||||
"</ul>\n",
|
||||
idx: this.accordion_count++,
|
||||
show: null
|
||||
});
|
||||
html += "</div><!-- pw-progress -->\n";
|
||||
}
|
||||
|
||||
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
|
||||
|
||||
// Add help panel(s)
|
||||
html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
|
||||
|
||||
html += "</div>\n";
|
||||
}
|
||||
|
||||
@ -583,6 +619,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
this.form.name + '_form.' + fld + ".$error.required\">A value is required!</div>\n";
|
||||
}
|
||||
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
|
||||
|
||||
// Add help panel(s)
|
||||
html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
|
||||
|
||||
html += "</div>\n";
|
||||
}
|
||||
|
||||
|
||||
@ -296,6 +296,33 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
|
||||
}
|
||||
}])
|
||||
|
||||
.factory('HelpCollapse', function() {
|
||||
return function(params) {
|
||||
var hdr = params.hdr;
|
||||
var content = params.content;
|
||||
var show = params.show;
|
||||
var idx = params.idx;
|
||||
var html = '';
|
||||
html += "<div class=\"panel-group collapsible-help\" ";
|
||||
html += (show) ? "ng-show=\"" + show + "\"" : "";
|
||||
html += ">\n";
|
||||
html += "<div class=\"panel panel-default\">\n";
|
||||
html += "<div class=\"panel-heading\" ng-click=\"accordionToggle('#accordion" + idx + "')\">\n";
|
||||
html += "<h4 class=\"panel-title\">\n";
|
||||
html += "<i class=\"icon-question-sign help-collapse\"></i> " + hdr;
|
||||
html += "<i class=\"icon-minus pull-right collapse-help-icon\" id=\"accordion" + idx + "-icon\"></i>";
|
||||
html += "</h4>\n";
|
||||
html += "</div>\n";
|
||||
html += "<div id=\"accordion" + idx + "\" class=\"panel-collapse collapse in\">\n";
|
||||
html += "<div class=\"panel-body\">\n";
|
||||
html += content;
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
return html;
|
||||
}
|
||||
})
|
||||
|
||||
.factory('SearchWidget', function() {
|
||||
return function(params) {
|
||||
|
||||
@ -343,7 +343,7 @@
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright © 2013 AnsibleWorks, Inc. All rights reservied.<br />
|
||||
1482 East Valley Road, Suite 888 · Montecito, California 93108 · +1-800-825-0212<br />
|
||||
1482 East Valley Road, Suite 888 · Santa Barbara, California 93108 · +1-800-825-0212<br />
|
||||
<a href="http://www.ansibleworks.com" target="_blank">www.ansibleworks.com</a>
|
||||
</div>
|
||||
<div class="logo pull-right">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user