show uploading indicator (#29) (#68)

Fixes #29

src/directives/message_media.html

@@ -1,74 +1,83 @@
 <!-- Thumbnail -->
 <!-- Images, Gifs & Videos -->
 <span class="in-view-indicator" in-view="ctrl.thumbnailInView($inview)"></span>
-<div ng-if="ctrl.showThumbnail" class="thumbnail {{ctrl.type}}" ng-click="ctrl.download()" ng-style="ctrl.thumbnailStyle">
 
-    <div class="loading-wrapper" ng-class="{active: ctrl.downloading || ctrl.thumbnailDownloading}">
-        <div class="loading"></div>
-        <div class="loading-text" translate>messenger.DOWNLOADING</div>
-    </div>
-    <div class="overlay video" ng-if="ctrl.type === 'video' && !ctrl.downloading">
-        <i class="material-icons md-light">play_circle_outline</i>
-    </div>
-    <div class="overlay gif" ng-if="ctrl.type === 'file' && ctrl.message.file.type === 'image/gif' && !ctrl.downloading">
-        <i class="material-icons md-light">play_circle_outline</i>
-    </div>
-    <img ng-if="ctrl.thumbnail !== null" ng-src="{{ctrl.thumbnail}}">
-    <div ng-if="ctrl.message.thumbnail != undefined" class="thumbnail-loader">
-        <img ng-src="{{ ctrl.message.thumbnail.preview | bufferToUrl: 'image/png' }}">
+<div ng-if="ctrl.uploading">
+    <! -- Loading indicator -->
+    <div class="circle active center">
+        <i class="material-icons md-24">file_upload</i>
+        <div class="loading active"></div>
     </div>
 </div>
+<div ng-if="!ctrl.uploading">
+    <div ng-if="ctrl.showThumbnail" class="thumbnail {{ctrl.type}}" ng-click="ctrl.download()" ng-style="ctrl.thumbnailStyle">
 
-<!-- Location -->
-<location ng-if="ctrl.type === 'location'" location="ctrl.location"></location>
-
-<!-- Audio file -->
-<div class="file-message" ng-if="ctrl.type === 'audio'">
-    <! -- Loading indicator -->
-    <div class="circle" ng-click="ctrl.download()"
-         ng-class="{active: !ctrl.downloading}"
-         ng-if="!ctrl.downloaded">
-        <i class="material-icons md-24">file_download</i>
-        <div class="loading" ng-class="{active: ctrl.downloading}"></div>
-    </div>
-    <! -- Play Indicator -->
-    <div class="circle" ng-click="ctrl.download()" ng-if="ctrl.downloaded">
-        <i class="material-icons md-24">play_arrow</i>
+        <div class="loading-wrapper" ng-class="{active: ctrl.downloading || ctrl.thumbnailDownloading}">
+            <div class="loading"></div>
+            <div class="loading-text" translate>messenger.DOWNLOADING</div>
+        </div>
+        <div class="overlay video" ng-if="ctrl.type === 'video' && !ctrl.downloading">
+            <i class="material-icons md-light">play_circle_outline</i>
+        </div>
+        <div class="overlay gif" ng-if="ctrl.type === 'file' && ctrl.message.file.type === 'image/gif' && !ctrl.downloading">
+            <i class="material-icons md-light">play_circle_outline</i>
+        </div>
+        <img ng-if="ctrl.thumbnail !== null" ng-src="{{ctrl.thumbnail}}">
+        <div ng-if="ctrl.message.thumbnail != undefined" class="thumbnail-loader">
+            <img ng-src="{{ ctrl.message.thumbnail.preview | bufferToUrl: 'image/png' }}">
+        </div>
     </div>
-    <div class="info" translate>messageTypes.AUDIO_MESSAGE</div>
-</div>
 
-<!-- Anim GIF -->
-<div class="animgif" ng-if="ctrl.downloaded && ctrl.isAnimGif">
-	<img ng-src="{{ ctrl.blobBuffer | bufferToUrl: 'image/gif'}}" />
-</div>
+    <!-- Location -->
+    <location ng-if="ctrl.type === 'location'" location="ctrl.location"></location>
 
-<!-- Other file messages -->
-<div class="file-message" ng-if="ctrl.type === 'file' && !ctrl.isAnimGif" ng-click="ctrl.download()">
-    <! -- Loading indicator -->
-    <div class="circle"
-         ng-class="{active: !ctrl.downloading && !ctrl.message.temporaryId}"
-         ng-if="!ctrl.downloaded"
-         ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
-        <i class="material-icons md-24">file_download</i>
-        <div class="loading" ng-class="{active: ctrl.downloading || ctrl.message.temporaryId}"></div>
-    </div>
-    <! -- Open Indicator -->
-    <div class="circle"
-         ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview !== undefined"
-         ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
+    <!-- Audio file -->
+    <div class="file-message" ng-if="ctrl.type === 'audio'">
+        <! -- Loading indicator -->
+        <div class="circle" ng-click="ctrl.download()"
+             ng-class="{active: !ctrl.downloading}"
+             ng-if="!ctrl.downloaded">
+            <i class="material-icons md-24">file_download</i>
+            <div class="loading" ng-class="{active: ctrl.downloading}"></div>
+        </div>
+        <! -- Play Indicator -->
+        <div class="circle" ng-click="ctrl.download()" ng-if="ctrl.downloaded">
+            <i class="material-icons md-24">play_arrow</i>
+        </div>
+        <div class="info" translate>messageTypes.AUDIO_MESSAGE</div>
     </div>
 
-    <div class="circle"
-         ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview == undefined">
-        <img ng-src="{{ ctrl.message.file.type | mimeType: false }}"/>
+    <!-- Anim GIF -->
+    <div class="animgif" ng-if="ctrl.downloaded && ctrl.isAnimGif">
+        <img ng-src="{{ ctrl.blobBuffer | bufferToUrl: 'image/gif'}}" />
     </div>
-    <div class="info">
-        <p>{{ctrl.message.file.name}}</p>
-        <p>{{ctrl.message.file.type | mimeType: true}}</p>
-        <p>{{ctrl.message.file.size | fileSize}}</p>
+
+    <!-- Other file messages -->
+    <div class="file-message" ng-if="ctrl.type === 'file' && !ctrl.isAnimGif" ng-click="ctrl.download()">
+        <! -- Loading indicator -->
+        <div class="circle"
+             ng-class="{active: !ctrl.downloading}"
+             ng-if="!ctrl.downloaded"
+             ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
+            <i class="material-icons md-24">file_download</i>
+            <div class="loading" ng-class="{active: ctrl.downloading}"></div>
+        </div>
+        <! -- Open Indicator -->
+        <div class="circle"
+             ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview !== undefined"
+             ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
+        </div>
+
+        <div class="circle"
+             ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview == undefined">
+            <img ng-src="{{ ctrl.message.file.type | mimeType: false }}"/>
+        </div>
+        <div class="info">
+            <p>{{ctrl.message.file.name}}</p>
+            <p>{{ctrl.message.file.type | mimeType: true}}</p>
+            <p>{{ctrl.message.file.size | fileSize}}</p>
+        </div>
     </div>
 </div>
-
 <!-- Ballot -->
 <span ng-if="ctrl.type === 'ballot'"><em>Ballot messages are not yet supported.</em></span> <!-- TODO -->

src/directives/message_media.ts

@@ -40,7 +40,10 @@ export default [
                 this.thumbnailDownloading = false;
                 this.downloaded = false;
                 this.timeout = null as ng.IPromise<void>;
-                this.isAnimGif = (this.message as threema.Message).type === 'file'
+                this.uploading = this.message.temporaryId !== undefined
+                    && this.message.temporaryId !== null;
+                this.isAnimGif = !this.uploading
+                    && (this.message as threema.Message).type === 'file'
                     && (this.message as threema.Message).file.type === 'image/gif';
                 // do not show thumbnail in file messages (except anim gif
                 // if a thumbnail in file messages are available, the thumbnail
@@ -48,6 +51,7 @@ export default [
                 this.showThumbnail = this.message.thumbnail !== undefined
                     && ((this.message as threema.Message).type !== 'file'
                         || this.isAnimGif);
+
                 this.thumbnail = null;
 
                 if (this.message.thumbnail !== undefined) {

src/sass/components/_message_media.scss

@@ -25,6 +25,41 @@ $loading-ring-thickness: 5px;
         height: 100%;
     }
 
+    // up/downloading circle element
+    .circle {
+        height: $circle-size;
+        width: $circle-size;
+        background-color: grey;
+        outline: none;
+        position: relative;
+        border-radius: $circle-size / 2;
+        display: flex;
+        // centering element
+        &.center {
+            margin: 0 auto;
+        }
+        i,
+        img {
+            color: white;
+            margin: auto auto;
+            position: relative;
+        }
+    }
+
+    // Loading indicator
+    .loading.active {
+        display: block;
+        width: $circle-size - 2 * $loading-ring-thickness;
+        height: $circle-size - 2 * $loading-ring-thickness;
+        border: $loading-ring-thickness solid rgba(0, 0, 0, 0.1);
+        border-left-color: lightgreen;
+        animation: file-download-rotater 1.1s infinite linear;
+        border-radius: 50%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
     // Thumbnails (Images, GIFs, Locations, ...)
     .thumbnail {
         // For absolute positioning of children
@@ -97,36 +132,6 @@ $loading-ring-thickness: 5px;
         height: $circle-size;
         @include mouse-hand;
 
-        .circle {
-            height: $circle-size;
-            width: $circle-size;
-            background-color: grey;
-            outline: none;
-            position: relative;
-            border-radius: $circle-size / 2;
-
-            display: flex;
-            i,
-            img {
-                color: white;
-                margin: auto auto;
-                position: relative;
-            }
-        }
-
-        // Loading indicator
-        .loading.active {
-            display: block;
-            width: $circle-size - 2 * $loading-ring-thickness;
-            height: $circle-size - 2 * $loading-ring-thickness;
-            border: $loading-ring-thickness solid rgba(0, 0, 0, 0.1);
-            border-left-color: lightgreen;
-            animation: file-download-rotater 1.1s infinite linear;
-            border-radius: 50%;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
 
         .message-text {
             padding-top: 8px;