Show work indicator in the contact detail view

src/partials/messenger.receiver/contact.html

@@ -9,10 +9,17 @@
 		<md-card-content>
 			<dl class="key-values">
 				<dt>Threema ID</dt>
-				<dd>{{ctrl.receiver.id}}
-					<eee-verification-level
-							contact="ctrl.receiver">
-					</eee-verification-level></dd>
+				<dd>
+					<span class="complex-values">
+						<span>{{ctrl.receiver.id}}</span>
+						<span class="indicator-icon" ng-if="ctrl.isWorkReceiver"
+							  translate-attr="{'aria-label': 'messenger.THREEMA_WORK_CONTACT',
+								'title': 'messenger.THREEMA_WORK_CONTACT'}">
+								<img src="img/ic_work_round.svg" alt="Threema Work user">
+						</span>
+						<eee-verification-level contact="ctrl.receiver"></eee-verification-level>
+					</span>
+				</dd>
 
 				<dt><span translate>messenger.KEY_FINGERPRINT</span></dt>
 				<dd>{{ ctrl.fingerPrint }}</dd>

src/partials/messenger.ts

@@ -937,6 +937,7 @@ class ReceiverDetailController {
     private inDistributionLists: threema.DistributionListReceiver[] = [];
     private hasSystemEmails = false;
     private hasSystemPhones = false;
+    private isWorkReceiver = false;
 
     private controllerModel: threema.ControllerModel;
 
@@ -969,6 +970,7 @@ class ReceiverDetailController {
                     // do nothing
                 });
 
+            this.isWorkReceiver = contactReceiver.identityType === threema.IdentityType.Work;
             this.fingerPrint = this.fingerPrintService.generate(contactReceiver.publicKey);
             webClientService.groups.forEach((groupReceiver: threema.GroupReceiver) => {
                 // check if my identity is a member

src/sass/layout/_main.scss

@@ -293,8 +293,27 @@ a.threema-action {
 
     dd {
         word-break: normal;
-        display: block;
         margin-bottom: $main-padding*2;
+        display: block;
+
+        > .complex-values {
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            flex-direction: row;
+
+            > *:not(:last-child) {
+                margin-right: $main-padding;
+            }
+            .indicator-icon {
+                $indicator-size: 18px;
+                top: 48px - $indicator-size;
+                img {
+                    width: $indicator-size;
+                    height: $indicator-size;
+                }
+            }
+        }
     }
 }