Merge pull request #1277 from jlmitch5/navUpdates33

ux updates to navigation

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 = {

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;
-
+            font-size: 12px;
-                > i.fa {
-                    padding-left: 20px;
-                }
-
                 i {
                     cursor: pointer;
-                    color: @at-color-side-nav-content;
+                    color: @at-color-side-nav-item-icon;
-                    font-size: @at-height-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;
+            border-bottom: 1px solid @at-color-side-nav-space-collapsed-border;
-            height: 5px;
+            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,

awx/ui/client/lib/components/layout/layout.partial.html

@@ -31,6 +31,11 @@
         </at-top-nav-item>
     </div>
     <at-side-nav>
+        <div class="at-Layout-sideNavSpacer at-Layout-sideNavSpacer--first">
+          <span class="at-Layout-sideNavHeader">
+              {{:: $parent.layoutVm.getString('VIEWS_HEADER') }}
+          <span>
+        </div>
         <at-side-nav-item icon-class="fa-tachometer" route="dashboard" name="DASHBOARD">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-spinner" route="jobs" name="JOBS">
@@ -39,38 +44,49 @@
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-columns" route="portalMode.myJobs" name="PORTAL_MODE">
         </at-side-nav-item>
-        <div class="at-Layout-sideNavSpacer"></div>
+        <div class="at-Layout-sideNavSpacer">
-        <at-side-nav-item icon-class="fa-folder-open" route="projects" name="PROJECTS">
+            <span class="at-Layout-sideNavHeader">
+                {{:: $parent.layoutVm.getString('RESOURCES_HEADER') }}
+            <span>
+        </div>
+        <at-side-nav-item icon-class="fa-pencil-square-o" route="templates" name="TEMPLATES">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-key" route="credentials" name="CREDENTIALS">
         </at-side-nav-item>
-        <at-side-nav-item icon-class="fa-list-alt" route="credentialTypes" name="CREDENTIAL_TYPES"
+        <at-side-nav-item icon-class="fa-folder-open" route="projects" name="PROJECTS">
-            system-admin-only="true">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-sitemap" route="inventories" name="INVENTORIES">
         </at-side-nav-item>
-        <at-side-nav-item icon-class="fa-pencil-square-o" route="templates" name="TEMPLATES">
+        <at-side-nav-item icon-class="fa-code" route="inventoryScripts" name="INVENTORY_SCRIPTS">
         </at-side-nav-item>
-        <div class="at-Layout-sideNavSpacer"></div>
+        <div class="at-Layout-sideNavSpacer">
+            <span class="at-Layout-sideNavHeader">
+                {{:: $parent.layoutVm.getString('ACCESS_HEADER') }}
+            <span>
+        </div>
         <at-side-nav-item icon-class="fa-building" route="organizations" name="ORGANIZATIONS">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-user" route="users" name="USERS">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-users" route="teams" name="TEAMS">
         </at-side-nav-item>
-        <div class="at-Layout-sideNavSpacer"></div>
+        <div class="at-Layout-sideNavSpacer" ng-show="$parent.layoutVm.isSuperUser">
-        <at-side-nav-item icon-class="fa-code" route="inventoryScripts" name="INVENTORY_SCRIPTS">
+            <span class="at-Layout-sideNavHeader">
+                {{:: $parent.layoutVm.getString('ADMINISTRATION_HEADER') }}
+            <span>
+        </div>
+        <at-side-nav-item icon-class="fa-list-alt" route="credentialTypes" name="CREDENTIAL_TYPES"
+            system-admin-only="true">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-bell" route="notifications" name="NOTIFICATIONS"
             system-admin-only="true">
         </at-side-nav-item>
-        <at-side-nav-item icon-class="fa-wrench" route="managementJobsList" name="MANAGEMENT_JOBS"
+        <at-side-nav-item icon-class="fa-briefcase" route="managementJobsList" name="MANAGEMENT_JOBS"
             system-admin-only="true">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-server" route="instanceGroups" name="INSTANCE_GROUPS"
             system-admin-only="true">
         </at-side-nav-item>
-        <div class="at-Layout-sideNavSpacer"></div>
         <at-side-nav-item icon-class="fa-cubes" route="applications" name="APPLICATIONS"
             system-admin-only="true">
         </at-side-nav-item>

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;

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: 5px 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;