From 516955fe1208e5c3233d45d81d212925d6028925 Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Tue, 12 Jan 2016 16:16:36 -0800 Subject: [PATCH 1/2] 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 | 45 ++++++++++++++++++++ awx/ui/client/src/controllers/Projects.js | 4 ++ awx/ui/client/src/shared/form-generator.js | 48 +++++++++++++--------- 3 files changed, 77 insertions(+), 20 deletions(-) diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index 1cd8059d7c..a6fa0eab06 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/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; diff --git a/awx/ui/client/src/controllers/Projects.js b/awx/ui/client/src/controllers/Projects.js index 6165c791b2..f4f5e9bf98 100644 --- a/awx/ui/client/src/controllers/Projects.js +++ b/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', diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index 359d86ccaf..33b10e2ddd 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/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; - - if (this.form.collapse && this.form.collapseMode === options.mode) { - html += "
\n"; - html += "

" + this.form.collapseTitle + "

\n"; - html += "
\n"; - options.collapseAlreadyStarted = true; - } - + tab, sectionShow, offset, width,ngDisabled, itm; // title and exit button html += "
"; @@ -1428,6 +1417,33 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat html += "
\n"; //end of Form-header + if (this.form.collapse && this.form.collapseMode === options.mode) { + + html += "
"; + html += "
Details
"; + + for (itm in this.form.related) { + var collection = this.form.related[itm]; + html += "
" + (collection.title || collection.editTitle) + + "
\n"; + // html += "
\n"; + // if (collection.generateList) { + // html += GenerateList.buildHTML(collection, { mode: 'edit' }); + // } + // else { + // html += this.GenerateColleciton({ form: this.form, related: itm }, options); + // } + // html += "
\n"; // accordion inner + } + html += "
";//tabHolder + } + html += "
Date: Sun, 17 Jan 2016 17:48:47 -0700 Subject: [PATCH 2/2] Adding functionality for tabs on forms this adds the functionality for the tabs, and removes the old code around accordions. --- awx/ui/client/legacy-styles/forms.less | 22 +++++- awx/ui/client/src/controllers/Projects.js | 4 - awx/ui/client/src/forms/Credentials.js | 1 - awx/ui/client/src/forms/Inventories.js | 5 +- awx/ui/client/src/forms/JobTemplates.js | 5 +- awx/ui/client/src/forms/Jobs.js | 7 +- awx/ui/client/src/forms/LicenseForm.js | 2 +- awx/ui/client/src/forms/Organizations.js | 5 +- awx/ui/client/src/forms/Projects.js | 5 +- awx/ui/client/src/forms/Teams.js | 5 +- awx/ui/client/src/shared/form-generator.js | 92 +++++++++++++++++----- 11 files changed, 100 insertions(+), 53 deletions(-) diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index a6fa0eab06..964010e7fc 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -7,7 +7,7 @@ * */ -@import "src/shared/branding/colors.default.less"; +@import "awx/ui/client/src/shared/branding/colors.default.less"; .Form{ display:flex; @@ -95,6 +95,26 @@ 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; diff --git a/awx/ui/client/src/controllers/Projects.js b/awx/ui/client/src/controllers/Projects.js index f4f5e9bf98..6165c791b2 100644 --- a/awx/ui/client/src/controllers/Projects.js +++ b/awx/ui/client/src/controllers/Projects.js @@ -829,10 +829,6 @@ 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', diff --git a/awx/ui/client/src/forms/Credentials.js b/awx/ui/client/src/forms/Credentials.js index 2743d610bc..4b19fd2ac4 100644 --- a/awx/ui/client/src/forms/Credentials.js +++ b/awx/ui/client/src/forms/Credentials.js @@ -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: { diff --git a/awx/ui/client/src/forms/Inventories.js b/awx/ui/client/src/forms/Inventories.js index 9841da4dd2..a76293217f 100644 --- a/awx/ui/client/src/forms/Inventories.js +++ b/awx/ui/client/src/forms/Inventories.js @@ -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: { diff --git a/awx/ui/client/src/forms/JobTemplates.js b/awx/ui/client/src/forms/JobTemplates.js index be471aa946..f5e4f53819 100644 --- a/awx/ui/client/src/forms/JobTemplates.js +++ b/awx/ui/client/src/forms/JobTemplates.js @@ -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: { diff --git a/awx/ui/client/src/forms/Jobs.js b/awx/ui/client/src/forms/Jobs.js index 0a19dc13de..b5cd2b9bfd 100644 --- a/awx/ui/client/src/forms/Jobs.js +++ b/awx/ui/client/src/forms/Jobs.js @@ -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: { diff --git a/awx/ui/client/src/forms/LicenseForm.js b/awx/ui/client/src/forms/LicenseForm.js index 66010f8854..0b53574caa 100644 --- a/awx/ui/client/src/forms/LicenseForm.js +++ b/awx/ui/client/src/forms/LicenseForm.js @@ -18,7 +18,7 @@ export default name: 'license', well: false, - tabs: [{ + licensetabs: [{ name: 'license', label: 'License' }, { diff --git a/awx/ui/client/src/forms/Organizations.js b/awx/ui/client/src/forms/Organizations.js index 941774f45d..23b5916e3b 100644 --- a/awx/ui/client/src/forms/Organizations.js +++ b/awx/ui/client/src/forms/Organizations.js @@ -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: { diff --git a/awx/ui/client/src/forms/Projects.js b/awx/ui/client/src/forms/Projects.js index 610aa6cdb1..2a7f288c44 100644 --- a/awx/ui/client/src/forms/Projects.js +++ b/awx/ui/client/src/forms/Projects.js @@ -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: { diff --git a/awx/ui/client/src/forms/Teams.js b/awx/ui/client/src/forms/Teams.js index 1aec02fb32..4bc5c940a7 100644 --- a/awx/ui/client/src/forms/Teams.js +++ b/awx/ui/client/src/forms/Teams.js @@ -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: { diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index 33b10e2ddd..f2c281ca33 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/awx/ui/client/src/shared/form-generator.js @@ -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; @@ -1417,40 +1436,52 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat html += "
\n"; //end of Form-header - if (this.form.collapse && this.form.collapseMode === options.mode) { - + if (this.form.tabs) { + var collection; html += "
"; - html += "
Details
"; - for (itm in this.form.related) { - var collection = this.form.related[itm]; - html += "
" + (collection.title || collection.editTitle) + - "
\n"; - // html += "
\n"; - // if (collection.generateList) { - // html += GenerateList.buildHTML(collection, { mode: 'edit' }); - // } - // else { - // html += this.GenerateColleciton({ form: this.form, related: itm }, options); - // } - // html += "
\n"; // accordion inner + "ng-click=\"toggleFormTabs($event)\"" + + "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details
"; + + for (itm in this.form.related) { + collection = this.form.related[itm]; + html += "
" + (collection.title || collection.editTitle) + + "
\n"; + } } + else if(this.mode === "add"){ + html += "
Details
"; + + for (itm in this.form.related) { + collection = this.form.related[itm]; + html += "
" + (collection.title || collection.editTitle) + + "
\n"; + } + } + html += "
";//tabHolder } + if(this.form.tabs && this.mode === "edit"){ + html += "
"; + } + html += "\n"; html += "
{{ flashMessage }}
\n"; - if (this.form.tabs) { + if (this.form.licenseTabs) { html += "
\n"; } + if(this.form.tabs && this.mode === "edit"){ + var collection1; + html += "\n"; // end of form's Form-tabSection + + for (itm in this.form.related) { + collection1 = this.form.related[itm]; + + html += "
"; + if (collection1.generateList) { + html += GenerateList.buildHTML(collection1, { mode: 'edit' }); + } + else { + html += this.GenerateColleciton({ form: this.form, related: itm }, options); + } + html += "
\n"; + } + } + } }