Replace many md-progress-circular instances with CSS (#117)

* Only enable loading animation in status bar when visible
* Render loading animation on avatar only when loading
Previously the animation was hidden with ng-show, resulting in the
animation frames being drawn anyways.
* Replace message loading element with CSS animation
* Replace avatar loading element with CSS animation
* Replace reconnect loading element with CSS animation

src/directives/avatar.ts

@@ -79,9 +79,8 @@ export default [
             }],
             template: `
                 <div class="avatar" ng-class="ctrl.avatarClass()">
-                    <div class="avatar-loading" ng-show="ctrl.isLoading">
-                        <md-progress-circular class="md-accent" md-diameter="100">
-                        </md-progress-circular>
+                    <div class="avatar-loading" ng-if="ctrl.isLoading">
+                        <span></span>
                     </div>
                     <img class="avatar-default" ng-if="!ctrl.avatarExists()"
                          ng-class="ctrl.avatarClass()"

src/directives/status_bar.ts

@@ -40,8 +40,8 @@ export default [
             }],
             template: `
                 <div id="expanded-status-bar" ng-class="{'active': ctrl.active}">
-                    <div>
-                        <md-progress-circular class="md-accent" md-diameter="32"></md-progress-circular>
+                    <div ng-if="ctrl.active">
+                        <div class="loading"><span></span></div>
                     </div>
                     <div>
                         <h1 translate>connecting.CONNECTION_PROBLEMS</h1>

src/partials/messenger.conversation.html

@@ -37,11 +37,9 @@
 
     <div id="conversation-chat" scroll-glue in-view-container ng-show="!ctrl.locked">
         <ul class="chat">
-            <li in-view="$inview && !ctrl.locked && ctrl.requestMessages()" class="load-more">
+            <li in-view="$inview && !ctrl.locked && ctrl.topOfChat()" class="load-more">
                 <div ng-if="ctrl.hasMoreMessages()" class="loading">
-                    <md-progress-circular
-                            class="md-primary"
-                            md-diameter="30"></md-progress-circular>
+                    <span></span>
                 </div>
             </li>
             <li ng-repeat="message in ctrl.messages" id="message-{{message.id}}">

src/partials/messenger.ts

@@ -444,6 +444,13 @@ class ConversationController {
         this.webClientService.sendMeIsTyping(this.$stateParams, false);
     }
 
+    /**
+     * User scrolled to the top of the chat.
+     */
+    public topOfChat(): void {
+        this.requestMessages();
+    }
+
     public requestMessages(): void {
         let refMsgId = this.webClientService.requestMessages(this.$stateParams);
 

src/sass/app.scss

@@ -25,6 +25,7 @@
 // Components: Micro layout files. Your styles for buttons and navigation and
 // similar page components.
 //@import "components/lists";
+@import "components/spinner";
 @import "components/links";
 @import "components/scrollbars";
 @import "components/avatar";
@@ -33,7 +34,6 @@
 @import "components/fade_blink";
 @import "components/no_lastpass";
 @import "components/dialogs";
-@import "components/spinner";
 @import "components/message_media";
 @import "components/emoji_picker";
 @import "components/placeholder";

src/sass/components/_avatar.scss

@@ -7,7 +7,6 @@
         }
     }
     &.avatar-high {
-
         max-width: 540px;
         max-height: 540px;
     }
@@ -25,14 +24,13 @@
         position: absolute;
         width: 100%;
         height: 100%;
+        z-index: 10;
 
-        md-progress-circular {
-            z-index: 10;
-            display: inline;
+        $circle-diameter: 160px;
+        $thickness: 10px;
+        @include loading-spinner($circle-diameter - $thickness * 2, $thickness, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.1));
+        &>:first-child {
             position: relative;
-
-            // Progress circle diameter is hardcoded as 100px in avatar.ts
-            $circle-diameter: 100px;
             left: calc(50% - #{$circle-diameter / 2});
             top: calc(50% - #{$circle-diameter / 2});
         }

src/sass/components/_spinner.scss

@@ -3,4 +3,29 @@
     md-progress-circular {
         margin: 0 auto;
     }
-}
+}
+
+@keyframes rotater {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@mixin loading-spinner($diameter,
+                       $thickness: 5px,
+                       $color-fg: $material-grey-dark,
+                       $color-bg: rgba(0, 0, 0, 0.1)) {
+    display: block;
+    &>:first-child {
+        display: block;
+        width: $diameter;
+        height: $diameter;
+        border: $thickness solid $color-bg;
+        border-left-color: $color-fg;
+        animation: rotater 1.1s infinite linear;
+        border-radius: 50%;
+    }
+}

src/sass/helpers/_colors.scss

@@ -4,6 +4,7 @@ $status-error: #f44336;
 $border-grey: #dddddd;
 $background-grey: lighten($border-grey, 7%);
 $material-grey: rgba(0, 0, 0, 0.54);
+$material-grey-dark: rgba(0, 0, 0, 0.87);
 $url-light-blue: #63a6cf;
 
 $dark-background-color: #F6F6F6;

src/sass/sections/_conversation.scss

@@ -126,7 +126,7 @@
             margin-top: $main-padding;
             text-align: center;
             .loading {
-                $loading-element-size: 20px;
+                @include loading-spinner(24px, 3px, $material-grey-dark, rgba(0, 0, 0, 0.1));
                 background-color: white;
                 border-radius: 50%;
                 display:inline-block;

src/sass/sections/_status_bar.scss

@@ -88,8 +88,8 @@ body {
     }
 
     // Loading indicator color
-    path {
-        stroke: white !important;
+    .loading {
+        @include loading-spinner(26px, 3px, white, rgba(255, 255, 255, 0.2));
     }
 
     > div {