AC-175 change the edit button to a view button. Edit button is now labeled 'Details' and the color is grey rather than green. Applied the color change to 'Hosts' and 'Events' button as well, so that we're consistent. Changes applied to Jobs, Job Events, and Job Detail pages.

awx/ui/static/css/ansible-ui.css

@@ -24,8 +24,42 @@
     border-color: #e3e3e3;
  }
 
+
+/* Attempt to make button heights consistent. For some reason success, info, etc. are
+   taller than plain .btn */
+ .btn-success, .btn-danger, .btn-info, .btn-primary {
+    padding-top: 1px;
+    padding-bottom: 1px;
+ }
+
+ .btn {
+    padding-left: 5px;
+    padding-right: 5px;
+    min-width: 28px;
+ }
+
+ .modal-footer .btn-success, 
+ .modal-footer .btn-danger, 
+ .modal-footer .btn-info, 
+ .modal-footer .btn-primary {
+    padding-top: 3px;
+    padding-bottom: 4px;
+ }
+
+ .modal-footer .btn {
+    padding-left: 10px;
+    padding-right: 10px;
+ }
+
+/* End btn heights */
+
+
+ .icon-plus {
+    font-size: 10px;
+ }
+
  .container-fluid {
-    min-height: 700px ;
+    min-height: 700px;
  }
 
  .navbar-fixed-top .container {

awx/ui/static/js/forms/Jobs.js

@@ -212,7 +212,7 @@ angular.module('JobFormDefinition', [])
                 label: 'Hosts',
                 icon: 'icon-th-large',
                 ngClick: "jobSummary()",
-                "class": 'btn-info btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'View host summary',
                 mode: 'all'
                 },
@@ -220,7 +220,7 @@ angular.module('JobFormDefinition', [])
                 label: 'Events',
                 icon: 'icon-list-ul',
                 ngClick: "jobEvents()",
-                "class": 'btn-info btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'Edit job events',
                 mode: 'all'        
                 }

awx/ui/static/js/lists/JobEvents.js

@@ -62,10 +62,10 @@ angular.module('JobEventsListDefinition', [])
                 mode: 'all'
                 },
             edit: {
-                label: 'Edit',
+                label: 'Details',
                 ngClick: "jobDetails()",
-                icon: 'icon-edit',
+                icon: 'icon-zoom-in',
-                "class": 'btn-small btn-success',
+                "class": 'btn btn-small',
                 awToolTip: 'Edit job details',
                 mode: 'all'
                 },
@@ -73,7 +73,7 @@ angular.module('JobEventsListDefinition', [])
                 label: 'Hosts',
                 icon: 'icon-th-large',
                 ngClick: "jobSummary()",
-                "class": 'btn-info btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'View host summary',
                 mode: 'all'
                 }

awx/ui/static/js/lists/JobHosts.js

@@ -57,10 +57,10 @@ angular.module('JobHostDefinition', [])
                 mode: 'all'
                 },
             edit: {
-                label: 'Edit',
+                label: 'Details',
                 icon: 'icon-edit',
                 ngClick: "jobDetails()",
-                "class": 'btn-success btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'Edit job details',
                 mode: 'all'
                 },
@@ -68,7 +68,7 @@ angular.module('JobHostDefinition', [])
                 label: 'Events',
                 icon: 'icon-list-ul',
                 ngClick: "jobEvents()",
-                "class": 'btn-info btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'View job events',
                 mode: 'all'            
                 }

awx/ui/static/js/lists/Jobs.js

@@ -69,7 +69,7 @@ angular.module('JobsListDefinition', [])
                 label: 'Hosts',
                 icon: 'icon-th-large',
                 ngClick: "viewSummary(\{{ job.id \}\}, '\{\{ job.name \}\}')",
-                "class": 'btn-info btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'View host summary',
                 ngDisabled: "job.status == 'new'"
                 },
@@ -78,16 +78,16 @@ angular.module('JobsListDefinition', [])
                 icon: 'icon-list-ul',
                 mode: 'all',             
                 ngClick: "viewEvents(\{{ job.id \}\}, '\{\{ job.name \}\}')",
-                "class": 'btn-info btn-small',
+                "class": 'btn btn-small',
                 awToolTip: 'View events',
                 ngDisabled: "job.status == 'new'"
                 },
             edit: {
-                icon: 'icon-edit',
+                label: 'Details',
-                label: 'Edit',
+                icon: 'icon-zoom-in',
                 ngClick: "editJob(\{\{ job.id \}\}, '\{\{ job.name \}\}')",
-                "class": 'btn-success btn-small',
+                "class": 'btn btn-small',
-                awToolTip: 'Edit job details'
+                awToolTip: 'View job details'
                 },
             rerun: {
                 icon: 'icon-retweet',

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

@@ -576,7 +576,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              var act;
              for (action in this.form.statusActions) {
                  act = this.form.statusActions[action];
-                 html += "<button " + this.attr(act, 'ngClick') + "class=\"btn";
+                 html += "<button " + this.attr(act, 'ngClick') + "class=\"btn btn-small";
                  html += (act['class']) ? " " + act['class'] : "";
                  html += "\" ";
                  html += (act.awToolTip) ? this.attr(act,'awToolTip') : "";