diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 015fd5d387..a53da0676f 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -76,7 +76,11 @@ function ComponentsStrings (BaseString) { APPLICATIONS: t.s('Applications'), SETTINGS: t.s('Settings'), FOOTER_ABOUT: t.s('About'), - FOOTER_COPYRIGHT: t.s('Copyright © 2018 Red Hat, Inc.') + FOOTER_COPYRIGHT: t.s('Copyright © 2018 Red Hat, Inc.'), + VIEWS_HEADER: t.s('Views'), + RESOURCES_HEADER: t.s('Resources'), + ACCESS_HEADER: t.s('Access'), + ADMINISTRATION_HEADER: t.s('Administration') }; ns.relaunch = { diff --git a/awx/ui/client/lib/components/layout/_index.less b/awx/ui/client/lib/components/layout/_index.less index fd4e29c144..73868252e6 100644 --- a/awx/ui/client/lib/components/layout/_index.less +++ b/awx/ui/client/lib/components/layout/_index.less @@ -90,30 +90,47 @@ overflow-y: auto; max-height: 100vh; min-width: @at-width-collapsed-side-nav; + width: @at-width-collapsed-side-nav; + overflow-x: hidden; z-index: @at-z-index-side-nav; + .at-Popover-container { + margin-top: 2px; + margin-left: -11px; + } + + .at-Popover-arrow [ + padding-top: 7px; + margin-left: -10px; + } + .at-Layout-sideNavItem { background: inherit; color: @at-color-side-nav-content; display: flex; cursor: pointer; text-transform: uppercase; - - > i.fa { - padding-left: 20px; - } - + font-size: 12px; i { cursor: pointer; - color: @at-color-side-nav-content; - font-size: @at-height-side-nav-item-icon; + color: @at-color-side-nav-item-icon; + font-size: @at-font-size-side-nav-icon; padding: @at-padding-side-nav-item-icon; + padding-left: @at-padding-left-side-nav-item-icon; } i.fa-cubes { margin-left: -4px; } + i.fa-user { + margin-left: 1px; + } + + i.fa-users { + margin-left: -1px; + } + &:hover, &.is-active { background: @at-color-side-nav-item-background-hover; @@ -127,12 +144,37 @@ i.fa-cubes { margin-left: -9px; } + + i.fa-user { + margin-left: -4px; + } + + i.fa-users { + margin-left: -6px; + } } } + .at-Layout-sideNavToggle { + padding-top: @at-padding-top-side-nav-toggle; + + i { + padding-left: @at-padding-left-side-nav-toggle-icon; + } + } + .at-Layout-sideNavSpacer { - background: inherit; - height: 5px; + border-bottom: 1px solid @at-color-side-nav-space-collapsed-border; + padding: 0; + margin: @at-margin-side-nav-space-collapsed; + } + + .at-Layout-sideNavSpacer--first { + display: none; + } + + .at-Layout-sideNavHeader { + display: none; } &--expanded { @@ -143,11 +185,33 @@ justify-content: flex-start; align-items: center; padding-right: @at-padding-between-side-nav-icon-text; + + i { + padding-left: @at-padding-left-side-nav-item-icon-expanded; + } } + .at-Layout-main { padding-left: @at-width-expanded-side-nav; } + + .at-Layout-sideNavSpacer--first { + display: inherit; + } + + .at-Layout-sideNavSpacer { + height: @at-height-side-nav-spacer; + font-size: @at-font-size-side-nav-space; + color: @at-color-side-nav-item-spacer; + padding: @at-padding-side-nav-item-spacer; + text-transform: uppercase; + border-bottom: 0; + margin: 0; + } + + .at-Layout-sideNavHeader { + display: inherit; + } } } @@ -191,9 +255,13 @@ .at-Layout-sideNavItem.at-Layout-sideNavToggle { display: flex; - height: 40px; + height: @at-height-side-nav-toggle-mobile; align-items: center; - width: 55px; + width: @at-width-side-nav-toggle-mobile; + + i { + padding-bottom: @at-padding-bottom-side-nav-toggle-mobile; + } } .at-Layout-sideNavItem, diff --git a/awx/ui/client/lib/components/layout/layout.partial.html b/awx/ui/client/lib/components/layout/layout.partial.html index b1ada5e000..ada6b2f1ea 100644 --- a/awx/ui/client/lib/components/layout/layout.partial.html +++ b/awx/ui/client/lib/components/layout/layout.partial.html @@ -31,6 +31,11 @@ +
+ + {{:: $parent.layoutVm.getString('VIEWS_HEADER') }} + +
@@ -39,38 +44,49 @@ -
- +
+ + {{:: $parent.layoutVm.getString('RESOURCES_HEADER') }} + +
+ - + - + -
+
+ + {{:: $parent.layoutVm.getString('ACCESS_HEADER') }} + +
-
- +
+ + {{:: $parent.layoutVm.getString('ADMINISTRATION_HEADER') }} + +
+ - -
diff --git a/awx/ui/client/lib/components/layout/side-nav.directive.js b/awx/ui/client/lib/components/layout/side-nav.directive.js index f089d54eee..3fbf7cd86f 100644 --- a/awx/ui/client/lib/components/layout/side-nav.directive.js +++ b/awx/ui/client/lib/components/layout/side-nav.directive.js @@ -16,7 +16,7 @@ function AtSideNavController ($scope, $window) { const vm = this || {}; const breakpoint = 700; - vm.isExpanded = false; + vm.isExpanded = true; vm.toggleExpansion = () => { vm.isExpanded = !vm.isExpanded; diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index 918f67342c..ffb37ac96a 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/awx/ui/client/lib/theme/_variables.less @@ -174,6 +174,9 @@ @at-color-side-nav-content: @at-white; @at-color-side-nav-item-background-hover: @at-gray-b7; @at-color-side-nav-item-border-hover: @at-white; +@at-color-side-nav-item-icon: @at-white; +@at-color-side-nav-item-spacer: @at-gray-d7; +@at-color-side-nav-space-collapsed-border: @at-gray-b7; @at-color-footer-background: @at-gray-fc; @at-color-footer: @at-gray-70; @@ -208,6 +211,8 @@ @at-font-size-navigation: @at-font-size-3x; @at-font-size-table-heading: @at-font-size-3x; @at-font-size-menu-icon: @at-font-size-5x; +@at-font-size-side-nav-icon: 19px; +@at-font-size-side-nav-space: 11px; @at-font-size-list-row-item-tag: 10px; @at-font-size-list-row-action: 19px; @at-font-size-list-row-action-icon: 19px; @@ -228,6 +233,13 @@ @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-side-nav-item-icon: 10px 15px; +@at-padding-side-nav-item-spacer: 10px 10px 25px 15px; +@at-padding-bottom-side-nav-toggle-mobile: 15px; +@at-padding-top-side-nav-toggle: 5px; +@at-padding-left-side-nav-toggle-icon: 15px; +@at-padding-left-side-nav-item-icon: 10px; +@at-padding-left-side-nav-item-icon-expanded: 15px; @at-padding-between-side-nav-icon-text: @at-space-3x; @at-padding-footer-right: @at-space-4x; @at-padding-footer-bottom: @at-space-4x; @@ -246,6 +258,7 @@ @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-side-nav-space-collapsed: 10px 0; @at-margin-after-footer-link: @at-space; @at-margin-footer-top: @at-space-4x; @@ -274,7 +287,7 @@ @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-item-icon: 19px; @at-height-side-nav-spacer: 20px; @at-height-top-side-nav-makeup: 55px; @at-height-list-empty: 200px; @@ -282,13 +295,15 @@ @at-height-list-row-item: 27px; @at-height-list-row-item-tag: 15px; @at-height-list-row-action: 30px; +@at-height-side-nav-toggle-mobile: 40px; @at-width-input-button-sm: 72px; @at-width-input-button-md: 84px; @at-width-collapsed-side-nav: 50px; -@at-width-expanded-side-nav: 200px; +@at-width-expanded-side-nav: 180px; @at-width-list-row-item-label: 120px; @at-width-list-row-action: 30px; +@at-width-side-nav-toggle-mobile: 50px; @at-line-height-list-row-item-header: @at-space-3x; @at-line-height-list-row-item-labels: 17px;