' + node.attr('description') + '
' : ''; @@ -171,7 +176,24 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP } scope.editGroup = function() { - GroupsEdit({ "inventory_id": id, group_id: scope.group_id }); + // Slide in the group properties form + $('#tree-form').show('slide', {direction: 'up'}, 500); + + // Set the focust to the first form field + $('input:first').focus(); + + // Disable all the group related buttons + scope.grpBtnDisable = true; + setTimeout(function() { + // Remove any tooltips that might be lingering + $('.tooltip').each( function(index) { + $(this).remove(); + }); + $('.popover').each(function(index) { + // remove lingering popoverEnter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.
" + "JSON:{\n" + @@ -55,7 +55,7 @@ angular.module('GroupFormDefinition', []) "
\"somevar\": \"somevalue\",
\"password\": \"magic\"
}
---\n" + '
somevar: somevalue
password: magic
View JSON examples at www.json.org
' + 'View YAML examples at ansibleworks.com
', - dataContainer: '#form-modal .modal-content' + dataContainer: 'body' } }, diff --git a/awx/ui/static/js/helpers/Groups.js b/awx/ui/static/js/helpers/Groups.js index 8139a17809..dfc015e97b 100644 --- a/awx/ui/static/js/helpers/Groups.js +++ b/awx/ui/static/js/helpers/Groups.js @@ -228,19 +228,27 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' var generator = GenerateForm; var form = GroupForm; var defaultUrl = GetBasePath('groups') + group_id + '/'; + + $('#tree-form').hide('slide',{ direction: 'right' }, 500); + $('#tree-form').empty(); + var scope = generator.inject(form, { mode: 'edit', modal: false, related: false, id: 'tree-form', breadCrumbs: false }); + //$('#tree-form').show('slide',{ direction: 'up' }, 500); + /* var scope = generator.inject(form, { mode: 'edit', modal: true, related: false}); + */ generator.reset(); var master = {}; var relatedSets = {}; - scope.formModalActionLabel = 'Save'; - scope.formModalHeader = 'Edit Group'; - scope.formModalCancelShow = true; + //scope.formModalActionLabel = 'Save'; + //scope.formModalHeader = 'Edit Group'; + //scope.formModalCancelShow = true; scope.parseType = 'yaml'; ParseTypeChange(scope); - $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success'); - + //$('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success'); + + // After the group record is loaded, retrieve any group variables if (scope.groupLoadedRemove) { scope.groupLoadedRemove(); diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 02635560b8..895335738e 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -738,16 +738,44 @@ select.field-mini-height { border-radius: 6px; } + .tree-view-container { + padding: 0; + } + + .tree-form-container { + min-height: 800px; + padding-left: 0; + padding-right: 25px; + } + + #tree-view { + border: 1px solid #e3e3e3; + border-radius: 6px; + background-color: #e3e3e3; + padding-top: 10px; + } + + #tree-form { + display: none; + margin-top: 15px; + border: 1px solid #e3e3e3; + background-color: #e3e3e3; + border-radius: 6px; + padding-top: 15px; + } + .tree-controls { padding: 10px; border-bottom: 1px solid #e3e3e3; .title { display: inline-block; + width: 263px; padding-top: 7px; - color: #555; + color: @grey; font-size: 14px; - font-weight: normal; + font-weight: bold; + padding-right: 5px; } } @@ -769,7 +797,6 @@ select.field-mini-height { font-size: 14px; font-weight: bold; margin-bottom: 10px; - padding-left: 5px; } } @@ -801,8 +828,6 @@ select.field-mini-height { } .search-tree { - - margin-top: 10px; padding: 10px 3px 10px 3px; .title { @@ -1024,16 +1049,48 @@ tr td button i { .delete-btn { /* Used on job page to make cancel and delete buttons have an equal width */ width: 60px; - } + } + + #tree-form:before { + content:" "; + border-color: transparent transparent #e3e3e3 transparent; + border-style: solid; + border-width: 15px; + width: 0; + height: 0; + position: relative; + top: -46px; + left: 28px; + } + + #tree-view { + margin-left: 10px; + margin-top: 16px; + } + } /* Portrait tablet to landscape and desktop */ -@media (min-width: 768px) and (max-width: 979px) { +@media (min-width: 768px) and (max-width: 1199px) { .list-actions button, .list-actions .checkbox-inline { margin-top: 10px; } + + .tree-form-container { + padding-left: 15px; + padding-right: 15px; + } + + #tree-view { + margin-left: 0; + margin-top: 10px; + } + + #tree-form { + margin-top: 10px; + } } @@ -1069,4 +1126,9 @@ tr td button i { margin-top: 10px; } + .tree-form-container { + padding-left: 15px; + padding-right: 15px; + } + } diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index 0d11fce23d..9bbd2f28ff 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/awx/ui/static/lib/ansible/form-generator.js @@ -45,7 +45,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) } } else { - element = angular.element(document.getElementById('htmlTemplate')); + if (options.id) { + element = angular.element(document.getElementById(options.id)); + } + else { + element = angular.element(document.getElementById('htmlTemplate')); + } } this.mode = options.mode; @@ -908,7 +913,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) // var html = ''; - if (!this.modal) { + if (!this.modal && (options.breadCrumbs == undefined || options.breadCrumbs == true)) { if (this.form.navigationLinks) { html += this.breadCrumbs(options, this.form.navigationLinks); } @@ -1171,22 +1176,31 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) "use the Inventories->Hosts page to " + "add hosts to the group."; html += "