Implement non-work indicator

Like the "work contact suitcase", but for non-work contacts when using a
work app.

public/i18n/de.json

@@ -169,6 +169,7 @@
         "UNKNOWN_MESSAGE_TYPE": "Unbekannter Nachrichtentyp",
         "NICKNAME": "Nickname",
         "THREEMA_WORK_CONTACT": "Threema Work Nutzer",
+        "THREEMA_HOME_CONTACT": "Privater Threema-Kontakt",
         "THREEMA_BLOCKED_RECEIVER": "blockiert",
         "DELETE_THREAD": "Chat löschen",
         "DELETE_THREAD_MESSAGE": "{count, plural, one {Möchten Sie wirklich diesen Chat löschen? Die Nachrichten können nicht wiederhergestellt werden.} other {Möchten Sie wirklich # Chats löschen? Die Nachrichten können nicht wiederhergestellt werden.}}",

public/i18n/en.json

@@ -169,6 +169,7 @@
         "UNKNOWN_MESSAGE_TYPE": "Unknown message type",
         "NICKNAME": "Nickname",
         "THREEMA_WORK_CONTACT": "Threema Work user",
+        "THREEMA_HOME_CONTACT": "Private Threema contact",
         "THREEMA_BLOCKED_RECEIVER": "blocked",
         "DELETE_THREAD": "Delete chat",
         "DELETE_THREAD_MESSAGE": "{count, plural, one {Do you really want to delete this chat? You will not be able to recover the messages.} other {Do you really want to delete # chat(s)? You will not be able to recover the messages.}}",

public/img/ic_home_round.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 16.933333 16.933333"
+   height="64"
+   width="64"
+   sodipodi:docname="ic_home_round.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1054"
+     inkscape:window-height="1179"
+     id="namedview11"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="5.5191157"
+     inkscape:cx="18.817688"
+     inkscape:cy="61.232164"
+     inkscape:window-x="1920"
+     inkscape:window-y="19"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg8" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="matrix(0.06614583,0,0,0.06614583,2.8902839,-2.2054354)"
+     id="layer1">
+    <g
+       transform="translate(-335.64286,-16.630952)"
+       id="g4548">
+      <g
+         transform="matrix(1.0090631,0,0,1.0088594,275.77739,8.7290118)"
+         id="g4792">
+        <g
+           id="g4800">
+          <path
+             style="fill:#ffffff;fill-opacity:1;stroke-width:0.28222221"
+             d="M 132.1597,294.43335 C 106.23137,291.97852 82.927411,282.6136 63.147214,266.70003 39.316592,247.5278 23.207926,220.33188 17.732712,190.0277 c -1.46631,-8.11573 -1.708059,-11.27132 -1.708059,-22.29556 0,-11.02424 0.241749,-14.17983 1.708059,-22.29555 9.493423,-52.544153 50.302574,-93.353304 102.846728,-102.846727 8.11572,-1.46631 11.27131,-1.708059 22.29555,-1.708059 11.02424,0 14.17983,0.241749 22.29556,1.708059 52.54415,9.493423 93.3533,50.302574 102.84672,102.846727 1.46631,8.11572 1.70806,11.27131 1.70806,22.29555 0,11.02424 -0.24175,14.17983 -1.70806,22.29556 -5.47521,30.30418 -21.58388,57.5001 -45.4145,76.67233 -18.71611,15.05749 -40.77722,24.31412 -65.19333,27.35449 -4.28275,0.5333 -20.97329,0.78371 -25.24974,0.37883 z"
+             id="path4796"
+             inkscape:connector-curvature="0" />
+          <path
+             style="fill:#009487;stroke-width:0.28222221"
+             d="M 132.71499,280.30942 C 105.93165,277.66764 81.681408,266.29346 62.99754,247.60959 46.1371,230.74915 35.053824,209.01594 31.244925,185.34583 c -1.693958,-10.52697 -1.693958,-24.7004 0,-35.22737 3.808899,-23.67011 14.892175,-45.40333 31.752615,-62.263769 16.860441,-16.86044 38.59366,-27.943716 62.26377,-31.752615 10.52697,-1.693958 24.7004,-1.693958 35.22737,0 23.67011,3.808899 45.40332,14.892175 62.26376,31.752615 16.86044,16.860439 27.94372,38.593659 31.75262,62.263769 1.69396,10.52697 1.69396,24.7004 0,35.22737 -3.8089,23.67011 -14.89218,45.40332 -31.75262,62.26376 -18.54367,18.54368 -42.59193,29.9101 -68.95739,32.59273 -4.37465,0.44511 -17.0027,0.50927 -21.08006,0.1071 z m -5.43118,-72.57228 0.0721,-23.91833 h 15.51903 15.51904 l 0.0722,23.91833 0.0721,23.91834 h 20.03777 20.03778 l 0.14111,-31.75 0.14111,-31.75 11.56022,-0.0738 c 6.35812,-0.0406 11.66982,-0.18338 11.80379,-0.31734 0.13662,-0.13662 -3.32855,-3.45818 -7.89133,-7.56428 -4.47419,-4.02639 -16.4534,-14.81101 -26.62045,-23.96583 -10.16706,-9.15482 -24.37787,-21.94841 -31.57958,-28.4302 -7.20171,-6.4818 -13.25241,-11.724308 -13.44601,-11.650019 -0.19359,0.07429 -10.04929,8.867919 -21.90154,19.541389 -11.85224,10.67347 -29.652426,26.70342 -39.555954,35.62211 -9.903528,8.91868 -17.899626,16.32257 -17.769106,16.45309 0.130519,0.13052 5.439407,0.27051 11.797524,0.31108 l 11.560217,0.0738 0.06976,31.46777 c 0.03837,17.30728 0.129961,31.62738 0.203536,31.82246 0.106023,0.28109 4.277815,0.33964 20.109133,0.28222 l 19.97535,-0.0724 z"
+             id="path4794"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/directives/avatar.ts

@@ -15,7 +15,9 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {isEchoContact, isGatewayContact} from '../receiver_helpers';
 import {WebClientService} from '../services/webclient';
+import {isContactReceiver} from '../typeguards';
 
 export default [
     '$rootScope',
@@ -30,7 +32,6 @@ export default [
             restrict: 'E',
             scope: {},
             bindToController: {
-                type: '=eeeType',
                 receiver: '=eeeReceiver',
                 resolution: '=eeeResolution',
             },
@@ -106,7 +107,7 @@ export default [
                     }
 
                     // As a fallback, get the default avatar.
-                    return this.getDefaultAvatarUri(this.type, this.highResolution);
+                    return this.getDefaultAvatarUri(this.receiver.type, this.highResolution);
                 };
 
                 this.requestAvatar = (inView: boolean) => {
@@ -122,7 +123,7 @@ export default [
                             loadingPromise = $timeout(() => {
                                 // show loading only on high res images!
                                 webClientService.requestAvatar({
-                                    type: this.type,
+                                    type: this.receiver.type,
                                     id: this.receiver.id,
                                 } as threema.Receiver, this.highResolution).then((avatar) => {
                                     $rootScope.$apply(() => {
@@ -142,15 +143,27 @@ export default [
                     }
                 };
 
+                const isWork = webClientService.clientInfo.isWork;
                 this.showWorkIndicator = () => {
-                    return this.type === 'contact'
+                    if (!isContactReceiver(this.receiver)) { return false; }
+                    const contact: threema.ContactReceiver = this.receiver;
+                    return isWork === false
                         && !this.highResolution
-                        && (this.receiver as threema.ContactReceiver).identityType === threema.IdentityType.Work;
+                        && contact.identityType === threema.IdentityType.Work;
+                };
+                this.showHomeIndicator = () => {
+                    if (!isContactReceiver(this.receiver)) { return false; }
+                    const contact: threema.ContactReceiver = this.receiver;
+                    return isWork === true
+                        && !isGatewayContact(contact)
+                        && !isEchoContact(contact)
+                        && contact.identityType === threema.IdentityType.Regular
+                        && !this.highResolution;
                 };
                 this.showBlocked = () => {
-                    return this.type === 'contact'
-                        && !this.highResolution
-                        && (this.receiver as threema.ContactReceiver).isBlocked;
+                    if (!isContactReceiver(this.receiver)) { return false; }
+                    const contact: threema.ContactReceiver = this.receiver;
+                    return !this.highResolution && contact.isBlocked;
                 };
             }],
             template: `
@@ -163,6 +176,11 @@ export default [
                             'title': 'messenger.THREEMA_WORK_CONTACT'}">
                         <img src="img/ic_work_round.svg" alt="Threema Work user">
                     </div>
+                    <div class="home-indicator" ng-if="ctrl.showHomeIndicator()"
+                        translate-attr="{'aria-label': 'messenger.THREEMA_HOME_CONTACT',
+                            'title': 'messenger.THREEMA_HOME_CONTACT'}">
+                        <img src="img/ic_home_round.svg" alt="Private Threema contact">
+                    </div>
                     <div class="blocked-indicator"  ng-if="ctrl.showBlocked()"
                         translate-attr="{'aria-label': 'messenger.THREEMA_BLOCKED_RECEIVER',
                             'title': 'messenger.THREEMA_BLOCKED_RECEIVER'}">

src/directives/contact_badge.ts

@@ -55,8 +55,7 @@ export default [
             template: `
                 <div class="contact-badge receiver-badge" ng-click="ctrl.click()">
                     <section class="avatar-box">
-                        <eee-avatar eee-type="'contact'"
-                                    eee-receiver="ctrl.contactReceiver"
+                        <eee-avatar eee-receiver="ctrl.contactReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
                     <div class="receiver-badge-name"

src/directives/distribution_list_badge.ts

@@ -41,8 +41,7 @@ export default [
             template: `
                 <div class="distribution-list-badge receiver-badge" ng-click="ctrl.click()">
                     <section class="avatar-box">
-                        <eee-avatar eee-type="'distributionList'"
-                                    eee-receiver="ctrl.distributionListReceiver"
+                        <eee-avatar eee-receiver="ctrl.distributionListReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
                     <div class="receiver-badge-name"

src/directives/group_badge.ts

@@ -59,8 +59,7 @@ export default [
             template: `
                 <div class="group-badge receiver-badge" ng-click="ctrl.click()">
                     <section class="avatar-box">
-                        <eee-avatar eee-type="'group'"
-                                    eee-receiver="ctrl.groupReceiver"
+                        <eee-avatar eee-receiver="ctrl.groupReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
                     <div class="receiver-badge-name"

src/directives/message.html

@@ -6,7 +6,6 @@
     <eee-avatar
             class="message-avatar"
             ng-if="ctrl.showAvatar"
-            eee-type="'contact'"
             eee-receiver="ctrl.contact"
             eee-resolution="ctrl.resolution"
             ui-sref="messenger.home.conversation({ type: 'contact', id: ctrl.contact.id, initParams: null })"></eee-avatar>

src/partials/messenger.conversation.html

@@ -7,7 +7,7 @@
     <div id="conversation-header" class="detail-header">
         <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
         <div class="header-avatar" ng-click="ctrl.showReceiver()">
-            <eee-avatar eee-type="ctrl.type" eee-receiver="ctrl.receiver"
+            <eee-avatar eee-receiver="ctrl.receiver"
                         eee-resolution="'low'"></eee-avatar>
         </div>
         <div class="header-details" ng-click="ctrl.showReceiver()">
@@ -85,8 +85,7 @@
                     ng-class="{selected: ctrl.selectedMention == $index}">
                     <div class="contact-badge receiver-badge" ng-if="mention.isAll">
                         <section class="avatar-box">
-                            <eee-avatar eee-type="'group'"
-                                        eee-receiver="ctrl.receiver"
+                            <eee-avatar eee-receiver="ctrl.receiver"
                                         eee-resolution="'low'"></eee-avatar>
                         </section>
                         <div translate>messenger.ALL</div>

src/partials/messenger.navigation.html

@@ -76,8 +76,7 @@
                             'active': ctrl.isActive(conversation)}">
 
                 <section class="avatar-box">
-                    <eee-avatar eee-type="conversation.type"
-                                eee-receiver="conversation.receiver"
+                    <eee-avatar eee-receiver="conversation.receiver"
                                 eee-resolution="'low'"></eee-avatar>
                 </section>
 
@@ -125,8 +124,7 @@
             ng-class="{'inactive': contact.state == 'INACTIVE'}">
 
             <section class="avatar-box">
-                <eee-avatar eee-type="'contact'"
-                            eee-receiver="contact"
+                <eee-avatar eee-receiver="contact"
                             eee-resolution="'low'"></eee-avatar>
             </section>
 

src/partials/messenger.receiver/contact.html

@@ -2,8 +2,7 @@
 	<!-- information list card -->
 	<md-card class="two-row">
 		<div class="avatar">
-			<eee-avatar eee-type="'contact'"
-						eee-receiver="ctrl.receiver"
+			<eee-avatar eee-receiver="ctrl.receiver"
 						eee-resolution="'high'"></eee-avatar>
 		</div>
 		<md-card-content>

src/partials/messenger.receiver/group.html

@@ -1,8 +1,7 @@
 <div class="form-content">
 	<md-card class="two-row">
 		<div class="avatar">
-			<eee-avatar eee-type="'group'"
-						eee-receiver="ctrl.receiver"
+			<eee-avatar eee-receiver="ctrl.receiver"
 						eee-resolution="'high'"></eee-avatar>
 		</div>
 		<div>

src/partials/messenger.receiver/me.html

@@ -2,8 +2,7 @@
 	<!-- information list card -->
 	<md-card class="two-row">
 		<div class="avatar">
-			<eee-avatar eee-type="'me'"
-						eee-receiver="ctrl.receiver"
+			<eee-avatar eee-receiver="ctrl.receiver"
 						eee-resolution="'high'"></eee-avatar>
 		</div>
 		<md-card-content>

src/sass/components/_avatar.scss

@@ -45,7 +45,8 @@
     }
 
     // Indicators depending on identity type (e.g. Work suitcase)
-    .work-indicator {
+    .work-indicator,
+    .home-indicator {
         $indicator-size: 18px;
         position: absolute;
         top: 48px - $indicator-size;

src/sass/components/_receiver_badge.scss

@@ -7,7 +7,8 @@
                 height: $avatar-size-in-autocomplete;
                 width: auto;
             }
-            .work-indicator {
+            .work-indicator,
+            .home-indicator {
                 // Override configuration.
                 // This is a bit of a hack
                 $indicator-size: 12px;

src/sass/sections/_conversation.scss

@@ -118,7 +118,8 @@
                             width: inherit;
                             height: inherit;
                         }
-                        > .work-indicator {
+                        > .work-indicator,
+                        > .home-indicator {
                             top: 15px;
                             width: 14px;
                             height: 14px;

src/services/webclient.ts

@@ -178,8 +178,8 @@ export class WebClientService {
     private typingInstance: threema.Container.Typing;
     private drafts: threema.Container.Drafts;
     private pcHelper: PeerConnectionHelper = null;
-    private clientInfo: threema.ClientInfo;
     private trustedKeyStore: TrustedKeyStoreService;
+    public clientInfo: threema.ClientInfo;
     public version = null;
 
     private blobCache = new Map<string, threema.BlobInfo>();