diff options
-rw-r--r-- | app/assets/icons/icon-config.svg | 2 | ||||
-rw-r--r-- | app/assets/icons/icon-control.svg | 2 | ||||
-rw-r--r-- | app/assets/icons/icon-health.svg | 2 | ||||
-rw-r--r-- | app/assets/icons/icon-overview.svg | 2 | ||||
-rw-r--r-- | app/assets/icons/icon-user.svg | 2 | ||||
-rw-r--r-- | app/assets/images/openBMC.png | bin | 13574 -> 0 bytes | |||
-rw-r--r-- | app/common/directives/app-navigation.html | 112 | ||||
-rw-r--r-- | app/common/directives/app-navigation.js | 45 | ||||
-rw-r--r-- | app/common/styles/directives/app-navigation.scss | 278 | ||||
-rw-r--r-- | app/common/styles/layout/content.scss | 5 |
10 files changed, 227 insertions, 223 deletions
diff --git a/app/assets/icons/icon-config.svg b/app/assets/icons/icon-config.svg index b649651..223ed7a 100644 --- a/app/assets/icons/icon-config.svg +++ b/app/assets/icons/icon-config.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27 16.76V16v-.77l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1 2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1 2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1 2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51zM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4 2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4 3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20z"/><path d="M16 22a6 6 0 1 1 6-6 5.94 5.94 0 0 1-6 6zm0-10a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M27 16.76V16v-.77l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1 2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1 2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1 2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51zM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4 2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4 3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20z"/><path fill="#ffffff" d="M16 22a6 6 0 1 1 6-6 5.94 5.94 0 0 1-6 6zm0-10a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file diff --git a/app/assets/icons/icon-control.svg b/app/assets/icons/icon-control.svg index 5c18df3..4ac4693 100644 --- a/app/assets/icons/icon-control.svg +++ b/app/assets/icons/icon-control.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 23"><path id="a" d="M11.11,2.83A3.73,3.73,0,0,0,7.47,0,3.81,3.81,0,0,0,3.83,2.83H0V4.72H3.83A3.73,3.73,0,0,0,7.47,7.55a3.81,3.81,0,0,0,3.64-2.83H28V2.83ZM7.47,4.72a.89.89,0,0,1-.93-.94.89.89,0,0,1,.93-.94.89.89,0,0,1,.93.94A.89.89,0,0,1,7.47,4.72ZM20.53,7.55a3.81,3.81,0,0,1,3.64,2.83H28v1.89H24.17a3.81,3.81,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V10.38H16.89a3.81,3.81,0,0,1,3.64-2.83Zm0,4.72a.89.89,0,0,0,.93-.94.93.93,0,1,0-1.87,0A.89.89,0,0,0,20.53,12.27ZM7.47,15.1a3.82,3.82,0,0,1,3.64,2.83H28v1.89H11.11a3.82,3.82,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V17.93H3.83A3.81,3.81,0,0,1,7.47,15.1Zm0,4.72a.94.94,0,0,0,0-1.89.94.94,0,0,0,0,1.89Z"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 23"><path fill="#ffffff" id="a" d="M11.11,2.83A3.73,3.73,0,0,0,7.47,0,3.81,3.81,0,0,0,3.83,2.83H0V4.72H3.83A3.73,3.73,0,0,0,7.47,7.55a3.81,3.81,0,0,0,3.64-2.83H28V2.83ZM7.47,4.72a.89.89,0,0,1-.93-.94.89.89,0,0,1,.93-.94.89.89,0,0,1,.93.94A.89.89,0,0,1,7.47,4.72ZM20.53,7.55a3.81,3.81,0,0,1,3.64,2.83H28v1.89H24.17a3.81,3.81,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V10.38H16.89a3.81,3.81,0,0,1,3.64-2.83Zm0,4.72a.89.89,0,0,0,.93-.94.93.93,0,1,0-1.87,0A.89.89,0,0,0,20.53,12.27ZM7.47,15.1a3.82,3.82,0,0,1,3.64,2.83H28v1.89H11.11a3.82,3.82,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V17.93H3.83A3.81,3.81,0,0,1,7.47,15.1Zm0,4.72a.94.94,0,0,0,0-1.89.94.94,0,0,0,0,1.89Z"/></svg>
\ No newline at end of file diff --git a/app/assets/icons/icon-health.svg b/app/assets/icons/icon-health.svg index f01af2c..d6236a6 100644 --- a/app/assets/icons/icon-health.svg +++ b/app/assets/icons/icon-health.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"/><circle cx="11" cy="8" r="1"/><circle cx="11" cy="16" r="1"/><circle cx="11" cy="24" r="1"/><path d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"/><circle cx="11" cy="8" r="1"/><circle fill="#ffffff" cx="11" cy="16" r="1"/><circle fill="#ffffff" cx="11" cy="24" r="1"/><path fill="#ffffff" d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file diff --git a/app/assets/icons/icon-overview.svg b/app/assets/icons/icon-overview.svg index 748fa81..0b42642 100644 --- a/app/assets/icons/icon-overview.svg +++ b/app/assets/icons/icon-overview.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"/><path d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"/><path fill="#ffffff" d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file diff --git a/app/assets/icons/icon-user.svg b/app/assets/icons/icon-user.svg index 0d4610d..8e5466c 100644 --- a/app/assets/icons/icon-user.svg +++ b/app/assets/icons/icon-user.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 4a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7zM26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M16 4a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7zM26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file diff --git a/app/assets/images/openBMC.png b/app/assets/images/openBMC.png Binary files differdeleted file mode 100644 index e350113..0000000 --- a/app/assets/images/openBMC.png +++ /dev/null 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> + <span class="nav-link">Overview</span> + </button> </li> - <li> - <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')"> + <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> - Server health + <span class="nav-link">Health</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> + <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 @@ window.angular && (function(angular) { '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 @@ window.angular && (function(angular) { } 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 @@ window.angular && (function(angular) { 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 @@ $nav__second-level-text-color: $base-02--01; // 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; + button, + a, + span { + &:hover { + &.opened{ + color: $primary-light; + } } } - .nav-icon__control, - .nav-icon__key { - svg { - width: 30px; + .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; } - .button, button, a { - background: transparent; - border: 0; +} + +.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; - fill: $primary-light; - width: 100%; - padding: 1em; - display: block; - text-align: center; - margin-bottom: 0; + width: 95%; + padding: 6px 5px 8px 50px; + margin: 0 0 0 6px; white-space: normal; - border-radius: 0; text-decoration: none; - border-top: 1px solid transparent; - border-bottom: 1px solid $border-color-02; + border: 1px solid transparent; font-weight: normal; - font-size: .9em; - line-height: 1.2; - &:hover { - background: $primary-light; - fill: $primary-dark; - color: $primary-action; - padding: 1em; + 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; - } - 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; - } + padding: 0; + a{ + padding-left: 50px; } + } - 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; - } - &.active { - a {font-weight: 700;} + li { + &:focus, + &:hover { + a { + color: $nav__second-level-text-secondary; } - &.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; } |