Polish group update ux

* Show the members list as static elements
* Style the search results as a drop down, mirroring android ux

Fixes #248 // FREEBIE

js/views/new_group_update_view.js

@@ -32,11 +32,27 @@
                 placeholder: "Add member"
             });
             this.$('.scrollable').append(this.recipients_view.el);
+
             this.$('.avatar').addClass('default');
+
+            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',
-            'click .send': 'send'
+            'click .send': 'send',
+            'keyup input.search': 'toggleResults'
+        },
+        toggleResults: function() {
+            if (this.recipients_view.$input.val().length >= 2) {
+                this.$('.results').show();
+            } else {
+                this.$('.results').hide();
+            }
         },
         goBack: function() {
             this.trigger('back');

stylesheets/_global.scss

@@ -206,7 +206,7 @@ img.emoji {
 
   }
 
-  .file-input .thumbnail,
+  .file-input .thumbnail, .thumbnail .avatar,
   img {
     height: 54px;
     width: 54px;
@@ -231,6 +231,25 @@ img.emoji {
     width: calc(100% - 64px);
   }
 
+  .results {
+    width: calc(100% - 20px);
+    margin: 0 0 0 20px;
+    .contact {
+      z-index: 10;
+    }
+  }
+
+  .members .contact {
+    box-shadow: none;
+    border-bottom: 1px solid #eee;
+    .last-message, .last-timestamp {
+      display: none;
+    }
+    &:hover {
+      background: white;
+      cursor: auto;
+    }
+  }
 }
 
 .title-bar .check {
@@ -246,27 +265,14 @@ img.emoji {
   transition: background 0.2s;
   white-space: nowrap;
   overflow: hidden;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: 16px;
-    bottom: 0;
-    height: 1px;
-    width: calc(100% - 12px - 54px - 2 * 8px - 16px);
-    background: #eee;
-  }
+  box-shadow: 0 1px 3px rgba(#aaa, 0.8);
 
   &:hover {
     background: #f8f8f8;
   }
 
-  &:last-child {
-    box-shadow: 0 1px 3px rgba(#aaa, 0.8);
-
-    &::after {
-      display: none;
-    }
+  &:last-child::after {
+    display: none;
   }
 
   .contact-details {

stylesheets/manifest.css

@@ -176,7 +176,7 @@ img.emoji {
     height: 100%;
     border-radius: 50%;
     background: #f3f3f3 url("/images/group_default.png") no-repeat center; }
-  .new-group-update-form .file-input .thumbnail,
+  .new-group-update-form .file-input .thumbnail, .new-group-update-form .thumbnail .avatar,
   .new-group-update-form img {
     height: 54px;
     width: 54px;
@@ -195,6 +195,19 @@ img.emoji {
     border: solid 1px #ccc;
     border-width: 0 0 1px 0;
     width: calc(100% - 64px); }
+  .new-group-update-form .results {
+    width: calc(100% - 20px);
+    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; }
 
 .title-bar .check {
   float: right;
@@ -207,21 +220,12 @@ img.emoji {
   cursor: pointer;
   transition: background 0.2s;
   white-space: nowrap;
-  overflow: hidden; }
-  .contact::after {
-    content: '';
-    position: absolute;
-    right: 16px;
-    bottom: 0;
-    height: 1px;
-    width: calc(100% - 12px - 54px - 2 * 8px - 16px);
-    background: #eee; }
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
   .contact:hover {
     background: #f8f8f8; }
-  .contact:last-child {
-    box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
-    .contact:last-child::after {
-      display: none; }
+  .contact:last-child::after {
+    display: none; }
   .contact .contact-details {
     vertical-align: top;
     display: inline-block;