Add contact list view

Used by member list view. Refactored some templates for shared markup.
Fixes strange behavior where members in the list were hoverable and
selectable.

// FREEBIE

background.html

@@ -113,26 +113,28 @@
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='avatar'>
-<span class='avatar {{#avatar.color }} color{{avatar.color}} {{/avatar.color}}' style='background-image: url("{{ avatar.url }}");'>
+    <span class='avatar {{#avatar.color }} color{{avatar.color}} {{/avatar.color}}'
+          style='background-image: url("{{ avatar.url }}");'>
         {{ avatar.content }}
-      </span>
+    </span>
   </script>
   <script type='text/x-tmpl-mustache' id='contact_pill'>
     <span>{{ name }}</span><span class='remove'>x</span>
   </script>
+  <script type='text/x-tmpl-mustache' id='contact_name_and_number'>
+      <h3 class='name'> {{ title }} </h3>
+      <div class='number'>{{ number }}</div>
+  </script>
   <script type='text/x-tmpl-mustache' id='contact'>
+      {{> avatar }}
+      <div class='contact-details'> {{> contact_name_and_number }} </div>
+  </script>
+  <script type='text/x-tmpl-mustache' id='conversation_preview'>
       {{> avatar }}
       <div class='contact-details'>
-          <h3 class='contact-name'>
+          {{> contact_name_and_number }}
-          {{ contact_name }}
+          <p class='last-message'> {{ last_message }} </p>
-          </h3>
+          <span class='last-timestamp'> {{ last_message_timestamp }} </span>
-          <div class='number'>{{ number }}</div>
-          <p class='last-message'>
-          {{ last_message }}
-          </p>
-          <span class='last-timestamp'>
-          {{ last_message_timestamp }}
-          </span>
       </div>
   </script>
   <script type="text/x-tmpl-mustache" id="phone-number">
@@ -292,6 +294,7 @@
   <script type="text/javascript" src="js/views/list_view.js"></script>
   <script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
   <script type="text/javascript" src="js/views/conversation_list_view.js"></script>
+  <script type="text/javascript" src="js/views/contact_list_view.js"></script>
   <script type="text/javascript" src="js/views/recipients_input_view.js"></script>
   <script type="text/javascript" src="js/views/new_group_update_view.js"></script>
   <script type="text/javascript" src="js/views/attachment_view.js"></script>

js/views/contact_list_view.js

@@ -0,0 +1,35 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.ContactListView = Whisper.ListView.extend({
+        tagName: 'div',
+        itemView: Whisper.View.extend({
+            tagName: 'div',
+            className: 'contact',
+            template: Whisper.View.Templates.contact,
+            render_attributes: function() {
+                return {
+                    title: this.model.getTitle(),
+                    number: this.model.getNumber(),
+                    avatar: this.model.getAvatar()
+                };
+            }
+        })
+    });
+})();

js/views/conversation_list_item_view.js

@@ -20,8 +20,8 @@
     // list of conversations, showing user/group and last message sent
     Whisper.ConversationListItemView = Whisper.View.extend({
         tagName: 'div',
-        className: 'contact',
+        className: 'conversation-list-item contact',
-        template: $('#contact').html(),
+        template: Whisper.View.Templates.conversation_preview,
         events: {
             'click': 'select'
         },
@@ -41,7 +41,7 @@
         render: function() {
             this.$el.html(
                 Mustache.render(this.template, {
-                    contact_name: this.model.getTitle(),
+                    title: this.model.getTitle(),
                     last_message: this.model.get('lastMessage'),
                     last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
                     number: this.model.getNumber(),

js/views/group_member_list_view.js

@@ -22,7 +22,7 @@
         template: $('#group-member-list').html(),
         initialize: function() {
             this.render();
-            this.member_list_view = new Whisper.ConversationListView({
+            this.member_list_view = new Whisper.ContactListView({
                 collection: this.model.contactCollection,
                 className: 'members'
             });

js/views/new_group_update_view.js

@@ -40,7 +40,7 @@
 
             this.$('.avatar').addClass('default');
 
-            this.member_list_view = new Whisper.ConversationListView({
+            this.member_list_view = new Whisper.ContactListView({
                 collection: this.model.contactCollection,
                 className: 'members'
             });

stylesheets/_global.scss

@@ -259,20 +259,20 @@ $avatar-size: 44px;
   float: right;
   background: url('/images/check.png') no-repeat center center;
 }
-
+.conversation-list-item {
+  cursor: pointer;
+  &:hover {
+    background: #f8f8f8;
+  }
+}
 .contact {
   position: relative;
   padding: 12px;
-  cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   box-shadow: 0 0px 1px rgba(#aaa, 0.8);
   background: $grey_l;
 
-  &:hover {
-    background: #f8f8f8;
-  }
-
   &.selected {
     background: $blue;
     color: #ffffff;
@@ -296,7 +296,7 @@ $avatar-size: 44px;
     }
   }
 
-  .contact-name {
+  .name {
     margin: 0;
     font-size: 1em;
     font-weight: 400;

stylesheets/_index.scss

@@ -127,7 +127,7 @@ input.search {
 }
 .new-contact {
   display: none;
-  .contact-name { display: none; }
+  .name { display: none; }
   .contact-details::before {
     content: 'Create new contact';
     display: block;
@@ -173,7 +173,7 @@ input.search {
 }
 
 .conversations .unread .contact-details {
-    .contact-name,
+    .name,
     .last-message,
     .last-timestamp {
       font-weight: bold;

stylesheets/manifest.css

@@ -217,16 +217,18 @@ img.emoji {
   float: right;
   background: url("/images/check.png") no-repeat center center; }
 
+.conversation-list-item {
+  cursor: pointer; }
+  .conversation-list-item:hover {
+    background: #f8f8f8; }
+
 .contact {
   position: relative;
   padding: 12px;
-  cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   box-shadow: 0 0px 1px rgba(170, 170, 170, 0.8);
   background: #f3f3f3; }
-  .contact:hover {
-    background: #f8f8f8; }
   .contact.selected {
     background: #2090ea;
     color: #ffffff; }
@@ -240,7 +242,7 @@ img.emoji {
     .contact .contact-details p {
       overflow-x: hidden;
       text-overflow: ellipsis; }
-  .contact .contact-name {
+  .contact .name {
     margin: 0;
     font-size: 1em;
     font-weight: 400;
@@ -444,7 +446,7 @@ input.search {
 
 .new-contact {
   display: none; }
-  .new-contact .contact-name {
+  .new-contact .name {
     display: none; }
   .new-contact .contact-details::before {
     content: 'Create new contact';
@@ -477,7 +479,7 @@ input.search {
   .settings-open .settings {
     display: block; }
 
-.conversations .unread .contact-details .contact-name,
+.conversations .unread .contact-details .name,
 .conversations .unread .contact-details .last-message,
 .conversations .unread .contact-details .last-timestamp {
   font-weight: bold; }