Show voip status messages in the navigation view (#291)

src/directives/latest_message.html

@@ -17,6 +17,13 @@
               ng-show="ctrl.showIcon" class="message-icon"
               eee-message="ctrl.message"></span>
 
+        <!-- For voip status messages -->
+        <eee-message-voip-status
+                ng-if="ctrl.showVoipInfo"
+                class="message-voip-status"
+                eee-message="ctrl.message">
+        </eee-message-voip-status>
+
         <!-- For text-messages, show message text excerpt. -->
         <span eee-message-text class="message-text" eee-message="ctrl.message"
             eee-multi-line="false"></span>

src/directives/latest_message.ts

@@ -49,8 +49,10 @@ export default [
                 this.isDistributionList = !this.isGroup
                     &&  this.type as threema.ReceiverType === 'distributionList';
 
-                this.defaultStatusIcon = (this.isGroup ? 'group' : (this.isDistributionList ? 'forum' : null));
-                // this.hasContact = webClientService.contacts.has(getIdentity(this.message));
+                this.showVoipInfo = (this.message as threema.Message).type === 'voipStatus';
+
+                this.defaultStatusIcon = this.showVoipInfo ? 'phone_locked' :
+                    (this.isGroup ? 'group' : (this.isDistributionList ? 'forum' : null));
 
                 // Find sender of latest message in group chats
                 this.contact = null;

src/sass/app.scss

@@ -46,6 +46,7 @@
 @import "components/backbutton";
 @import "components/emoji";
 @import "components/battery";
+@import "components/message_voip_status";
 
 // Sections: Styles specific to individual pages or sections.
 @import "sections/header";

src/sass/components/_message_voip_status.scss

@@ -0,0 +1,10 @@
+eee-message-voip-status {
+    > p {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        md-icon {
+            margin-right: $main-padding/2;
+        }
+  }
+}