Show group members in header (#145)

Fixes #6

src/filters.ts

@@ -244,4 +244,18 @@ angular.module('3ema.filters', [])
     };
 }])
 
+/**
+ * Convert ID-Array to (Display-)Name-String, separated by ','
+ */
+.filter('idsToNames', ['WebClientService', function (webClientService: threema.WebClientService) {
+    return(ids: string[]) => {
+        let names: string[] = [];
+        for (let id of ids){
+            this.contactReceiver = webClientService.contacts.get(id);
+            names.push(this.contactReceiver.displayName);
+        }
+        return names.join(', ');
+    };
+}])
+
 ;

src/partials/dialog.about.html

@@ -2,7 +2,7 @@
     <form ng-cloak>
         <md-toolbar>
             <div class="md-toolbar-tools">
-                <h2>About</h2>
+                <h2 translate>messenger.ABOUT</h2>
                 <span flex></span>
                 <md-button class="md-icon-button" ng-click="ctrl.cancel()">
                     <md-icon aria-label="Close dialog" class="material-icons md-24">close</md-icon>

src/partials/messenger.conversation.html

@@ -20,6 +20,10 @@
             <eee-verification-level ng-if="ctrl.type == 'contact'"
                                     contact="ctrl.receiver"></eee-verification-level>
             </div>
+            <div class="conversation-header-details-detail" ng-if="ctrl.type == 'group'"
+                 title="{{ ctrl.receiver.members | idsToNames }}">
+                <span>{{ ctrl.receiver.members | idsToNames }}</span>
+            </div>
         </div>
     </div>
     <div id="conversation-is-private" ng-if="ctrl.locked">

src/sass/sections/_conversation.scss

@@ -17,7 +17,7 @@
 
         .header-details {
             @include mouse-hand;
-
+            overflow: hidden;
 
             & > *:first-child {
                 font-weight: bold;
@@ -29,6 +29,15 @@
             padding: 0;
             font-size: 120%;
         }
+
+        .conversation-header-details-detail, .conversation-header-details-name {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100%;
+            display: inherit;
+            line-height: 1.3;
+        }
     }
 
     #conversation-is-private {