From ea91fabba0130ba8fd8fe41a4bf434a61621d7dd Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Wed, 6 Sep 2017 17:32:32 -0400 Subject: [PATCH] implement componenitized navigation and remove old nav and layout code --- .../credentials/legacy.credentials.js | 1 - awx/ui/client/legacy-styles/ansible-ui.less | 43 ++- awx/ui/client/legacy-styles/breadcrumbs.less | 84 ----- awx/ui/client/legacy-styles/jPushMenu.less | 183 ----------- awx/ui/client/legacy-styles/main-layout.less | 127 -------- awx/ui/client/lib/components/_index.less | 1 + .../lib/components/components.strings.js | 25 ++ awx/ui/client/lib/components/index.js | 10 +- .../client/lib/components/layout/_index.less | 172 ++++++++++ .../lib/components/layout/layout.directive.js | 52 +++ .../lib/components/layout/layout.partial.html | 85 +++++ .../layout/side-nav-item.directive.js | 51 +++ .../layout/side-nav-item.partial.html | 8 + .../components/layout/side-nav.directive.js | 32 ++ .../components/layout/side-nav.partial.html | 8 + .../layout/top-nav-item.directive.js | 30 ++ .../layout/top-nav-item.partial.html | 3 + awx/ui/client/lib/theme/_variables.less | 39 ++- awx/ui/client/lib/theme/index.less | 17 +- awx/ui/client/src/about/about.controller.js | 2 +- awx/ui/client/src/about/about.route.js | 2 +- awx/ui/client/src/app.js | 18 -- .../src/bread-crumb/bread-crumb.block.less | 5 +- .../src/configuration/configuration.route.js | 1 - awx/ui/client/src/credential-types/main.js | 1 - awx/ui/client/src/footer/footer.block.less | 52 --- awx/ui/client/src/footer/footer.directive.js | 16 - awx/ui/client/src/footer/footer.partial.html | 3 - awx/ui/client/src/footer/main.js | 11 - .../instance-groups/instance-groups.route.js | 1 - awx/ui/client/src/inventory-scripts/main.js | 1 - awx/ui/client/src/license/license.route.js | 1 - .../client/src/main-menu/main-menu.block.less | 306 ------------------ .../src/main-menu/main-menu.directive.js | 56 ---- .../src/main-menu/main-menu.partial.html | 225 ------------- awx/ui/client/src/main-menu/main.js | 5 - .../src/management-jobs/card/card.route.js | 1 - awx/ui/client/src/notifications/main.js | 4 +- awx/ui/client/src/organizations/main.js | 1 - .../src/setup-menu/hover-icon.block.less | 45 --- awx/ui/client/src/setup-menu/main.js | 12 - .../src/setup-menu/setup-extra.block.less | 14 - .../src/setup-menu/setup-item.block.less | 73 ----- .../src/setup-menu/setup-menu.block.less | 13 - .../src/setup-menu/setup-menu.partial.html | 79 ----- awx/ui/client/src/setup-menu/setup.route.js | 48 --- awx/ui/client/src/teams/main.js | 1 - awx/ui/client/src/users/main.js | 1 - awx/ui/templates/ui/index.html | 248 +++++++------- 49 files changed, 677 insertions(+), 1540 deletions(-) delete mode 100644 awx/ui/client/legacy-styles/breadcrumbs.less delete mode 100644 awx/ui/client/legacy-styles/jPushMenu.less delete mode 100644 awx/ui/client/legacy-styles/main-layout.less create mode 100644 awx/ui/client/lib/components/layout/_index.less create mode 100644 awx/ui/client/lib/components/layout/layout.directive.js create mode 100644 awx/ui/client/lib/components/layout/layout.partial.html create mode 100644 awx/ui/client/lib/components/layout/side-nav-item.directive.js create mode 100644 awx/ui/client/lib/components/layout/side-nav-item.partial.html create mode 100644 awx/ui/client/lib/components/layout/side-nav.directive.js create mode 100644 awx/ui/client/lib/components/layout/side-nav.partial.html create mode 100644 awx/ui/client/lib/components/layout/top-nav-item.directive.js create mode 100644 awx/ui/client/lib/components/layout/top-nav-item.partial.html delete mode 100644 awx/ui/client/src/footer/footer.block.less delete mode 100644 awx/ui/client/src/footer/footer.directive.js delete mode 100644 awx/ui/client/src/footer/footer.partial.html delete mode 100644 awx/ui/client/src/footer/main.js delete mode 100644 awx/ui/client/src/main-menu/main-menu.block.less delete mode 100644 awx/ui/client/src/main-menu/main-menu.directive.js delete mode 100644 awx/ui/client/src/main-menu/main-menu.partial.html delete mode 100644 awx/ui/client/src/main-menu/main.js delete mode 100644 awx/ui/client/src/setup-menu/hover-icon.block.less delete mode 100644 awx/ui/client/src/setup-menu/main.js delete mode 100644 awx/ui/client/src/setup-menu/setup-extra.block.less delete mode 100644 awx/ui/client/src/setup-menu/setup-item.block.less delete mode 100644 awx/ui/client/src/setup-menu/setup-menu.block.less delete mode 100644 awx/ui/client/src/setup-menu/setup-menu.partial.html delete mode 100644 awx/ui/client/src/setup-menu/setup.route.js diff --git a/awx/ui/client/features/credentials/legacy.credentials.js b/awx/ui/client/features/credentials/legacy.credentials.js index 26f2163115..6314b6a18f 100644 --- a/awx/ui/client/features/credentials/legacy.credentials.js +++ b/awx/ui/client/features/credentials/legacy.credentials.js @@ -10,7 +10,6 @@ function LegacyCredentialsService (pathService) { name: 'credentials', route: '/credentials', ncyBreadcrumb: { - parent: 'setup', label: N_('CREDENTIALS') }, data: { diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 6ae02877f3..2e113a5d8b 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -600,15 +600,6 @@ dd { text-decoration: none; } -.navbar.site-footer { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; - background-color: @black; -} - .login-header img { width: 60%; } @@ -2309,3 +2300,37 @@ input[disabled].ui-spinner-input { .ui-dialog .ui-dialog-content { background: @default-bg; } + +html { height: 100%; } + +body { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + color: @default-data-txt; + background-color: @default-secondary-bg; +} + +.container-fluid { + padding-left: 20px; + padding-right: 20px; +} + +#content-container { + padding-bottom: 0px; +} + +.Panel { + background-color: @panel-bg; + border-radius: 5px; + padding: 20px; + border: 1px solid @panel-border; + margin-top: 20px; +} + +.Panel-hidden { + display: none; +} + +.btn { + text-transform: uppercase; +} diff --git a/awx/ui/client/legacy-styles/breadcrumbs.less b/awx/ui/client/legacy-styles/breadcrumbs.less deleted file mode 100644 index a61c55dcbd..0000000000 --- a/awx/ui/client/legacy-styles/breadcrumbs.less +++ /dev/null @@ -1,84 +0,0 @@ -/********************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * breadcrumbs.less - * - * custom breadcrumbs - * - * JT-- 7/22/14 -- changed the breadcrumbs to be all white with grey outline - * - */ - -.ansible-breadcrumb { - list-style: none; - overflow: hidden; - padding: 0; - margin: 0 0 15px 0; -} -.ansible-breadcrumb li { - float: left; - height: 26px; - margin-top: 3px; - margin-bottom: 3px; -} -.ansible-breadcrumb li a { - color: @black; - font-weight: normal; - text-decoration: none; - padding: 3px 8px 3px 16px; - background: @white; /* fallback color */ - position: relative; - left: 0; - top: 0; - display: block; - border-style: solid; - border-color: @grey; - border-width: thin; - float: left; -} -.ansible-breadcrumb li:first-child a{ - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - padding-left: 11px; -} - -.ansible-breadcrumb li.active a { - background: @white; - color: @black; - font-weight: bold; -} -.ansible-breadcrumb li a:after { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 13px dashed transparent; /* Go big on the size, and let overflow hide */ - border-bottom: 13px dashed transparent; - border-left: 10px solid @white; - position: absolute; - top: 50%; - margin-top: -13px; - left: 100%; - z-index: 2; -} -.ansible-breadcrumb li.active a:after { - border-left: 10px solid @white -} -.ansible-breadcrumb li a:before { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 13px dashed transparent; - border-bottom: 13px dashed transparent; - border-left: 11px solid @grey; - position: absolute; - top: 50%; - margin-top: -13px; - margin-left: 1px; - left: 100%; - z-index: 1; -} -.ansible-breadcrumb li.active a:before { - border-left: 11px solid @grey; -} diff --git a/awx/ui/client/legacy-styles/jPushMenu.less b/awx/ui/client/legacy-styles/jPushMenu.less deleted file mode 100644 index 7f919f5ef5..0000000000 --- a/awx/ui/client/legacy-styles/jPushMenu.less +++ /dev/null @@ -1,183 +0,0 @@ -/********************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * jPushMenu.less - * - * Custom styles for slideout menu - * - */ - -.cbp-spmenu { - background: #E8E8E8; - position: fixed; -} - -.cbp-spmenu h3 { - color: @white; - font-size: 14px; - padding: 15px 10px 15px 10px; - margin: 0; - font-weight: 600; - background: @grey; -} - -.cbp-spmenu a { - display: block; - color: @grey-txt; - font-size: 1.1em; - font-weight: 300; -} - -.cbp-spmenu a:hover { - background: #D8D8D8; - color: @black; -} - -.cbp-spmenu a.active { - background: #E8E8E8; - color: @black; - font-weight: 600; -} - -/* Orientation-dependent styles for the content of the menu */ - -.cbp-spmenu-vertical { - width: 240px; - height: 100%; - top: 0; - z-index: 1100; - overflow-y:auto; -} - -.cbp-spmenu-vertical a { - border-bottom: 1px solid #D8D8D8; - padding: 10px 10px 10px 20px; -} - -.cbp-spmenu-horizontal { - width: 100%; - height: 150px; - left: 0; - z-index: 1000; - overflow: hidden; -} - -.cbp-spmenu-horizontal h3 { - height: 100%; - width: 20%; - float: left; -} - -.cbp-spmenu-horizontal a { - float: left; - width: 20%; - padding: 0.8em; - border-left: 1px solid #258ecd; -} - -/* Vertical menu that slides from the left or right */ - -.cbp-spmenu-left { - left: -240px; -} - -.cbp-spmenu-right { - right: -240px; -} - -.cbp-spmenu-open.cbp-spmenu-open { - -moz-box-shadow: 3px 3px 5px 6px #ccc; - -webkit-box-shadow: 3px 3px 5px 6px #ccc; - box-shadow: 3px 3px 5px 6px #ccc; -} - -.cbp-spmenu-left.cbp-spmenu-open { - left: 0px; -} - -.cbp-spmenu-right.cbp-spmenu-open { - right: 0px; -} - -/* Horizontal menu that slides from the top or bottom */ - -.cbp-spmenu-top { - top: -150px; -} - -.cbp-spmenu-bottom { - bottom: -150px; -} - -.cbp-spmenu-top.cbp-spmenu-open { - top: 0px; -} - -.cbp-spmenu-bottom.cbp-spmenu-open { - bottom: 0px; -} - -/* Push classes applied to the body */ - -.cbp-spmenu-push { - position: relative; - overflow-x: hidden; - left: 0; -} - -.cbp-spmenu-push-toright { - left: 240px; -} - -.cbp-spmenu-push-toleft { - left: -240px; -} - -/* Transitions */ - -.cbp-spmenu, -.cbp-spmenu-push { - -webkit-transition: all 0.3s ease; - -moz-transition: all 0.3s ease; - transition: all 0.3s ease; -} - -/* Example media queries */ - -@media screen and (max-width: 55.1875em){ - - .cbp-spmenu-horizontal { - font-size: 75%; - height: 110px; - } - - .cbp-spmenu-top { - top: -110px; - } - - .cbp-spmenu-bottom { - bottom: -110px; - } - -} - -@media screen and (max-height: 26.375em){ - - .cbp-spmenu-vertical { - font-size: 90%; - width: 190px; - } - - .cbp-spmenu-left, - .cbp-spmenu-push-toleft { - left: -190px; - } - - .cbp-spmenu-right { - right: -190px; - } - - .cbp-spmenu-push-toright { - left: 190px; - } -} diff --git a/awx/ui/client/legacy-styles/main-layout.less b/awx/ui/client/legacy-styles/main-layout.less deleted file mode 100644 index 0c4e4a9148..0000000000 --- a/awx/ui/client/legacy-styles/main-layout.less +++ /dev/null @@ -1,127 +0,0 @@ -/********************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * main-layout.css - * - * primary page layout styles - * - */ - -html { height: 100%; } - -body { - font-family: 'Open Sans', sans-serif; - font-weight: 400; - color: @default-data-txt; - padding-top: 100px; - min-height: 100%; - padding-bottom: 50px; - position: relative; - background-color: @default-secondary-bg; - padding-top: 100px; -} - -.container-fluid { - padding-left: 20px; - padding-right: 20px; -} - -#main-menu-container { - .navbar { - margin-bottom: 0; - } - #ansible-brand-logo { - width: 160px; - height: 53px; - margin-top: 5px; - margin-left: 10px; - } - /*.navbar-collapse { - margin-left: 47px; - }*/ - .collapsed-option { - display: none; - } - .nav > li > a { - padding-top: 11px; - padding-bottom: 11px; - } -} - -#ansible-list-title { - display: none; -} - -#content-container { - padding-bottom: 0px; -} - -.group-breadcrumbs { - margin-bottom: 20px; -} - -#socket-beacon-div { - display: none; -} - -#socket-beacon-li { - display: block; -} - -#account-submenu { - margin-right: 5px; -} - -.site-footer { - height: 15px; -} - -.Panel { - background-color: @panel-bg; - border-radius: 5px; - padding: 20px; - border: 1px solid @panel-border; - margin-top: 20px; -} - -.Panel-hidden { - display: none; -} - -.btn{ - text-transform: uppercase; -} - -@media (max-width: 1075px) { - - #main-menu-container { - .collapsed-option { - display: block; - } - } - #ansible-list-title { - display: inline-block; - position: relative; - top: 1px; - left: 10px; - color: @default-data-txt; - text-transform:capitalize; - } - #account-menu { - display: none; - } - #account-submenu { - margin-left: 20px; - } - #socket-beacon-div { - display: block; - position: fixed; - right: 30px; - top: 5px; - margin-right: 50px; - margin-top: 15px; - } - #socket-beacon-li { - display: none; - } -} diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index 1902014e11..f4985cf931 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -1,5 +1,6 @@ @import 'action/_index'; @import 'input/_index'; +@import 'layout/_index'; @import 'modal/_index'; @import 'panel/_index'; @import 'popover/_index'; diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 07346e966b..296ab70b4e 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -47,6 +47,31 @@ function ComponentsStrings (BaseString) { DEFAULT: t.s('Copy full revision to clipboard.'), COPIED: t.s('Copied to clipboard.') } + + ns.layout = { + CURRENT_USER_LABEL: t.s('Logged in as'), + VIEW_DOCS: t.s('View Documentation'), + LOGOUT: t.s('Logout'), + DASHBOARD: t.s('Dashboard'), + JOBS: t.s('Jobs'), + SCHEDULES: t.s('Schedules'), + PORTAL_MODE: t.s('Portal Mode'), + PROJECTS: t.s('Projects'), + CREDENTIALS: t.s('Credentials'), + CREDENTIAL_TYPES: t.s('Credential Types'), + INVENTORIES: t.s('Inventories'), + TEMPLATES: t.s('Templates'), + ORGANIZATIONS: t.s('Organizations'), + USERS: t.s('Users'), + TEAMS: t.s('Teams'), + INVENTORY_SCRIPTS: t.s('Inventory Scripts'), + NOTIFICATIONS: t.s('Notifications'), + MANAGEMENT_JOBS: t.s('Management Jobs'), + INSTANCE_GROUPS: t.s('Instance Groups'), + SETTINGS: t.s('Settings'), + FOOTER_ABOUT: t.s('About'), + FOOTER_COPYRIGHT: t.s('Copyright © 2017 Red Hat, Inc.') + } } ComponentsStrings.$inject = ['BaseStringService']; diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index 40a0264e28..fad0d7d79d 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -1,3 +1,7 @@ +import layout from './layout/layout.directive'; +import topNavItem from './layout/top-nav-item.directive'; +import sideNav from './layout/side-nav.directive'; +import sideNavItem from './layout/side-nav-item.directive'; import actionGroup from './action/action-group.directive'; import divider from './utility/divider.directive'; import form from './form/form.directive'; @@ -26,6 +30,10 @@ import ComponentsStrings from './components.strings'; angular .module('at.lib.components', []) + .directive('atLayout', layout) + .directive('atTopNavItem', topNavItem) + .directive('atSideNav', sideNav) + .directive('atSideNavItem', sideNavItem) .directive('atActionGroup', actionGroup) .directive('atDivider', divider) .directive('atForm', form) @@ -50,5 +58,3 @@ angular .directive('atTruncate', truncate) .service('ComponentsStrings', ComponentsStrings) .service('BaseInputController', BaseInputController); - - diff --git a/awx/ui/client/lib/components/layout/_index.less b/awx/ui/client/lib/components/layout/_index.less new file mode 100644 index 0000000000..5224df7628 --- /dev/null +++ b/awx/ui/client/lib/components/layout/_index.less @@ -0,0 +1,172 @@ +.at-Layout { + height: 100vh; + width: 100vw; + display: flex; + + &-topNav { + display: flex; + background-color: @at-color-top-nav-background; + border-bottom: @at-border-default-width solid @at-color-top-nav-border-bottom; + z-index: @at-z-index-nav; + position: fixed; + right: 0; + left: 0; + top: 0; + height: @at-height-top-nav; + + .at-Layout-topNavRightAligner { + margin-left: auto; + } + + .at-Layout-topNavItem { + color: @at-color-top-nav-item-text; + padding: 0 @at-padding-top-nav-item-sides; + + a { + cursor: pointer; + } + + a, div { + color: @at-color-top-nav-item-text; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + } + + i { + color: @at-color-top-nav-item-icon; + font-size: @at-height-top-nav-item-icon; + } + + &--logo { + padding-left: 0px; + + img { + max-width: @main-menu-max-width; + max-height: @main-menu-max-height; + height: @main-menu-height; + width: @main-menu-width; + margin: @main-menu-margin; + flex: initial; + } + } + + &--user { + i { + margin-right: @at-margin-top-nav-item-between-icon-and-name; + } + } + + &--socket { + i { + margin-top: @at-margin-top-nav-item-icon-socket-top-makeup; + font-size: @at-height-top-nav-item-icon-socket; + text-shadow: + -@at-border-default-width -@at-border-default-width 0 @at-color-top-nav-item-icon-socket-outline, + @at-border-default-width -@at-border-default-width 0 @at-color-top-nav-item-icon-socket-outline, + -@at-border-default-width @at-border-default-width 0 @at-color-top-nav-item-icon-socket-outline, + @at-border-default-width @at-border-default-width 0 @at-color-top-nav-item-icon-socket-outline + } + } + + &:focus, + &:hover, + &.is-currentRoute { + background-color: @at-color-top-nav-item-background-hover; + } + + &.is-loggedOut { + opacity: 0; + } + } + } + + &-side { + background: @at-color-side-nav-background; + color: @at-color-side-nav-content; + position: fixed; + bottom: 0; + top: @at-height-top-side-nav-makeup; + overflow-y: auto; + min-height: 100vh; + min-width: @at-width-collapsed-side-nav; + + .at-Layout-sideNavItem { + display: flex; + cursor: pointer; + + i { + font-size: @at-height-side-nav-item-icon; + padding: @at-padding-side-nav-item-icon; + } + + &:hover, + &.is-active { + background: @at-color-side-nav-item-background-hover; + border-left: @at-highlight-left-border-size solid @at-color-side-nav-item-border-hover; + + i { + margin-left: @at-highlight-left-border-margin-makeup; + } + } + } + + .at-Layout-sideNavSpacer { + height: @at-height-side-nav-spacer; + } + + &--expanded { + width: @at-width-expanded-side-nav; + + .at-Layout-sideNavItem { + display: flex; + justify-content: flex-start; + align-items: center; + padding-right: @at-padding-between-side-nav-icon-text; + text-transform: uppercase; + } + + + .at-Layout-main { + padding-left: @at-width-expanded-side-nav; + } + } + } + + &-main { + display: flex; + height: 100%; + width: 100%; + flex-direction: column; + padding-left: @at-width-collapsed-side-nav; + overflow-x: hidden; + } + + &-footer { + height: 40px; + background-color: @at-color-footer-background; + color: @at-color-footer; + z-index: 1040; + position: absolute; + right: @at-padding-footer-right; + left: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: flex-end; + margin-left: (@at-width-collapsed-side-nav + 5); + + a { + cursor: pointer; + margin-right: @at-margin-after-footer-link; + } + } + + &-side--expanded { + + .at-Layout-main { + .at-Layout-footer { + margin-left: @at-width-expanded-side-nav; + } + } + } +} diff --git a/awx/ui/client/lib/components/layout/layout.directive.js b/awx/ui/client/lib/components/layout/layout.directive.js new file mode 100644 index 0000000000..8148942eba --- /dev/null +++ b/awx/ui/client/lib/components/layout/layout.directive.js @@ -0,0 +1,52 @@ +function AtLayoutController ($scope, strings) { + let vm = this || {}; + + $scope.$on('$stateChangeSuccess', function(event, next) { + vm.currentState = next.name; + }); + + $scope.$watch('$root.current_user', function(val) { + vm.isLoggedIn = val && val.username; + if (val) { + vm.isSuperUser = $scope.$root.user_is_superuser || $scope.$root.user_is_system_auditor; + vm.currentUsername = val.username; + vm.currentUserId = val.id; + } + }); + + $scope.$watch('$root.socketStatus', function(newStatus) { + vm.socketState = newStatus; + vm.socketIconClass = "icon-socket-" + $scope.socketStatus; + }); + + $scope.$watch('$root.licenseMissing', function(licenseMissing) { + vm.licenseIsMissing = licenseMissing; + }); + + vm.getString = function(string) { + try { + return strings.get(`layout.${string}`); + } catch(err) { + return strings.get(string); + } + }; +} + +AtLayoutController.$inject = ['$scope', 'ComponentsStrings']; + +function atLayout (pathService) { + return { + restrict: 'E', + replace: true, + transclude: true, + templateUrl: pathService.getPartialPath('components/layout/layout'), + controller: AtLayoutController, + controllerAs: 'vm', + scope: { + } + }; +} + +atLayout.$inject = ['PathService']; + +export default atLayout; diff --git a/awx/ui/client/lib/components/layout/layout.partial.html b/awx/ui/client/lib/components/layout/layout.partial.html new file mode 100644 index 0000000000..b5e6921fa1 --- /dev/null +++ b/awx/ui/client/lib/components/layout/layout.partial.html @@ -0,0 +1,85 @@ +
+
+ +
+ + + + + {{ $parent.layoutVm.currentUsername }} + + + + + + + + +
+ + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ {{ vm.getString('FOOTER_ABOUT') }} {{ vm.getString('BRAND_NAME') }}| + {{ vm.getString('FOOTER_COPYRIGHT') }} +
+
+
diff --git a/awx/ui/client/lib/components/layout/side-nav-item.directive.js b/awx/ui/client/lib/components/layout/side-nav-item.directive.js new file mode 100644 index 0000000000..aafda8aa2d --- /dev/null +++ b/awx/ui/client/lib/components/layout/side-nav-item.directive.js @@ -0,0 +1,51 @@ +function atSideNavItemLink (scope, element, attrs, ctrl) { + scope.navVm = ctrl[0]; + scope.layoutVm = ctrl[1]; +} + +function AtSideNavItemController ($state, $scope) { + let vm = this || {}; + + $scope.$watch('layoutVm.currentState', function(current) { + if ($scope.name === 'portal mode') { + vm.isRoute = (current && current.indexOf('portalMode') === 0); + } else { + if (current && current.indexOf($scope.route) === 0) { + if (current.indexOf('jobs.schedules') === 0 && $scope.route === 'jobs') { + vm.isRoute = false; + } else { + vm.isRoute = true; + } + } else { + vm.isRoute = false; + } + } + }); + + vm.go = function() { + $state.go($scope.route, {}, {reload: true}); + } +} + +AtSideNavItemController.$inject = ['$state', '$scope']; + +function atSideNavItem (pathService) { + return { + restrict: 'E', + templateUrl: pathService.getPartialPath('components/layout/side-nav-item'), + require: ['^^atSideNav', '^^atLayout'], + controller: AtSideNavItemController, + controllerAs: 'vm', + link: atSideNavItemLink, + scope: { + iconClass: '@', + name: '@', + route: '@', + systemAdminOnly: '@' + } + }; +} + +atSideNavItem.$inject = ['PathService']; + +export default atSideNavItem; diff --git a/awx/ui/client/lib/components/layout/side-nav-item.partial.html b/awx/ui/client/lib/components/layout/side-nav-item.partial.html new file mode 100644 index 0000000000..80c4dfec73 --- /dev/null +++ b/awx/ui/client/lib/components/layout/side-nav-item.partial.html @@ -0,0 +1,8 @@ +
+ + + {{ layoutVm.getString(name) }} + +
diff --git a/awx/ui/client/lib/components/layout/side-nav.directive.js b/awx/ui/client/lib/components/layout/side-nav.directive.js new file mode 100644 index 0000000000..77d2a8a4ec --- /dev/null +++ b/awx/ui/client/lib/components/layout/side-nav.directive.js @@ -0,0 +1,32 @@ +function atSideNavLink (scope, element, attrs, ctrl) { + scope.layoutVm = ctrl; +} + +function AtSideNavController () { + let vm = this || {}; + + vm.isExpanded = true; + + vm.toggleExpansion = () => { + vm.isExpanded = !vm.isExpanded; + } +} + +function atSideNav (pathService) { + return { + restrict: 'E', + replace: true, + require: '^^atLayout', + controller: AtSideNavController, + controllerAs: 'vm', + link: atSideNavLink, + transclude: true, + templateUrl: pathService.getPartialPath('components/layout/side-nav'), + scope: { + } + }; +} + +atSideNav.$inject = ['PathService']; + +export default atSideNav; diff --git a/awx/ui/client/lib/components/layout/side-nav.partial.html b/awx/ui/client/lib/components/layout/side-nav.partial.html new file mode 100644 index 0000000000..c7e5130ef4 --- /dev/null +++ b/awx/ui/client/lib/components/layout/side-nav.partial.html @@ -0,0 +1,8 @@ +
+
+ +
+ +
diff --git a/awx/ui/client/lib/components/layout/top-nav-item.directive.js b/awx/ui/client/lib/components/layout/top-nav-item.directive.js new file mode 100644 index 0000000000..e17c5aa3b7 --- /dev/null +++ b/awx/ui/client/lib/components/layout/top-nav-item.directive.js @@ -0,0 +1,30 @@ +function atTopNavItemLink (scope, element, attrs, ctrl) { + scope.layoutVm = ctrl; + + scope.isHidden = false; + + var shownWhen = attrs.isShown; + + if (shownWhen !== 'missingLicense') { + scope.$watch('layoutVm.licenseIsMissing', function(val) { + scope.isHidden = val; + }); + } +} + +function atTopNavItem (pathService) { + return { + restrict: 'E', + replace: true, + transclude: true, + templateUrl: pathService.getPartialPath('components/layout/top-nav-item'), + require: '^^atLayout', + link: atTopNavItemLink, + scope: { + } + }; +} + +atTopNavItem.$inject = ['PathService']; + +export default atTopNavItem; diff --git a/awx/ui/client/lib/components/layout/top-nav-item.partial.html b/awx/ui/client/lib/components/layout/top-nav-item.partial.html new file mode 100644 index 0000000000..2071888e0f --- /dev/null +++ b/awx/ui/client/lib/components/layout/top-nav-item.partial.html @@ -0,0 +1,3 @@ +
+
diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index 89c0286107..644cdbf6c3 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/awx/ui/client/lib/theme/_variables.less @@ -1,5 +1,5 @@ /** - * All base variables used. These should only be referenced by the contextual variables defined + * All base variables used. These should only be referenced by the contextual variables defined * below. In development, unless you are intentionally making a fundamental change, these variables * should not be modified, removed, or added to. * @@ -7,8 +7,8 @@ * alias doesn't exist for the context you're working within, check with UX to create a new alias * or to define a more applicable alias. * - * The goal is for UX to define the contexts for the contextual variables, so it's easy to make - * modifications like, "Change heading text to be smaller" or "Make all warnings a lighter shade + * The goal is for UX to define the contexts for the contextual variables, so it's easy to make + * modifications like, "Change heading text to be smaller" or "Make all warnings a lighter shade * of orange" * * 1. Colors @@ -20,6 +20,7 @@ // 1. Colors -------------------------------------------------------------------------------------- @at-gray-light-3x: #fcfcfc; +@at-gray-light-2-5x: #fafafa; @at-gray-light-2x: #f2f2f2; @at-gray-light: #ebebeb; @at-gray: #e1e1e1; @@ -149,6 +150,19 @@ @at-color-table-header-background: @at-gray-light; @at-color-line-separator: @at-gray; +@at-color-top-nav-background: @at-white; +@at-color-top-nav-border-bottom: @at-gray-dark-2x; +@at-color-top-nav-item-text: @at-gray-dark-5x; +@at-color-top-nav-item-icon: @at-gray-dark-4x; +@at-color-top-nav-item-icon-socket-outline: @at-white; +@at-color-top-nav-item-background-hover: @at-gray-light-2-5x; +@at-color-side-nav-background: @at-gray-dark-4x; +@at-color-side-nav-content: @at-white; +@at-color-side-nav-item-background-hover: @at-gray-dark-2x; +@at-color-side-nav-item-border-hover: @at-white; +@at-color-footer-background: @at-gray-light-3x; +@at-color-footer: @at-gray-dark-5x; + // 2. Typography ---------------------------------------------------------------------------------- @at-font-size-body: @at-font-size-3x; @@ -178,6 +192,10 @@ @at-padding-popover: @at-space-2x; @at-padding-well: @at-space-2x; @at-padding-input: @at-space-2x; +@at-padding-top-nav-item-sides: @at-space-4x; +@at-padding-side-nav-item-icon: @at-space-3x; +@at-padding-between-side-nav-icon-text: @at-space-3x; +@at-padding-footer-right: @at-space-4x; @at-margin-input-message: @at-space; @at-margin-item-column: @at-space-3x; @@ -187,6 +205,9 @@ @at-margin-tag: @at-space-2x; @at-margin-form-label: @at-space; @at-margin-form-label-hint: @at-space-2x; +@at-margin-top-nav-item-between-icon-and-name: @at-space-2x; +@at-margin-top-nav-item-icon-socket-top-makeup: -3px; +@at-margin-after-footer-link: @at-space; @at-margin-top-search-key: @at-space-2x; @@ -195,9 +216,17 @@ @at-height-textarea: 144px; @at-height-button: 30px; @at-height-tab: 30px; +@at-height-top-nav: 60px; +@at-height-top-nav-item-icon: 21px; +@at-height-top-nav-item-icon-socket: 18px; +@at-height-side-nav-item-icon: 20px; +@at-height-side-nav-spacer: 20px; +@at-height-top-side-nav-makeup: 55px; @at-width-input-button-sm: 72px; @at-width-input-button-md: 84px; +@at-width-collapsed-side-nav: 50px; +@at-width-expanded-side-nav: 200px; // 4. Transitions --------------------------------------------------------------------------------- @@ -210,3 +239,7 @@ @at-line-height-short: 0.9; @at-line-height-tall: 2; @at-line-height: 24px; +@at-highlight-left-border-size: 5px; +@at-highlight-left-border-margin-makeup: -5px; +@at-z-index-nav: 1040; +@at-border-default-width: 1px; diff --git a/awx/ui/client/lib/theme/index.less b/awx/ui/client/lib/theme/index.less index c1854f09c9..6177ed35a1 100644 --- a/awx/ui/client/lib/theme/index.less +++ b/awx/ui/client/lib/theme/index.less @@ -19,7 +19,6 @@ * stuff, we'd be better off managing them via npm where possible. */ @import '../../legacy-styles/fonts'; -@import '../../legacy-styles/main-layout'; @import '../../legacy-styles/animations'; @import '../../legacy-styles/jquery-ui-overrides'; @import '../../legacy-styles/codemirror'; @@ -29,12 +28,10 @@ @import '../../legacy-styles/job-details'; @import '../../legacy-styles/jobs'; @import '../../legacy-styles/inventory-edit'; -@import '../../legacy-styles/breadcrumbs'; @import '../../legacy-styles/stdout'; @import '../../legacy-styles/lists'; @import '../../legacy-styles/forms'; @import '../../legacy-styles/dashboard'; -@import '../../legacy-styles/jPushMenu'; @import '../../legacy-styles/survey-maker'; @import '../../legacy-styles/text-label'; @import '../../legacy-styles/bootstrap-datepicker'; @@ -70,7 +67,6 @@ @import '../../src/bread-crumb/bread-crumb.block.less'; @import '../../src/configuration/configuration.block.less'; @import '../../src/credentials/ownerList.block.less'; -@import '../../src/footer/footer.block.less'; @import '../../src/home/dashboard/counts/dashboard-counts.block.less'; @import '../../src/home/dashboard/graphs/dashboard-graphs.block.less'; @import '../../src/home/dashboard/lists/dashboard-list.block.less'; @@ -93,7 +89,6 @@ @import '../../src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less'; @import '../../src/login/loginModal/loginModal.block.less'; @import '../../src/login/loginModal/loginModalNotice.block.less'; -@import '../../src/main-menu/main-menu.block.less'; @import '../../src/management-jobs/card/mgmtcards.block.less'; @import '../../src/notifications/notifications.block.less'; @import '../../src/organizations/linkout/addUsers/addUsers.block.less'; @@ -105,10 +100,6 @@ @import '../../src/scheduler/schedulertime.block.less'; @import '../../src/scheduler/scheduleToggle.block.less'; @import '../../src/scheduler/spinnerInput.block.less'; -@import '../../src/setup-menu/hover-icon.block.less'; -@import '../../src/setup-menu/setup-extra.block.less'; -@import '../../src/setup-menu/setup-item.block.less'; -@import '../../src/setup-menu/setup-menu.block.less'; @import '../../src/shared/container/container.block.less'; @import '../../src/shared/detail-nav/detail-nav.block.less'; @import '../../src/shared/icon/icon.block.less'; @@ -145,10 +136,10 @@ /** - * App-wide style + * App-wide style * * NOTE: Variables, mixins, and classes below are useful in more than one place across the - * application. When working with Less, if the need for a variable, mixin, class, etc exists in + * application. When working with Less, if the need for a variable, mixin, class, etc exists in * more than one location, take a moment to move it to this more general location for easy reuse * and to avoid duplication. */ @@ -161,8 +152,8 @@ * Component and Feature style * * NOTE: These index files are aggregation points for components and features. To view the more - * granular imports, view the contents of these files. Variables, classes, etc defined within - * these specific files ought to have no use elsewhere. As we shift to leverage components, very + * granular imports, view the contents of these files. Variables, classes, etc defined within + * these specific files ought to have no use elsewhere. As we shift to leverage components, very * few feature-specific styles will exist. */ @import '../components/_index'; diff --git a/awx/ui/client/src/about/about.controller.js b/awx/ui/client/src/about/about.controller.js index 39523be348..992279aedc 100644 --- a/awx/ui/client/src/about/about.controller.js +++ b/awx/ui/client/src/about/about.controller.js @@ -10,7 +10,7 @@ export default ['$rootScope', '$scope', '$state', 'ConfigService', $('#about-modal').modal('show'); }); - $('#about-modal').on('hidden.bs.modal', () => $state.go('setup')); + $('#about-modal').on('hidden.bs.modal', () => $state.go('dashboard')); function createSpeechBubble (brand, version) { let text = `${brand} ${version}`; diff --git a/awx/ui/client/src/about/about.route.js b/awx/ui/client/src/about/about.route.js index 639c5ee975..e063530c7e 100644 --- a/awx/ui/client/src/about/about.route.js +++ b/awx/ui/client/src/about/about.route.js @@ -3,7 +3,7 @@ import controller from './about.controller'; import { N_ } from '../i18n'; export default { - name: 'setup.about', + name: 'about', route: '/about', controller: controller, ncyBreadcrumb: { diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js index 00fa2a3cf7..dc555489e9 100644 --- a/awx/ui/client/src/app.js +++ b/awx/ui/client/src/app.js @@ -51,8 +51,6 @@ import jobSubmission from './job-submission/main'; import notifications from './notifications/main'; import about from './about/main'; import license from './license/main'; -import setupMenu from './setup-menu/main'; -import mainMenu from './main-menu/main'; import breadCrumb from './bread-crumb/main'; import browserData from './browser-data/main'; import configuration from './configuration/main'; @@ -67,7 +65,6 @@ import users from './users/main'; import projects from './projects/main'; import RestServices from './rest/main'; import access from './access/main'; -import footer from './footer/main'; import scheduler from './scheduler/main'; import instanceGroups from './instance-groups/main'; @@ -108,13 +105,10 @@ var awApp = angular.module('awApp', [ credentialTypes.name, organizations.name, managementJobs.name, - setupMenu.name, - mainMenu.name, breadCrumb.name, home.name, login.name, activityStream.name, - footer.name, workflowResults.name, jobResults.name, jobSubmission.name, @@ -243,18 +237,6 @@ var awApp = angular.module('awApp', [ //base.replace(/\_/g, ' '); base = (base === 'job_events' || base === 'job_host_summaries') ? 'jobs' : base; } - - $('#ansible-list-title').html('' + base.replace(/\_/, ' ') + ''); - - $('#ansible-main-menu li').each(function() { - $(this).removeClass('active'); - }); - $('#ansible-main-menu #' + base).addClass('active'); - // Apply to mobile menu as well - $('#ansible-mobile-menu a').each(function() { - $(this).removeClass('active'); - }); - $('#ansible-mobile-menu a[href="#' + base + '"]').addClass('active'); } if ($rootScope.removeConfigReady) { diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less index f0e9902a9b..8a9ac68d57 100644 --- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less +++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less @@ -6,10 +6,7 @@ background-color: @bc-bg; width: 100%; z-index: 1039; - position: fixed; - right: 0; - left: 0; - top: 60px; + margin-top: 60px; height: 40px; border-bottom: 1px solid @bc-border; } diff --git a/awx/ui/client/src/configuration/configuration.route.js b/awx/ui/client/src/configuration/configuration.route.js index e95043ae8c..8f9537c84f 100644 --- a/awx/ui/client/src/configuration/configuration.route.js +++ b/awx/ui/client/src/configuration/configuration.route.js @@ -26,7 +26,6 @@ }, ncyBreadcrumb: { - parent: 'setup', label: N_("EDIT CONFIGURATION") }, controller: ConfigurationController, diff --git a/awx/ui/client/src/credential-types/main.js b/awx/ui/client/src/credential-types/main.js index d0d18af528..cb88c2e023 100644 --- a/awx/ui/client/src/credential-types/main.js +++ b/awx/ui/client/src/credential-types/main.js @@ -41,7 +41,6 @@ angular.module('credentialTypes', [ activityStreamTarget: 'credential_type' }, ncyBreadcrumb: { - parent: 'setup', label: N_('CREDENTIAL TYPES') } }) diff --git a/awx/ui/client/src/footer/footer.block.less b/awx/ui/client/src/footer/footer.block.less deleted file mode 100644 index b626f5d4e8..0000000000 --- a/awx/ui/client/src/footer/footer.block.less +++ /dev/null @@ -1,52 +0,0 @@ -/** @define DashboardCounts */ - -.Footer { - height: 40px; - background-color: @default-secondary-bg; - color: @default-interface-txt; - width: 100%; - z-index: 1040; - position: absolute; - right: 0; - left: 0; - bottom: 0; -} - -.Footer-logo { - float: left; - height: 40px; - width: 250px; -} - -.Footer-logoImage { - height: 40px; - width: 250px; -} - -.Footer-copyright{ - float: right; - font-size: 12px; - margin-right: 20px; - margin-top: 10px; -} - -.Footer-link:hover{ - color: @default-bg; -} - -.Footer-link{ - color: @default-interface-txt; -} - -.Footer-copyright.is-loggedOut, -.Footer-logo.is-loggedOut { - opacity: 0; -} - -@menu-breakpoint: 553px; - -@media screen and (max-width: (@menu-breakpoint)) { - .Footer-copyright{ - display: none; - } -} diff --git a/awx/ui/client/src/footer/footer.directive.js b/awx/ui/client/src/footer/footer.directive.js deleted file mode 100644 index 4193dddeb7..0000000000 --- a/awx/ui/client/src/footer/footer.directive.js +++ /dev/null @@ -1,16 +0,0 @@ -/************************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * All Rights Reserved - *************************************************/ - -export default - ['templateUrl', - function(templateUrl) { - return { - restrict: 'E', - scope: true, - templateUrl: templateUrl('footer/footer') - }; - } - ]; diff --git a/awx/ui/client/src/footer/footer.partial.html b/awx/ui/client/src/footer/footer.partial.html deleted file mode 100644 index 6ba9ac7c47..0000000000 --- a/awx/ui/client/src/footer/footer.partial.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/awx/ui/client/src/footer/main.js b/awx/ui/client/src/footer/main.js deleted file mode 100644 index 1bb909cf34..0000000000 --- a/awx/ui/client/src/footer/main.js +++ /dev/null @@ -1,11 +0,0 @@ -/************************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * All Rights Reserved - *************************************************/ - -import footerDirective from './footer.directive'; - -export default - angular.module('footer', []) - .directive('customFooter', footerDirective); diff --git a/awx/ui/client/src/instance-groups/instance-groups.route.js b/awx/ui/client/src/instance-groups/instance-groups.route.js index 537a1e40b2..c265b35cd9 100644 --- a/awx/ui/client/src/instance-groups/instance-groups.route.js +++ b/awx/ui/client/src/instance-groups/instance-groups.route.js @@ -6,7 +6,6 @@ export default { url: '/instance_groups', searchPrefix: 'instance_group', ncyBreadcrumb: { - parent: 'setup', label: N_('INSTANCE GROUPS') }, params: { diff --git a/awx/ui/client/src/inventory-scripts/main.js b/awx/ui/client/src/inventory-scripts/main.js index ba1a3fa228..460d727661 100644 --- a/awx/ui/client/src/inventory-scripts/main.js +++ b/awx/ui/client/src/inventory-scripts/main.js @@ -62,7 +62,6 @@ angular.module('inventoryScripts', [ activityStreamTarget: 'custom_inventory_script' }, ncyBreadcrumb: { - parent: 'setup', label: N_('INVENTORY SCRIPTS') } }) diff --git a/awx/ui/client/src/license/license.route.js b/awx/ui/client/src/license/license.route.js index 48da62fe97..98ba25d79c 100644 --- a/awx/ui/client/src/license/license.route.js +++ b/awx/ui/client/src/license/license.route.js @@ -15,7 +15,6 @@ export default { controller: 'licenseController', data: {}, ncyBreadcrumb: { - parent: 'setup', label: N_('LICENSE') }, onEnter: ['$state', 'ConfigService', (state, configService) => { diff --git a/awx/ui/client/src/main-menu/main-menu.block.less b/awx/ui/client/src/main-menu/main-menu.block.less deleted file mode 100644 index 9a17da4dfc..0000000000 --- a/awx/ui/client/src/main-menu/main-menu.block.less +++ /dev/null @@ -1,306 +0,0 @@ -/** @define MainMenu */ - -.MainMenu { - padding: 0; - display: flex; - background-color: @menu-bg; - border-bottom: 1px solid @menu-btm; - width: 100%; - z-index: 1040; - position: fixed; - right: 0; - left: 0; - top: 0; - height: 60px; - align-items: stretch; -} - -.MainMenu--licenseMissing{ - justify-content: space-between; -} - -.MainMenu-logo, -.MainMenu-item { - color: @menu-link; - background-color: @menu-link-bg; -} - -.MainMenu-logoImage { - max-width: @main-menu-max-width; - max-height: @main-menu-max-height; - height: @main-menu-height; - width: @main-menu-width; - margin: @main-menu-margin; -} - -.MainMenu-logoImage--licenseMissing:hover{ - cursor:default; - background-color: @default-bg!important; -} - -.MainMenu-item { - padding: 0 20px; -} - -.MainMenu-itemText, -.MainMenu-itemImage { - flex: initial; -} - -.MainMenu-itemImage { - color: @menu-link-icon; -} - -.MainMenu-socket { - background-color: @default-bg; - order: 0; - flex: initial; - padding-top: 0px; - padding-left: 20px; - padding-right: 20px; - display: flex; - align-items: center; - border: 0; - border-left: 1px solid @menu-link-sides; - cursor: default; -} - -.MainMenu-socketImage { - font-size: 18px; - text-shadow: - -1px -1px 0 @default-bg, - 1px -1px 0 @default-bg, - -1px 1px 0 @default-bg, - 1px 1px 0 @default-bg; - z-index: 1042; -} - -.MainMenu-item, -.MainMenu-item:hover, -.MainMenu-item:focus, -.MainMenu-item:active { - color: @default-interface-txt; -} - -@menu-breakpoint: 900px; - -@media screen and (min-width: (@menu-breakpoint + 1px)) { - .MainMenu-mobileItems, - .MainMenu-toggle { - display: none; - } - - .MainMenu-logo { - flex: initial; - padding: 0; - display: flex; - align-items: center; - border: 0; - border-bottom: 0; - border-right: 1px solid @menu-link-sides; - } - - .MainMenu-item { - flex: initial; - padding-top: 0px; - border: 0; - border-bottom: 0px solid @menu-link-btm-hov; - display: flex; - align-items: center; - } - - // Set up elements based on if their layout in the menu bar - .MainMenu-item--left { - border-right: 1px solid @menu-link-sides; - } - - .MainMenu-item--left:hover, - .MainMenu-item--left.is-currentRoute { - margin-left: -1px; - padding-left: 21px; - padding-right: 21px; - border-right: 0px; - } - - .MainMenu-item--lastLeft { - margin-right: auto; - } - - .MainMenu-item--right { - border-left: 1px solid @menu-link-sides; - order: 1; - } - - .MainMenu-item--right:hover, - .MainMenu-item--right.is-currentRoute { - border-left: 0px; - padding-left: 21px; - padding-right: 21px; - margin-right: -1px; - } - - .MainMenu-item:hover, - .MainMenu-item.is-currentRoute { - padding-top: 5px; - border-bottom: 5px solid @menu-link-btm-hov; - } - - .MainMenu-itemText--username { - padding-left: 13px; - margin-top: -4px; - max-width: 85px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .MainMenu-itemImage { - font-size: 20px; - } - - .MainMenu-itemImage--settings { - margin-top: -1px; - } - - .MainMenu-itemImage--user { - font-size: 21px; - margin-right: -5px; - margin-top: -1px; - } - - .MainMenu-itemImage--docs { - font-size: 21px; - margin-top: -2px; - } - - .MainMenu-item.is-currentRoute { - background-color: @menu-link-bg-hov; - } -} - -@media screen and (max-width: @menu-breakpoint) { - .MainMenu-logo { - height: 60px; - } - - .MainMenu-logoImage { - margin-top: @main-menu-margin-top-breakpoint; - } - - .MainMenu-item--notMobile { - display: none; - } - - .MainMenu-item--licenseMissing{ - justify-content: space-between!important; - display:flex!important; - align-items: center!important; - flex: initial!important; - padding-top:0px; - } - - .MainMenu-item--licenseMissing:hover{ - padding-top:20px; - border-bottom: 5px solid @menu-link-btm-hov; - } - - .MainMenu-itemImage--licenseMissing{ - font-size: 20px!important; - } - - .MainMenu { - flex-direction: row; - flex-wrap: wrap; - } - - .MainMenu-logo { - flex: 1; - border-bottom: 1px solid @menu-link-btm; - order: 0; - } - - .MainMenu-mobileItems { - display: flex; - order: 2; - flex-direction: row; - flex-wrap: wrap; - font-size: 15px; - width: 100%; - visibility: visible; - opacity: 1; - height: 416px; - } - - .MainMenu-mobileItems.is-hiddenOnMobile, - .MainMenu-mobileItems.is-loggedOut { - visibility: hidden; - opacity: 0; - height: 0; - } - - .MainMenu-item { - flex: 0 0 100%; - padding-top: 15px; - padding-bottom: 15px; - order: 1; - border-bottom: 1px solid @menu-link-btm; - } - - .MainMenu-item.is-currentRoute { - font-weight: bold; - background-color: @menu-link-bg; - } - - .MainMenu-item:hover { - background-color: @menu-link-bg-hov; - } - - .MainMenu-toggle { - color: @menu-link-icon; - background-color: @menu-link-bg; - order: 0; - flex: initial; - padding-top: 3px; - padding-left: 15px; - padding-right: 15px; - font-size: 34px; - display: flex; - align-items: center; - border: 0; - border-left: 1px solid @menu-link-btm; - border-bottom: 1px solid @menu-link-btm; - } - - .MainMenu-socket { - border-bottom: 1px solid @menu-link-btm; - } - - .MainMenu-toggleImage { - width: 36px; - } -} - -.MainMenu-toggle:focus, -.MainMenu-item:focus, -.MainMenu-logo:focus, -.MainMenu-toggle:hover, -.MainMenu-item:hover, -.MainMenu-logo:hover, -.MainMenu-item.is-currentRoute { - background-color: @default-tertiary-bg; -} - -// item on -.MainMenu-logo, -.MainMenu-item, -.MainMenu-socket, -.MainMenu-toggle { - opacity: 1; -} - -.MainMenu-logo.is-loggedOut, -.MainMenu-item.is-loggedOut, -.MainMenu-socket.is-loggedOut, -.MainMenu-toggle.is-loggedOut { - opacity: 0; -} diff --git a/awx/ui/client/src/main-menu/main-menu.directive.js b/awx/ui/client/src/main-menu/main-menu.directive.js deleted file mode 100644 index 8a3ea0917f..0000000000 --- a/awx/ui/client/src/main-menu/main-menu.directive.js +++ /dev/null @@ -1,56 +0,0 @@ -/* jshint unused: vars */ - -export default - [ '$state', 'templateUrl', '$rootScope', function($state, templateUrl, $rootScope) { - return { - restrict: 'E', - templateUrl: templateUrl('main-menu/main-menu'), - link: function(scope, element, attrs) { - - scope.isCurrentState = function(name){ - return $state.current.name === name; - }; - scope.includesCurrentState = function(name){ - return $state.includes(name); - }; - - // set up the user tooltip - $rootScope.$on('current_user', function(user) { - scope.currentUserTip = "Logged in as " + user.un; - }); - - // set up things for the socket notification - scope.socketHelp = $rootScope.socketHelp; - scope.socketTip = $rootScope.socketTip; - $rootScope.$watch('socketStatus', function(newStatus) { - scope.socketStatus = newStatus; - scope.socketIconClass = "icon-socket-" + scope.socketStatus; - }); - $rootScope.$watch('socketTip', function(newTip) { - scope.socketTip = newTip; - }); - - // default the mobile menu as hidden - scope.isHiddenOnMobile = true; - // set up the click function to toggle mobile menu - scope.toggleMenu = function() { - if (scope.isHiddenOnMobile) { - scope.isHiddenOnMobile = false; - } else { - scope.isHiddenOnMobile = true; - } - }; - // if the user clicks outside of the mobile menu, - // close it if it's open - $("body").on('click', function(e) { - if ($(e.target).parents(".MainMenu").length === 0) { - scope.isHiddenOnMobile = true; - } - }); - // close the menu when the user clicks a link to a different route - scope.$on('$locationChangeStart', function(event) { - scope.isHiddenOnMobile = true; - }); - } - }; - }]; diff --git a/awx/ui/client/src/main-menu/main-menu.partial.html b/awx/ui/client/src/main-menu/main-menu.partial.html deleted file mode 100644 index 6a57b9b2e6..0000000000 --- a/awx/ui/client/src/main-menu/main-menu.partial.html +++ /dev/null @@ -1,225 +0,0 @@ - diff --git a/awx/ui/client/src/main-menu/main.js b/awx/ui/client/src/main-menu/main.js deleted file mode 100644 index dad4f0bd14..0000000000 --- a/awx/ui/client/src/main-menu/main.js +++ /dev/null @@ -1,5 +0,0 @@ -import mainMenu from './main-menu.directive'; - -export default - angular.module('mainMenu', []) - .directive('mainMenu', mainMenu); diff --git a/awx/ui/client/src/management-jobs/card/card.route.js b/awx/ui/client/src/management-jobs/card/card.route.js index d8186d32f4..6ad8d5c448 100644 --- a/awx/ui/client/src/management-jobs/card/card.route.js +++ b/awx/ui/client/src/management-jobs/card/card.route.js @@ -17,7 +17,6 @@ export default { activityStreamTarget: 'job' }, ncyBreadcrumb: { - parent: 'setup', label: N_('MANAGEMENT JOBS') }, }; diff --git a/awx/ui/client/src/notifications/main.js b/awx/ui/client/src/notifications/main.js index a88811f4c7..8ca7309b14 100644 --- a/awx/ui/client/src/notifications/main.js +++ b/awx/ui/client/src/notifications/main.js @@ -39,7 +39,6 @@ angular.module('notifications', [ name: 'notifications', url: '/notification_templates', ncyBreadcrumb: { - parent: 'setup', label: N_("NOTIFICATIONS") }, lazyLoad: () => stateDefinitions.generateTree({ @@ -84,10 +83,9 @@ angular.module('notifications', [ }, data: { activityStream: true, - activityStreamTarget: 'notification_template' + activityStreamTarget: 'notification_template' }, ncyBreadcrumb: { - parent: 'setup', label: N_('NOTIFICATIONS') } }) diff --git a/awx/ui/client/src/organizations/main.js b/awx/ui/client/src/organizations/main.js index 11b903dcf7..7d715b40e7 100644 --- a/awx/ui/client/src/organizations/main.js +++ b/awx/ui/client/src/organizations/main.js @@ -48,7 +48,6 @@ angular.module('Organizations', [ list: templateUrl('organizations/list/organizations-list') }, ncyBreadcrumb: { - parent: 'setup', label: N_('ORGANIZATIONS') }, data: { diff --git a/awx/ui/client/src/setup-menu/hover-icon.block.less b/awx/ui/client/src/setup-menu/hover-icon.block.less deleted file mode 100644 index a5660141df..0000000000 --- a/awx/ui/client/src/setup-menu/hover-icon.block.less +++ /dev/null @@ -1,45 +0,0 @@ -/** @define HoverIcon */ - -.HoverIcon { - @media screen and (max-width: 571px) { - &--onlyLarge { - .HoverIcon-icon--opacity { - opacity: 1; - } - .HoverIcon-icon--height { - height: 22px; - } - } - } - &-icon { - width: auto; - &--color { - g, path { - transition: fill 0.15s ease-out; - } - } - &--opacity { - transition: opacity 0.3s ease-out; - opacity: 0; - } - &--height { - transition: height 0.2s ease-out; - height: 0; - } - } - &:hover { - .HoverIcon-icon { - &--opacity { - opacity: 1; - } - &--height { - height: 22px; - } - &--color { - path, g { - fill: @blue; - } - } - } - } -} diff --git a/awx/ui/client/src/setup-menu/main.js b/awx/ui/client/src/setup-menu/main.js deleted file mode 100644 index c3375d1f62..0000000000 --- a/awx/ui/client/src/setup-menu/main.js +++ /dev/null @@ -1,12 +0,0 @@ -import route from './setup.route'; -import icon from '../shared/icon/main'; - -export default - angular.module('setupMenu', - [ icon.name]) - .run(['$stateExtender', 'I18NInit', - function($stateExtender, I18NInit) { - I18NInit(); - - $stateExtender.addState(route); - }]); diff --git a/awx/ui/client/src/setup-menu/setup-extra.block.less b/awx/ui/client/src/setup-menu/setup-extra.block.less deleted file mode 100644 index c61a5e5c5d..0000000000 --- a/awx/ui/client/src/setup-menu/setup-extra.block.less +++ /dev/null @@ -1,14 +0,0 @@ -/** @define SetupExtra */ - -.SetupExtra { - &-itemTitle { - font-size: 1.4rem; - font-weight: bold; - } - &-itemDescription { - font-family: merriweather; - font-size: 1rem; - font-weight: lighter; - font-style: italic; - } -} diff --git a/awx/ui/client/src/setup-menu/setup-item.block.less b/awx/ui/client/src/setup-menu/setup-item.block.less deleted file mode 100644 index 7302ac752c..0000000000 --- a/awx/ui/client/src/setup-menu/setup-item.block.less +++ /dev/null @@ -1,73 +0,0 @@ -/** @define SetupItem */ - -.SetupItem { - background-color: @panel-bg; - border-radius: 5px; - border: 1px solid @b7grey; - min-height: 120px; - padding: 20px; - margin-top: 20px; - transition: background-color 0.2s; - cursor:pointer; -} - -.SetupItem:hover { - background-color: @btn-bg-hov; -} - -.SetupItem-title{ - font-size: 14px; - color: @default-interface-txt; - text-align: center; - margin-bottom: 15px; - font-weight: 600; - text-transform: uppercase; - margin-top: 0; -} - -.SetupItem-description{ - font-size: 12px; - color: @default-interface-txt; - text-align: center; - margin-bottom: 0; -} - -@media (min-width: 1179px) { - .SetupItem { - width: ~"calc(25% - 20px)"; - margin-right: 20px; - } - - .SetupItem :nth-child(4n+4) { - margin-right: 0px; - } -} - -@media (min-width: 901px) and (max-width: 1178px) { - .SetupItem { - width: ~"calc(33% - 11px)"; - margin-right: 20px; - } - - .SetupItem:nth-child(3n+3) { - margin-right: 0px; - } -} - -@media (min-width: 616px) and (max-width: 900px) { - .SetupItem { - width: ~"calc(50% - 10px)"; - margin-right: 20px; - } - - .SetupItem:nth-child(2n+2) { - margin-right: 0px; - } -} - -@media (max-width: 615px) { - .SetupItem { - width: 100%; - margin-right: 0px; - } -} diff --git a/awx/ui/client/src/setup-menu/setup-menu.block.less b/awx/ui/client/src/setup-menu/setup-menu.block.less deleted file mode 100644 index b869976209..0000000000 --- a/awx/ui/client/src/setup-menu/setup-menu.block.less +++ /dev/null @@ -1,13 +0,0 @@ -/** @define SetupMenu */ - -@menu-breakpoint: 710px; - -.SetupMenu { - width: 100%; - margin-left: 0; - display: flex; - flex-wrap: wrap; - @media screen and (max-width: @menu-breakpoint) { - margin-left: 0px; - } -} diff --git a/awx/ui/client/src/setup-menu/setup-menu.partial.html b/awx/ui/client/src/setup-menu/setup-menu.partial.html deleted file mode 100644 index d5179afa6f..0000000000 --- a/awx/ui/client/src/setup-menu/setup-menu.partial.html +++ /dev/null @@ -1,79 +0,0 @@ -
-
- -

Organizations

-

- Group all of your content to manage permissions across departments in your company. -

- - -

Users

-

- Allow others to sign into {{BRAND_NAME}} and own the content they create. -

- - -

Teams

-

- Split up your organization to associate content and control permissions for groups. -

- - -

Credentials

-

- Add passwords, SSH keys, and other credentials to use when launching jobs against machines, or when syncing inventories or projects. -

- - -

Credential Types

-

- Create custom credential types to be used for authenticating to network hosts and cloud sources -

- - -

Management Jobs

-

- Manage the cleanup of old job history, activity streams, data marked for deletion, and system tracking info. -

- - -

Inventory Scripts

-

- Create and edit scripts to dynamically load hosts from any source. -

- - -

Notifications

-

- Create templates for sending notifications with Email, HipChat, Slack, and SMS. -

- - -

Instance Groups

-

- View list and capacity of {{BRAND_NAME}} instances. -

- - -

Configure {{BRAND_NAME}}

-

- Edit {{BRAND_NAME}}'s configuration. -

- - -

About {{BRAND_NAME}}

-

- View information about this version of Ansible {{BRAND_NAME}}. -

- - -

View Your License

-

- View and edit your license information. -

- -
-
-
diff --git a/awx/ui/client/src/setup-menu/setup.route.js b/awx/ui/client/src/setup-menu/setup.route.js deleted file mode 100644 index 51b613e32e..0000000000 --- a/awx/ui/client/src/setup-menu/setup.route.js +++ /dev/null @@ -1,48 +0,0 @@ -import {templateUrl} from '../shared/template-url/template-url.factory'; -import { N_ } from '../i18n'; -import _ from 'lodash'; - -export default { - name: 'setup', - route: '/setup', - ncyBreadcrumb: { - label: N_("SETTINGS") - }, - templateUrl: templateUrl('setup-menu/setup-menu'), - controller: function(config, orgAdmin, $scope){ - $scope.isOpen = _.get(config, 'license_info.license_type') === 'open'; - $scope.orgAdmin = orgAdmin; - }, - resolve: { - config: ['ConfigService', config => config.getConfig()], - orgAdmin: - ['$rootScope', 'ProcessErrors', 'Rest', 'GetBasePath', - function($rootScope, ProcessErrors, Rest, GetBasePath){ - - return $rootScope.loginConfig.promise.then(function () { - if($rootScope.current_user.related.admin_of_organizations){ - $rootScope.orgAdmin = false; - if ($rootScope.current_user.is_superuser) { - return true; - } else { - Rest.setUrl(GetBasePath('users') + `${$rootScope.current_user.id}/admin_of_organizations`); - return Rest.get().then(function(data){ - if(data.data.count){ - return true; - } - else{ - return false; - } - }) - .catch(function (data, status) { - ProcessErrors($rootScope, data, status, null, { hdr: 'Error!', msg: 'Failed to find if users is admin of org' + status }); - }); - } - } - else{ - return false; - } - }); - }] - } -}; diff --git a/awx/ui/client/src/teams/main.js b/awx/ui/client/src/teams/main.js index 258af14dda..b5bf9c8e86 100644 --- a/awx/ui/client/src/teams/main.js +++ b/awx/ui/client/src/teams/main.js @@ -42,7 +42,6 @@ angular.module('Teams', []) activityStreamTarget: 'team' }, ncyBreadcrumb: { - parent: 'setup', label: N_('TEAMS') } }) diff --git a/awx/ui/client/src/users/main.js b/awx/ui/client/src/users/main.js index 436c614788..32b3168590 100644 --- a/awx/ui/client/src/users/main.js +++ b/awx/ui/client/src/users/main.js @@ -42,7 +42,6 @@ angular.module('Users', []) activityStreamTarget: 'user' }, ncyBreadcrumb: { - parent: 'setup', label: N_('USERS') } }) diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 38bbad9de3..ddab3734d1 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -18,146 +18,146 @@ - - - -
-
-
+ + + +
+
+
+
-
- - - - - -