Add side nav panel tooltips

awx/ui/client/lib/components/layout/_index.less

@@ -91,25 +91,33 @@
         overflow-y: auto;
         max-height: 100vh;
         min-width: @at-width-collapsed-side-nav;
+        z-index: @at-z-index-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.fa {
+                    padding-left: 20px;
+                }
 
                 i {
-                    margin-left: @at-highlight-left-border-margin-makeup;
+                    cursor: pointer;
+                    color: @at-color-side-nav-content;
+                    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 {
+                        color: @at-color-side-nav-content;
+                        margin-left: @at-highlight-left-border-margin-makeup;
+                    }
                 }
-            }
         }
 
         .at-Layout-sideNavSpacer {

awx/ui/client/lib/components/layout/side-nav-item.directive.js

@@ -7,7 +7,7 @@ function atSideNavItemLink (scope, element, attrs, ctrl) {
 
 function AtSideNavItemController ($state, $scope) {
     let vm = this || {};
-
+    vm.popoverText = $scope.name.replace(/_/g,' ');
     $scope.$watch('layoutVm.currentState', function(current) {
         if ($scope.name === 'portal mode') {
             vm.isRoute = (current && current.indexOf('portalMode') === 0);
@@ -27,6 +27,16 @@ function AtSideNavItemController ($state, $scope) {
     vm.go = function() {
         $state.go($scope.route, {}, {reload: true});
     }
+
+    vm.tooltip = {
+        popover: {
+            text: vm.popoverText,
+            on: 'mouseenter',
+            icon: $scope.iconClass,
+            position: 'right',
+            arrowHeight: 18
+        }
+    }
 }
 
 AtSideNavItemController.$inject = ['$state', '$scope'];

awx/ui/client/lib/components/layout/side-nav-item.partial.html

@@ -1,8 +1,10 @@
 <div class="at-Layout-sideNavItem" ng-click="vm.go()" ng-class="{'is-active': vm.isRoute}"
     ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
         !layoutVm.licenseIsMissing">
-            <i class="fa {{ iconClass }}"></i>
-            <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
-                {{ layoutVm.getString(name) }}
-            </span>
+        <at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
+
+        <i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
+        <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
+            {{ layoutVm.getString(name) }}
+        </span>
 </div>

awx/ui/client/lib/components/layout/side-nav.directive.js

@@ -7,7 +7,7 @@ function atSideNavLink (scope, element, attrs, ctrl) {
 function AtSideNavController () {
     let vm = this || {};
 
-    vm.isExpanded = true;
+    vm.isExpanded = false;
 
     vm.toggleExpansion = () => {
         vm.isExpanded = !vm.isExpanded;

awx/ui/client/lib/components/popover/popover.directive.js

@@ -43,6 +43,7 @@ function AtPopoverController () {
         scope.popover.icon = scope.popover.icon || DEFAULT_ICON;
         scope.popover.on = scope.popover.on || DEFAULT_ACTION;
         scope.popover.resetOnExit = scope.popover.resetOnExit || DEFAULT_RESET_ON_EXIT;
+        scope.popover.arrowHeight = scope.popover.arrowHeight || DEFAULT_ARROW_HEIGHT;
 
         if (scope.popover.resetOnExit) {
             scope.originalText = scope.popover.text;
@@ -138,7 +139,7 @@ function AtPopoverController () {
         let arrow = popover.getElementsByClassName('at-Popover-arrow')[0];
 
         arrow.style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
-        arrow.children[0].style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
+        arrow.children[0].style.lineHeight = `${scope.popover.arrowHeight}px`;
 
         let data = {
             arrow,
@@ -149,6 +150,7 @@ function AtPopoverController () {
 
         data.cx = Math.floor(data.icon.left + (data.icon.width / 2));
         data.cy = Math.floor(data.icon.top + (data.icon.height / 2));
+        data.rightBoundary = Math.floor(data.icon.right);
 
         return data;
     };
@@ -161,7 +163,7 @@ function AtPopoverController () {
         popover.style.visibility = 'visible';
         popover.style.opacity = 1;
 
-        if (scope.popover.position === 'right') {
+       if (scope.popover.position === 'right') {
             vm.displayRight(positions);
         } else if (scope.popover.position === 'top') {
             vm.displayTop(positions);
@@ -169,8 +171,8 @@ function AtPopoverController () {
     };
 
     vm.displayRight = (pos) => {
-        let arrowTop = Math.floor((pos.cy - (pos.icon.height / 2)));
-        let arrowLeft = pos.cx + DEFAULT_PADDING;
+        let arrowHeight = pos.arrow.offsetHeight;
+        let arrowLeft = pos.rightBoundary + DEFAULT_PADDING;
 
         let popoverTop;
         let popoverLeft = arrowLeft + DEFAULT_PADDING - 1;
@@ -181,6 +183,8 @@ function AtPopoverController () {
             popoverTop = Math.floor((pos.cy - pos.popover.height / 2));
         }
 
+        let arrowTop = Math.floor(popoverTop + (pos.popover.height / 2) - (arrowHeight / 2));
+
         pos.arrow.style.top = `${arrowTop}px`;
         pos.arrow.style.left = `${arrowLeft}px`;
 

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

@@ -1,16 +1,16 @@
 <div ng-show="popover.text" class="at-Popover" ng-class="{ 'at-Popover--inline': popover.inline }">
-    <span class="at-Popover-icon"
+    <div class="at-Popover-icon"
           ng-class="{ 'at-Popover-icon--defaultCursor': popover.on === 'mouseenter' && !popover.click }">
         <i class="fa {{ popover.icon }}"></i>
-    </span>
+    </div>
     <div class="at-Popover-container">
         <div class="at-Popover-arrow">
-            <i ng-if="popover.position === 'right'" class="fa fa-caret-left fa-2x"></i>
-            <i ng-if="popover.position === 'top'" class="fa fa-caret-down fa-2x"></i>
+            <div ng-if="popover.position === 'right'" class="fa fa-caret-left fa-2x"></div>
+            <div ng-if="popover.position === 'top'" class="fa fa-caret-down fa-2x"></div>
         </div>
         <div class="at-Popover-content">
-            <h4 ng-if="popover.title" class="at-Popover-title">{{ popover.title | translate }}</h4>
-            <p ng-if="popover.text" class="at-Popover-text">{{ popover.text | translate}}</p>
+            <h4 ng-if="popover.title" class="at-Popover-title">{{ popover.title }}</h4>
+            <p ng-if="popover.text" class="at-Popover-text">{{ popover.text }}</p>
         </div>
     </div>
 </div>

awx/ui/client/lib/theme/_variables.less

@@ -244,4 +244,6 @@
 @at-highlight-left-border-size: 5px;
 @at-highlight-left-border-margin-makeup: -5px;
 @at-z-index-nav: 1040;
+@at-z-index-side-nav: 1030;
+@at-z-index-footer: 1020;
 @at-border-default-width: 1px;