Changing HTML for tabs instead of accordions

This gets the tabs on the screen and adds styling for the tabs. Does not include isSelected styling

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

@@ -50,6 +50,51 @@
     color:@default-icon;
 }
 
+.Form-tabHolder{
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.Form-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;
+}
+
+.Form-tab:hover {
+    color: @btn-txt;
+    background-color: @btn-bg-hov;
+    cursor: pointer;
+}
+
+.Form-tab:active {
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
+    cursor: pointer;
+}
+
+.Form-tab:focus {
+    color: @btn-txt-sel;
+}
+
+.Form-tab.is-selected {
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
+    border-color: @btn-bord-sel;
+}
+
 .Form-formGroup {
     flex: 1 0 auto;
     margin-bottom: 25px;

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

@@ -829,6 +829,10 @@ export function ProjectsEdit($scope, $rootScope, $compile, $location, $log,
     $scope.formCancel = function () {
         $state.transitionTo('projects');
     };
+    $scope.projectSelected = true;
+    $scope.toggleTabs = function(tab){
+        $scope[tab+"Selected"] = true;
+    };
 }
 
 ProjectsEdit.$inject = ['$scope', '$rootScope', '$compile', '$location', '$log',

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

@@ -1402,18 +1402,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 // string to be injected into the current view.
                 //
                 var btn, button, fld, field, html = '', i, section, group,
-                    tab, sectionShow, offset, width,ngDisabled;
+                    tab, sectionShow, offset, width,ngDisabled, itm;
-
-                if (this.form.collapse && this.form.collapseMode === options.mode) {
-                    html += "<div id=\"" + this.form.name + "-collapse-0\" ";
-                    html += (this.form.collapseOpen) ? "data-open=\"true\" " : "";
-                    html += (this.form.collapseOpenFirst) ? "data-open-first=\"true\" " : "";
-                    html += "class=\"jqui-accordion\">\n";
-                    html += "<h3>" + this.form.collapseTitle + "</h3>\n";
-                    html += "<div>\n";
-                    options.collapseAlreadyStarted = true;
-                }
-
 
                 // title and exit button
                 html +=  "<div class=\"Form-header\">";
@@ -1428,6 +1417,33 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 html += "</div>\n"; //end of Form-header
 
+                if (this.form.collapse && this.form.collapseMode === options.mode) {
+
+                    html += "<div class=\"Form-tabHolder\">";
+                    html += "<div id=\"" + this.form.name + "_tab\""+
+                        "class=\"Form-tab\" "+
+                        "ng-click=\"toggleFormTabs(" + this.form.name + ")\"" +
+                        "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details</div>";
+
+                    for (itm in this.form.related) {
+                        var collection = this.form.related[itm];
+                        html += "<div id=\"" + itm + "_tab\" "+
+                            "class=\"Form-tab\" "+
+                            "ng-click=\"toggleFormTabs(" + itm + ")\"" +
+                            "ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) + 
+                            "</div>\n";
+                        // html += "<div>\n";
+                        // if (collection.generateList) {
+                        //     html += GenerateList.buildHTML(collection, { mode: 'edit' });
+                        // }
+                        // else {
+                        //     html += this.GenerateColleciton({ form: this.form, related: itm }, options);
+                        // }
+                        // html += "</div>\n"; // accordion inner
+                    }
+                    html += "</div>";//tabHolder
+                }
+
                 html += "<form class=\"Form";
                 html += (this.form.horizontal) ? "form-horizontal" : "";
                 html += (this.form['class']) ? ' ' + this.form['class'] : '';
@@ -1577,14 +1593,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     }
                 }
 
-                if (this.form.collapse && this.form.collapseMode === options.mode) {
-                    html += "</div>\n";
-                }
-
-                if ((!this.modal) && options.related && this.form.related) {
-                    html += this.buildCollections(options);
-                }
-
                 return html;
             },