diff --git a/awx/ui/static/fonts/merriweather-bold-webfont.woff b/awx/ui/static/fonts/merriweather-bold-webfont.woff new file mode 100644 index 0000000000..a1b95b5c1f Binary files /dev/null and b/awx/ui/static/fonts/merriweather-bold-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather-bold-webfont.woff2 b/awx/ui/static/fonts/merriweather-bold-webfont.woff2 new file mode 100644 index 0000000000..d9bf97ef75 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-bold-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff b/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff new file mode 100644 index 0000000000..1696f92a04 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff2 b/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff2 new file mode 100644 index 0000000000..1f7a7ae204 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff b/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff new file mode 100644 index 0000000000..6b3baeb97b Binary files /dev/null and b/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff2 b/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff2 new file mode 100644 index 0000000000..cbce14b28a Binary files /dev/null and b/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather-italic-webfont.woff b/awx/ui/static/fonts/merriweather-italic-webfont.woff new file mode 100644 index 0000000000..987146da8b Binary files /dev/null and b/awx/ui/static/fonts/merriweather-italic-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather-italic-webfont.woff2 b/awx/ui/static/fonts/merriweather-italic-webfont.woff2 new file mode 100644 index 0000000000..6a17eaa263 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-italic-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff b/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff new file mode 100644 index 0000000000..75146e6523 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff2 b/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff2 new file mode 100644 index 0000000000..5f42282de1 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather-regular-webfont.woff b/awx/ui/static/fonts/merriweather-regular-webfont.woff new file mode 100644 index 0000000000..4ca3dc6672 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-regular-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather-regular-webfont.woff2 b/awx/ui/static/fonts/merriweather-regular-webfont.woff2 new file mode 100644 index 0000000000..92a537d069 Binary files /dev/null and b/awx/ui/static/fonts/merriweather-regular-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather_light-webfont.woff b/awx/ui/static/fonts/merriweather_light-webfont.woff new file mode 100644 index 0000000000..c171be2053 Binary files /dev/null and b/awx/ui/static/fonts/merriweather_light-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather_light-webfont.woff2 b/awx/ui/static/fonts/merriweather_light-webfont.woff2 new file mode 100644 index 0000000000..1a200b5582 Binary files /dev/null and b/awx/ui/static/fonts/merriweather_light-webfont.woff2 differ diff --git a/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff b/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff new file mode 100644 index 0000000000..7a2b768928 Binary files /dev/null and b/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff differ diff --git a/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff2 b/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff2 new file mode 100644 index 0000000000..c2008e7b7f Binary files /dev/null and b/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff2 differ diff --git a/awx/ui/static/img/InventoryScripts.svg b/awx/ui/static/img/InventoryScripts.svg new file mode 100644 index 0000000000..9efdad48a4 --- /dev/null +++ b/awx/ui/static/img/InventoryScripts.svg @@ -0,0 +1,15 @@ + + + + InventoryScripts + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/awx/ui/static/img/ManagementJobs.svg b/awx/ui/static/img/ManagementJobs.svg new file mode 100644 index 0000000000..c3358b8d28 --- /dev/null +++ b/awx/ui/static/img/ManagementJobs.svg @@ -0,0 +1,14 @@ + + + + MaintenanceJobs + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/awx/ui/static/img/Organizations.svg b/awx/ui/static/img/Organizations.svg new file mode 100644 index 0000000000..db43b3d250 --- /dev/null +++ b/awx/ui/static/img/Organizations.svg @@ -0,0 +1,17 @@ + + + + Organizations + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index 33d171e8e0..133ac2e52a 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -38,6 +38,8 @@ import routeExtensions from 'tower/shared/route-extensions/main'; import breadcrumbs from 'tower/shared/breadcrumbs/main'; // modules +import setupMenu from 'tower/setup-menu/main'; +import mainMenu from 'tower/main-menu/main'; import browserData from 'tower/browser-data/main'; import {JobDetailController} from 'tower/controllers/JobDetail'; @@ -83,6 +85,8 @@ var tower = angular.module('Tower', [ browserData.name, breadcrumbs.name, systemTracking.name, + setupMenu.name, + mainMenu.name, 'AuthService', 'Utilities', 'LicenseHelper', diff --git a/awx/ui/static/js/setup-menu/main.js b/awx/ui/static/js/setup-menu/main.js new file mode 100644 index 0000000000..085e901f43 --- /dev/null +++ b/awx/ui/static/js/setup-menu/main.js @@ -0,0 +1,15 @@ +import route from './setup.route'; + +export default + angular.module('setupMenu', + [ 'AboutAnsibleHelpModal', + 'LicenseHelper', + 'ConfigureTowerHelper', + 'CreateCustomInventoryHelper' + ]) + .config(['$routeProvider', function($routeProvider) { + var url = route.route; + delete route.route; + $routeProvider.when(url, route) + }]); + diff --git a/awx/ui/static/js/setup-menu/setup-item.block.less b/awx/ui/static/js/setup-menu/setup-item.block.less new file mode 100644 index 0000000000..15f1955425 --- /dev/null +++ b/awx/ui/static/js/setup-menu/setup-item.block.less @@ -0,0 +1,53 @@ +/** @define SetupItem */ + +@import 'shared/branding/colors.less'; + +.SetupItem { + @vertical-basis: 3rem; + + padding: 0; + padding-bottom: @vertical-basis; + + &:nth-child(2n) { + .SetupItem-icon { + background-color: @blue; + } + } + + @media screen and (min-width: 931px) and (max-width: 1251px) { + &:nth-child(2n) { + .SetupItem-icon { + background-color: @ansible-red; + } + } + &:nth-child(4n+3), &:nth-child(4n+4) { + .SetupItem-icon { + background-color: @blue; + } + } + } + + .SetupItem-icon { + display: flex; + padding: 1.5rem; + background-color: @ansible-red; + justify-content: center; + align-items: center; + img { + height: 26px; + } + } + + &--button { + .SetupItem-icon { + width: 100%; + } + } + + .SetupItem-title { + font-size: 3rem; + text-align: center; + padding: @vertical-basis; + margin: 0; + } +} diff --git a/awx/ui/static/js/setup-menu/setup-menu.block.less b/awx/ui/static/js/setup-menu/setup-menu.block.less new file mode 100644 index 0000000000..7263e3835c --- /dev/null +++ b/awx/ui/static/js/setup-menu/setup-menu.block.less @@ -0,0 +1,43 @@ +/** @define SetupMenu */ + +@import "shared/branding/colors.less"; + +.SetupMenu { + display: flex; + justify-content: flex-start; + background-color: #EDEDED; + flex-wrap: wrap; + margin-top: -2.8rem; + + &-block { + display: flex; + flex-direction: column; + color: white; + flex: 1 0 30%; + margin: 2.8rem; + max-width: 24rem; + transition: background-color 0.25s ease-in-out; + background-color: white; + &:hover, &:focus, &:active { + color: black; + } + } + + .SetupItem-description { + font-family: merriweather; + font-weight: lighter; + color: black; + padding: 1.4rem; + padding-top: 0; + } + + @media screen and (max-width: 930px) { + flex-flow: nowrap column; + align-items: center; + &-block { + width: 100%; + max-width: inherit; + } + } + +} diff --git a/awx/ui/static/js/setup-menu/setup-menu.partial.html b/awx/ui/static/js/setup-menu/setup-menu.partial.html new file mode 100644 index 0000000000..ce45176f4d --- /dev/null +++ b/awx/ui/static/js/setup-menu/setup-menu.partial.html @@ -0,0 +1,57 @@ +
+ + +
diff --git a/awx/ui/static/js/setup-menu/setup.controller.js b/awx/ui/static/js/setup-menu/setup.controller.js new file mode 100644 index 0000000000..a093037020 --- /dev/null +++ b/awx/ui/static/js/setup-menu/setup.controller.js @@ -0,0 +1,30 @@ +export default + [ '$scope', + '$rootScope', + 'AboutAnsibleHelp', + 'LicenseViewer', + 'ConfigureTower', + 'CreateCustomInventory', + function( + $scope, + $rootScope, + showAboutModal, + licenseViewer, + configureTower, + showInventoryScriptsModal + ) { + $scope.showAboutModal = showAboutModal; + $scope.showLicenseModal = licenseViewer.showViewer.bind(licenseViewer); + + $scope.showManagementJobsModal = + configureTower.bind(null, + { scope: $rootScope, + parent_scope: $rootScope + }); + + $scope.showInventoryScriptsModal = showInventoryScriptsModal.bind(null, + { parent_scope: $rootScope + }); + + } + ] diff --git a/awx/ui/static/js/setup-menu/setup.route.js b/awx/ui/static/js/setup-menu/setup.route.js new file mode 100644 index 0000000000..02490f9635 --- /dev/null +++ b/awx/ui/static/js/setup-menu/setup.route.js @@ -0,0 +1,7 @@ +import controller from './setup.controller'; + +export default { + route: '/setup', + controller: controller, + templateUrl: '/static/js/setup-menu/setup-menu.partial.html' +} diff --git a/awx/ui/static/js/shared/container/container.block.less b/awx/ui/static/js/shared/container/container.block.less new file mode 100644 index 0000000000..332675b721 --- /dev/null +++ b/awx/ui/static/js/shared/container/container.block.less @@ -0,0 +1,19 @@ +/** @define Container */ + +.Container { + display: flex; + flex-wrap: wrap; + &-main { + flex: 9; + margin-right: 2.28rem; + } + &-aside { + flex: 3; + } +} + +@media screen and (max-width: 710px) { + .Container { + flex-direction: column; + } +} diff --git a/awx/ui/static/js/shared/detail-nav/detail-nav.block.less b/awx/ui/static/js/shared/detail-nav/detail-nav.block.less new file mode 100644 index 0000000000..0209752707 --- /dev/null +++ b/awx/ui/static/js/shared/detail-nav/detail-nav.block.less @@ -0,0 +1,12 @@ +/** @define DetailNav */ + +.DetailNav { + + &-title { + font-size: 1.4rem; + margin-bottom: 0.4rem; + &:first-child { + margin-top: 0; + } + } +} diff --git a/awx/ui/static/js/shared/menu/button.block.less b/awx/ui/static/js/shared/menu/button.block.less new file mode 100644 index 0000000000..dceb1d51d2 --- /dev/null +++ b/awx/ui/static/js/shared/menu/button.block.less @@ -0,0 +1,16 @@ +/** @define Button */ + +@import 'shared/branding/colors.less'; + +.Button { + &--pseudo { + // Make pseudo button + background: transparent; + border: 0; + padding: 0; + color: @blue-link; + text-align: left; + + outline: none; + } +} diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index b9147c85b4..65325190d8 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -22,6 +22,7 @@ } @import "../js/shared/branding/colors.less"; +@import "fonts.less"; @import "main-layout.less"; @import "animations.less"; @import "jquery-ui-overrides.less"; diff --git a/awx/ui/static/less/breadcrumbs.less b/awx/ui/static/less/breadcrumbs.less index 01be1cc388..523fda2e6c 100644 --- a/awx/ui/static/less/breadcrumbs.less +++ b/awx/ui/static/less/breadcrumbs.less @@ -25,7 +25,7 @@ color: @black; font-weight: normal; text-decoration: none; - padding: 3px 8px 3px 20px; + padding: 3px 8px 3px 16px; background: @white; /* fallback color */ position: relative; left: 0; @@ -39,6 +39,7 @@ .ansible-breadcrumb li:first-child a{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; + padding-left: 11px; } .ansible-breadcrumb li.active a { diff --git a/awx/ui/static/less/fonts.less b/awx/ui/static/less/fonts.less new file mode 100644 index 0000000000..9dcf8cab5b --- /dev/null +++ b/awx/ui/static/less/fonts.less @@ -0,0 +1,19 @@ +.include-font(@family-name; @filename; @weight: normal; @style: normal) { + @font-face { + font-family: @family-name; + src: url("/static/fonts/@{filename}.woff2") format('woff2'), + url("/static/fonts/@{filename}.woff") format('woff'); + font-weight: @weight; + font-style: @style; + } +} + +.include-font('merriweather'; 'merriweather_light-webfont'; 200); +.include-font('merriweather'; 'merriweather-regular-webfont'); +.include-font('merriweather'; 'merriweather-bold-webfont'; bold); +.include-font('merriweather'; 'merriweather_ultrabold-webfont'; 800); +.include-font('merriweather'; 'merriweather-lightitalic-webfont'; 200; italic); +.include-font('merriweather'; 'merriweather-bolditalic-webfont'; bold; italic); +.include-font('merriweather'; 'merriweather-heavyitalic-webfont'; 800; italic); +.include-font('merriweather'; 'merriweather-italic-webfont'; normal; italic); + diff --git a/awx/ui/static/less/main-layout.less b/awx/ui/static/less/main-layout.less index d6b932d35b..89070609f3 100644 --- a/awx/ui/static/less/main-layout.less +++ b/awx/ui/static/less/main-layout.less @@ -7,12 +7,6 @@ * */ -html, body { height: 100%; } - -html { - background-color: @white; -} - body { font-family: 'Open Sans', sans-serif; font-weight: 400; diff --git a/awx/ui/static/lib/angular/index.js b/awx/ui/static/lib/angular/index.js new file mode 100644 index 0000000000..5c1aafcca2 --- /dev/null +++ b/awx/ui/static/lib/angular/index.js @@ -0,0 +1,2 @@ +require('./angular'); +module.exports = angular; diff --git a/awx/ui/static/lib/angular/package.json b/awx/ui/static/lib/angular/package.json new file mode 100644 index 0000000000..abfd51463e --- /dev/null +++ b/awx/ui/static/lib/angular/package.json @@ -0,0 +1,25 @@ +{ + "name": "angular", + "version": "1.3.15", + "description": "HTML enhanced for web apps", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/angular/angular.js.git" + }, + "keywords": [ + "angular", + "framework", + "browser", + "client-side" + ], + "author": "Angular Core Team ", + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/angular.js/issues" + }, + "homepage": "http://angularjs.org" +} diff --git a/awx/ui/static/partials/credentials.html b/awx/ui/static/partials/credentials.html index 83e8dedf50..089d6cf399 100644 --- a/awx/ui/static/partials/credentials.html +++ b/awx/ui/static/partials/credentials.html @@ -1,4 +1,5 @@ + + + +