Merge pull request #5816 from gconsidine/general-ux-improvements

General UX Improvements

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

@@ -1955,9 +1955,6 @@ tr td button i {
       padding-left: 15px;
       padding-right: 15px;
   }
-
-
-
 }
 
 // lists.less uses 600px as the breakpoint, doing same for consistency
@@ -1970,15 +1967,26 @@ tr td button i {
 
 .nvtooltip {
     border-radius: 4px;
-    padding: 3px 10px;
-}
 
-.nvtooltip td.value {
+    td.value {
-    padding-right: 0px;
+        padding-right: 0px;
-}
+    }
 
-.nvtooltip p {
+    p {
-    padding: 3px 0px;
+        padding: 3px 0px;
+    }
+
+    & > table > thead > tr > td {
+        font-weight: 700;
+
+        &:first-child {
+            padding-top: 0;
+        }
+    }
+
+    & > table > tbody > tr:last-child > td {
+        padding-bottom: 0;
+    }
 }
 
 .nvd3 g.nv-groups path.nv-line {
@@ -2288,3 +2296,4 @@ html input[disabled] {
 .CodeMirror--disabled .CodeMirror-cursors {
     display: none;
 }
+

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

@@ -478,6 +478,37 @@ input[type='radio']:checked:before {
     width: 100%;
     display: block !important;
 }
+
+.Form-inputLabelContainer[for=variables] {
+    width: auto;
+    display: inline-block !important;
+}
+
+.FormToggle {}
+.FormToggle-container {
+    float: right;
+    margin: 0 0 0 10px;
+    padding-bottom: 5px;
+
+    label {
+        &:first-child {
+            border-right: none;
+        }
+        &:last-child {
+            border-left: none;
+        }
+    }
+
+    input {
+        visibility: hidden;
+        position: absolute;
+    }
+
+    .btn.btn-xs {
+        padding: 0px 10px;
+    }
+}
+
 .Form-inputLabel{
     text-transform: uppercase;
     color: @default-interface-txt;

awx/ui/client/src/portal-mode/portal-mode-layout.partial.html

@@ -8,9 +8,9 @@
                     <div class="PortalMode-filterHolder">
                         <div class="btn-group PortalMode-filter">
                             <button ng-class="{'btn-primary ': activeFilter == 'user',
-            'btn-default' : activeFilter != 'user' }" ng-click='filterUser()' class="btn btn-xs" translate>My Jobs</button>
+            'btn-default' : activeFilter != 'user' }" ng-click='filterUser()' class="btn btn-xs PortalMode-filterButton--edges" translate>My Jobs</button>
                             <button ng-class="{'btn-primary' : activeFilter == 'all',
-            'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs" translate>All Jobs</button>
+            'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs PortalMode-filterButton--edges" translate>All Jobs</button>
                         </div>
                         <div class="PortalMode-refresh">
                             <button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" ng-click="refresh()" ng-show="socketStatus == 'error'">

awx/ui/client/src/portal-mode/portal-mode.block.less

@@ -21,12 +21,22 @@
 	right: 35px;
 	display: flex;
 	align-items: center;
-  	justify-content: center;
+ 	justify-content: center;
 
-    .btn.btn-xs {
+  .btn.btn-xs {
-        padding: 1px 10px;
+      padding: 1px 10px;
+  }
+}
+
+.PortalMode-filterButton--edges {
+    &:first-child {
+        border-right: none;
+    }
+    &:last-child {
+        border-left: none;
     }
 }
+
 .PortalMode-refresh {
 	margin-left: 10px;
 }

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

@@ -659,14 +659,26 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += (field.hintText) ? "\n\t\t<span class=\"label-hint-text\">\n\t\t\t<i class=\"fa fa-info-circle\">\n\t\t\t</i>\n\t\t\tHint: " + field.hintText + "\n\t\t</span>" : "";
                         // Variable editing
                         if (fld === "variables" || fld === "extra_vars" || _.last(fld.split('_')) === 'variables' || fld === 'source_vars') {
-                            html += "<div class=\"parse-selection\" id=\"" + form.name + "_" + fld + "_parse_type\">" +
+                            let parseTypeId = `${form.name}_${fld}_parse_type`;
-                                "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
+                            let parseTypeName = field.parseTypeName || 'parseType';
-                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
+                            let getToggleClass = (primary, secondary) => `{
-                            html += "\" value=\"yaml\" ng-change=\"parseTypeChange('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType') + "', '" + fld + "'" + ")\"> <span class=\"parse-label\">YAML</span>\n";
+                                'btn-primary': ${parseTypeName} === '${primary}',
-                            html += "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
+                                'btn-default' : ${parseTypeName} === '${secondary}'
-                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
+                            }`;
-                            html += "\" value=\"json\" ng-change=\"parseTypeChange('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType')+ "', '" + fld + "'" + ")\"> <span class=\"parse-label\">JSON</span>\n";
+                            let toggleLeftClass = getToggleClass('yaml', 'json');
-                            html += "</div>\n";
+                            let toggleRightClass = getToggleClass('json', 'yaml');
+
+                            html += `
+                                <div class="FormToggle-container" id="${parseTypeId}">
+                                    <div class="btn-group">
+                                        <label ng-class="${toggleLeftClass}" class="btn btn-xs">
+                                            <input type="radio" value="yaml" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />YAML
+                                        </label>
+                                        <label ng-class="${toggleRightClass}" class="btn btn-xs btn-default">
+                                            <input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
+                                        </label>
+                                    </div>
+                                </div>`;
                         }
 
                         if (field.labelAction) {