Add group member list // Closes #279

background.html

@@ -23,6 +23,7 @@
             <ul class='menu-list'>
                 <li><a class='openInbox'>Open Inbox</a></li>
                 {{#group}}
+                    <li><a class='view-members'>Members</a></li>
                     <li><a class='new-group-update'>Update group</a></li>
                     <li><a class='leave-group'>Leave group</a></li>
                 {{/group}}
@@ -147,6 +148,15 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='group-member-list'>
+    <div class='title-bar' id='header'>
+        <button class='back'></button>
+        <span class='title-text'>Members</span>
+    </div>
+    <div class='container'>
+      <div class='scrollable'></div>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='title-bar' id='header'>
         <button class='back'></button>
@@ -272,6 +282,7 @@
   <script type="text/javascript" src="js/views/key_verification_view.js"></script>
   <script type="text/javascript" src="js/views/message_detail_view.js"></script>
   <script type="text/javascript" src="js/views/message_list_view.js"></script>
+  <script type="text/javascript" src="js/views/group_member_list_view.js"></script>
   <script type="text/javascript" src="js/views/conversation_view.js"></script>
   <script type="text/javascript" src="js/views/new_conversation_view.js"></script>
   <script type="text/javascript" src="js/views/window_controls_view.js"></script>

js/views/conversation_view.js

@@ -81,12 +81,23 @@
             'click .leave-group': 'leaveGroup',
             'click .new-group-update': 'newGroupUpdate',
             'click .verify-identity': 'verifyIdentity',
+            'click .view-members': 'viewMembers',
             'click .hamburger': 'toggleMenu',
             'click .openInbox' : 'openInbox',
             'click' : 'onClick',
             'select .entry': 'messageDetail'
         },
 
+        viewMembers: function() {
+            var view = new Whisper.GroupMemberList({ model: this.model });
+            this.$el.hide();
+            view.$el.insertAfter(this.el);
+            this.listenTo(view, 'back', function() {
+                view.remove();
+                this.$el.show();
+            }.bind(this));
+        },
+
         openInbox: function() {
             openInbox();
         },

js/views/group_member_list_view.js

@@ -0,0 +1,39 @@
+/* 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.GroupMemberList = Whisper.View.extend({
+        className: 'group-member-list',
+        template: $('#group-member-list').html(),
+        initialize: function() {
+            this.render();
+            this.member_list_view = new Whisper.ConversationListView({
+                collection: this.model.contactCollection,
+                className: 'members'
+            });
+            this.member_list_view.render();
+            this.$('.scrollable').append(this.member_list_view.el);
+        },
+        events: {
+            'click .back': 'goBack',
+        },
+        goBack: function() {
+            this.trigger('back');
+        },
+    });
+})();

stylesheets/_conversation.scss

@@ -97,6 +97,17 @@
   font-size: smaller;
 }
 
+.group-member-list {
+  height: 100%;
+
+  #header {
+    position: inherit;
+  }
+
+  .container {
+    height: calc(100% - #{$header-height});
+  }
+ }
 .new-group-update-form {
   .container {
     height: 100%;

stylesheets/_global.scss

@@ -242,7 +242,10 @@ $avatar-size: 44px;
       z-index: 10;
     }
   }
+}
 
+.group-member-list,
+.new-group-update-form {
   .members .contact {
     box-shadow: none;
     border-bottom: 1px solid #eee;

stylesheets/manifest.css

@@ -203,14 +203,19 @@ img.emoji {
     margin: 0 0 0 20px; }
     .new-group-update-form .results .contact {
       z-index: 10; }
-  .new-group-update-form .members .contact {
-    box-shadow: none;
-    border-bottom: 1px solid #eee; }
-    .new-group-update-form .members .contact .last-message, .new-group-update-form .members .contact .last-timestamp {
-      display: none; }
-    .new-group-update-form .members .contact:hover {
-      background: white;
-      cursor: auto; }
+
+.group-member-list .members .contact,
+.new-group-update-form .members .contact {
+  box-shadow: none;
+  border-bottom: 1px solid #eee; }
+  .group-member-list .members .contact .last-message, .group-member-list .members .contact .last-timestamp,
+  .new-group-update-form .members .contact .last-message,
+  .new-group-update-form .members .contact .last-timestamp {
+    display: none; }
+  .group-member-list .members .contact:hover,
+  .new-group-update-form .members .contact:hover {
+    background: white;
+    cursor: auto; }
 
 .title-bar .check {
   float: right;
@@ -489,6 +494,13 @@ input.search {
 .group-update {
   font-size: smaller; }
 
+.group-member-list {
+  height: 100%; }
+  .group-member-list #header {
+    position: inherit; }
+  .group-member-list .container {
+    height: calc(100% - 36px); }
+
 .new-group-update-form .container {
   height: 100%;
   padding-top: 36px; }