Added luna template and deps
Change-Id: Idd3dcdee3a377a75733c333d4a754632111e17ee
diff --git a/src/app/core/nav/nav.html b/src/app/core/nav/nav.html
index 8420839..fe96460 100644
--- a/src/app/core/nav/nav.html
+++ b/src/app/core/nav/nav.html
@@ -1,23 +1,35 @@
-<div class="nav">
- <ul>
- <li
- ng-repeat="route in vm.routes track by $index"
- ui-sref-active="active"
- ng-class="vm.isRouteActive(route)">
- <a ng-if="route.state" ui-sref="{{route.state}}" ng-click="vm.activateRoute(route)">
- <i ng-if="route.children" class="fa fa-chevron-right"></i>
- {{route.label}}
- </a>
- <a ng-if="route.url" href="#/{{route.url}}" ng-click="vm.activateRoute(route)">
- <i ng-if="route.children" class="fa fa-chevron-right"></i>
- {{route.label}}
- </a>
- <ul class="child-routes" ng-if="route.children" ng-class="{opened: route.opened}">
- <li ng-repeat="childRoute in route.children | orderBy:'label'" ui-sref-active="active">
- <a ng-if="childRoute.state" ui-sref="{{childRoute.state}}">{{childRoute.label}}</a>
- <a ng-if="childRoute.url" href="#/{{childRoute.url}}">{{childRoute.label}}</a>
- </li>
- </ul>
- </li>
- </ul>
-</div>
+<!-- Navigation -->
+<aside class="navigation">
+ <!-- Navigation-->
+ <nav>
+ <ul class="nav luna-nav">
+ <!--<li class="nav-category">-->
+ <!--Main-->
+ <!--</li>-->
+ <li
+ ng-repeat="route in vm.routes track by $index"
+ ui-sref-active="active">
+ <a ng-if="route.state && !route.children" ui-sref="{{route.state}}" ng-click="vm.activateRoute(route)">
+ {{route.label}}
+ </a>
+ <a ng-if="route.state && route.children" ng-click="vm.activateRoute(route)">
+ {{route.label}}<span class="sub-nav-icon"> <i class="stroke-arrow"></i> </span>
+ </a>
+ <ul class="nav nav-second" uib-collapse="vm.isSelected(route.state, vm.navSelected)">
+ <li ng-repeat="childRoute in route.children | orderBy:'label'" ui-sref-active="active">
+ <a ui-sref="{{childRoute.state}}"> {{childRoute.label}}</a>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-info">
+ <i class="pe pe-7s-shield text-accent"></i>
+
+ <div class="m-t-xs">
+ <span class="c-white">{{vm.appName}}</span>
+ monitoring and administration for networks applications.
+ </div>
+ </li>
+ </ul>
+ </nav>
+ <!-- End navigation-->
+</aside>
\ No newline at end of file
diff --git a/src/app/core/nav/nav.scss b/src/app/core/nav/nav.scss
index dbe60d7..e69de29 100644
--- a/src/app/core/nav/nav.scss
+++ b/src/app/core/nav/nav.scss
@@ -1,58 +0,0 @@
-xos-nav {
- display: flex;
- flex: 1;
- flex-direction: column;
- flex-basis: 15%;
- background: darken(grey, 10);
- overflow-y: scroll;
-
- ul {
- list-style: none;
- padding: 0;
- margin: 0;
- background: grey;
-
- > li {
- display: flex;
- flex-direction: column;
- border-bottom: 1px solid darken(grey, 20);
-
- &.active {
- background: darken(grey, 10);
-
- > a {
- color: #5aadbb;
- }
- }
-
- &:hover {
- background: darken(grey, 10);
- }
-
- > a {
- padding: 10px 20px;
- cursor: pointer;
- }
-
- // child router
- > ul {
- height: 0;
- overflow: hidden;
- transition: .5s all;
-
- > li {
- padding-left: 20px;
- background: darken(grey, 15);
-
- &:hover, &.active {
- background: darken(grey, 20);
- }
- }
- }
-
- > ul.opened {
- height: auto;
- }
- }
- }
-}
diff --git a/src/app/core/nav/nav.spec.ts b/src/app/core/nav/nav.spec.ts
index fbed8ea..6a70f4c 100644
--- a/src/app/core/nav/nav.spec.ts
+++ b/src/app/core/nav/nav.spec.ts
@@ -39,7 +39,7 @@
}));
it('should render a list of routes', () => {
- const routes = $('.nav ul li', element);
+ const routes = $('.nav li:not(.nav-info)', element);
expect(routes.length).toBe(2);
});
@@ -51,7 +51,7 @@
]}
];
scope.$apply();
- const childRouteContainer = $('.child-routes', element);
+ const childRouteContainer = $('.nav-second li', element);
expect(childRouteContainer.length).toBe(1);
});
});
diff --git a/src/app/core/nav/nav.ts b/src/app/core/nav/nav.ts
index 6c6537e..edaeb24 100644
--- a/src/app/core/nav/nav.ts
+++ b/src/app/core/nav/nav.ts
@@ -1,9 +1,12 @@
import './nav.scss';
import {IXosNavigationService, IXosNavigationRoute} from '../services/navigation';
+import {StyleConfig} from '../../config/style.config';
class NavCtrl {
static $inject = ['$scope', '$state', 'NavigationService'];
public routes: IXosNavigationRoute[];
+ public navSelected: string;
+ public appName: string;
constructor(
private $scope: ng.IScope,
@@ -18,14 +21,38 @@
this.$scope.$watch(() => this.navigationService.query(), (routes) => {
this.routes = routes;
});
- }
-
- isRouteActive(route: IXosNavigationRoute) {
- return this.$state.current.url === route.url ? 'active' : '';
+ this.appName = StyleConfig.projectName;
}
activateRoute(route: IXosNavigationRoute) {
- route.opened = !route.opened;
+ this.navSelected = route.state;
+ }
+
+ includes(state: string): boolean {
+ return this.$state.includes(state);
+ }
+
+ isSelected(navId: string, navSelected: string) {
+
+ // TODO activate only one state
+
+ const activeRoute = this.$state.current.name;
+ const separateRoutes = activeRoute.split('.');
+
+ if (!navSelected) {
+ navSelected = separateRoutes[1];
+ }
+
+ if (navId === navSelected) {
+ return false;
+ }
+ else if (this.$state.current.name.indexOf(navId) === -1 && navId === navSelected ) {
+ return false;
+ }
+ else {
+ return true;
+ }
+
}
}