shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Changing HTML for tabs instead of accordions

Browse Source 
This gets the tabs on the screen and adds styling for the tabs. Does not include isSelected styling
This commit is contained in:
Jared Tabor 2016-01-12 16:16:36 -08:00
parent 0feb41751a
commit 516955fe12
3 changed files with 77 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
awx/ui/client/legacy-styles/forms.less
View File

@ -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;

4
awx/ui/client/src/controllers/Projects.js
View File

@ -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',

48
awx/ui/client/src/shared/form-generator.js
View File

@ -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;
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;
}
tab, sectionShow, offset, width,ngDisabled, itm;
// 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;
},