diff options
author | Iftekharul Islam <iislam@us.ibm.com> | 2017-05-05 09:17:54 -0500 |
---|---|---|
committer | Patrick Williams <patrick@stwcx.xyz> | 2017-09-20 12:44:06 -0500 |
commit | 685fe75ec5c2e82280c0dcc47aa59802314c757d (patch) | |
tree | 594dded378225e8ba944b8a2f73c7f9ec616cba5 /app/common | |
parent | 06229be97ab2d945e98bbf4080c4413cd97587f5 (diff) | |
download | phosphor-webui-685fe75ec5c2e82280c0dcc47aa59802314c757d.tar.gz phosphor-webui-685fe75ec5c2e82280c0dcc47aa59802314c757d.zip |
Collapse higher-level navigation on certain actions
* Selecting parent-level navigation collapses
child navigation.
* Selecting top-level navigation collapses all.
Change-Id: I35d3ed1594e96f32539f488b86aa7d1eb558c5d1
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
Diffstat (limited to 'app/common')
-rw-r--r-- | app/common/directives/app-navigation.html | 14 | ||||
-rw-r--r-- | app/common/directives/app-navigation.js | 23 |
2 files changed, 21 insertions, 16 deletions
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html index 1f1f314..4b687dd 100644 --- a/app/common/directives/app-navigation.html +++ b/app/common/directives/app-navigation.html @@ -1,7 +1,7 @@ <nav> <ul id="nav__top-level" ng-style="navStyle"> <li> - <a class="btn-overview" href="#/overview/system" ng-click="closeSubnav()" tabindex="1"> + <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/system" ng-click="change('overview')" tabindex="1"> <span class="">Server Overview</span></a> </li> <li> @@ -25,11 +25,11 @@ <span>Users</span></button> </li> </ul> - <ul class="nav__second-level btn-overview" ng-style="navStyle" ng-class="{opened: firstLevel == 'overview'}"> + <ul class="nav__second-level btn-overview" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'overview')}"> <li ng-class="{'active': (path == '/overview' || path == '/overview/system')}" tabindex="2"> <a href="#/overview/system" ng-click="closeSubnav()">System overview</a></li> </ul> - <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: firstLevel == 'server-health'}"> + <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}"> <li ng-class="{'active': (path == '/server-health/event-log')}"><a href="#/server-health/event-log" tabindex="7" ng-click="closeSubnav()">Event log</a></li> <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}" ng-click="closeSubnav()"><a href="#/server-health/inventory-overview">Hardware inventory</a></li> <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}"><a href="#/server-health/sensors-overview" ng-click="closeSubnav()">Sensor data</a></li> @@ -37,22 +37,22 @@ <li ng-class="{'active': (path == '/server-health/unit-id')}"><a href="#/server-health/unit-id" tabindex="6" ng-click="closeSubnav()">Unit ID</a></li> <!--<li ng-class="{'active': (path == '/server-health/diagnostics')}"><a href="#/server-health/diagnostics" ng-click="closeSubnav()">Diagnostics</a></li>--> </ul> - <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: firstLevel == 'server-control'}"> + <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}"> <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}" tabindex="3"><a href="#/server-control/power-operations" ng-click="closeSubnav()">Server power operations</a></li> <li ng-class="{'active': (path == '/server-control/bmc-reboot')}"><a href="#/server-control/bmc-reboot" tabindex="8" ng-click="closeSubnav()">Reboot BMC</a></li> <li ng-class="{'active': (path == '/server-control/remote-console')}"><a href="#/server-control/remote-console" tabindex="5" ng-click="closeSubnav()">Remote console</a></li> </ul> - <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'configuration'}"> + <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}"> <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}"><a href="#/configuration/network" ng-click="closeSubnav()">Network settings</a></li> <!--<li ng-class="{'active': (path == '/configuration/date-time')}"><a href="#/configuration/date-time" ng-click="closeSubnav()">Date & Time</a></li>--> <li ng-class="{'active': (path == '/configuration/security')}"><a href="#/configuration/security" ng-click="closeSubnav()">Security</a></li> <!--<li ng-class="{'active': (path == '/configuration/file')}"><a href="#/configuration/file" ng-click="closeSubnav()">Configuration File</a></li>--> </ul> - <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'firmware'}"> + <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'firmware')}"> <li ng-class="{'active': (path == '/firmware' || path == '/firmware/bmc')}"><a href="#/firmware/bmc" ng-click="closeSubnav()">BMC firmawre</a></li> <li ng-class="{'active': (path == '/firmware/server')}"><a href="#/firmware/server" ng-click="closeSubnav()">Server firmware</a></li> </ul> - <ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: firstLevel == 'users'}"> + <ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'users')}"> <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}"><a href="#/users/manage-accounts" ng-click="closeSubnav()">Manage user account</a></li> </ul> </nav> diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js index a1e912c..00c3ec7 100644 --- a/app/common/directives/app-navigation.js +++ b/app/common/directives/app-navigation.js @@ -12,21 +12,26 @@ window.angular && (function (angular) { 'showNavigation': '=' }, 'controller': ['$scope', '$location', 'dataService', function($scope, $location, dataService){ + $scope.showSubMenu = false; $scope.change = function(firstLevel){ - $scope.firstLevel = firstLevel; - //$location.path('/'+firstLevel); + if(firstLevel != $scope.firstLevel) { + $scope.firstLevel = firstLevel; + $scope.showSubMenu = true; + }else{ + $scope.showSubMenu = !$scope.showSubMenu; + } }; $scope.closeSubnav = function(){ - $scope.firstLevel = ''; + $scope.showSubMenu = false; }; $scope.$watch('showNavigation', function(){ var paddingTop = 0; - // var urlRoot = $location.path().split("/")[1]; - // if(urlRoot != ""){ - // $scope.firstLevel = urlRoot; - // }else{ - // $scope.firstLevel = 'overview'; - // } + var urlRoot = $location.path().split("/")[1]; + if(urlRoot != ""){ + $scope.firstLevel = urlRoot; + }else{ + $scope.firstLevel = 'overview'; + } if($scope.showNavigation){ paddingTop = document.getElementById('header__wrapper').offsetHeight; |