Merge pull request #1973 from kensible/1940-formButtons

Confirm/proceed action on right, cancel on left

awx/ui/client/legacy-styles/forms.less

@@ -429,6 +429,10 @@ input[type='radio']:checked:before {
     height: 30px;
     display: flex;
     justify-content: flex-end;
+
+    button:last-of-type {
+        margin-left: 20px;
+    }
 }
 
 .Form-button{
@@ -443,7 +447,6 @@ input[type='radio']:checked:before {
 
 .Form-saveButton{
     background-color: @submit-button-bg;
-    margin-right: 20px;
     color: @submit-button-text;
     text-transform: uppercase;
     transition: background-color 0.2s;

awx/ui/client/src/adhoc/adhoc.form.js

@@ -124,18 +124,18 @@ export default function() {
         },
 
         buttons: {
-            launch: {
-                label: 'Save',
-                ngClick: 'launchJob()',
-                ngDisabled: true,
-                'class': 'Form-buttonDefault Form-button'
-            },
             reset: {
                 ngClick: 'formReset()',
                 ngDisabled: true,
                 label: 'Reset',
                 'class': 'Form-buttonDefault Form-button'
-            }
+            },
+            launch: {
+                label: 'Save',
+                ngClick: 'launchJob()',
+                ngDisabled: true,
+                'class': 'Form-buttonDefault Form-button'
+            }            
         },
 
         related: {}

awx/ui/client/src/dashboard/hosts/dashboard-hosts.form.js

@@ -65,13 +65,13 @@ export default function(){
             }
         },
         buttons: {
+            cancel: {
+                ngClick: 'formCancel()'
+            },
             save: {
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: "host_form.$invalid"//true          //Disable when $pristine or $invalid, optional and when can_edit = false, for permission reasons
-            },
+            }            
-            cancel: {
-                ngClick: 'formCancel()'
-            }
         }
     };
 }

awx/ui/client/src/forms/Credentials.js

@@ -406,13 +406,13 @@ export default
             },
 
             buttons: {
+                cancel: {
+                    ngClick: 'formCancel()',
+                },
                 save: {
                     label: 'Save',
                     ngClick: 'formSave()', //$scope.function to call on click, optional
                     ngDisabled: true //Disable when $pristine or $invalid, optional
-                },
-                cancel: {
-                    ngClick: 'formCancel()',
                 }
             },
 

awx/ui/client/src/forms/Groups.js

@@ -295,12 +295,12 @@ export default
             },
 
             buttons: {
-                save: {
-                    ngClick: 'saveGroup()'
-                },
                 cancel: {
                     ngClick: 'formCancel()'
-                }
+                },
+                save: {
+                    ngClick: 'saveGroup()'
+                }                
             },
 
             related: {

awx/ui/client/src/forms/HostGroups.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
  /**
  * @ngdoc function
  * @name forms.function:HostGroups
@@ -41,13 +41,13 @@ export default
             },
 
             buttons: { //for now always generates <button> tags
-                save: {
-                    ngClick: 'formSave()',
-                    ngDisabled: true
-                },
                 reset: {
                     ngClick: 'formReset()',
                     ngDisabled: true
+                },
+                save: {
+                    ngClick: 'formSave()',
+                    ngDisabled: true
                 }
             },
 

awx/ui/client/src/forms/Hosts.js

@@ -81,13 +81,13 @@ export default
             },
 
             buttons: {
-                save: {
-                    ngClick: 'formSave()',
-                    ngDisabled: true
-                },
                 cancel: {
                     ngClick: 'formCancel()',
                     ngDisabled: true
+                },
+                save: {
+                    ngClick: 'formSave()',
+                    ngDisabled: true
                 }
             },
 

awx/ui/client/src/forms/Inventories.js

@@ -68,12 +68,12 @@ export default
             },
 
             buttons: {
+                cancel: {
+                    ngClick: 'formCancel()'
+                },
                 save: {
                     ngClick: 'formSave()',
                     ngDisabled: true
-                },
-                cancel: {
-                    ngClick: 'formCancel()'
                 }
             },
 

awx/ui/client/src/forms/JobTemplates.js

@@ -320,12 +320,12 @@ export default
             },
 
             buttons: { //for now always generates <button> tags
+                cancel: {
+                    ngClick: 'formCancel()'
+                },
                 save: {
                     ngClick: 'formSave()',    //$scope.function to call on click, optional
                     ngDisabled: "job_templates_form.$invalid || can_edit!==true"//true          //Disable when $pristine or $invalid, optional and when can_edit = false, for permission reasons
-                },
-                cancel: {
-                    ngClick: 'formCancel()'
                 }
             },
 

awx/ui/client/src/forms/Organizations.js

@@ -36,13 +36,13 @@ export default
             },
 
             buttons: { //for now always generates <button> tags
+                cancel: {
+                    ngClick: 'formCancel()'
+                },
                 save: {
                     ngClick: 'formSave()', //$scope.function to call on click, optional
                     ngDisabled: true //Disable when $pristine or $invalid, optional
-                },
+                }                
-                cancel: {
-                    ngClick: 'formCancel()'
-                }
             },
 
             related: {

awx/ui/client/src/forms/Projects.js

@@ -221,12 +221,12 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
         },
 
         buttons: {
+            cancel: {
+                ngClick: 'formCancel()'
+            },
             save: {
                 ngClick: 'formSave()',
                 ngDisabled: true
-            },
-            cancel: {
-                ngClick: 'formCancel()'
             }
         },
 

awx/ui/client/src/forms/Teams.js

@@ -49,13 +49,13 @@ export default
             },
 
             buttons: {
+                cancel: {
+                    ngClick: 'formCancel()'
+                },
                 save: {
                     ngClick: 'formSave()',
                     ngDisabled: true
-                },
+                }                
-                cancel: {
-                    ngClick: 'formCancel()'
-                }
             },
 
             related: {

awx/ui/client/src/forms/Users.js

@@ -105,12 +105,12 @@ export default
             },
 
             buttons: {
+                cancel: {
+                    ngClick: 'formCancel()'
+                },
                 save: {
                     ngClick: 'formSave()',
                     ngDisabled: true
-                },
-                cancel: {
-                    ngClick: 'formCancel()'
                 }
             },
 

awx/ui/client/src/helpers/Groups.js

@@ -822,11 +822,11 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', listGenerator.name
                            // Create the modal
                            $('#group-modal-dialog').dialog({
                                buttons: {
-                                   'Cancel': function() {
-                                       modal_scope.cancelModal();
-                                   },
                                    'Save': function () {
                                        modal_scope.saveGroup();
+                                   },
+                                   'Cancel': function() {
+                                       modal_scope.cancelModal();
                                    }
                                },
                                modal: true,

awx/ui/client/src/inventory-scripts/inventory-scripts.form.js

@@ -62,12 +62,12 @@ export default function() {
         },
 
         buttons: { //for now always generates <button> tags
+            cancel: {
+                ngClick: 'formCancel()',
+            },
             save: {
                 ngClick: 'formSave()', //$scope.function to call on click, optional
                 ngDisabled: true //Disable when $pristine or $invalid, optional
-            },
-            cancel: {
-                ngClick: 'formCancel()',
             }
         }
     };

awx/ui/client/src/job-templates/survey-maker/shared/question-definition.form.js

@@ -304,17 +304,17 @@ export default
         }
     },
     buttons: {
-        submit_question: {
-            ngClick: 'submitQuestion($event)',
-            ngDisabled: true,
-            'class': 'btn btn-sm Form-saveButton',
-            label: '{{editQuestionIndex === null ? "ADD" : "UPDATE"}}'
-        },
         question_cancel : {
             label: 'Cancel',
             'class' : 'btn btn-default Form-cancelButton',
             ngClick: 'generateAddQuestionForm()',
             ngDisabled: 'survey_question_form.$pristine'
+        },
+        submit_question: {
+            ngClick: 'submitQuestion($event)',
+            ngDisabled: true,
+            'class': 'btn btn-sm Form-saveButton',
+            label: '{{editQuestionIndex === null ? "ADD" : "UPDATE"}}'
         }
     }
 

awx/ui/client/src/lookup/lookup.factory.js

@@ -145,6 +145,13 @@ export default ['Rest', 'ProcessErrors', 'generateList',
 
                 // Show pop-up
                 buttons = [{
+                    label: "Cancel",
+                    "class": "btn btn-default",
+                    "id": "lookup-cancel-button",
+                    onClick: function() {
+                        $('#LookupModal-dialog').dialog('close');
+                    }
+                }, {
                     label: "Save",
                     onClick: function() {
                         scope.selectAction();
@@ -152,13 +159,6 @@ export default ['Rest', 'ProcessErrors', 'generateList',
                     //icon: "fa-check",
                     "class": "btn btn-primary",
                     "id": "lookup-save-button"
-                }, {
-                    label: "Cancel",
-                    "class": "btn btn-default",
-                    "id": "lookup-cancel-button",
-                    onClick: function() {
-                        $('#LookupModal-dialog').dialog('close');
-                    }
                 }];
 
                 if (scope.removeModalReady) {

awx/ui/client/src/management-jobs/card/card.controller.js

@@ -109,6 +109,14 @@ export default
                             fieldScope.granularity_keep_amount = 1;
                         },
                         buttons: [
+                            {
+                                "label": "Cancel",
+                                "onClick": function() {
+                                    $(this).dialog('close');
+                                },
+                                "class": "btn btn-default",
+                                "id": "prompt-for-days-facts-cancel"
+                            },
                             {
                                 "label": "Launch",
                                 "onClick": function() {
@@ -134,15 +142,8 @@ export default
                                 },
                                 "class": "btn btn-primary",
                                 "id": "prompt-for-days-facts-launch",
-                            },
+                            }
-                            {
+                            ]
-                                "label": "Cancel",
-                                "onClick": function() {
-                                    $(this).dialog('close');
-                                },
-                                "class": "btn btn-default",
-                                "id": "prompt-for-days-facts-cancel"
-                        }]
                     });
 
                     if (scope.removePromptForDays) {
@@ -198,6 +199,15 @@ export default
                                 scope.prompt_for_days_form.$invalid = false;
                             },
                             buttons: [
+                                {
+                                    "label": "Cancel",
+                                    "onClick": function() {
+                                        $(this).dialog('close');
+
+                                    },
+                                    "class": "btn btn-default",
+                                    "id": "prompt-for-days-cancel"
+                                },
                             {
                                 "label": "Launch",
                                 "onClick": function() {
@@ -220,16 +230,8 @@ export default
                                 },
                                 "class": "btn btn-primary",
                                 "id": "prompt-for-days-launch"
-                            },
+                            }
-                            {
+                            ]
-                                "label": "Cancel",
-                                "onClick": function() {
-                                    $(this).dialog('close');
-
-                                },
-                                "class": "btn btn-default",
-                                "id": "prompt-for-days-cancel"
-                            }]
                         });
 
                         if (scope.removePromptForDays) {

awx/ui/client/src/notifications/notificationTemplates.form.js

@@ -344,12 +344,12 @@ export default function() {
         },
 
         buttons: { //for now always generates <button> tags
+            cancel: {
+                ngClick: 'formCancel()',
+            },
             save: {
                 ngClick: 'formSave()', //$scope.function to call on click, optional
                 ngDisabled: true //Disable when $pristine or $invalid, optional
-            },
-            cancel: {
-                ngClick: 'formCancel()',
             }
         }
     };

awx/ui/client/src/permissions/shared/permissions.form.js

@@ -131,13 +131,13 @@ export default function() {
         },
 
         buttons: {
-            save: {
-                ngClick: 'formSave()',
-                ngDisabled: true
-            },
             reset: {
                 ngClick: 'formReset()',
                 ngDisabled: true
+            },
+            save: {
+                ngClick: 'formSave()',
+                ngDisabled: true
             }
         },