From 1d0c127da931b072577da446c3c0e73efeef535a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 14 Aug 2014 14:33:44 +0200
Subject: [PATCH] Loading page effect

---
 app/coffee/app.coffee                   |  6 ++--
 app/coffee/modules/common/loader.coffee |  2 +-
 app/partials/views/modules/loader.jade  |  5 +--
 app/styles/components/loader.scss       | 48 ++++++++++++++-----------
 app/styles/components/spinner.scss      |  2 +-
 5 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee
index 55a72905..e86fb78b 100644
--- a/app/coffee/app.coffee
+++ b/app/coffee/app.coffee
@@ -24,7 +24,7 @@
 configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoaderProvider) ->
     $routeProvider.when("/", {templateUrl: "/partials/projects.html"})
     $routeProvider.when("/project/:pslug/", {templateUrl: "/partials/project.html"})
-    $routeProvider.when("/project/:pslug/backlog", {templateUrl: "/partials/backlog.html"})
+    $routeProvider.when("/project/:pslug/backlog", {templateUrl: "/partials/backlog.html", resolve: {loader: tgLoaderProvider.add(true)}})
     $routeProvider.when("/project/:pslug/taskboard/:id", {templateUrl: "/partials/taskboard.html"})
     $routeProvider.when("/project/:pslug/search", {templateUrl: "/partials/search.html", reloadOnSearch: false})
     $routeProvider.when("/project/:pslug/kanban", {templateUrl: "/partials/kanban.html"})
@@ -45,7 +45,7 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoade
 
     # Wiki
     $routeProvider.when("/project/:pslug/wiki",
-                {redirectTo: (params) -> "/project/#{params.pslug}/wiki/home"})
+                {redirectTo: (params) -> "/project/#{params.pslug}/wiki/home"}, )
 
     $routeProvider.when("/project/:pslug/wiki/:slug",
                 {templateUrl: "/partials/wiki.html"})
@@ -54,7 +54,7 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoade
                 {templateUrl: "/partials/wiki-edit.html"})
 
     # Issues
-    $routeProvider.when("/project/:pslug/issues", {templateUrl: "/partials/issues.html"})
+    $routeProvider.when("/project/:pslug/issues", {templateUrl: "/partials/issues.html", resolve: {loader: tgLoaderProvider.add(true)}})
     $routeProvider.when("/project/:pslug/issues/:issueref",
         {templateUrl: "/partials/issues-detail.html"})
 
diff --git a/app/coffee/modules/common/loader.coffee b/app/coffee/modules/common/loader.coffee
index 7f9051be..a8d1e509 100644
--- a/app/coffee/modules/common/loader.coffee
+++ b/app/coffee/modules/common/loader.coffee
@@ -37,7 +37,7 @@ Loader = () ->
 
     defaultConfig = {
         enabled: false,
-        minTime: 500,
+        minTime: 3000,
         auto: false
     }
 
diff --git a/app/partials/views/modules/loader.jade b/app/partials/views/modules/loader.jade
index 0aa4de5b..ffb3c848 100644
--- a/app/partials/views/modules/loader.jade
+++ b/app/partials/views/modules/loader.jade
@@ -1,3 +1,4 @@
 .loader(tg-loader)
-    .bg
-    .info Loading ...
\ No newline at end of file
+    div.container
+        include ../components/spinner
+        p Loading...
diff --git a/app/styles/components/loader.scss b/app/styles/components/loader.scss
index caab7060..47bb9e19 100644
--- a/app/styles/components/loader.scss
+++ b/app/styles/components/loader.scss
@@ -1,34 +1,40 @@
 .loader {
+    @include transition(opacity .5s linear);
+    background-color: $white;
     bottom: 0;
     display: none;
     height: 100%;
     left: 0;
+    opacity: 0;
     position: fixed;
     right: 0;
     top: 0;
     width: 100%;
-    .bg {
-        background-color: $black;
-        bottom: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 100%;
-        z-index: 20;
+    z-index: 99900;
+    .container {
+        margin: 0 auto;
+        margin-top: 15%;
+        position: relative;
+        width: 150px;
     }
-    .info {
-        background-color: $black;
-        color: $white;
-        padding: .5rem 3rem;
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        z-index: 25;
-    }
-    &.active {
-        display: block;
-        .bg {
-            opacity: .7;
+    .spinner {
+        background-color: $white;
+        box-shadow: 1px 1px 10px rgba($whitish, .9);
+        .icon {
+            color: $gray-light;
+            text-shadow: 1px 1px 3px $whitish, 0 0 0 $grayer, 1px 1px 3px $whitish;
         }
     }
+    p {
+        @extend %large;
+        color: $gray-light;
+        padding-top: 20px;
+        text-align: center;
+    }
+    &.active {
+        @include transition(opacity .5s linear);
+        background-color: rgba($white, .9);
+        display: block;
+        opacity: 1;
+    }
 }
diff --git a/app/styles/components/spinner.scss b/app/styles/components/spinner.scss
index 81e8748a..b4197723 100644
--- a/app/styles/components/spinner.scss
+++ b/app/styles/components/spinner.scss
@@ -8,7 +8,7 @@
     position: relative;
     width: 7rem;
     .icon {
-        @include animation(fadeIn infinite 6s ease-in-out);
+        @include animation(fadeIn 6s linear);
         @extend %xxlarge;
         border-radius: 5%;
         color: darken($green-taiga, 15%);