Tweak contact style in typeahead

Remove message snippets and dates.
Add checkboxes.

index.html

@@ -32,6 +32,7 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='contact'>
+            <input type='checkbox' class='checkbox'></span>
             <span class='avatar'></span>
             <div class='contact-details'>
                 <h3 class='contact-name'>

js/views/conversation_list_item_view.js

@@ -27,6 +27,7 @@ var Whisper = Whisper || {};
 
     events: {
       'click': 'open',
+      'click .checkbox': 'stopPropagation'
     },
     initialize: function() {
       this.template = $('#contact').html();
@@ -42,6 +43,10 @@ var Whisper = Whisper || {};
       bg.openConversation(this.model.id);
     },
 
+    stopPropagation: function(e) {
+        e.stopPropagation();
+    },
+
     render: function() {
       this.$el.html(
         Mustache.render(this.template, {

js/views/inbox_view.js

@@ -36,7 +36,8 @@
 
             this.typeahead_collection = new typeahead();
             this.typeahead_view = new Whisper.ConversationListView({
-                collection : new Whisper.ConversationCollection()
+                collection : new Whisper.ConversationCollection(),
+                className: 'typeahead'
             });
             this.typeahead_view.$el.hide().insertAfter(this.contacts);
             this.typeahead_collection.fetch();

stylesheets/index.scss

@@ -1,3 +1,17 @@
 .gutter {
   margin-top: 36px;
 }
+
+.contact .checkbox {
+  display: none;
+}
+
+.typeahead {
+  .last-message, .last-timestamp {
+    display: none;
+  }
+
+  .contact .checkbox {
+    display: inline-block;
+  }
+}

stylesheets/manifest.css

@@ -1,6 +1,14 @@
 .gutter {
   margin-top: 36px; }
 
+.contact .checkbox {
+  display: none; }
+
+.typeahead .last-message, .typeahead .last-timestamp {
+  display: none; }
+.typeahead .contact .checkbox {
+  display: inline-block; }
+
 @font-face {
   font-family: 'Roboto';
   src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }