Member list editor: Handle inactive contacts

src/directives/contact_badge.ts

@@ -85,17 +85,13 @@ export default [
                 };
             }],
             template: `
-                <div class="contact-badge receiver-badge" ng-click="ctrl.click()">
+                <div class="contact-badge receiver-badge" ng-class="{'inactive': ctrl.contactReceiver.state == 'INACTIVE'}" ng-click="ctrl.click()">
                     <section class="avatar-box">
                         <eee-avatar eee-receiver="ctrl.contactReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
-                    <div class="receiver-badge-name"
-                        ng-bind-html="ctrl.contactReceiver.displayName | escapeHtml | emojify">
-                    </div>
-                    <div class="contact-badge-identity">
-                        {{ctrl.contactReceiver.id}}
-                    </div>
+                    <div class="receiver-badge-name" ng-bind-html="ctrl.contactReceiver.displayName | escapeHtml | emojify"></div>
+                    <div class="contact-badge-identity">{{ ctrl.contactReceiver.id }}</div>
                     <div class="contact-badge-actions" ng-if="ctrl.showActions">
                         <md-button aria-label="Remove" class="md-icon-button" ng-click="ctrl.onRemove(ctrl.contactReceiver)">
                             <i class="material-icons md-dark md-24">delete</i>

src/directives/member_list_editor.ts

@@ -57,6 +57,7 @@ export default [
                     } else {
                         // Search for contacts, do not show selected contacts
                         const lowercaseQuery = query.toLowerCase();
+                        const hideInactiveContacts = !webClientService.appConfig.showInactiveIDs;
                         const result = this.allContacts
                             .filter((contactReceiver: threema.ContactReceiver) => {
                                 // Ignore already selected contacts
@@ -64,6 +65,11 @@ export default [
                                     return false;
                                 }
 
+                                // Potentially ignore inactive contacts
+                                if (hideInactiveContacts && contactReceiver.state === 'INACTIVE') {
+                                    return false;
+                                }
+
                                 // Search in display name
                                 if (contactReceiver.displayName.toLowerCase().indexOf(lowercaseQuery) >= 0) {
                                     return true;
@@ -87,10 +93,9 @@ export default [
                     if (contact.id === webClientService.me.id) {
                         return false;
                     }
-
-                    this.members = this.members.filter(function(i: string) {
-                        return i !== contact.id;
-                    });
+                    this.members = this.members.filter(
+                        (identity: string) => identity !== contact.id,
+                    );
                     return true;
                 };
             }],

src/sass/components/_receiver_badge.scss

@@ -31,15 +31,18 @@
     margin-right: $main-padding;
   }
 
-
   .receiver-badge-name {
     margin-right: $main-padding;
   }
+
+  &.inactive {
+    opacity: 0.5;
+  }
+
   /**
     Contact badge specific rules
    */
   &.contact-badge {
-
     .contact-badge-identity {
       flex: 1;
       text-align: right;
@@ -52,7 +55,6 @@
     Distribution List badge specific rules
    */
   &.distribution-list-badge {
-
   }
 
   /**