Default avatar support

Fixes #264

Implement the equivalent of java's String.hashCode on the conversation model.
Change avatar template and attributes. Use css classes for colors.

background.html

@@ -95,7 +95,9 @@
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='avatar'>
-      <span class='avatar' style='background-image: url("{{ avatar_url }}");' ></span>
+      <span class='avatar color{{avatar.color}}' style='background-image: url("{{ avatar.url }}");'>
+        {{ avatar.content }}
+      </span>
   </script>
   <script type='text/x-tmpl-mustache' id='contact_pill'>
     <span>{{ name }}</span><span class='remove'>x</span>

js/models/conversations.js

@@ -237,11 +237,22 @@
         }
     },
 
-    getAvatarUrl: function() {
+    getAvatar: function() {
         if (this.avatarUrl === undefined) {
             this.updateAvatarUrl(true);
         }
-        return this.avatarUrl || '/images/default.png';
+        if (this.avatarUrl) {
+            return { url: this.avatarUrl };
+        } else if (this.isPrivate()) {
+            var title = this.getTitle() || '';
+            var initials = title.trim()[0];
+            return {
+                color: Math.abs(this.hashCode()) % 17,
+                content: initials
+            };
+        } else {
+            return { url: '/images/default.png' };
+        }
     },
 
     resolveConflicts: function(number) {
@@ -262,6 +273,22 @@
                 }
             });
         }.bind(this));
+    },
+    hashCode: function() {
+        if (this.hash === undefined) {
+            var string = this.getTitle() || '';
+            if (string.length === 0) {
+                return 0;
+            }
+            var hash = 0;
+            for (var i = 0; i < string.length; i++) {
+                hash = ((hash<<5)-hash) + string.charCodeAt(i);
+                hash = hash & hash; // Convert to 32bit integer
+            }
+
+            this.hash = hash;
+        }
+        return this.hash;
     }
   });
 

js/views/conversation_list_item_view.js

@@ -45,7 +45,7 @@
                     last_message: this.model.get('lastMessage'),
                     last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
                     number: this.model.getNumber(),
-                    avatar_url: this.model.getAvatarUrl()
+                    avatar: this.model.getAvatar()
                 }, this.render_partials())
             );
 

js/views/message_detail_view.js

@@ -31,9 +31,9 @@
         },
         render_attributes: function() {
             return {
-                name       : this.model.getTitle(),
-                avatar_url : this.model.getAvatarUrl(),
-                conflict   : this.conflict
+                name     : this.model.getTitle(),
+                avatar   : this.model.getAvatar(),
+                conflict : this.conflict
             };
         }
     });

js/views/message_view.js

@@ -62,7 +62,7 @@
                     message: this.model.get('body'),
                     timestamp: moment(this.model.get('sent_at')).fromNow(),
                     sender: (contact && contact.getTitle()) || '',
-                    avatar_url: (contact && contact.getAvatarUrl())
+                    avatar: (contact && contact.getAvatar())
                 }, this.render_partials())
             );
 

js/views/new_group_update_view.js

@@ -67,7 +67,7 @@
         render_attributes: function() {
             return {
                 name: this.model.getTitle(),
-                avatar_url: this.model.getAvatarUrl()
+                avatar: {url: this.model.getAvatar()}
             };
         },
         send: function() {

stylesheets/_global.scss

@@ -189,6 +189,11 @@ $avatar-size: 44px;
   border-radius: 50%;
   background-size: cover;
   vertical-align: middle;
+  text-align: center;
+  line-height: $avatar-size;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  color: white;
 }
 
 .new-group-update-form {
@@ -353,3 +358,22 @@ $avatar-size: 44px;
   }
 
 }
+
+// avatar colors
+.avatar.color0  { background-color: #e57373 }
+.avatar.color1  { background-color: #f06292 }
+.avatar.color2  { background-color: #ba68c8 }
+.avatar.color3  { background-color: #9575cd }
+.avatar.color4  { background-color: #7986cb }
+.avatar.color5  { background-color: #64b5f6 }
+.avatar.color6  { background-color: #4fc3f7 }
+.avatar.color7  { background-color: #4dd0e1 }
+.avatar.color8  { background-color: #4db6ac }
+.avatar.color9  { background-color: #81c784 }
+.avatar.color10 { background-color: #aed581 }
+.avatar.color11 { background-color: #ff8a65 }
+.avatar.color12 { background-color: #d4e157 }
+.avatar.color13 { background-color: #ffd54f }
+.avatar.color14 { background-color: #ffb74d }
+.avatar.color15 { background-color: #a1887f }
+.avatar.color16 { background-color: #90a4ae }

stylesheets/manifest.css

@@ -163,7 +163,12 @@ img.emoji {
   background: #f3f3f3 url("/images/default.png") no-repeat center;
   border-radius: 50%;
   background-size: cover;
-  vertical-align: middle; }
+  vertical-align: middle;
+  text-align: center;
+  line-height: 44px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  color: white; }
 
 .new-group-update-form {
   background: white; }
@@ -271,6 +276,57 @@ img.emoji {
   .attachment-preview img {
     width: 100%; }
 
+.avatar.color0 {
+  background-color: #e57373; }
+
+.avatar.color1 {
+  background-color: #f06292; }
+
+.avatar.color2 {
+  background-color: #ba68c8; }
+
+.avatar.color3 {
+  background-color: #9575cd; }
+
+.avatar.color4 {
+  background-color: #7986cb; }
+
+.avatar.color5 {
+  background-color: #64b5f6; }
+
+.avatar.color6 {
+  background-color: #4fc3f7; }
+
+.avatar.color7 {
+  background-color: #4dd0e1; }
+
+.avatar.color8 {
+  background-color: #4db6ac; }
+
+.avatar.color9 {
+  background-color: #81c784; }
+
+.avatar.color10 {
+  background-color: #aed581; }
+
+.avatar.color11 {
+  background-color: #ff8a65; }
+
+.avatar.color12 {
+  background-color: #d4e157; }
+
+.avatar.color13 {
+  background-color: #ffd54f; }
+
+.avatar.color14 {
+  background-color: #ffb74d; }
+
+.avatar.color15 {
+  background-color: #a1887f; }
+
+.avatar.color16 {
+  background-color: #90a4ae; }
+
 .gutter {
   padding: 36px 0 0; }