Display Threema Work icon on avatars

It is displayed for all contacts that use the Threema Work app. This
helps to differentiate private and work-related contacts.

App support is required, so this may not be displayed yet for people
that use an older app version.

src/directives/avatar.ts

@@ -96,12 +96,21 @@ export default [
                         loadingPromise = null;
                     }
                 };
+
+                this.showWorkIndicator = () => {
+                    return this.type === 'contact'
+                        && !this.highResolution
+                        && (this.receiver as threema.ContactReceiver).identityType === threema.IdentityType.Work;
+                };
             }],
             template: `
                 <div class="avatar" ng-class="ctrl.avatarClass()">
                     <div class="avatar-loading" ng-if="ctrl.isLoading">
                         <span></span>
                     </div>
+                    <div class="work-indicator" ng-if="ctrl.showWorkIndicator()">
+                        <img src="img/ic_work_round.svg" alt="Threema Work user">
+                    </div>
                     <img
                          ng-class="ctrl.avatarClass()"
                          ng-style="{ 'background-color': ctrl.backgroundColor }"

src/directives/member_list_editor.ts

@@ -86,7 +86,6 @@ export default [
             template: `
                 <ul class="member-list">
                     <li>
-
                         <md-autocomplete
                                 md-no-cache="false"
                                 md-delay="200"

src/sass/components/_avatar.scss

@@ -1,4 +1,10 @@
 .avatar {
+    position: relative;
+    > img {
+        width: 100%;
+    }
+
+    // Different resolutions
     &.avatar-low {
         > img {
             width: 48px;
@@ -11,9 +17,10 @@
         max-height: 540px;
     }
 
+    // Loading indicator
     &.is-loading {
-        //show default blured
         &.avatar-high {
+            // Show default blured
             > img {
                 filter: blur(40px);
                 border-radius: 0;
@@ -36,9 +43,16 @@
             top: calc(50% - #{$circle-diameter / 2});
         }
     }
-    > img {
-        width: 100%;
-    }
 
+    // Indicators depending on identity type (e.g. Work suitcase)
+    .work-indicator {
+        $indicator-size: 18px;
+        position: absolute;
+        top: 48px - $indicator-size;
+        img {
+            width: $indicator-size;
+            height: $indicator-size;
+        }
+    }
 
 }

src/sass/components/_receiver_badge.scss

@@ -1,14 +1,24 @@
 .md-autocomplete-suggestions{
     $avatar-size-in-autocomplete: 30px;
-  .receiver-badge {
-    .avatar-box {
-      max-height: $avatar-size-in-autocomplete;
-      img {
-        max-height: $avatar-size-in-autocomplete;
-        width: auto;
-      }
+    .receiver-badge {
+        .avatar-box {
+            height: $avatar-size-in-autocomplete;
+            img {
+                height: $avatar-size-in-autocomplete;
+                width: auto;
+            }
+            .work-indicator {
+                // Override configuration.
+                // This is a bit of a hack
+                $indicator-size: 12px;
+                top: $avatar-size-in-autocomplete - $indicator-size - 18px;
+                img {
+                    width: $indicator-size;
+                    height: $indicator-size;
+                }
+            }
+        }
     }
-  }
 }
 .receiver-badge {
   display: flex;

src/threema.d.ts

@@ -139,6 +139,11 @@ declare namespace threema {
         canChangeMembers?: boolean;
     }
 
+    const enum IdentityType {
+        Regular = 0,
+        Work
+    }
+
     /**
      * The base class for a receiver. Only type and id.
      */
@@ -214,7 +219,7 @@ declare namespace threema {
         // The identity type.
         // 0 - Regular Threema user.
         // 1 - Threema Work user.
-        identityType?: number;
+        identityType?: IdentityType;
     }
 
     /**