From 5cc6f799fe302375c3464d865d3e358b10f52ae6 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Thu, 8 Aug 2013 11:39:27 -0400 Subject: [PATCH] Moving CSS to less. Using recess to compile and compress to awx.min.css --- awx/ui/static/css/awx.min.css | 1 + awx/ui/static/js/controllers/Inventories.js | 13 +- awx/ui/static/less/ansible-ui.css | 752 ++++++++++++++++++ awx/ui/static/lib/ansible/form-generator.js | 373 +++++---- .../static/lib/ansible/generator-helpers.js | 14 +- .../lib/jstree/themes/ansible/style.css | 6 +- awx/ui/templates/ui/index.html | 4 +- 7 files changed, 961 insertions(+), 202 deletions(-) create mode 100644 awx/ui/static/css/awx.min.css create mode 100644 awx/ui/static/less/ansible-ui.css diff --git a/awx/ui/static/css/awx.min.css b/awx/ui/static/css/awx.min.css new file mode 100644 index 0000000000..54a30cf897 --- /dev/null +++ b/awx/ui/static/css/awx.min.css @@ -0,0 +1 @@ +html{background-color:#171717}body{padding-top:100px;color:#171717}.tooltip{z-index:1050}.text-center{text-align:center!important}hr{border-color:#e3e3e3}.nowrap{white-space:nowrap}.tab-content{padding-top:20px}.btn .caret{border-top-color:#696969}.dropdown-toggle,.btn-default{color:#333;background-color:#ccc;border-color:#ccc}.dropdown-toggle:hover,.btn-default:hover{color:#333;background-color:#bbb;border-color:#bbb}.btn-light{color:#333;background-color:#ddd;border-color:#ddd}.btn-light:hover{color:#333;background-color:#ccc;border-color:#ccc}.code-breakable{padding-left:10px;word-wrap:break-word}.break{word-wrap:break-word}.login-alert{margin-bottom:25px;font-size:14px;font-weight:normal;color:#08c;text-align:center}.controls{min-height:15px}.main-container{min-height:700px}.main-menu{background-color:#171717}.main-menu .nav{margin-top:15px}.main-menu .nav>li>a{color:#a9a9a9}.main-menu .nav>li>a:hover,.main-menu .nav>li>a:focus{color:#2078be}.main-menu .navbar-brand{display:inline-block;padding:0}.main-menu .navbar-brand img{max-width:260px}a:hover{text-decoration:none}.help-link,.help-link:active,.help-link:visited{color:#49afcd;text-decoration:none}.help-link:hover{color:#1778c3;text-decoration:none}.site-footer{width:100%;padding-top:20px;padding-bottom:40px;margin-top:60px;color:#a9a9a9;text-align:center;background-color:#171717}.copyright{display:inline-block;font-size:11px;font-weight:normal;text-align:center}.site-footer a,.site-footer a:active,.site-footer a:hover,.site-footer a:visited{margin-right:15px;font-size:18px;color:#a9a9a9}.site-footer .social{display:inline-block;margin-left:50px}.site-footer .logo{display:inline-block;margin-right:35px}.site-footer .logo img{max-width:125px}.login-header{text-align:center}.login-header img{max-width:100px}.form-control[required]:focus{border-color:rgba(204,0,0,0.8);outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 5px rgba(204,0,0,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 5px rgba(204,0,0,0.6)}.input-mini{height:26px;padding:3px 8px;font-size:12px;border-radius:3px}.error{margin-top:5px;font-size:12px;line-height:normal;color:#f00}.xsmall{font-size:12px}.note{padding-top:15px;font-size:12px}legend{font-size:medium;font-weight:bold}.navigation{margin:15px 0 15px 0}.page-number{display:inline-block;padding:0;margin:0}.page-number-small{display:inline-block;margin-left:10px;font-size:11px}.footer-navigation{margin:10px 0 10px 0}.lookup-navigation{margin:15px 0 0 0}.related-footer{margin:10px 0 0 0}.page-size{font-size:10.5px;line-height:normal}.page-size-label{margin-left:15px;font-size:10.5px;font-weight:normal}.accordion-heading{font-weight:bold;color:#08c}.accordion-heading i{margin-right:5px}.status-actions{display:inline-block;height:25px;margin-bottom:20px}.status-spin{display:inline-block;margin-left:15px;font-size:22px;vertical-align:middle}.search-widget{margin-bottom:20px}.search-widget label{display:inline-block;padding-right:15px;vertical-align:middle}.nav-path{padding:5px 0 10px 0;margin-right:5px;margin-bottom:25px;font-size:14px;font-weight:bold;background-color:#f5f5f5;border:1px solid #d8d8d8;border-radius:6px;box-shadow:3px 3px 4px 0 #808080}.nav-path ul{padding-bottom:0;padding-left:0;margin-bottom:0;margin-left:10px}.greeting{padding-right:22px}.breadcrumb .active{color:#171717}.nav-tabs>li>a{font-weight:bold}input[type="text"].field-mini-height{height:12px;font-size:10.5px}select.field-mini-height{height:22px;font-size:10.5px}.ask-checkbox{margin-left:10px}.tree-container{padding:0;margin:5px 0 15px 0}.no-padding{padding:0;margin:0}.list-actions{display:inline-block;padding-bottom:22px;margin-left:10px;vertical-align:top}.list-actions .btn{margin-right:3px}.btn-help{margin-left:15px}.well{padding-bottom:0}.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#fff}.table-hover-inverse tbody tr:hover>td,.table-hover-inverse tbody tr:hover>th{background-color:#dff0d8}.job-error,.job-failed,.license-expired,.license-invalid,.active-failures-true,.active-failures-true a,.active-failures-true a:active,input[type="text"].job-failed,input[type="text"].job-error{color:#da4f49}.active-failures-true a:hover{color:#f00}.job-failures-true{padding-top:5px;color:#da4f49}.job-event-status,.license-status{padding-top:5px}.job-new,input[type="text"].job-new,.job-canceled,input[type="text"].job-canceled{color:#789}.job-pending,.job-running,.job-success,.job-successful,.active-failures-false,.license-valid,input[type="text"].job-success,input[type="text"].job-successful{color:#5bb75b}.field-success{color:#5bb75b}.field-success input{border-color:#5bb75b}.field-failure{color:#f00}.field-failure input{border-color:#f00}.job-changed,.license-warning,.license-demo{color:#f90}.job-detail-status{display:inline-block;margin-top:5px;font-size:15px;font-weight:bold}.form-items .search-widget{margin-top:15px}.form-items .item-count{display:inline-block;margin-top:25px;font-size:small}.child-event a{color:#171717;cursor:default}.level-1{padding-left:24px}.level-2{padding-left:48px}.level-3{padding-left:72px}.level-3-detail{padding-left:72px}#job_events .control-group{margin-top:0;margin-bottom:10px}.inventory-content{padding:15px;border:1px solid #ddd;border-radius:6px}.groups-menu{min-height:30px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:6px}.groups-menu .navbar-brand{color:}.inventory-title{margin-top:15px;font-weight:bold;color:#08c}.inventory-buttons{text-align:right;background-color:#f5f5f5;border-top:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-left:1px solid #e3e3e3;-webkit-border-top-right-radius:4px;-moz-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;-moz-border-top-left-radius:4px;border-top-left-radius:4px}.inventory-buttons button{margin:5px 5px 3px 0}.inventory-filter{padding:0 3px 3px 3px;text-align:right;background-color:#f5f5f5;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;border-left:1px solid #e3e3e3;-webkit-border-bottom-right-radius:4px;-moz-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-bottom-left-radius:4px;border-bottom-left-radius:4px}.inventory-filter label{margin-right:10px}.hosts-well{padding-top:5px}.hosts-title p{font-size:12px}.hosts-title h4{margin:5px 0}.hosts-well .search-widget{margin-top:10px}.hosts-well .list-actions{padding-top:10px}.parse-selection{display:inline-block;margin:5px 0 8px 0;font-size:12px;line-height:normal}.parse-selection input{margin-left:5px}.parse-select .parse-label{margin-left:3px}#tree-view{min-height:100px}.slider{display:inline-block;width:100px;margin:0 10px;vertical-align:middle}.list-header:hover{cursor:pointer}.list-header i{margin-left:10px}.list-header .icon-sort{color:#ccc}.list-header .icon-sort-down,.list-header .icon-sort-up{color:#171717}tr td i{float:none;padding-top:3px;padding-left:0;margin-right:10px;margin-left:0}tr td button i{padding-top:0;margin-right:0}.event-form{margin-top:10px;margin-bottom:5px}.event-detail-host{padding-top:10px;padding-bottom:5px}.form-section-title{width:100%;margin-top:0;margin-bottom:10px;font-weight:bold;border-bottom:1px solid #d8d8d8}.modal-backdrop,.modal-backdrop.fade.in{opacity:.6;filter:alpha(opacity=60)}.modal-body .ui-accordion .ui-accordion-content{padding:10px}.modal-header{padding:15px 10px;color:#2078be;border-bottom:1px solid #eee;-webkit-border-top-right-radius:3px;-moz-border-top-right-radius:3px;border-top-right-radius:3px;-webkit-border-top-left-radius:3px;-moz-border-top-left-radius:3px;border-top-left-radius:3px}.modal{border:1px solid #171717}.close{color:#a9a9a9;opacity:.7;filter:alpha(opacity=70)}.modal-header h3{margin:0;font-size:22px;font-weight:bold;text-rendering:optimizeLegibility}.modal-body{padding-top:30px}#prompt-modal .modal-body{padding-bottom:30px}.skinny-modal .modal-body{padding:5px 10px 0 10px}.navigation-buttons{height:40px}@media(max-width:767px){{}.level-1,.level-2,.level-3,.level-3-detail{padding-left:0}table{word-wrap:break-word;table-layout:fixed}} diff --git a/awx/ui/static/js/controllers/Inventories.js b/awx/ui/static/js/controllers/Inventories.js index 877081b192..7a3b379666 100644 --- a/awx/ui/static/js/controllers/Inventories.js +++ b/awx/ui/static/js/controllers/Inventories.js @@ -193,12 +193,13 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP var generator = GenerateForm; var form = InventoryForm; var defaultUrl=GetBasePath('inventory'); - var scope = generator.inject(form, {mode: 'edit', related: true}); - generator.reset(); + var scope = generator.inject(form, {mode: 'edit', related: true, buildTree: true}); var base = $location.path().replace(/^\//,'').split('/')[0]; var id = $routeParams.id; ParseTypeChange(scope,'inventory_variables', 'inventoryParseType'); + + $('#inventory-tabs a:first').tab('show'); //activate the groups tab scope.inventoryParseType = 'yaml'; scope['inventory_id'] = id; @@ -433,10 +434,13 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP var type = node.attr('type'); var url; scope['selectedNode'] = node; + scope['selectedNodeName'] = node.attr('name'); + $('#tree-view').jstree('open_node',node); + if (type == 'group') { url = node.attr('all'); - scope.groupAddHide = false; + scope.groupAddHide = false; scope.groupEditHide =false; scope.groupDeleteHide = false; scope.createButtonShow = true; @@ -455,10 +459,13 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP scope.groupTitle = '

All Hosts

'; scope.group_id = null; } + if (!scope.$$phase) { scope.$digest(); } + HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] }); + }); scope.addGroup = function() { diff --git a/awx/ui/static/less/ansible-ui.css b/awx/ui/static/less/ansible-ui.css new file mode 100644 index 0000000000..42836d0458 --- /dev/null +++ b/awx/ui/static/less/ansible-ui.css @@ -0,0 +1,752 @@ +/********************************************* + * Copyright (c) 2013 AnsibleWorks, Inc. + * + * ansible-ui.css + * + * custom styles for ansible-ui + * + */ + +html { + background-color: #171717; +} + +body { + padding-top: 100px; + color: #171717; +} + +.tooltip { + z-index: 1050; +} + +.text-center { + text-align: center !important; +} + +hr { + border-color: #e3e3e3; +} + +.nowrap { + white-space: nowrap; +} + +.tab-content { + padding-top: 20px; +} + +.btn .caret { + border-top-color: #696969; +} + +.dropdown-toggle, +.btn-default { + color: #333; + background-color: #ccc; + border-color: #ccc; +} + +.dropdown-toggle:hover, +.btn-default:hover { + color: #333; + background-color: #bbb; + border-color: #bbb; +} + +.btn-light { + color: #333; + background-color: #ddd; + border-color: #ddd; +} + +.btn-light:hover { + color: #333; + background-color: #ccc; + border-color: #ccc; +} + +/* Use code-breakable in pop-over text to indent and wrap code segments */ + +.code-breakable { + padding-left: 10px; + word-wrap: break-word; +} + +.break { + word-wrap: break-word; +} + +.login-alert { + margin-bottom: 25px; + font-size: 14px; + font-weight: normal; + color: #0088cc; + text-align: center; +} + +.controls { + min-height: 15px; +} + +.main-container { + min-height: 700px; +} + +.main-menu { + background-color: #171717; +} + +.main-menu .nav { + margin-top: 15px; +} + +.main-menu .nav > li > a { + color: #A9A9A9; +} + +.main-menu .nav > li > a:hover, +.main-menu .nav > li > a:focus { + color: #2078be; +} + +/* Using inline-block rather than block keeps + brand img from right aligning into the collapse button + on mobile screens */ + +.main-menu .navbar-brand { + display: inline-block; + padding: 0; +} + +.main-menu .navbar-brand img { + max-width: 260px; +} + +a:hover { + text-decoration: none; +} + +.help-link, +.help-link:active, +.help-link:visited { + color: #49afcd; + text-decoration: none; +} + +.help-link:hover { + color: #1778c3; + text-decoration: none; +} + +.site-footer { + width: 100%; + padding-top: 20px; + padding-bottom: 40px; + margin-top: 60px; + color: #A9A9A9; + text-align: center; + background-color: #171717; +} + +.copyright { + display: inline-block; + font-size: 11px; + font-weight: normal; + text-align: center; +} + +.site-footer a, +.site-footer a:active, +.site-footer a:hover, +.site-footer a:visited { + margin-right: 15px; + font-size: 18px; + color: #A9A9A9; +} + +.site-footer .social { + display: inline-block; + margin-left: 50px; +} + +.site-footer .logo { + display: inline-block; + margin-right: 35px; +} + +.site-footer .logo img { + max-width: 125px; +} + +.login-header { + text-align: center; +} + +.login-header img { + max-width: 100px; +} + +/* Outline required fields in Red when focused */ + +.form-control[required]:focus { + border-color: rgba(204, 0, 0, 0.8); + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(204, 0, 0, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(204, 0, 0, 0.6); +} + +/* For some reason TB 3 RC1 does not provide an input-mini */ + +.input-mini { + height: 26px; + padding: 3px 8px; + font-size: 12px; + border-radius: 3px; +} + +.error { + margin-top: 5px; + font-size: 12px; + line-height: normal; + color: #FF0000; +} + +.xsmall { + font-size: 12px; +} + +.note { + padding-top: 15px; + font-size: 12px; +} + +legend { + font-size: medium; + font-weight: bold; +} + +.navigation { + margin: 15px 0 15px 0; +} + +.page-number { + display: inline-block; + padding: 0; + margin: 0; +} + +.page-number-small { + display: inline-block; + margin-left: 10px; + font-size: 11px; +} + +.footer-navigation { + margin: 10px 0 10px 0; +} + +.lookup-navigation { + margin: 15px 0 0 0; + /*padding-top: 20px;*/ + +} + +.related-footer { + margin: 10px 0 0 0; +} + +.page-size { + font-size: 10.5px; + line-height: normal; +} + +.page-size-label { + margin-left: 15px; + font-size: 10.5px; + font-weight: normal; +} + +.accordion-heading { + font-weight: bold; + color: #0088CC; +} + +.accordion-heading i { + margin-right: 5px; +} + +.status-actions { + display: inline-block; + height: 25px; + margin-bottom: 20px; +} + +.status-spin { + display: inline-block; + margin-left: 15px; + font-size: 22px; + vertical-align: middle; +} + +.search-widget { + margin-bottom: 20px; +} + +.search-widget label { + display: inline-block; + padding-right: 15px; + vertical-align: middle; +} + +.nav-path { + padding: 5px 0 10px 0; + margin-right: 5px; + margin-bottom: 25px; + font-size: 14px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #d8d8d8; + border-radius: 6px; + box-shadow: 3px 3px 4px 0 #808080; +} + +.nav-path ul { + padding-bottom: 0; + padding-left: 0; + margin-bottom: 0; + margin-left: 10px; +} + +.greeting { + padding-right: 22px; +} + +.breadcrumb .active { + color: #171717; +} + +.nav-tabs > li > a { + font-weight: bold; +} + +input[type="text"].field-mini-height { + height: 12px; + font-size: 10.5px; +} + +select.field-mini-height { + height: 22px; + font-size: 10.5px; +} + +.ask-checkbox { + margin-left: 10px; +} + +.tree-container { + padding: 0; + margin: 5px 0 15px 0; +} + +.no-padding { + padding: 0; + margin: 0; +} + +/* Display list actions next to search widget */ + +.list-actions { + display: inline-block; + padding-bottom: 22px; + margin-left: 10px; + vertical-align: top; +} + +.list-actions .btn { + margin-right: 3px; +} + +.btn-help { + margin-left: 15px; +} + +/* End Display list actions */ + +.well { + padding-bottom: 0; +} + +/* Enable table-hover to work when table is in a well */ + +.table-hover tbody tr:hover > td, +.table-hover tbody tr:hover > th { + background-color: #fff; +} + +.table-hover-inverse tbody tr:hover > td, +.table-hover-inverse tbody tr:hover > th { + background-color: #dff0d8; +} + +/* Jobs pages */ + +.job-error, +.job-failed, +.license-expired, +.license-invalid, +.active-failures-true, +.active-failures-true a, +.active-failures-true a:active, +input[type="text"].job-failed, +input[type="text"].job-error { + color: #da4f49; +} + +.active-failures-true a:hover { + color: #FF0000; +} + +.job-failures-true { + padding-top: 5px; + color: #da4f49; +} + +.job-event-status, +.license-status { + padding-top: 5px; +} + +.job-new, +input[type="text"].job-new, +.job-canceled, +input[type="text"].job-canceled { + color: #778899; +} + +.job-pending, +.job-running, +.job-success, +.job-successful, +.active-failures-false, +.license-valid, +input[type="text"].job-success, +input[type="text"].job-successful { + color: #5bb75b; +} + +.field-success { + color: #5bb75b; +} + +.field-success input { + border-color: #5bb75b; +} + +.field-failure { + color: #FF0000; +} + +.field-failure input { + border-color: #FF0000; +} + +.job-changed, +.license-warning, +.license-demo { + color: #FF9900; +} + +.job-detail-status { + display: inline-block; + margin-top: 5px; + font-size: 15px; + font-weight: bold; +} + +.form-items .search-widget { + margin-top: 15px; +} + +.form-items .item-count { + display: inline-block; + margin-top: 25px; + font-size: small; +} + +.child-event a { + color: #171717; + cursor: default; +} + +.level-1 { + padding-left: 24px; +} + +.level-2 { + padding-left: 48px; +} + +.level-3 { + padding-left: 72px; +} + +.level-3-detail { + padding-left: 72px; +} + +#job_events .control-group { + margin-top: 0; + margin-bottom: 10px; +} + +/* End Jobs Page */ + +/* Inventory detail */ + +.inventory-content { + padding: 15px; + border: 1px solid #ddd; + border-radius: 6px; +} + +.groups-menu { + min-height: 30px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 6px; +} +.groups-menu .navbar-brand { + color: ; +} + +.inventory-title { + margin-top: 15px; + font-weight: bold; + color: #0088cc; +} + +.inventory-buttons { + text-align: right; + background-color: #f5f5f5; + border-top: 1px solid #e3e3e3; + border-right: 1px solid #e3e3e3; + border-left: 1px solid #e3e3e3; + -webkit-border-top-right-radius: 4px; + -moz-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + -moz-border-top-left-radius: 4px; + border-top-left-radius: 4px; +} + +.inventory-buttons button { + margin: 5px 5px 3px 0; +} + +.inventory-filter { + padding: 0 3px 3px 3px; + text-align: right; + background-color: #f5f5f5; + border-right: 1px solid #e3e3e3; + border-bottom: 1px solid #e3e3e3; + border-left: 1px solid #e3e3e3; + -webkit-border-bottom-right-radius: 4px; + -moz-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.inventory-filter label { + margin-right: 10px; +} + +.hosts-well { + padding-top: 5px; +} + +.hosts-title p { + font-size: 12px; +} + +.hosts-title h4 { + margin: 5px 0; +} + +.hosts-well .search-widget { + margin-top: 10px; +} + +.hosts-well .list-actions { + padding-top: 10px; +} + +.parse-selection { + display: inline-block; + margin: 5px 0 8px 0; + font-size: 12px; + line-height: normal; +} + +.parse-selection input { + margin-left: 5px; +} + +.parse-select .parse-label { + margin-left: 3px; +} + +#tree-view { + min-height: 100px; +} + +.slider { + display: inline-block; + width: 100px; + margin: 0 10px; + vertical-align: middle; +} + +/* Sort link styles */ + +.list-header:hover { + cursor: pointer; +} + +.list-header i { + margin-left: 10px; +} + +.list-header .icon-sort { + color: #ccc; +} + +.list-header .icon-sort-down, +.list-header .icon-sort-up { + color: #171717; +} + +/* job_events syles */ + +tr td i { + float: none; + padding-top: 3px; + padding-left: 0; + margin-right: 10px; + margin-left: 0; +} + +tr td button i { + padding-top: 0; + margin-right: 0; +} + +.event-form { + margin-top: 10px; + margin-bottom: 5px; +} + +.event-detail-host { + padding-top: 10px; + padding-bottom: 5px; +} + +.form-section-title { + width: 100%; + margin-top: 0; + margin-bottom: 10px; + font-weight: bold; + border-bottom: 1px solid #d8d8d8; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + opacity: 0.6; + filter: alpha(opacity=60); +} + +.modal-body .ui-accordion .ui-accordion-content { + padding: 10px; +} + +/* overrides to TB modal */ + +.modal-header { + padding: 15px 10px; + color: #2078be; + border-bottom: 1px solid #eee; + -webkit-border-top-right-radius: 3px; + -moz-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -webkit-border-top-left-radius: 3px; + -moz-border-top-left-radius: 3px; + border-top-left-radius: 3px; +} + +.modal { + border: 1px solid #171717; +} + +.close { + color: #A9A9A9; + opacity: .7; + filter: alpha(opacity=70); +} + +.modal-header h3 { + margin: 0; + font-size: 22px; + font-weight: bold; + text-rendering: optimizeLegibility; +} + +.modal-body { + padding-top: 30px; +} + +#prompt-modal .modal-body { + padding-bottom: 30px; +} + +.skinny-modal .modal-body { + padding: 5px 10px 0 10px; +} + +/* form navigation */ +.navigation-buttons { + height: 40px; +} + +/* Large desktop */ + +@media (min-width: 1200px) { + +} + +/* Portrait tablet to landscape and desktop */ + +@media (min-width: 768px) and (max-width: 979px) { + +} + +/* Landscape phone to portrait tablet */ + +@media (max-width: 767px) { + + /* Job events */ + + .level-1, + .level-2, + .level-3, + .level-3-detail { + padding-left: 0; + } + + table { + word-wrap: break-word; + table-layout: fixed; + } + +} diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index de50650319..8735c56fd7 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/awx/ui/static/lib/ansible/form-generator.js @@ -46,27 +46,34 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) this.mode = options.mode; this.modal = (options.modal) ? true : false; - this.setForm(form); - element.html(this.build(options)); // Inject the html + + // Inject the html + if (options.buildTree) { + element.html(this.buildTree(options)); + } + else { + element.html(this.build(options)); + } + this.scope = element.scope(); // Set scope specific to the element we're compiling, avoids circular reference // From here use 'scope' to manipulate the form, as the form is not in '$scope' $compile(element)(this.scope); - // Reset the scope to prevent displaying old data from our last visit to this form - for (var fld in form.fields) { - this.scope[fld] = null; - } - for (var set in form.related) { - this.scope[set] = null; - } - - if ( ((!options.modal) && options.related) || this.form.forceListeners ) { - this.addListeners(); - } - - if (options.mode == 'add') { - this.applyDefaults(); + if (options.buildTree == undefined || options.buildTree == false) { + // Reset the scope to prevent displaying old data from our last visit to this form + for (var fld in form.fields) { + this.scope[fld] = null; + } + for (var set in form.related) { + this.scope[set] = null; + } + if ( ((!options.modal) && options.related) || this.form.forceListeners ) { + this.addListeners(); + } + if (options.mode == 'add') { + this.applyDefaults(); + } } // Remove any lingering tooltip
elements @@ -622,6 +629,22 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) return html; }, + breadCrumbs: function(options) { + var html = ''; + html += "
\n"; + html += "
    \n"; + html += "
  • {{ crumb.title | capitalize }}
    • \n"; + html += "
  • "; + if (options.mode == 'edit') { + html += this.form.editTitle; + } + else { + html += this.form.addTitle; + } + html += "
    • \n
\n
\n"; + return html; + }, + build: function(options) { // // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML @@ -630,18 +653,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) var html = ''; if (!this.modal) { - //Breadcrumbs - html += "
\n"; - html += "
    \n"; - html += "
  • {{ crumb.title | capitalize }}
    • \n"; - html += "
  • "; - if (options.mode == 'edit') { - html += this.form.editTitle; - } - else { - html += this.form.addTitle; - } - html += "
    • \n
\n
\n"; + html += this.breadCrumbs(options); } if ((!this.modal && this.form.statusFields)) { @@ -872,14 +884,9 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) html += "
\n"; } } - - if (this.form.name == 'inventory' && options.mode == 'edit') { - html += this.buildTree(options); - } - else { - if ((!this.modal) && options.related && this.form.related) { - html += this.buildCollections(options); - } + + if ((!this.modal) && options.related && this.form.related) { + html += this.buildCollections(options); } return html; @@ -890,163 +897,155 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) // // Used to create the inventory detail view // - var idx = 1; var form = this.form; + var itm = "groups"; - /* var html = "
\n"; - html += "
\n"; - html += ""; - html += "Inventory Content\n"; - html += "
\n"; - html += "
\n"; - html += "
\n"; - */ - html = "
\n"; - html += "

Inventory Content

\n"; - html += "
\n"; + html = this.breadCrumbs(options); - for (var itm in form.related) { - if (form.related[itm].type == 'tree') { - html += "
"; - html += "
"; - html += ""; - html += ""; - html += ""; - html += "
\n"; - html += "
\n"; - html += "
"; - html += "
\n"; - html += "
\n"; + html += "
\n"; + + html += "
    \n"; + html += "
  • Groups
    • \n"; + html += "
  • Hosts
    • \n"; + html += "
\n"; + + html += "
\n"; + html += "
\n"; + + // build the groups tab + html += "
\n"; + html += "\n"; + html += "
    \n"; + html += "
  • Edit
    • \n"; + html += "
  • Add
    • \n"; + html += "
  • Delete
    • \n"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + //html += "
\n"; + html += "
\n"; + + // build the hosts tab + itm = "hosts"; + html += "
\n"; + html += "
\n"; + html += "
\n"; + html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true, size: 'col-lg-6'}); + + // Add actions(s) + for (var action in form.related[itm].actions) { + html += "\n"; + } + html += "
\n"; + + // Start the list + html += "
\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + for (var fld in form.related[itm].fields) { + html += "\n"; + } + html += "\n"; + html += "\n"; + html += ""; + html += "\n"; + + html += "\n"; + html += "\n"; + var cnt = 1; + var rfield; + var base = (form.related[itm].base) ? form.related[itm].base : itm; + base = base.replace(/^\//,''); + for (var fld in form.related[itm].fields) { + cnt++; + rfield = form.related[itm].fields[fld]; + html += Column({ list: form.related[itm], fld: fld, options: options, base: base }) + } + + // Row level actions + html += ""; + html += "\n"; + + // Message for when a related collection is empty + html += "\n"; + html += "\n"; + html += "\n"; + + // Message for loading + html += "\n"; + html += "\n"; + html += "\n"; + + // End List + html += "\n"; + html += "
#" + + form.related[itm]['fields'][fld].label; + html += " \n"; - html += "
\n"; - html += "
\n"; - html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true, size: 'col-lg-6'}); - - // Add actions(s) - //html += "
\n"; - html += "
\n"; - for (var action in form.related[itm].actions) { - html += "\n"; - } - html += "
\n"; - html += "
\n"; - - // Start the list - html += "
\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - for (var fld in form.related[itm].fields) { - html += "\n"; - } - html += "\n"; - html += "\n"; - html += ""; - html += "\n"; - - html += "\n"; - html += "\n"; - var cnt = 1; - var rfield; - var base = (form.related[itm].base) ? form.related[itm].base : itm; - base = base.replace(/^\//,''); - for (var fld in form.related[itm].fields) { - cnt++; - rfield = form.related[itm].fields[fld]; - html += Column({ list: form.related[itm], fld: fld, options: options, base: base }) - } - - // Row level actions - html += ""; - html += "\n"; - - // Message for when a related collection is empty - html += "\n"; - html += "\n"; - html += "\n"; - - // Message for loading - html += "\n"; - html += "\n"; - html += "\n"; - - // End List - html += "\n"; - html += "
#" + - form.related[itm]['fields'][fld].label; - html += "
{{ $index + (" + form.related[itm].iterator + "Page * " + - form.related[itm].iterator + "PageSize) + 1 }}."; - for (action in form.related[itm].fieldActions) { - html += " "; - } - html += "
No records matched your search.
Loading...
\n"; - - // Failure filter checkbox - html += "
\n"; - html += ""; - html += "\n" - html += "
\n"; - - html += "
\n"; // close well - html += "
\n"; // close group-view - - html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true }); + html += "icon-sort"; } - idx++; - } - - html += "\n"; - html += "\n"; - //html += "\n"; - - return html; - }, + html += "\">
{{ $index + (" + form.related[itm].iterator + "Page * " + + form.related[itm].iterator + "PageSize) + 1 }}."; + for (action in form.related[itm].fieldActions) { + html += " "; + } + html += "
No records matched your search.
Loading...
\n"; + + // Failure filter checkbox + //html += "
\n"; + //html += ""; + //html += "\n" + //html += "
\n"; + + html += "
\n"; // close list + html += "
\n"; // close well + + html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true }); + + html += "
\n"; + html += "
\n"; + html += "

\n"; + + return html; + + }, buildCollections: function(options) { // diff --git a/awx/ui/static/lib/ansible/generator-helpers.js b/awx/ui/static/lib/ansible/generator-helpers.js index 19cbb52932..43a2b3c851 100644 --- a/awx/ui/static/lib/ansible/generator-helpers.js +++ b/awx/ui/static/lib/ansible/generator-helpers.js @@ -266,20 +266,20 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers']) html += (useMini) ? " related-footer" : ""; html += "\">\n"; html += "
\n"; - html += "\n"; - html += "\n"; + html += "\n"; + "ng-disabled=\"" + iterator + "NextUrl == null || " + iterator + "NextUrl == undefined\">Next \n"; if (mode != 'lookup') { - html += "\n"; + html += "\n"; html += "\n"; } - html += "
0\" "; + html += "
0\" "; html += ">Page: {{ " + iterator + "Page + 1 }} of {{ " + iterator + "PageCount }}
\n"; html += "\n"; html += "
\n"; diff --git a/awx/ui/static/lib/jstree/themes/ansible/style.css b/awx/ui/static/lib/jstree/themes/ansible/style.css index 4a05ff379e..f46f97cd67 100644 --- a/awx/ui/static/lib/jstree/themes/ansible/style.css +++ b/awx/ui/static/lib/jstree/themes/ansible/style.css @@ -6,13 +6,13 @@ #tree-view { margin: 0; - padding: 0; + padding: 15px; } .jstree-ansible { background-color: #f5f5f5; - border-left: 1px solid #e3e3e3; - border-right: 1px solid #e3e3e3; + border: 1px solid #e3e3e3; + border-radius: 6px; } .jstree-ansible li, diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index bab709c883..fab3620453 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -7,7 +7,7 @@ - + @@ -94,7 +94,7 @@ -
+