External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-20 14:11:24 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #640 from jaredevantabor/form-tabs

Browse Source 
Changing accordions to tabs
This commit is contained in:
jaredevantabor 2016-01-18 12:13:18 -08:00
commit f2bd700412
10 changed files with 153 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
*
*/
@import "src/shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/branding/colors.default.less";
.Form{
display:flex;
@ -50,6 +50,71 @@
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-tab--disabled {
opacity: 0.4;
cursor: not-allowed !important;
}
.Form-tab--disabled:hover {
color: @btn-txt;
background-color: @btn-bg;
}
.Form-tabSection{
display: none;
width: 0%;
}
.Form-tabSection.is-selected{
width: 100%;
display: block;
}
.Form-formGroup {
flex: 1 0 auto;
margin-bottom: 25px;

1
awx/ui/client/src/forms/Credentials.js
View File

@ -17,7 +17,6 @@ export default
addTitle: 'Create Credential', //Legend in add mode
editTitle: '{{ name }}', //Legend in edit mode
name: 'credential',
well: true,
forceListeners: true,
actions: {

5
awx/ui/client/src/forms/Inventories.js
View File

@ -17,10 +17,7 @@ export default
addTitle: 'New Inventory',
editTitle: '{{ inventory_name }}',
name: 'inventory',
collapse: true,
collapseTitle: "Properties",
collapseMode: 'edit',
collapseOpen: true,
tabs: true,
fields: {
inventory_name: {

5
awx/ui/client/src/forms/JobTemplates.js
View File

@ -19,10 +19,7 @@ export default
editTitle: '{{ name }}',
name: 'job_templates',
base: 'job_templates',
collapse: true,
collapseTitle: "Properties",
collapseMode: 'edit',
collapseOpenFirst: true, //Always open first panel
tabs: true,
fields: {
name: {

7
awx/ui/client/src/forms/Jobs.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
/**
* @ngdoc function
* @name forms.function:Jobs
@ -19,10 +19,7 @@ export default
name: 'jobs',
well: true,
base: 'jobs',
collapse: true,
collapseMode: 'edit',
collapseTitle: 'Job Status',
collapseOpenFirst: true, //Always open first panel
tabs: true,
navigationLinks: {
details: {

2
awx/ui/client/src/forms/LicenseForm.js
View File

@ -18,7 +18,7 @@ export default
name: 'license',
well: false,
tabs: [{
licensetabs: [{
name: 'license',
label: 'License'
}, {

5
awx/ui/client/src/forms/Organizations.js
View File

@ -17,10 +17,7 @@ export default
addTitle: 'New Organization', //Title in add mode
editTitle: '{{ name }}', //Title in edit mode
name: 'organization', //entity or model name in singular form
collapse: true,
collapseTitle: "Properties",
collapseMode: 'edit',
collapseOpen: true,
tabs: true,
fields: {
name: {

5
awx/ui/client/src/forms/Projects.js
View File

@ -18,10 +18,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
editTitle: '{{ name }}',
name: 'project',
forceListeners: true,
collapse: true,
collapseTitle: "Properties",
collapseMode: 'edit',
collapseOpen: true,
tabs: true,
fields: {
name: {

5
awx/ui/client/src/forms/Teams.js
View File

@ -17,10 +17,7 @@ export default
addTitle: 'New Team', //Legend in add mode
editTitle: '{{ name }}', //Legend in edit mode
name: 'team',
collapse: true,
collapseTitle: "Properties",
collapseMode: 'edit',
collapseOpen: true,
tabs: true,
fields: {
name: {

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

@ -202,6 +202,25 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
this.scope.mode = options.mode;
}
if(options.mode === 'edit' && this.form.tabs){
var tabs = [this.form.name], that = this;
tabs.push(Object.keys(this.form.related));
tabs = _.flatten(tabs);
_.map(tabs, function(itm){
that.scope.$parent[itm+"Selected"] = false;
});
this.scope.$parent[this.form.name+"Selected"] = true;
this.scope.$parent.toggleFormTabs = function($event){
_.map(tabs, function(itm){
that.scope.$parent[itm+"Selected"] = false;
});
that.scope.$parent[$event.target.id.split('_tab')[0]+"Selected"] = true;
};
}
for (fld in form.fields) {
this.scope[fld + '_field'] = form.fields[fld];
this.scope[fld + '_field'].name = fld;
@ -1402,18 +1421,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,13 +1436,52 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "</div>\n"; //end of Form-header
if (this.form.tabs) {
var collection;
html += "<div class=\"Form-tabHolder\">";
if(this.mode === "edit"){
html += "<div id=\"" + this.form.name + "_tab\""+
"class=\"Form-tab\" "+
"ng-click=\"toggleFormTabs($event)\"" +
"ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details</div>";
for (itm in this.form.related) {
collection = this.form.related[itm];
html += "<div id=\"" + itm + "_tab\" "+
"class=\"Form-tab\" "+
"ng-click=\"toggleFormTabs($event)\"" +
"ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) +
"</div>\n";
}
}
else if(this.mode === "add"){
html += "<div id=\"" + this.form.name + "_tab\""+
"class=\"Form-tab is-selected\">Details</div>";
for (itm in this.form.related) {
collection = this.form.related[itm];
html += "<div id=\"" + itm + "_tab\" "+
"class=\"Form-tab Form-tab--disabled\">" + (collection.title || collection.editTitle) +
"</div>\n";
}
}
html += "</div>";//tabHolder
}
if(this.form.tabs && this.mode === "edit"){
html += "<div class=\"Form-tabSection\" "+
"ng-class=\"{'is-selected': " + this.form.name + "Selected }\">";
}
html += "<form class=\"Form";
html += (this.form.horizontal) ? "form-horizontal" : "";
html += (this.form['class']) ? ' ' + this.form['class'] : '';
html += "\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "_form\" autocomplete=\"off\" novalidate>\n";
html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
if (this.form.tabs) {
if (this.form.licenseTabs) {
html += "<ul id=\"" + this.form.name + "_tabs\" class=\"nav nav-tabs\">\n";
for (i = 0; i < this.form.tabs.length; i++) {
tab = this.form.tabs[i];
@ -1574,17 +1621,28 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "</div>\n";
}
if(this.form.tabs && this.mode === "edit"){
var collection1;
html += "</div>\n"; // end of form's Form-tabSection
for (itm in this.form.related) {
collection1 = this.form.related[itm];
html += "<div class=\"Form-tabSection\" "+
"ng-class=\"{'is-selected': " + itm + "Selected }\">";
if (collection1.generateList) {
html += GenerateList.buildHTML(collection1, { mode: 'edit' });
}
else {
html += this.GenerateColleciton({ form: this.form, related: itm }, options);
}
html += "</div>\n";
}
}
}
}
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;
},