Show group members in header (threema-ch#145)

Fixes threema-ch#6
IndianaDschones · Mar 9, 2017 · 9ceb97f · 9ceb97f
1 parent 5c64e04
commit 9ceb97f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/src/filters.ts b/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(', ');
+    };
+}])
+
 ;
diff --git a/src/partials/dialog.about.html b/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>

diff --git a/src/partials/messenger.conversation.html b/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">

diff --git a/src/sass/sections/_conversation.scss b/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 {