From 460ec55cee66a64ecd6bf050fd1985b8770bc826 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Thu, 12 Sep 2013 16:57:47 -0400 Subject: [PATCH] AC-457 dynamic help panel widget --- awx/ui/static/js/forms/Organizations.js | 2 +- awx/ui/static/js/forms/Permissions.js | 2 +- awx/ui/static/js/forms/Projects.js | 35 +++++--- awx/ui/static/js/forms/Teams.js | 2 +- awx/ui/static/js/forms/Users.js | 5 +- awx/ui/static/less/ansible-ui.less | 14 +++ awx/ui/static/lib/ansible/form-generator.js | 90 +++++++++++++------ .../static/lib/ansible/generator-helpers.js | 27 ++++++ awx/ui/templates/ui/index.html | 2 +- 9 files changed, 137 insertions(+), 42 deletions(-) diff --git a/awx/ui/static/js/forms/Organizations.js b/awx/ui/static/js/forms/Organizations.js index e0cc15b405..ff4a183e63 100644 --- a/awx/ui/static/js/forms/Organizations.js +++ b/awx/ui/static/js/forms/Organizations.js @@ -21,7 +21,7 @@ angular.module('OrganizationFormDefinition', []) type: 'text', addRequired: true, editRequired: true, - capitalize: true + capitalize: false }, description: { label: 'Description', diff --git a/awx/ui/static/js/forms/Permissions.js b/awx/ui/static/js/forms/Permissions.js index 0fe40d6c99..0a6bea2c1f 100644 --- a/awx/ui/static/js/forms/Permissions.js +++ b/awx/ui/static/js/forms/Permissions.js @@ -28,7 +28,7 @@ angular.module('PermissionFormDefinition', []) type: 'text', addRequired: true, editRequired: true, - capitalize: true + capitalize: false }, description: { label: 'Description', diff --git a/awx/ui/static/js/forms/Projects.js b/awx/ui/static/js/forms/Projects.js index 274ebb48e2..549153e586 100644 --- a/awx/ui/static/js/forms/Projects.js +++ b/awx/ui/static/js/forms/Projects.js @@ -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: "

Provide the URL to your SCM server. The value should begin with the protocol https:\/\/, http:\/\/ or ssh:\/\/.

" + - "

Do not inlcude username or password values. Use the authentication settings instead.

" + - "

Examples include:

" + - "

ssh:\/\/github.com:ansible/ansible-examples.git

" + - "

https:\/\/github.com/ansible/ansible-examples.git

", - dataTitle: 'SCM URL', - dataPlacement: 'right', - dataContainer: 'body'*/ + awRequiredWhen: { variable: "scm_type", init: "true" }, + helpCollapse: [ + { hdr: 'GIT URLs', + content: '

Example URLs for GIT SCM include:

' + + '

Note: 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: '

Example URLs for Subversion SCM include:

' + + '', + show: "scm_type.value == 'svn'" }, + { hdr: 'Mercurial URLs', + content: '

Example URLs for Mercurial SCM include:

' + + '' + + '

Note: 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", diff --git a/awx/ui/static/js/forms/Teams.js b/awx/ui/static/js/forms/Teams.js index f791d3449e..d2ae7d2696 100644 --- a/awx/ui/static/js/forms/Teams.js +++ b/awx/ui/static/js/forms/Teams.js @@ -25,7 +25,7 @@ angular.module('TeamFormDefinition', []) type: 'text', addRequired: true, editRequired: true, - capitalize: true + capitalize: false }, description: { label: 'Description', diff --git a/awx/ui/static/js/forms/Users.js b/awx/ui/static/js/forms/Users.js index ccbafe2993..25cbf7a86e 100644 --- a/awx/ui/static/js/forms/Users.js +++ b/awx/ui/static/js/forms/Users.js @@ -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: { diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 6eb88905aa..531c5ef7f9 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -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; diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index 02099a299e..fe7fae4f64 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/awx/ui/static/lib/ansible/form-generator.js @@ -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 += "\n"; return html; - } + } var html = ''; @@ -456,36 +483,45 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) html += "

URL must begin with ssh, http or https and may not contain '@'
\n"; } + + html += "
\n"; if (field.chkPass) { + // complexity error html += "
Password must be stronger
\n"; + + // progress bar html += "
\n"; html += "
\n"; html += "
\n"; html += "
\n"; - html += "
\n"; - html += "
Password Strength
\n"; - html += "
\n"; - html += "

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.

" + - "

Password strength is judged using the following:

"; - html += "
    \n"; - html += "
  • Minimum 8 characters in length
    • \n"; - html += "
  • Contains a sufficient combination of the following items:\n"; - html += "
      \n"; - html += "
    • UPPERCASE letters
      • \n"; - html += "
    • Numbers
      • \n"; - html += "
    • Symbols _!@#$%^&*()
      • \n"; - html += "
    \n"; - html += "
    • \n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; + + // help panel + html += HelpCollapse({ + hdr: 'Password Complexity', + content: "

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.

" + + "

Password strength is judged using the following:

" + + "\n", + idx: this.accordion_count++, + show: null + }); + html += "\n"; } - - html += "
\n"; + + // Add help panel(s) + html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : ''; + html += "\n"; } @@ -583,6 +619,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) this.form.name + '_form.' + fld + ".$error.required\">A value is required!\n"; } html += "
\n"; + + // Add help panel(s) + html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : ''; + html += "\n"; } diff --git a/awx/ui/static/lib/ansible/generator-helpers.js b/awx/ui/static/lib/ansible/generator-helpers.js index f7c7d739b3..9540dca5eb 100644 --- a/awx/ui/static/lib/ansible/generator-helpers.js +++ b/awx/ui/static/lib/ansible/generator-helpers.js @@ -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 += "
\n"; + html += "
\n"; + html += "

\n"; + html += " " + hdr; + html += ""; + html += "

\n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += content; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += "\n"; + return html; + } + }) .factory('SearchWidget', function() { return function(params) { diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 906a0abbee..8e554f8d35 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -343,7 +343,7 @@
Copyright © 2013 AnsibleWorks, Inc. All rights reservied.
- 1482 East Valley Road, Suite 888 · Montecito, California 93108 · +1-800-825-0212
+ 1482 East Valley Road, Suite 888 · Santa Barbara, California 93108 · +1-800-825-0212
www.ansibleworks.com