Added collapsible help panel to Credential detail page for Kind. Added auto collapse/expand based on whether or not a kind has been selected.

This commit is contained in:
Chris Houseknecht 2013-11-04 16:49:34 +00:00
parent b87c5e0a9b
commit 2a58d50cfa
3 changed files with 69 additions and 26 deletions

View File

@ -13,6 +13,7 @@ angular.module('CredentialFormDefinition', [])
editTitle: '{{ name }}', //Legend in edit mode
name: 'credential',
well: true,
forceListeners: true,
fields: {
name: {
@ -69,7 +70,24 @@ angular.module('CredentialFormDefinition', [])
ngOptions: 'kind.label for kind in credential_kind_options',
ngChange: 'kindChange()',
addRequired: true,
editRequired: true
editRequired: true,
helpCollapse: [
{ hdr: 'Credential Type',
content: '<p>Choose a type based on how this credential will be used: ' +
'<dl>\n' +
'<dt>AWS</dt>\n' +
'<dd>Access keys for running cloud inventory sync with Amazon Web Services.</dd>\n' +
'<dt>Machine</dt>\n' +
'<dd>Define SSH and Sudo access for playbooks. Used when submitting jobs to run playbooks ' +
'on a remote host.</dd>' +
'<dt>Rackspace</dt>\n' +
'<dd>Credentials for running cloud inventory sync with Rackspace.</dd>\n' +
'<dt>SCM</dt>\n' +
'<dd>Used on projects to clone and update local source code repositories ' +
' from a remote revision control system such as Git, SVN or Mercurial.</dd>\n' +
'</dl>\n'
}]
},
access_key: {
label: 'Access Key',

View File

@ -9,7 +9,7 @@
angular.module('CredentialsHelper', ['Utilities'])
.factory('KindChange', [ function() {
.factory('KindChange', [ 'Empty', function(Empty) {
return function(params) {
var scope = params.scope;
@ -22,21 +22,23 @@ angular.module('CredentialsHelper', ['Utilities'])
scope['rackspace_required'] = false;
scope['sshKeyDataLabel'] = 'SSH Private Key';
// Apply kind specific settings
switch(scope['kind'].value) {
case 'aws':
scope['aws_required'] = true;
break;
case 'rax':
scope['rackspace_required'] = true;
break;
case 'ssh':
scope['usernameLabel'] = 'SSH Username';
break;
case 'scm':
scope['sshKeyDataLabel'] = 'SCM Private Key';
break;
}
if (!Empty(scope['kind'])) {
// Apply kind specific settings
switch(scope['kind'].value) {
case 'aws':
scope['aws_required'] = true;
break;
case 'rax':
scope['rackspace_required'] = true;
break;
case 'ssh':
scope['usernameLabel'] = 'SSH Username';
break;
case 'scm':
scope['sshKeyDataLabel'] = 'SCM Private Key';
break;
}
}
// Reset all the field values related to Kind.
if (reset) {
@ -53,6 +55,20 @@ angular.module('CredentialsHelper', ['Utilities'])
scope['sudo_password_confirm'] = null;
}
// Collapse or open help widget based on whether scm value is selected
var collapse = $('#credential_kind').parent().find('.panel-collapse').first();
var id = collapse.attr('id');
if (!Empty(scope.kind) && scope.kind.value !== '') {
if ( $('#' + id + '-icon').hasClass('icon-minus') ) {
scope.accordionToggle('#' + id);
}
}
else {
if ( $('#' + id + '-icon').hasClass('icon-plus') ) {
scope.accordionToggle('#' + id);
}
}
}
}])

View File

@ -165,17 +165,26 @@ hr {
}
/* help collapse */
h4.panel-title {
font-size: 14px;
}
h4.panel-title {
font-size: 14px;
}
.panel-heading:hover {
cursor: pointer;
}
.panel-heading:hover {
cursor: pointer;
}
.panel-default>.panel-heading .collapse-help-icon {
color: @grey;
}
.panel-default>.panel-heading .collapse-help-icon {
color: @grey;
}
.collapsible-help {
dl {
margin-left: 15px;
}
dt {
margin-top: 15px;
}
}
th.actions-column,
td.actions {