Update navigation to accordian-style menu
- New navigation provides intuitive structure for showing relationship
between sections and pages
- Menu keeps an open state, which allows easy clicking to sibling pages
- Ability to preview all page sections w/o hover over blocking page content
- Allows user to see where they are within navigation at all times
Tested: Opened each page and confirmed new navigation worked, clicked through
to all pages successfully.
Change-Id: Ie10dc95d8e15ee9bf89a3bec9ff231c0a7065ed9
Signed-off-by: Kathy Pine <kathryn.elainex.pine@intel.com>
diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js
index baa8c8b..a2ced03 100644
--- a/app/common/directives/app-navigation.js
+++ b/app/common/directives/app-navigation.js
@@ -10,18 +10,30 @@
'controller': [
'$scope', '$location', 'dataService',
function($scope, $location, dataService) {
+ $scope.showHealthMenu = false;
+ $scope.showControlMenu = false;
+ $scope.showConfigMenu = false;
+ $scope.showAccessMenu = false;
$scope.dataService = dataService;
- $scope.showSubMenu = false;
+
$scope.change = function(firstLevel) {
- if (firstLevel != $scope.firstLevel) {
- $scope.firstLevel = firstLevel;
- $scope.showSubMenu = true;
- } else {
- $scope.showSubMenu = !$scope.showSubMenu;
- }
- };
- $scope.closeSubnav = function() {
- $scope.showSubMenu = false;
+ switch (firstLevel) {
+ case 'server-health':
+ $scope.showHealthMenu = !$scope.showHealthMenu;
+ break;
+ case 'server-control':
+ $scope.showControlMenu = !$scope.showControlMenu;
+ break;
+ case 'configuration':
+ $scope.showConfigMenu = !$scope.showConfigMenu;
+ break;
+ case 'access-control':
+ $scope.showAccessMenu = !$scope.showAccessMenu;
+ break;
+ case 'overview':
+ $location.url('/overview/server');
+ break;
+ };
};
$scope.$watch('path', function() {
var urlRoot = $location.path().split('/')[1];
@@ -30,22 +42,15 @@
} else {
$scope.firstLevel = 'overview';
}
- $scope.showSubMenu = false;
+ $scope.showSubMenu = true;
});
$scope.$watch('showNavigation', function() {
- var paddingTop = 0;
var urlRoot = $location.path().split('/')[1];
if (urlRoot != '') {
$scope.firstLevel = urlRoot;
} else {
$scope.firstLevel = 'overview';
}
-
- if ($scope.showNavigation) {
- paddingTop = document.getElementById('header').offsetHeight;
- }
- dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
- $scope.navStyle = {'top': paddingTop + 'px'};
});
}
],
@@ -56,11 +61,11 @@
if (scope.showSubMenu) {
scope.$apply(function() {
- scope.showSubMenu = false;
+ scope.showSubMenu = true;
});
}
});
}
};
});
-})(window.angular);
+})(window.angular);
\ No newline at end of file