Various UX audit fixes

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

@@ -187,7 +187,7 @@
 
 .Form-formGroup--checkbox{
     display: flex;
-    align-items: flex-end;
+    margin-top: 10px;
 }
 
 .Form-checkbox--stacked {

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

@@ -46,7 +46,6 @@ export default function() {
             script: {
                 label: 'Custom Script',
                 type: 'textarea',
-                hintText: "Drag and drop an inventory script on the field below",
                 class: 'Form-formGroup--fullWidth',
                 elementClass: 'Form-monospace',
                 addRequired: true,

awx/ui/client/src/job-detail/host-event/host-event-modal.partial.html

@@ -12,10 +12,10 @@
 			</div>
 			<div class="HostEvent-nav">
 				<!-- view navigation buttons -->
-				<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.details')}">Details</button>
+				<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.details')}">Details</button>
-				<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
+				<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
-				<button ng-if="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stdout')}">Standard Out</button>
+				<button ng-if="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stdout')}">Standard Out</button>
-				<button ng-if="stderr" ui-sref="jobDetail.host-event.stderr" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stderr')}">Standard Error</button>
+				<button ng-if="stderr" ui-sref="jobDetail.host-event.stderr" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stderr')}">Standard Error</button>
 
 			</div>
 			<div class="HostEvent-body">
@@ -26,9 +26,9 @@
 			<!-- controls -->
 			<div class="HostEvent-controls">
 				<button ng-disabled="!showPrev()" ng-click="goPrev()"
-				class="btn btn-sm btn-default">Prev Host</button>
+				class="btn btn-sm btn-default HostEvent-button">Prev Host</button>
-				<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default">Next Host</button>
+				<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default HostEvent-button">Next Host</button>
-				<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close" ng-show="true" >Close</button>
+				<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close HostEvent-button" ng-show="true" >Close</button>
 			</div>
 		</div>
 		</div>

awx/ui/client/src/job-detail/host-event/host-event.block.less

@@ -2,6 +2,16 @@
 @import "awx/ui/client/src/shared/branding/colors.default.less";
 @import "awx/ui/client/src/shared/layouts/one-plus-two.less";
 
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
 @media screen and (min-width: 768px){
 	.HostEvent .modal-dialog{
 		width: 700px;
@@ -16,16 +26,42 @@
     padding-left: 15px;
     padding-right: 15px;
  	background-color: @default-link;
+	border-color: @default-link;
  	&:hover{
  		background-color: @default-link-hov;
+		border-color: @default-link-hov;
  	}
 }
 .HostEvent-body{
 	margin-bottom: 10px;
 }
+.HostEvent-tab {
+    color: @btn-txt;
+    background-color: @btn-bg;
+    font-size: 12px;
+    border: 1px solid @btn-bord;
+    height: 30px;
+    border-radius: 5px;
+    margin-right: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    transition: background-color 0.2s;
+    text-transform: uppercase;
+    text-align: center;
+    white-space: nowrap;
+    .noselect;
+}
+.HostEvent-tab:hover {
+    color: @btn-txt;
+    background-color: @btn-bg-hov;
+    cursor: pointer;
+}
 .HostEvent-tab--selected{
-    background-color: #D7D7D7 !important;
+	color: @btn-txt-sel!important;
-    border-color: #D7D7D7 !important;
+    background-color: @default-icon!important;
+    border-color: @default-icon!important;
 }
 .HostEvent-view--container{
 	width: 100%;
@@ -106,3 +142,6 @@
 		align-self: flex-end;
 	}
 }
+.HostEvent-button:disabled {
+	pointer-events: all!important;
+}

awx/ui/client/src/job-detail/host-events/host-events.block.less

@@ -7,18 +7,20 @@
 .HostEvents .modal-footer{
 	border: 0;
 	margin-top: 0px;
-	padding-top: 5px;
+	padding: 0px 20px 20px 20px;
 }
 button.HostEvents-close{
 	width: 70px;
-    color: #FFFFFF;
+    color: #FFFFFF!important;
     text-transform: uppercase;
     padding-left: 15px;
     padding-right: 15px;
  	background-color: @default-link;
- 	&:hover{
+	border-color: @default-link;
- 		background-color: @default-link-hov;
+	&:hover{
- 	}
+  		background-color: @default-link-hov;
+ 		border-color: @default-link-hov;
+  	}
 }
 .HostEvents-status--ok{
 	color: @green;

awx/ui/client/src/notifications/add/add.controller.js

@@ -88,8 +88,19 @@ export default
             $scope.typeChange = function () {
                 for(var fld in form.fields){
                     if(form.fields[fld] && form.fields[fld].subForm){
-                        $scope[fld] = null;
+                        if(form.fields[fld].type === 'checkbox_group' && form.fields[fld].fields) {
-                        $scope.notification_template_form[fld].$setPristine();
+                            // Need to loop across the groups fields to null them out
+                            for(var i=0; i<form.fields[fld].fields.length; i++) {
+                                // Pull the name out of the object (array of objects)
+                                var subFldName = form.fields[fld].fields[i].name;
+                                $scope[subFldName] = null;
+                                $scope.notification_template_form[subFldName].$setPristine();
+                            }
+                        }
+                        else {
+                            $scope[fld] = null;
+                            $scope.notification_template_form[fld].$setPristine();
+                        }
                     }
                 }
 
@@ -145,6 +156,14 @@ export default
                     .filter(i => (form.fields[i].ngShow &&  form.fields[i].ngShow.indexOf(v) > -1))
                     .map(i => [i, processValue($scope[i], i , form.fields[i])]));
 
+                delete params.notification_configuration.checkbox_group;
+
+                for(var j = 0; j < form.fields.checkbox_group.fields.length; j++) {
+                    if(form.fields.checkbox_group.fields[j].ngShow && form.fields.checkbox_group.fields[j].ngShow.indexOf(v) > -1) {
+                        params.notification_configuration[form.fields.checkbox_group.fields[j].name] = Boolean($scope[form.fields.checkbox_group.fields[j].name]);
+                    }
+                }
+
                 Wait('start');
                 Rest.setUrl(url);
                 Rest.post(params)

awx/ui/client/src/notifications/edit/edit.controller.js

@@ -54,25 +54,36 @@ export default
                                     master[fld] = data[fld];
                                 }
 
-                                if(data.notification_configuration[fld]){
+                                if(form.fields[fld].type === 'checkbox_group') {
-                                    $scope[fld] = data.notification_configuration[fld];
+                                    // Loop across the group and put the child data on scope
-                                    master[fld] = data.notification_configuration[fld];
+                                    for(var j=0; j<form.fields[fld].fields.length; j++) {
-
+                                        if(data.notification_configuration[form.fields[fld].fields[j].name]) {
-                                    if(form.fields[fld].type === 'textarea'){
+                                            $scope[form.fields[fld].fields[j].name] = data.notification_configuration[form.fields[fld].fields[j].name];
-                                        if (form.fields[fld].name === 'headers') {
+                                            master[form.fields[fld].fields[j].name] = data.notification_configuration[form.fields[fld].fields[j].name];
-                                            $scope[fld] = JSON.stringify($scope[fld], null, 2);
-                                        } else {
-                                            $scope[fld] = $scope[fld].toString().replace(',' , '\n');
                                         }
                                     }
                                 }
+                                else {
+                                    if(data.notification_configuration[fld]){
+                                        $scope[fld] = data.notification_configuration[fld];
+                                        master[fld] = data.notification_configuration[fld];
 
-                                if (form.fields[fld].sourceModel && data.summary_fields &&
+                                        if(form.fields[fld].type === 'textarea'){
-                                    data.summary_fields[form.fields[fld].sourceModel]) {
+                                            if (form.fields[fld].name === 'headers') {
-                                    $scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
+                                                $scope[fld] = JSON.stringify($scope[fld], null, 2);
-                                        data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
+                                            } else {
-                                    master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
+                                                $scope[fld] = $scope[fld].toString().replace(',' , '\n');
-                                        data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
+                                            }
+                                        }
+                                    }
+
+                                    if (form.fields[fld].sourceModel && data.summary_fields &&
+                                        data.summary_fields[form.fields[fld].sourceModel]) {
+                                        $scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
+                                            data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
+                                        master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
+                                            data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
+                                    }
                                 }
                             }
                             data.notification_type = (Empty(data.notification_type)) ? '' : data.notification_type;
@@ -153,8 +164,19 @@ export default
             $scope.typeChange = function () {
                 for(var fld in form.fields){
                     if(form.fields[fld] && form.fields[fld].subForm){
-                        $scope[fld] = null;
+                        if(form.fields[fld].type === 'checkbox_group' && form.fields[fld].fields) {
-                        $scope.notification_template_form[fld].$setPristine();
+                            // Need to loop across the groups fields to null them out
+                            for(var i=0; i<form.fields[fld].fields.length; i++) {
+                                // Pull the name out of the object (array of objects)
+                                var subFldName = form.fields[fld].fields[i].name;
+                                $scope[subFldName] = null;
+                                $scope.notification_template_form[subFldName].$setPristine();
+                            }
+                        }
+                        else {
+                            $scope[fld] = null;
+                            $scope.notification_template_form[fld].$setPristine();
+                        }
                     }
                 }
 
@@ -208,6 +230,14 @@ export default
                     .filter(i => (form.fields[i].ngShow &&  form.fields[i].ngShow.indexOf(v) > -1))
                     .map(i => [i, processValue($scope[i], i , form.fields[i])]));
 
+                delete params.notification_configuration.checkbox_group;
+
+                for(var j = 0; j < form.fields.checkbox_group.fields.length; j++) {
+                    if(form.fields.checkbox_group.fields[j].ngShow && form.fields.checkbox_group.fields[j].ngShow.indexOf(v) > -1) {
+                        params.notification_configuration[form.fields.checkbox_group.fields[j].name] = Boolean($scope[form.fields.checkbox_group.fields[j].name]);
+                    }
+                }
+
                 Wait('start');
                 Rest.setUrl(url+ id+'/');
                 Rest.put(params)

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

@@ -355,19 +355,31 @@ export default function() {
                 ngShow: "notification_type.value == 'irc' ",
                 subForm: 'typeSubForm'
             },
-            use_tls: {
-                label: 'Use TLS',
-                type: 'checkbox',
-                ngShow: "notification_type.value == 'email' ",
-                subForm: 'typeSubForm'
-            },
             use_ssl: {
-                labelBind: 'sslLabel',
+                label: 'SSL Connection',
                 type: 'checkbox',
-                ngShow: "notification_type.value == 'email' || notification_type.value == 'irc' ",
+                ngShow: "notification_type.value == 'irc'",
                 subForm: 'typeSubForm'
             },
-
+            checkbox_group: {
+                label: 'Options',
+                type: 'checkbox_group',
+                subForm: 'typeSubForm',
+                ngShow: "notification_type.value == 'email'",
+                fields: [{
+                    name: 'use_tls',
+                    label: 'Use TLS',
+                    type: 'checkbox',
+                    ngShow: "notification_type.value == 'email' ",
+                    labelClass: 'checkbox-options stack-inline'
+                }, {
+                    name: 'use_ssl',
+                    label: 'Use SSL',
+                    type: 'checkbox',
+                    ngShow: "notification_type.value == 'email'",
+                    labelClass: 'checkbox-options stack-inline'
+                }]
+            }
         },
 
         buttons: { //for now always generates <button> tags

awx/ui/client/src/notifications/shared/type-change.service.js

@@ -25,7 +25,6 @@ function () {
             switch (type) {
                 case 'email':
                     obj.portLabel = ' Port';
-                    obj.sslLabel = ' Use SSL';
                     obj.passwordLabel = ' Password';
                     obj.email_required = true;
                     obj.port_required = true;
@@ -56,7 +55,6 @@ function () {
                     break;
                 case 'irc':
                     obj.portLabel = ' IRC Server Port';
-                    obj.sslLabel = ' SSL Connection';
                     obj.passwordLabel = ' IRC Server Password';
                     obj.irc_required = true;
                     obj.password_required = true;

awx/ui/client/src/shared/form-generator.js

@@ -682,7 +682,9 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += "<label class=\"";
                         html += (field.inline === undefined || field.inline === true) ? "checkbox-inline" : "";
                         html += (field.labelClass) ? " " + field.labelClass : "";
-                        html += "\">";
+                        html += "\"";
+                        html += (field.ngShow) ? " ng-show=\"" +field.ngShow + "\" " : "";
+                        html += ">";
                     }
 
                     html += "<input type=\"checkbox\" ";