Merge pull request #208 from taigaio/us/1790/redesign

Us/1790/redesign

app/coffee/modules/common/loader.coffee

@@ -57,7 +57,7 @@ Loader = () ->
 
     defaultConfig = {
         enabled: false,
-        minTime: 1000
+        minTime: 300
     }
 
     config = _.merge({}, defaultConfig)

app/partials/views/components/loading-bar.jade

@@ -0,0 +1,6 @@
+div.loading
+    span.item.item-1
+    span.item.item-2
+    span.item.item-3
+    span.item.item-4
+    span.item.item-5

app/partials/views/components/spinner.jade

@@ -1,2 +0,0 @@
-object.logo-svg(type="image/svg+xml", data="/svg/spinner.svg")
-    img(src="/svg/logo.svg", alt="TAIGA")

app/partials/views/modules/loader.jade

@@ -1,4 +1,4 @@
 .loader(tg-loader)
+    include ../components/loading-bar
     div.container
-        include ../components/spinner
         p Loading...

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

@@ -1,6 +1,5 @@
 .projects-nav-overlay
     div.container
-        include ../components/spinner
         p Loading project...
 
 div.wizard-create-project(tg-lb-create-project)

app/styles/components/loader.scss

@@ -1,8 +1,6 @@
 .loader {
-    @include transition(opacity .5s linear);
     background-color: $white;
     bottom: 0;
-    display: none;
     height: 100%;
     left: 0;
     opacity: 0;
@@ -10,23 +8,22 @@
     right: 0;
     top: 0;
     width: 100%;
-    z-index: 99900;
+    z-index: -100;
     .container {
-        margin: 0 auto;
+        @include display(flex);
-        margin-top: 15%;
+        @include align-items(center);
-        position: relative;
+        @include justify-content(center);
-        width: 150px;
+        height: 100%;
+        width: 100%;
     }
     p {
         @extend %large;
-        color: $gray-light;
+        color: $gray;
-        padding-top: 20px;
         text-align: center;
     }
     &.active {
-        @include transition(opacity .5s linear);
+        background-color: rgba($white, .95);
-        background-color: rgba($white, .9);
-        display: block;
         opacity: 1;
+        z-index: 99900;
     }
 }

app/styles/components/loading-bar.scss

@@ -0,0 +1,24 @@
+.loading {
+    @include display(flex);
+    @include align-items(stretch);
+    @include flex-direction(row);
+    @include justify-content(flex-start);
+    .item {
+        @include animation-duration(5s);
+        @include animation-iteration-count(infinite);
+        @include animation-name(loadBar);
+        @include animation-timing-function(ease-in);
+        @include flex(1);
+        background: $gray;
+        height: 5px;
+    }
+
+    $colors-list: #bbe831 #237400 #e43050 #810061 #618000;
+    @each $current-color in $colors-list {
+        $i: index($colors-list, $current-color) - 1;
+        .item-#{$i} {
+            @include animation-delay(#{$i}s);
+            background: $current-color;
+        }
+    }
+}

app/styles/layout/animation.scss

@@ -1,39 +1,3 @@
-// Rotating loader
-@include keyframes(spin) {
-    100% {
-        @include transform(rotate(360deg));
-    }
-}
-
-//Spinner
-@include keyframes(fadeIn) {
-    0% {
-        @include transform(translateX(1rem));
-        @include filter(blur(5px));
-        opacity: 0;
-    }
-    1.6% {
-        @include transform(translateX(.2rem));
-        @include filter(blur(0));
-        opacity: 1;
-    }
-    12% {
-        @include transform(translateX(-.2rem));
-        @include filter(blur(0));
-        opacity: 1;
-    }
-    16% {
-        @include transform(translateX(-1rem));
-        @include filter(blur(5px));
-        opacity: 0;
-    }
-    100% {
-        @include transform(translateX(-1rem));
-        @include filter(blur(5px));
-        opacity: 0;
-    }
-}
-
 //Loading
 @include keyframes(loading) {
     0% {
@@ -60,3 +24,16 @@
         opacity: 1;
     }
 }
+
+//Bar loading
+@include keyframes(loadBar) {
+    0% {
+        @include flex(1);
+    }
+    10% {
+        @include flex(10);
+    }
+    20% {
+        @include flex(1);
+    }
+}

app/styles/layout/base.scss

@@ -80,6 +80,7 @@ body {
 }
 
 .master {
+    background: $white;
     height: 100%;
     min-height: 100%;
     position: relative;
@@ -106,7 +107,7 @@ body {
             @include flex(1);
             @include transition(all .2s linear);
             padding: 2em 1em;
-            width: 260px;
+            width: 210px;
             .filters-inner {
                 @include transition (all .4s ease-in);
                 opacity: 1;

app/styles/layout/issues.scss

@@ -1,6 +1,7 @@
 .issues {
     .filters-bar {
-        @include table-flex-child(1, 260px, 0, 260px);
+        @include flex(1);
+        width: 210px;
     }
     .filters-inner {
         opacity: 1;

main-sass.js

@@ -51,7 +51,7 @@ exports.files = function () {
         'components/wysiwyg',
         'components/select-color',
         'components/loader',
-        'components/spinner',
+        'components/loading-bar',
         'components/help-notion-button',
         'components/beta',
         'components/markitup',