Merge pull request #289 from taigaio/issue/2044/spinner

Fix multiple spinners

app/coffee/modules/backlog/sprints.coffee

@@ -143,7 +143,7 @@ ToggleExcludeClosedSprintsVisualization = ($rootscope, $loading) ->
     link = ($scope, $el, $attrs) ->
         # Event Handlers
         $el.on "click", "", (event) ->
-            $loading.start($el.siblings('.load'))
+            $loading.start($el.parent().siblings('.loading-spinner'))
             $rootscope.$broadcast("backlog:toggle-closed-sprints-visualization")
 
         $scope.$on "$destroy", ->
@@ -151,7 +151,7 @@ ToggleExcludeClosedSprintsVisualization = ($rootscope, $loading) ->
 
         $scope.$on "sprints:loaded", (ctx, sprints) =>
             closedSprints = _.filter(sprints, (sprint) -> sprint.closed)
-            $loading.finish($el.siblings('.load'))
+            $loading.finish($el.parent().siblings('.loading-spinner'))
 
             #TODO: i18n
             if closedSprints.length > 0

app/partials/includes/modules/sprints.jade

@@ -18,7 +18,7 @@ section.sprints
     a.filter-closed-sprints(href="", ng-show="totalClosedMilestones")
         span.icon.icon-archive
         span(tg-backlog-toggle-closed-sprints-visualization="ctrl.excludeClosedSprints") Show closed sprints
-        span.load
+    div.loading-spinner
 
     div.sprint.sprint-closed(ng-repeat="sprint in closedSprints track by sprint.id" tg-backlog-sprint="sprint", tg-sprint-sortable)
         include sprint

app/partials/user/user-profile.jade

@@ -14,8 +14,8 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
                     fieldset(tg-user-avatar)
                         .image-container
                             img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
-                            div.overlay
+                            .overlay
-                                span.icon.icon-spinner
+                                img.loading-spinner(src="/svg/spinner-circle.svg", alt="loading...")
                         input(type="file", id="avatar-field", class="hidden",
                             tg-avatar-model="avatarAttachment")
                         p The image will be cropped to 80x80px.<br>

app/styles/dependencies/helpers.scss

@@ -59,10 +59,11 @@
         padding: 12px;
         text-align: center;
     }
+}
+
 .loading-spinner {
     @extend %loading-spinner;
 }
-}
 
 %button {
     @extend %medium;

app/styles/layout/us-detail.scss

@@ -349,9 +349,6 @@
     .level-name {
         color: darken($whitish, 20%);
         float: right;
-        .loading-spinner {
-            @extend %loading-spinner;
-        }
     }
 }
 

app/styles/modules/backlog/sprints.scss

@@ -24,11 +24,15 @@
             margin-right: .3rem;
             vertical-align: middle;
         }
-        .load {
-            display: inline-block;
-            margin-left: .3rem;
-            vertical-align: middle;
     }
+    .loading-spinner {
+        @extend %loading-spinner;
+        border: 0;
+        flex-grow: 0;
+        margin-bottom: 1rem;
+        max-height: 2rem;
+        max-width: 2rem;
+        transform-origin: center center;
     }
     .sprint-name {
         a {

app/styles/modules/common/assigned-to.scss

@@ -12,7 +12,8 @@
     }
     .loading-spinner {
         @extend %loading-spinner;
-        margin: 0 auto;
+        margin: 1rem auto;
+        max-height: 2rem;
         max-width: 2rem;
     }
     .user-avatar {

app/styles/modules/common/history.scss

@@ -108,12 +108,6 @@
     .preview-icon {
         opacity: 0;
     }
-    .loading-spinner {
-        @extend %loading-spinner;
-        max-height: 1rem;
-        max-width: 1rem;
-    }
-
 }
 .show-more-comments {
     @extend %small;

app/styles/modules/user-settings/user-profile.scss

@@ -19,7 +19,7 @@
             .overlay {
                 align-content: center;
                 align-items: center;
-                background: rgba($blackish, .9);
+                background: rgba($blackish, .8);
                 bottom: 0;
                 display: none;
                 justify-content: center;
@@ -33,8 +33,9 @@
                 @extend %loading-spinner;
                 border: 0;
                 flex-grow: 0;
-                transform-origin: 32 32;
+                max-height: 3rem;
-                width: 30%;
+                max-width: 3rem;
+                transform-origin: center center;
             }
             p {
                 @extend %xsmall;

app/styles/modules/wiki/wiki-nav.scss

@@ -35,11 +35,6 @@
             padding: 8px;
             text-align: center;
             width: 100%;
-            .loading-spinner {
-                @extend %loading-spinner;
-                max-height: 1rem;
-                max-width: 1rem;
-            }
         }
     }
     .button {