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.html b/app/common/directives/app-navigation.html
index 435980a..41441e2 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -1,97 +1,119 @@
<nav class="nav__wrapper">
<ul id="nav__top-level" ng-style="navStyle">
<li>
- <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
+ <button ng-click="change('overview')">
<icon class="nav-icon" file="icon-overview.svg" aria-hidden="true"></icon>
- Server overview
- </a>
- </li>
- <li>
- <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')">
- <icon class="nav-icon" file="icon-health.svg" aria-hidden="true"></icon>
- Server health
+ <span class="nav-link">Overview</span>
</button>
- <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" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Event log</a>
+ </li>
+ <li ng-class="{opened: showHealthMenu}">
+ <button class="btn-health" ng-click="change('server-health')">
+ <icon class="nav-icon" file="icon-health.svg" aria-hidden="true"></icon>
+ <span class="nav-link">Health</span>
+ </button>
+ <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showHealthMenu)}">
+ <li ng-class="{'active': (path == '/server-health/sys-log')}">
+ <a href="#/server-health/sys-log" tabindex="{{(showHealthMenu) ? 0 : -1}}">
+ <span>Event log</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}">
- <a href="#/server-health/inventory-overview" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Hardware status</a>
+ <a href="#/server-health/inventory-overview" tabindex="{{(showHealthMenu) ? 0 : -1}}">
+ <span>Hardware status</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
- <a href="#/server-health/sensors-overview" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Sensors</a>
- </li>
- <li ng-class="{'active': (path == '/server-health/sys-log')}" ng-show="!dataService.configJson.redfishEventLogDisabled">
- <a href="#/server-health/sys-log" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">System logs</a>
+ <a href="#/server-health/sensors-overview" tabindex="{{(showHealthMenu) ? 0 : -1}}">
+ <span>Sensors</span>
+ </a>
</li>
</ul>
</li>
- <li>
- <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
- <icon class="nav-icon nav-icon__control" file="icon-control.svg" aria-hidden="true"></icon>
- Server control
+ <li ng-class="{opened: showControlMenu}">
+ <button ng-click="change('server-control')">
+ <icon class="nav-icon" file="icon-control.svg" aria-hidden="true"></icon>
+ <span class="nav-link">Control</span>
</button>
- <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
+ <ul class="nav__second-level btn-control" ng-class="{opened: (showControlMenu)}">
<li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
- <a href="#/server-control/power-operations" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Server power operations</a>
+ <a href="#/server-control/power-operations" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>Server power operations</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-control/power-usage')}">
- <a href="#/server-control/power-usage" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Manage power usage</a>
+ <a href="#/server-control/power-usage" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>Manage power usage</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-control/server-led')}">
- <a href="#/server-control/server-led" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Server LED</a>
+ <a href="#/server-control/server-led" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>Server LED</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
- <a href="#/server-control/bmc-reboot" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Reboot BMC</a>
+ <a href="#/server-control/bmc-reboot" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>Reboot BMC</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-control/remote-console')}">
- <a href="#/server-control/remote-console" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Serial over LAN console</a>
+ <a href="#/server-control/remote-console" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>Serial over LAN console</span>
+ </a>
</li>
<li ng-class="{'active': (path == '/server-control/kvm')}">
- <a href="#/server-control/kvm" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">KVM</a>
+ <a href="#/server-control/kvm" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>KVM</span>
+ </a>
</li>
- <li ng-class="{'active': (path == '/server-control/virtual-media')}">
- <a href="#/server-control/virtual-media" ng-click="closeSubnav()"
- tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Virtual Media</a>
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/virtual-media')}">
+ <a href="#/server-control/virtual-media" tabindex="{{(showControlMenu) ? 0 : -1}}">
+ <span>Virtual Media</span>
+ </a>
</li>
</ul>
</li>
- <li>
- <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
+ <li ng-class="{opened: showConfigMenu}">
+ <button ng-click="change('configuration')">
<icon class="nav-icon" file="icon-config.svg" aria-hidden="true"></icon>
- Server configuration
+ <span class="nav-link">Configuration</span>
</button>
- <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
+ <ul class="nav__second-level btn-firmware" ng-class="{opened: (showConfigMenu)}">
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
- <a href="#/configuration/network" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Network settings</a>
+ <a href="#/configuration/network" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Network
+ settings</span></a>
</li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
- <a href="#/configuration/snmp" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">SNMP settings</a>
+ <a href="#/configuration/snmp" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>SNMP
+ settings</span></a>
</li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
- <a href="#/configuration/firmware" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Firmware</a>
+ <a href="#/configuration/firmware" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Firmware</span></a>
</li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
- <a href="#/configuration/date-time" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Date and time settings</a>
+ <a href="#/configuration/date-time" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Date and
+ time
+ settings</span></a>
</li>
</ul>
</li>
- <li>
- <button class="btn-access-control" ng-class="{opened: firstLevel == 'access-control'}" ng-click="change('access-control')">
- <icon class="nav-icon nav-icon__key" file="icon-key.svg" aria-hidden="true"></icon>
- Access control
+ <li ng-class="{opened: showAccessMenu}">
+ <button ng-click="change('access-control')">
+ <icon class="nav-icon" file="icon-user.svg" aria-hidden="true"></icon>
+ <span class="nav-link">Access</span>
</button>
- <ul class="nav__second-level btn-access-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'access-control')}">
+ <ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showAccessMenu)}">
<li ng-class="{'active': (path == '/access-control' || path == '/access-control/ldap')}">
- <a href="#/access-control/ldap" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">LDAP</a>
+ <a href="#/access-control/ldap" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>LDAP</span></a>
</li>
<li ng-class="{'active': (path == '/access-control' || path == '/access-control/local-users')}">
- <a href="#/access-control/local-users" ng-click="closeSubnav()" tabindex="{{ (showSubMenu && firstLevel == 'access-control') ? 0 : -1}}">Local users</a>
+ <a href="#/access-control/local-users" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>Local
+ users</span></a>
</li>
<li ng-class="{'active': (path == '/access-control' || path == '/access-control/ssl-certificates')}">
- <a href="#/access-control/ssl-certificates" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">SSL certificates</a>
+ <a href="#/access-control/ssl-certificates" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>SSL
+ certificates</span></a>
</li>
</ul>
</li>
</ul>
-</nav>
+</nav>
\ No newline at end of file
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
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index f8f5a6f..519c3ee 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,34 +1,14 @@
-$nav__toplvlWidth: 125px;
-$nav__seclvlWidth: 240px;
-$nav__top-level-color: $base-01--01;
-$nav__second-level-color: $base-02--06;
-$nav__second-level-text-color: $base-02--01;
+$nav__toplvlWidth: 240px;
+$nav__top-level-color: $color--blue-100;
+$nav__top-level-text-secondary: $color--grey-20;
+$nav__second-level-text-primary: $color--teal-50;
+$nav__second-level-text-secondary: $primary-light;
+$nav__hover-over-outline: $color--grey-40;
//Navigation icons
-@mixin navIcons {
- color: $primary-light;
- fill: $primary-light;
- max-height: 40px;
- stroke-width: .5;
- display: block;
- margin: .5em auto;
- .st0 {
- fill: none;
- stroke: $primary-light;
- stroke-width: 2;
- stroke-miterlimit: 10;
- }
- .st1 {
- fill: none;
- stroke: $primary-light;
- stroke-width: 4;
- stroke-miterlimit: 10;
- }
-}
-
.nav__wrapper {
height: 100%;
- position: fixed;
+ position: absolute;
top: 0;
z-index: 100;
}
@@ -36,158 +16,156 @@
// Top level navigation
#nav__top-level {
background: $nav__top-level-color;
- position: absolute;
+ position: fixed;
left: 0;
top: 0;
bottom: 0;
list-style-type: none;
- margin: 0;
- padding: 0;
+ padding: 22px 0 0 0;
+ margin: 130px 0 0 0;
width: $nav__toplvlWidth;
overflow-y: auto;
- li {
+ >li {
margin: 0;
+ height: 3em;
+ &.opened{
+ height: inherit;
+ .nav-link{
+ color: $primary-light;
+ }
+ }
}
> li > a,
> li > button {
- height: 120px;
+ height: 3.3em;
}
- //svg icons
- .nav-icon {
- @include navIcons;
- width: 100%;
- height: 100%;
- svg {
- width: 36px;
- height: auto;
- }
- }
- .nav-icon__control,
- .nav-icon__key {
- svg {
- width: 30px;
- }
- }
- .button, button, a {
- background: transparent;
- border: 0;
- color: $primary-light;
- fill: $primary-light;
- width: 100%;
- padding: 1em;
- display: block;
- text-align: center;
- margin-bottom: 0;
- white-space: normal;
- border-radius: 0;
- text-decoration: none;
- border-top: 1px solid transparent;
- border-bottom: 1px solid $border-color-02;
- font-weight: normal;
- font-size: .9em;
- line-height: 1.2;
+ button,
+ a,
+ span {
&:hover {
- background: $primary-light;
- fill: $primary-dark;
- color: $primary-action;
- padding: 1em;
+ &.opened{
+ color: $primary-light;
+ }
+ }
+ }
+ .nav-icon {
+ height: 26px;
+ float: left;
+ margin: 2px 0 0 1px;
+ width: 26px;
+ fill: $primary-light;
+ svg {
+ height: inherit;
+ width: 26px;
+ max-width: inherit;
+ fill: $primary-light;
+ }
+ }
+ .nav-link {
+ float: left;
+ font-size: 15px;
+ padding: 9px 0 0 7px;
+ margin-left: 5px;
+ &:focus{
+ outline: 0;
+ }
+ }
+}
+
+.nav__wrapper button {
+ background: transparent;
+ border: 0;
+ color: $primary-light;
+ width: 95%;
+ padding: 5px 5px 9px 10px;
+ margin: 0 0 0 6px;
+ display: block;
+ text-align: center;
+ white-space: normal;
+ border-radius: 0;
+ text-decoration: none;
+ border: 1px solid transparent;
+ font-weight: normal;
+ font-size: 13px;
+ &:hover,
+ &:focus {
+ background: fade-out(#ffffff, 0.9);
+ color: $nav__top-level-text-secondary;
+ border-radius: 0;
+ border: 1px solid $nav__hover-over-outline;
+ outline: 0;
+ }
+ .icon {
+ margin-left: .3em;
+ margin-top: .6em;
+ }
+ img {
+ width: 2em;
+ height: 2em;
+ }
+}
+
+.nav__second-level {
+ list-style-type: none;
+ opacity: 0;
+ left: $nav__toplvlWidth;
+ padding: 0;
+ margin: 0;
+ transform: scaleY(0);
+ transform-origin: 0 0;
+ transition: all $duration--moderate-01 $standard-easing--expressive;
+ overflow: hidden;
+ line-height: 0;
+ a {
+ color: $primary-light;
+ width: 95%;
+ padding: 6px 5px 8px 50px;
+ margin: 0 0 0 6px;
+ white-space: normal;
+ text-decoration: none;
+ border: 1px solid transparent;
+ font-weight: normal;
+ font-size: .8rem;
+ &:hover,
+ &:focus {
+ background: fade-out(#ffffff, 0.9);
+ color: $nav__second-level-text-secondary;
border-radius: 0;
- border-bottom: 1px solid $border-color-01;
- .nav__icon-help__outer {
- stroke: $primary-dark;
- }
- .nav__icon-help__inner {
- fill: $primary-action;
- }
- .nav-icon {
- fill: $primary-action;
- color: $primary-action;
- .st0 {
- stroke: $primary-action;
- }
- .st1 {
- fill: $primary-action;
- color: $primary-action;
- stroke: $primary-action;
- }
- }
+ border-color: $nav__hover-over-outline;
+ outline: 0;
}
}
- .opened {
- background: $nav__second-level-color;
- fill: $primary-dark;
- color: darken($primary-action, 10%);
- border-bottom: 1px solid $border-color-01;
- .nav-icon {
- fill: $primary-action;
- color: $primary-action;
- .st0 {
- stroke: $primary-action;
- }
- .st1 {
- fill: $primary-action;
- color: $primary-action;
- stroke: $primary-action;
- }
+ &.opened {
+ line-height: 1.1;
+ overflow: visible;
+ opacity: 1;
+ transform: scaleY(1);
+ transition: all $duration--moderate-01 $standard-easing--expressive;
+ li a{
+ display:block;
}
}
- // Second Level Navigation
- .nav__second-level {
- position: fixed;
- background: $nav__second-level-color;
- top: 0;
- bottom: 0;
- left: -245px;
- width: $nav__seclvlWidth;
- z-index: -1;
- padding: 0;
+ li:hover
+ {
+ margin-left: 17px;
margin: 0;
- list-style-type: none;
- display: block;
- transition: left $duration--slow-01 $standard-easing--productive;
- &.opened {
- left: $nav__toplvlWidth;
- box-shadow: 7px 0 28px -10px $base-02--02;
+ padding: 0;
+ a{
+ padding-left: 50px;
}
- a {
- padding: 1.2em 1em 1.2em 1em;
- display: block;
- color: $primary-dark;
- text-decoration: none;
- position: relative;
- font-weight: 400;
- text-align: left;
- border-bottom: 1px solid transparent;
- &:hover {
- background: $primary-light;
- }
- }
+ }
- li {
- a:after{
- content: '\203A';
- position: absolute;
- font-size: 2em;
- font-weight: 700;
- top: 50%;
- right: .6em;
- transform: translateY(-59%);
- color: $nav__second-level-text-color;
- opacity: 0;
+ li {
+ &:focus,
+ &:hover {
+ a {
+ color: $nav__second-level-text-secondary;
}
- &.active {
- a {font-weight: 700;}
- }
- &.active,
- &:focus,
- &:hover {
- a {color: $nav__second-level-text-color;}
- a:after {
- opacity: 1;
- right: .3em;
- @include fastTransition-all;
- }
+ }
+ &.active {
+ a span {
+ color: $nav__second-level-text-primary;
}
}
}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index f5d2757..143c52a 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -1,12 +1,11 @@
// Content layout styles
-$nav__toplvlWidth: 120px;
-$nav__seclvlWidth: 240px;
+$nav__toplvlWidth: 240px;
// Main element class
.content__container {
margin-left: $nav__toplvlWidth;
padding: 1em 0.1em;
-
+ margin-top: 130px;
@include mediaQuery(x-small) {
padding: 1rem 2rem;
}