Render emoji in conversation and inbox views.

js/views/conversation_list_item_view.js

@@ -44,6 +44,9 @@
                 number: this.model.getNumber()
                 })
             );
+
+            twemoji.parse(this.el, { base: '/components/twemoji/', size: 16 });
+
             if (this.model.get('avatar')) {
                 this.$el.find('.avatar').append(
                     new Whisper.AttachmentView({model: this.model.get('avatar')}).render().el

js/views/message_view.js

@@ -56,6 +56,8 @@
                 })
             );
 
+            twemoji.parse(this.el, { base: '/components/twemoji/', size: 16 });
+
             var content = this.$el.find('.content');
             content.html(this.autoLink(content.html()));
 

stylesheets/_conversation.scss

@@ -150,7 +150,7 @@
 
   .outgoing {
 
-    img, .bubble {
+    .avatar, .bubble {
       float: right;
     }
 

stylesheets/_global.scss

@@ -145,3 +145,10 @@ button.back {
     text-align: center;
   }
 }
+
+img.emoji {
+   height: 1em;
+   width: 1em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}

stylesheets/_index.scss

@@ -214,7 +214,7 @@ input.new-message {
     color: #888;
   }
 
-  img {
+  .avatar img {
     height: 44px;
     width: 44px;
     background: $grey_l;

stylesheets/manifest.css

@@ -134,6 +134,12 @@ button.back {
     color: #fff;
     text-align: center; }
 
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -0.1em; }
+
 .gutter {
   padding: 36px 0 0; }
 
@@ -280,7 +286,7 @@ input.new-message {
     top: 14px;
     right: 12px;
     color: #888; }
-  .index img {
+  .index .avatar img {
     height: 44px;
     width: 44px;
     background: #f3f3f3;
@@ -408,8 +414,8 @@ input.new-message {
     .message-list .incoming .bubble::after {
       left: -8px;
       border-right: 8px solid #f3f3f3; }
-  .message-detail .outgoing img, .message-detail .outgoing .bubble,
+  .message-detail .outgoing .avatar, .message-detail .outgoing .bubble,
-  .message-list .outgoing img,
+  .message-list .outgoing .avatar,
   .message-list .outgoing .bubble {
     float: right; }
   .message-detail .outgoing .bubble,

test/views/message_view_test.js

@@ -64,4 +64,15 @@ describe('MessageView', function() {
     assert.include(view.$el.text(), xss); // should appear as escaped text
     assert.strictEqual(view.$el.find('script').length, 0); // should not appear as html
   });
+
+  it('supports twemoji', function() {
+    message.set('body', 'I \u2764\uFE0F emoji!');
+    var view = new Whisper.MessageView({model: message});
+    view.render();
+    var img = view.$el.find('.content img');
+    assert.strictEqual(img.length, 1);
+    assert.strictEqual(img.attr('src'), '/components/twemoji/16x16/2764.png');
+    assert.strictEqual(img.attr('alt'), '\u2764\uFE0F');
+    assert.strictEqual(img.attr('class'), 'emoji');
+  });
 });