project navigation

app/coffee/modules/nav.coffee

@@ -28,7 +28,6 @@ module = angular.module("taigaNavMenu", [])
 #############################################################################
 ## Projects Navigation
 #############################################################################
-
 class ProjectsNavigationController extends taiga.Controller
     @.$inject = ["$scope", "$tgResources"]
 
@@ -44,15 +43,45 @@ class ProjectsNavigationController extends taiga.Controller
             return projects
 
 
-ProjectsNavigationDirective = ->
+ProjectsNavigationDirective = ($rootscope) ->
+    overlay = $(".projects-nav-overlay")
+    loadingStart = 0
+    hideMenu = () ->
+        if overlay.is(':visible')
+            difftime = new Date().getTime() - loadingStart
+            timeout = 0
+
+            if (difftime < 500)
+                timeout = 500 - timeout
+
+            setTimeout ( ->
+                overlay.one 'webkitTransitionEnd transitionend transitionEnd', () ->
+                    overlay.hide()
+
+                $(document.body)
+                    .removeClass("loading-project open-projects-nav")
+            ), timeout
+
     link = ($scope, $el, $attrs, $ctrl) ->
-        body = angular.element("body")
+        $rootscope.$on("project:loaded", hideMenu)
+
+        overlay.on 'click', () ->
+            hideMenu()
 
         $scope.$on "nav:projects-list:open", ->
-            body.toggleClass("open-projects-nav")
+            if !$(document.body).hasClass("open-projects-nav")
+                overlay.show()
+
+            #animation hack
+            setTimeout ( ->
+                $(document.body).toggleClass("open-projects-nav")
+            ), 0
 
         $el.on "click", ".projects-list > li > a", (event) ->
-            body.removeClass("open-projects-nav")
+            $(document.body)
+                .addClass('loading-project')
+
+            loadingStart = new Date().getTime()
 
     return {
         link: link
@@ -60,7 +89,7 @@ ProjectsNavigationDirective = ->
     }
 
 
-module.directive("tgProjectsNav", ProjectsNavigationDirective)
+module.directive("tgProjectsNav", ["$rootScope", ProjectsNavigationDirective])
 
 
 #############################################################################

app/coffee/modules/project.coffee

@@ -18,9 +18,9 @@ module.controller("ProjectsController", ProjectsController)
 
 
 class ProjectController extends taiga.Controller
-    @.$inject = ["$scope", "$tgResources", "$tgRepo", "$routeParams", "$q"]
+    @.$inject = ["$scope", "$tgResources", "$tgRepo", "$routeParams", "$q", "$rootScope"]
 
-    constructor: (@scope, @rs, @repo, @params, @q) ->
+    constructor: (@scope, @rs, @repo, @params, @q, @rootscope) ->
         @scope.hideMenu = false
         @.loadInitialData()
 
@@ -30,7 +30,9 @@ class ProjectController extends taiga.Controller
             @scope.projectId = data.project
             return data
 
-        return promise.then(=> @.loadPageData())
+        return promise
+                .then(=> @.loadPageData())
+                .then(=> @rootscope.$broadcast("project:loaded"))
 
     loadPageData: ->
         return @q.all([

app/partials/views/modules/projects-nav.jade

@@ -1,3 +1,8 @@
+.projects-nav-overlay
+    div
+        img(src="/images/logo.png", alt="TAIGA")
+        p Loading project...
+
 nav.projects-nav(tg-projects-nav)
     h1 Your projects
     form
@@ -8,5 +13,5 @@ nav.projects-nav(tg-projects-nav)
     div.projects-pagination(tg-projects-pagination, active="projects.length && !projectsSearch.$.length")
         ul.projects-list
             li(ng-repeat="project in projects|filter:projectsSearch:strict track by project.id")
-                a(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
+                a(href="", tg-bo-html="project.name", tg-nav="project:project=project.slug")
                     span.icon.icon-arrow-right

app/styles/layout/base.scss

@@ -45,6 +45,22 @@ body {
             @include transform(translate3d(300px, 0, 0));
             @include transition (transform 1s ease);
         }
+        .projects-nav-overlay {
+            @include transform(translate3d(300px, 0, 0));
+            @include transition (all 1s ease);
+            opacity: .7;
+        }
+    }
+    &.loading-project {
+        .projects-nav-overlay {
+            @include transition (opacity 1s ease);
+            opacity: 1;
+            overflow: hidden;
+            div {
+                @include transition (opacity 1s ease);
+                opacity: 1;
+            }
+        }
     }
 }
 

app/styles/modules/common/projects-nav.scss

@@ -76,3 +76,28 @@
         border-bottom: 2px solid $gray;
     }
 }
+
+.projects-nav-overlay {
+    @include transition (all 1s ease);
+    background-color: $black;
+    bottom: 0;
+    display: none;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 99999;
+    div {
+        margin: 10% auto;
+        opacity: 0;
+        text-align: center;
+        width: 500px;
+    }
+    p {
+        @extend %large;
+        color: $whitish;
+        padding-top: 20px;
+    }
+}