Show all contacts.

background.html

@@ -60,7 +60,7 @@
         <div class='conversations-list'>
           <h4 class='section-toggle section-toggle-visible'>Conversations</h4>
           <div class='conversations inbox'></div>
-          <h4 class='section-toggle section-toggle-visible'>Friends</h4>
+          <h4 class='section-toggle section-toggle-visible'>Contacts</h4>
           <div class='conversations friends'></div>
         </div>
         <div class='conversations search-results hide'>
@@ -135,13 +135,13 @@
               <div class='flex'>
                 <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                 <textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
-                <div class='capture-audio' hide>
+                <div class='capture-audio hide'>
                     <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                 </div>
                 <div class='android-length-warning'>
                     {{ android-length-warning }}
                 </div>
-                <div class='choose-file' hide>
+                <div class='choose-file hide'>
                     <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                     <input type='file' class='file-input'>
                 </div>

js/conversation_controller.js

@@ -11,7 +11,7 @@
   const conversations = new Whisper.ConversationCollection();
   const inboxCollection = new (Backbone.Collection.extend({
     initialize() {
-      this.on('change:timestamp change:name change:number change:profileName', this.sort);
+      this.on('change:timestamp change:name change:number', this.sort);
 
       this.listenTo(conversations, 'add change:active_at', this.addActive);
       this.listenTo(conversations, 'reset', () => this.reset([]));
@@ -44,6 +44,7 @@
     addActive(model) {
       if (model.get('active_at')) {
         this.add(model);
+        model.updateLastMessage();
       } else {
         this.remove(model);
       }
@@ -77,7 +78,7 @@
 
   window.getInboxCollection = () => inboxCollection;
 
-  const friendCollection = new (Backbone.Collection.extend({
+  const contactCollection = new (Backbone.Collection.extend({
     initialize() {
       this.on('change:timestamp change:name change:number change:profileName', this.sort);
 
@@ -94,16 +95,16 @@
     addActive(model) {
       // We only want models which are not shown in the inbox
       // And that we are friends with
-      const inboxHasModel = inboxCollection.contains(model);
-      if (!inboxHasModel) {
+      if (model.isFriend()) {
         this.add(model);
+        model.updateLastMessage();
       } else {
         this.remove(model);
       }
     },
   }))();
 
-  window.getFriendCollection = () => friendCollection;
+  window.getContactCollection = () => contactCollection;
 
   window.ConversationController = {
     markAsSelected(toSelect) {

js/views/conversation_list_item_view.js

@@ -25,13 +25,17 @@
       Backbone.View.prototype.remove.call(this);
     },
 
+    getProps() {
+      return this.model.getPropsForListItem();
+    },
+
     render() {
       if (this.childView) {
         this.childView.remove();
         this.childView = null;
       }
 
-      const props = this.model.getPropsForListItem();
+      const props = this.getProps();
       this.childView = new Whisper.ReactWrapperView({
         className: 'list-item-wrapper',
         Component: Signal.Components.ConversationListItem,
@@ -39,7 +43,7 @@
       });
 
       const update = () =>
-        this.childView.update(this.model.getPropsForListItem());
+        this.childView.update(this.getProps());
 
       this.listenTo(this.model, 'change', update);
 
@@ -48,4 +52,16 @@
       return this;
     },
   });
+
+  // list of conversations, showing user/group and last message sent
+  Whisper.ConversationContactListItemView = Whisper.ConversationListItemView.extend({
+    getProps() {
+      // We don't want to show a timestamp or a message
+      const props = this.model.getPropsForListItem();
+      delete props.lastMessage;
+      delete props.lastUpdated;
+
+      return props;
+    },
+  });
 })();

js/views/conversation_list_view.js

@@ -65,4 +65,8 @@
       }
     },
   });
+
+  Whisper.ConversationContactListView = Whisper.ListView.extend({
+    itemView: Whisper.ConversationContactListItemView,
+  });
 })();

js/views/conversation_search_view.js

@@ -86,6 +86,9 @@
               this.typeahead.filter(isSearchable)
             );
 
+            // This will allow us to show the last message when searching
+            this.typeahead_view.collection.forEach(c => c.updateLastMessage());
+
             // Check if the query is in the model list
             // If it is then hide the new contact view
             const modelExists = this.typeahead_view.collection.find(item => item.get('id') === query);

js/views/conversation_view.js

@@ -474,14 +474,17 @@
     },
 
     toggleMicrophone() {
-      if (
-        this.$('.send-message').val().length > 0 ||
-        this.fileInput.hasFiles()
-      ) {
-        this.$('.capture-audio').hide();
-      } else {
-        this.$('.capture-audio').show();
-      }
+      // ALWAYS HIDE until we support audio
+      this.$('.capture-audio').hide();
+
+      // if (
+      //   this.$('.send-message').val().length > 0 ||
+      //   this.fileInput.hasFiles()
+      // ) {
+      //   this.$('.capture-audio').hide();
+      // } else {
+      //   this.$('.capture-audio').show();
+      // }
     },
     toggleLengthWarning() {
       if (this.$('.send-message').val().length > 2000) {

js/views/inbox_view.js

@@ -1,7 +1,7 @@
 /* global ConversationController: false */
 /* global extension: false */
 /* global getInboxCollection: false */
-/* global getFriendCollection: false */
+/* global getContactCollection: false */
 /* global i18n: false */
 /* global Whisper: false */
 /* global textsecure: false */
@@ -166,25 +166,25 @@
       );
 
       // Friends
-      const friendCollection = getFriendCollection();
+      const contactCollection = getContactCollection();
 
-      this.listenTo(friendCollection, 'select', this.openConversation);
+      this.listenTo(contactCollection, 'select', this.openConversation);
 
-      this.friendListView = new Whisper.ConversationListView({
+      this.contactListView = new Whisper.ConversationContactListView({
         el: this.$('.friends'),
-        collection: friendCollection,
+        collection: contactCollection,
       }).render();
 
-      this.friendListView.listenTo(
-        friendCollection,
+      this.contactListView.listenTo(
+        contactCollection,
         'add change:timestamp change:name change:number change:profileName',
-        this.friendListView.updateLocation
+        this.contactListView.updateLocation
       );
 
       this.listenTo(
-        friendCollection,
+        contactCollection,
         'remove',
-        this.closeConversation
+        this.contactListView.removeItem
       );
 
       // Search
@@ -212,7 +212,7 @@
 
       extension.windows.onClosed(() => {
         this.inboxListView.stopListening();
-        this.friendListView.stopListening();
+        this.contactListView.stopListening();
       });
 
       if (extension.expired()) {
@@ -344,7 +344,6 @@
     closeConversation(conversation) {
       if (conversation) {
         this.inboxListView.removeItem(conversation);
-        this.friendListView.removeItem(conversation);
         this.conversation_stack.close(conversation);
       }
     },

stylesheets/_index.scss

@@ -54,7 +54,7 @@
   }
 
   .content {
-    overflow-y: scroll;
+    overflow-y: auto;
     max-height: calc(100% - 88px);
     min-height: 0px;
     flex: 1 1 auto;
@@ -85,6 +85,7 @@
   margin-top: 1px;
   margin-bottom: 1px;
   overflow: hidden;
+  user-select: none;
 }
 
 .section-toggle::after {

stylesheets/_theme_dark.scss

@@ -68,6 +68,10 @@ body.dark-theme {
       color: $color-dark-05;
       border: 1px solid $color-light-60;
       outline: 0;
+
+      &[disabled='disabled'] {
+        background: $color-light-90;
+      }
     }
   }