AC-171 First iteration of changes.

awx/ui/static/js/forms/Inventories.js

@@ -61,12 +61,16 @@ angular.module('InventoryFormDefinition', [])
                 realName: 'variables',
                 label: 'Variables',
                 type: 'textarea',
+                'class': 'span12',
                 addRequired: false,
                 editRequird: false, 
                 rows: 10,
-                "class": "modal-input-xlarge",
                 "default": "---",
-                awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
+                awPopOver: "<p>Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
                     '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
                     '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
                 dataTitle: 'Inventory Variables',

awx/ui/static/js/lists/Admins.js

@@ -14,9 +14,11 @@ angular.module('AdminListDefinition', [])
         iterator: 'admin',
         selectTitle: 'Add Administrators',
         editTitle: 'Admins',
-        selectInstructions: 'Click on a row to select it. Click the Finished button when done.', 
+        selectInstructions: '<p>Select existing users by clicking each user or checking the related checkbox. When finished, click the blue ' +
+            'Select button, located bottom right.</p>', 
         base: 'users',
         index: true,
+        hover: true, 
         
         fields: {
             username: {

awx/ui/static/js/lists/Credentials.js

@@ -14,7 +14,8 @@ angular.module('CredentialsListDefinition', [])
         iterator: 'credential',
         selectTitle: 'Add Credentials',
         editTitle: 'Credentials',
-        selectInstructions: 'Check the Select checkbox next to each credential to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new user.', 
+        selectInstructions: '<p>Select existing credentials by clicking each credential or checking the related checkbox. When finished, click the blue ' +
+            'Select button, located bottom right.</p> <p>Create a brand new credential by clicking the green <i class=\"icon-plus\"></i>Create New button.</p>',
         editInstructions: 'Create a new credential from either the Teams tab or the Users tab. Teams and Users each have an associated set of Credentials.',
         index: true,
         hover: true,
@@ -44,7 +45,7 @@ angular.module('CredentialsListDefinition', [])
         actions: {
             add: {
                 icon: 'icon-plus',
-                label: 'Add',
+                label: 'Create New',
                 mode: 'all',                         // One of: edit, select, all
                 ngClick: 'addCredential()',
                 basePaths: ['teams','users'],        // base path must be in list, or action not available

awx/ui/static/js/lists/Inventories.js

@@ -49,7 +49,7 @@ angular.module('InventoriesListDefinition', [])
         
         actions: {
             add: {
-                label: 'Add',
+                label: 'Create New',
                 icon: 'icon-plus',
                 mode: 'all',             // One of: edit, select, all
                 ngClick: 'addInventory()',

awx/ui/static/js/lists/JobTemplates.js

@@ -30,7 +30,7 @@ angular.module('JobTemplatesListDefinition', [])
         
         actions: {
             add: {
-                label: 'Add',
+                label: 'Create New',
                 icon: 'icon-plus',
                 mode: 'all',                // One of: edit, select, all
                 ngClick: 'addJobTemplate()',

awx/ui/static/js/lists/Organizations.js

@@ -29,7 +29,7 @@ angular.module('OrganizationListDefinition', [])
         
         actions: {
             add: {
-                label: 'Add',
+                label: 'Create New',
                 icon: 'icon-plus',
                 mode: 'all',                  // One of: edit, select, all
                 ngClick: 'addOrganization()',

awx/ui/static/js/lists/Projects.js

@@ -14,7 +14,8 @@ angular.module('ProjectsListDefinition', [])
         iterator: 'project',
         selectTitle: 'Add Project',
         editTitle: '{{ name }}',
-        selectInstructions: 'Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new row.', 
+        selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
+            'Select button, located bottom right.</p> <p>Create a brand new project by clicking the green <i class=\"icon-plus\"></i>Create New button.</p>', 
         index: true,
         hover: true, 
         
@@ -30,7 +31,7 @@ angular.module('ProjectsListDefinition', [])
         
         actions: {
             add: {
-                label: 'Add',
+                label: 'Create New',
                 icon: 'icon-plus',
                 mode: 'all',             // One of: edit, select, all
                 ngClick: 'addProject()',

awx/ui/static/js/lists/Teams.js

@@ -36,7 +36,7 @@ angular.module('TeamsListDefinition', [])
         
         actions: {
             add: {
-                label: 'Add',
+                label: 'Create New',
                 icon: 'icon-plus',
                 mode: 'all',             // One of: edit, select, all
                 ngClick: 'addTeam()',

awx/ui/static/js/lists/Users.js

@@ -14,7 +14,9 @@ angular.module('UserListDefinition', [])
         iterator: 'user',
         selectTitle: 'Add Users',
         editTitle: 'Users',
-        selectInstructions: 'Check the Select checkbox next to each user to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new user.', 
+        selectInstructions: '<p>Select existing users by clicking each user or checking the related checkbox. When finished, click the blue ' +
+            'Select button, located bottom right.</p> <p>When available, a brand new user can be created by clicking the green ' +
+            '<i class=\"icon-plus\"></i>Create New button.</p>', 
         index: true,
         hover: true, 
         
@@ -33,7 +35,7 @@ angular.module('UserListDefinition', [])
         
         actions: {
             add: {
-                label: 'Add',
+                label: 'Create New',
                 icon: 'icon-plus',
                 mode: 'all',                      // One of: edit, select, all
                 ngClick: 'addUser()',

awx/ui/static/lib/ansible/list-generator.js

@@ -26,7 +26,27 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        },
 
     hide: function() {
-          $('#lookup-modal').modal('hide');
+       $('#lookup-modal').modal('hide');
+       },
+
+    button: function(btn) {
+       // pass in button object, get back html
+       var html = '';
+       html += "<button " + this.attr(btn, 'ngClick') + "class=\"btn";
+       html += (btn['class']) ?  " " + btn['class'] : " btn-small";
+       html += "\" ";
+       html += (btn.ngHide) ? this.attr(btn,'ngHide') : "";
+       html += (btn.awToolTip) ? this.attr(btn,'awToolTip') : "";
+       html += (btn.awToolTip && btn.dataPlacement == undefined) ? "data-placement=\"top\" " : "";
+       html += (btn.awPopOver) ? "aw-pop-over=\"" + 
+           btn.awPopOver.replace(/[\'\"]/g, '&quot;') + "\" " : "";
+       html += (btn.dataPlacement) ? this.attr(btn, 'dataPlacement') : "";
+       html += (btn.dataContainer) ? this.attr(btn, 'dataContainer') : "";
+       html += (btn.dataTitle) ? this.attr(btn, 'dataTitle') : "";
+       html += " >" + this.attr(btn,'icon');
+       html += (btn.label) ? " " + btn.label : ""; 
+       html += "</button> ";
+       return html;
        },
  
     inject: function(list, options) {
@@ -91,14 +111,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
            html += "</li>\n</ul>\n</div>\n";
        }
        
-       //select instructions
+       if (options.mode == 'edit' && list.editInstructions) {
-       if (options.mode == 'select' && list.selectInstructions) {
-          html += "<div class=\"alert alert-info alert-block\">\n";
-          html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
-          html += "<strong>Hint: </strong>" + list.selectInstructions + "\n";
-          html += "</div>\n"
-       }
-       else if (options.mode == 'edit' && list.editInstructions) {
           html += "<div class=\"alert alert-info alert-block\">\n";
           html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
           html += "<strong>Hint: </strong>" + list.editInstructions + "\n"; 
@@ -124,41 +137,34 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
               if (list.actions[action].mode == 'all' || list.actions[action].mode == options.mode) {
                  if ( (list.actions[action].basePaths == undefined) || 
                       (list.actions[action].basePaths && list.actions[action].basePaths.indexOf(base) > -1) ) {
-                    html += "<button " + this.attr(list.actions[action], 'ngClick') + "class=\"btn";
+                    html += this.button(list.actions[action]);
-                    html += (list.actions[action]['class']) ?  " " + list.actions[action]['class'] : " btn-small";
-                    html += "\" ";
-                    html += (list.actions[action].ngHide) ? this.attr(list.actions[action],'ngHide') : "";
-                    html += (list.actions[action].awToolTip) ? this.attr(list.actions[action],'awToolTip') : "";
-                    html += (list.actions[action].awToolTip && list.actions[action].dataPlacement == undefined) ? "data-placement=\"top\" " : "";
-                    html += (list.actions[action].awPopOver) ? "aw-pop-over=\"" + 
-                        list.actions[action].awPopOver.replace(/[\'\"]/g, '&quot;') + "\" " : "";
-                    html += (list.actions[action].dataPlacement) ? this.attr(list.actions[action], 'dataPlacement') : "";
-                    html += (list.actions[action].dataContainer) ? this.attr(list.actions[action], 'dataContainer') : "";
-                    html += (list.actions[action].dataTitle) ? this.attr(list.actions[action], 'dataTitle') : "";
-                    html += " >" + this.attr(list.actions[action],'icon');
-                    html += (list.actions[action].label) ? " " + list.actions[action].label : ""; 
-                    html += "</button> ";
                  }
               }
           }
-          if (options.mode == 'select' && (options.selectButton == undefined || options.selectButton == true)) {
+          
-             html += " <button class=\"btn btn-small btn-success\" aw-tool-tip=\"Complete your selection\" " +
+          //select instructions
-                 "ng-click=\"finishSelection()\"><i class=\"icon-ok\"></i> Finished</button>\n";
+          if (options.mode == 'select' && list.selectInstructions) {
+             var btn = {
+                 awPopOver: list.selectInstructions,
+                 dataPlacement: 'left',
+                 dataContainer: '.container',
+                 icon: "icon-question-sign",
+                 'class': 'btn-small btn-info',
+                 awToolTip: 'Click for help',
+                 dataTitle: 'Help',
+                 iconSize: 'large'
+                 };
+             html += this.button(btn);
           }
+          
           html += "</div>\n";
        }
 
        // table header row
        html += "<table class=\"table table-condensed"
        html += (list['class']) ? " " + list['class'] : "";
-
+       html += (options.mode == 'lookup' || options.id) ? ' table-hover-inverse' : '';
-       // Add the correct hover class
+       html += (list.hover) ? ' table-hover' : '';
-       if (options.id) {
-          html += " table-hover-inverse";
-       }
-       else if (options.mode == 'lookup' || list.hover) {
-          html += " table-hover";
-       }
        
        html += "\">\n";
        html += "<thead>\n";
@@ -237,16 +243,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
           // Row level actions
           html += "<td class=\"actions\">";
           for (action in list.fieldActions) {
-              html += "<button class=\"btn"; 
+              html += this.button(list.fieldActions[action]);
-              html += (list.fieldActions[action]['class']) ? " " + list.fieldActions[action]['class'] : " btn-small";
-              html += "\" " + this.attr(list.fieldActions[action],'ngClick');
-              html += (list.fieldActions[action].ngShow) ? this.attr(list.fieldActions[action],'ngShow') : "";
-              html += (list.fieldActions[action].awToolTip) ? this.attr(list.fieldActions[action],'awToolTip') : "";
-              html += (list.fieldActions[action].ngDisabled) ? this.attr(list.fieldActions[action],'ngDisabled') : ""
-              html +=">";
-              html += (list.fieldActions[action].icon) ? this.icon(list.fieldActions[action].icon) : "";
-              html += (list.fieldActions[action].label) ? " " + list.fieldActions[action].label : "";
-              html +="</button> ";
           }
           html += "</td>";
        }
@@ -266,6 +263,13 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        html += "</tbody>\n";
        html += "</table>\n";
 
+       if (options.mode == 'select' && (options.selectButton == undefined || options.selectButton == true)) {
+          html += "<div class=\"navigation-buttons\">\n";
+          html += " <button class=\"btn btn-small btn-primary pull-right\" aw-tool-tip=\"Complete your selection\" " +
+              "ng-click=\"finishSelection()\" ng-disabled=\"selected.length == 0\"><i class=\"icon-check\"></i> Select</button>\n";
+          html += "</div>\n";
+       }
+       
        if (options.mode != 'lookup' && (list.well == undefined || list.well == 'true')) {
           html += "</div>\n";    //well
        }