Update to new design for avatars: individual/group icons/colors

And two initials.

js/models/conversations.js

@@ -174,8 +174,6 @@
     format() {
       const { format } = PhoneNumber;
       const regionCode = storage.get('regionCode');
-
-      const avatar = this.getAvatar();
       const color = this.getColor();
 
       return {
@@ -183,7 +181,7 @@
           ourRegionCode: regionCode,
         }),
         color,
-        avatarPath: avatar ? avatar.url : null,
+        avatarPath: this.getAvatarPath(),
         name: this.getName(),
         profileName: this.getProfileName(),
         title: this.getTitle(),
@@ -192,6 +190,7 @@
     getPropsForListItem() {
       const result = {
         ...this.format(),
+        conversationType: this.isPrivate() ? 'direct' : 'group',
 
         lastUpdated: this.get('timestamp'),
         unreadCount: this.get('unreadCount') || 0,
@@ -1369,6 +1368,15 @@
       const { migrateColor } = Util;
       return migrateColor(this.get('color'));
     },
+    getAvatarPath() {
+      const avatar = this.get('avatar') || this.get('profileAvatar');
+
+      if (avatar && avatar.path) {
+        return getAbsoluteAttachmentPath(avatar.path);
+      }
+
+      return null;
+    },
     getAvatar() {
       const title = this.get('name');
       const color = this.getColor();

js/models/messages.js

@@ -300,7 +300,6 @@
       const regionCode = storage.get('regionCode');
 
       const contactModel = this.findContact(phoneNumber);
-      const avatar = contactModel ? contactModel.getAvatar() : null;
       const color = contactModel ? contactModel.getColor() : null;
 
       return {
@@ -308,7 +307,7 @@
           ourRegionCode: regionCode,
         }),
         color,
-        avatarPath: avatar ? avatar.url : null,
+        avatarPath: contactModel ? contactModel.getAvatarPath() : null,
         name: contactModel ? contactModel.getName() : null,
         profileName: contactModel ? contactModel.getProfileName() : null,
         title: contactModel ? contactModel.getTitle() : null,
@@ -394,8 +393,9 @@
       const contact = this.findAndFormatContact(phoneNumber);
       const contactModel = this.findContact(phoneNumber);
 
-      const authorAvatar = contactModel ? contactModel.getAvatar() : null;
-      const authorAvatarPath = authorAvatar ? authorAvatar.url : null;
+      const authorAvatarPath = contactModel
+        ? contactModel.getAvatarPath()
+        : null;
 
       const expirationLength = this.get('expireTimer') * 1000;
       const expireTimerStart = this.get('expirationStartTimestamp');
@@ -530,10 +530,16 @@
         return null;
       }
 
+      const { format } = PhoneNumber;
+      const regionCode = storage.get('regionCode');
+
+      const conversation = this.getConversation();
       const { author, id, referencedMessageNotFound } = quote;
       const contact = author && ConversationController.get(author);
 
-      const authorPhoneNumber = author;
+      const authorPhoneNumber = format(author, {
+        ourRegionCode: regionCode,
+      });
       const authorProfileName = contact ? contact.getProfileName() : null;
       const authorName = contact ? contact.getName() : null;
       const isFromMe = contact ? contact.id === this.OUR_NUMBER : false;
@@ -556,6 +562,7 @@
         authorPhoneNumber,
         authorProfileName,
         authorName,
+        conversationColor: conversation && conversation.getColor(),
         onClick,
         referencedMessageNotFound,
       };

js/views/contact_list_view.js

@@ -25,9 +25,6 @@
           this.contactView = null;
         }
 
-        const avatar = this.model.getAvatar();
-        const avatarPath = avatar && avatar.url;
-        const color = avatar && avatar.color;
         const isMe = this.ourNumber === this.model.id;
 
         this.contactView = new Whisper.ReactWrapperView({
@@ -35,8 +32,8 @@
           Component: window.Signal.Components.ContactListItem,
           props: {
             isMe,
-            color,
-            avatarPath,
+            color: this.model.getColor(),
+            avatarPath: this.model.getAvatarPath(),
             phoneNumber: this.model.getNumber(),
             name: this.model.getName(),
             profileName: this.model.getProfileName(),

js/views/conversation_view.js

@@ -145,8 +145,6 @@
       });
 
       const getHeaderProps = () => {
-        const avatar = this.model.getAvatar();
-        const avatarPath = avatar ? avatar.url : null;
         const expireTimer = this.model.get('expireTimer');
         const expirationSettingName = expireTimer
           ? Whisper.ExpirationTimerOptions.getName(expireTimer || 0)
@@ -158,7 +156,7 @@
           phoneNumber: this.model.getNumber(),
           profileName: this.model.getProfileName(),
           color: this.model.getColor(),
-          avatarPath,
+          avatarPath: this.model.getAvatarPath(),
           isVerified: this.model.isVerified(),
           isMe: this.model.isMe(),
           isGroup: !this.model.isPrivate(),
@@ -1401,6 +1399,7 @@
       }
 
       const message = new Whisper.Message({
+        conversationId: this.model.id,
         quote: this.quote,
       });
       message.quotedMessage = this.quotedMessage;