refined structure for UI development

static/ng/resources/css/repository.css

@@ -32,7 +32,7 @@
   list-style-type: none;
 }
 
-.switch-pane-tabs a, .switch-pane-tabs span {
+.switch-pane-tabs a,.switch-pane-tabs span {
   display: inline-block;
   text-decoration: none;
   float: left;

static/ng/resources/js/components/navigation-details.directive.html

@@ -0,0 +1,5 @@
+<ul class="switch-pane-tabs" role="tablist">
+  <li><a role="presentation" href="#repositories"  aria-controls="repositories" role="tab" data-toggle="tab">Repositories</a><span class="gutter">|</span></li>
+  <li><a role="presentation" href="#users" aria-controls="users" role="tab" data-toggle="tab">Users</a><span class="gutter">|</span></li>
+  <li><a role="presentation" href="#logs" aria-controls="logs" role="tab" data-toggle="tab">Logs</a></li>
+</ul>

static/ng/resources/js/components/navigation-tab.directive.html

@@ -1,3 +1,4 @@
 <ul class="nav-custom">
-  <li ng-repeat="tab in tabs"><a href="//tab.url//">//tab.name//</a></li>          
+  <li><a href="/ng/dashboard">Dashboard</a></li>
+  <li><a href="/ng/project">Project</a></li>          
 </ul>

static/ng/resources/js/components/navigation-tab.directive.js

@@ -8,29 +8,42 @@
     
   function navigationTab() {
     var directive = {
-      restrict: 'EA',
-      scope: {
-        "tabs": "="
-      },
-    
-      templateUrl: '/static/ng/resources/js/components/navigation-tab.directive.html',
-      link: link
+      restrict: 'E',
+      templateUrl: getTemplateUrl,
+      link: link,
+      controller: controller
     }
     
     return directive;
     
-    function link(scope, element, attrs) {
-      element
-        .on('mouseover', mouseover)
-        .on('mouseout', mouseout);
+    function getTemplateUrl(element, attrs) {
+      return '/static/ng/resources/js/components/'+ attrs.templateUrl;
+    }
     
-      function mouseover(event) {
+    function link(scope, element, attrs, ctrl) {
+     
+      if (attrs.templateUrl.indexOf("navigation-tab") >= 0) {
+        element.find('a[href$="' + ctrl.location + '"]').addClass('active');
+      }
+    
+      if (attrs.templateUrl.indexOf("navigation-details") >= 0) {
+        element.find('a:first').addClass('active');
+      }
+      
+      element.on('click', click);
+      
+      function click(event) {
+        element.find('a').removeClass('active');
         $(event.target).addClass('active');
       }
      
-      function mouseout(event) {
-        $(event.target).removeClass('active');
-      }
+    }
+    
+    controller.$inject = ['$window'];
+    
+    function controller($window) {
+      var vm = this;
+      vm.location = $window.location.pathname;
     }
   }
   

static/ng/resources/js/harbor.constants.js

@@ -2,14 +2,6 @@
   'use strict';
   
   angular
-    .module('harbor.app') 
-    .constant('navigationTabs', navigationTabs);
-  
-  function navigationTabs() {
-    var data = [
-      {name: "Dashboard", url: "/ng/dashboard"},
-      {name: "My Projects", url: "/ng/project"}];
-    return data;
-  }    
+    .module('harbor.app');
   
 })();

static/ng/resources/js/harbor.initialize.js

@@ -2,24 +2,6 @@
   'use strict';
   
   angular
-    .module('harbor.app')
-    .run(CurrentUser);
+    .module('harbor.app');
     
-  CurrentUser.$inject = ['CurrentUserService', '$log'];
-  
-  function CurrentUser(CurrentUserService, $log) {
-    
-    CurrentUserService()
-      .then(getCurrentUserComplete)
-      .catch(getCurrentUserFailed);
-      
-      function getCurrentUserComplete(data) {
-        $log.info(data.data);
-      }
-      
-      function getCurrentUserFailed(e){
-        $log.info(e);
-      }
-      
-  }
 })();

static/ng/resources/js/harbor.module.js

@@ -3,6 +3,8 @@
   angular
     .module('harbor.app', [
       'harbor.services.user',
+      'harbor.session',
       'harbor.header',
-      'harbor.index']);
+      'harbor.details'
+    ]);
 })();

static/ng/resources/js/header/navigation.controllers.js

@@ -1,17 +0,0 @@
-(function() {
-
-  'use strict';
-  
-  angular
-    .module('harbor.header')
-    .controller('NavigationController', NavigationController);
-  
-  NavigationController.$inject = ['navigationTabs'];
-  
-  
-  function NavigationController(navigationTabs) {
-    var vm = this;
-    vm.tabs = navigationTabs();
-  }
-  
-})();

static/ng/resources/js/index/index.data.js

@@ -1,7 +0,0 @@
-(function() {
-
-  'use strict';
-  
-  angular
-    .module('harbor.index');
-})();

static/ng/resources/js/index/index.module.js

@@ -1,6 +0,0 @@
-(function() {
-  'use strict';
-  
-  angular
-    .module('harbor.index', []);
-})();

static/ng/resources/js/layout/details/details.module.js

@@ -1,6 +1,8 @@
 (function() {
+  
   'use strict';
   
   angular
-    .module('harbor.services', []);
+    .module('harbor.details', []);
+  
 })();

static/ng/resources/js/services/services.data.js

@@ -1,8 +0,0 @@
-(function() {
-  'use strict';
-  
-  angular
-    .module('harbor.services');
-    
-    
-})();

static/ng/resources/js/session/session.current-user.js

@@ -0,0 +1,38 @@
+(function() { 
+
+  'use strict';
+  
+  angular
+    .module('harbor.session')
+    .controller('CurrentUserController', CurrentUserController)
+    .directive('currentUser', currentUser);
+  
+  CurrentUserController.$inject = ['CurrentUserService', '$log', '$window'];
+  
+  function CurrentUserController(CurrentUserService, $log, $window) {
+    
+    CurrentUserService()
+      .then(getCurrentUserComplete)
+      .catch(getCurrentUserFailed);
+      
+    function getCurrentUserComplete(data) {
+      $log.info('login success');
+    }
+    
+    function getCurrentUserFailed(e){
+      if(e.status == 401) {
+        $window.location = '/ng';
+      }
+    }
+  }
+
+  function currentUser() {
+    var directive = {
+      restrict: 'A',
+      controller: CurrentUserController,
+      bindToController: true
+    }
+    return directive;
+  }
+
+})();

static/ng/resources/js/session/session.module.js

@@ -0,0 +1,10 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.session', [
+      'harbor.services.user'
+    ]);
+  
+})();

views/ng/dashboard.htm

@@ -1,4 +1,4 @@
-<div class="container-fluid container-fluid-custom">
+<div class="container-fluid container-fluid-custom" current-user>
   <div class="container">
     <div class="row row-custom">
 	    <div class="col-xs-4 col-md-4"> 

views/ng/repository.htm

@@ -6,17 +6,19 @@
   		      <h4 class="page-header">My Projects<span class="gutter">|</span><a href="#" class="title-color">Public Projects</a></h4>
   		      <div class="switch-pane">
   		        <div class="switch-pane-projects">myrepo</div>
-      	      	<ul class="switch-pane-tabs" role="tablist">
+               <navigation-tab template-url="navigation-details.directive.html"></navigation-tab>
+              
+      	      	<!--ul class="switch-pane-tabs" role="tablist">
       	      	  <li><a role="presentation" href="#repositories"  aria-controls="repositories" role="tab" data-toggle="tab">Repositories</a><span class="gutter">|</span></li>
       	      	  <li><a role="presentation" href="#users" aria-controls="users" role="tab" data-toggle="tab">Users</a><span class="gutter">|</span></li>
       	      	  <li><a role="presentation" href="#logs" aria-controls="logs" role="tab" data-toggle="tab">Logs</a></li>
-          		</ul>
-  		      </div>
-  		      <div class="switch-pane-drop-down" style="visibility: visible;">
-  		        <div class="row">
-  			        <div class="col-xs-12 col-md-12">
-  			          <div class="panel panel-default">
-                    <div class="form-inline search-projects">
+          		  </ul-->
+  		        </div>
+  		        <div class="switch-pane-drop-down" style="visibility: hidden;">
+  		          <div class="row">
+  			          <div class="col-xs-12 col-md-12">
+  			            <div class="panel panel-default">
+                      <div class="form-inline search-projects">
   			                <div class="input-group">
   			                  <input type="text" class="form-control search-icon" placeholder="" size="30">
   			                </div>

views/ng/sections/headerContent.htm

@@ -34,8 +34,8 @@
 	 	  </li>
     </ul-->
 	  <ul class="nav navbar-nav navbar-right">
-		  <li ng-controller="NavigationController as vm">
-		    <navigation-tab tabs="vm.tabs"></navigation-tab>
+		  <li>
+		    <navigation-tab template-url="navigation-tab.directive.html"></navigation-tab>
 		  </li>
 	      <li>
 	        <form class="navbar-form pull-right" role="search">

views/ng/sections/headerInclude.htm

@@ -28,12 +28,14 @@
 <script src="/static/ng/resources/js/harbor.initialize.js"></script>
 <script src="/static/ng/resources/js/harbor.constants.js"></script>
 
+<script src="/static/ng/resources/js/session/session.module.js"></script>
+<script src="/static/ng/resources/js/session/session.current-user.js"></script>
+
 <script src="/static/ng/resources/js/services/user/services.user.module.js"></script>
 <script src="/static/ng/resources/js/services/user/services.current-user.js"></script>
 
-<script src="/static/ng/resources/js/header/header.module.js"></script>
-<script src="/static/ng/resources/js/header/navigation.controllers.js"></script>
+<script src="/static/ng/resources/js/layout/header/header.module.js"></script>
 
-<script src="/static/ng/resources/js/index/index.module.js"></script>
+<script src="/static/ng/resources/js/layout/details/details.module.js"></script>
 
 <script src="/static/ng/resources/js/components/navigation-tab.directive.js"></script>