Improve group update ui/ux

Promote group update to its own screen. Add typeahead contact selector
from new conversation view. Restyle to match android (more or less).

Closes #186

js/views/conversation_view.js

@@ -97,6 +97,10 @@
             view.$el.insertAfter(this.$el);
             this.$el.hide();
             view.render();
+            this.listenBack(view);
+        },
+
+        listenBack: function(view) {
             this.listenTo(view, 'back', function() {
                 view.remove();
                 this.$el.show();
@@ -124,14 +128,12 @@
         },
 
         newGroupUpdate: function() {
-            if (!this.newGroupUpdateView) {
-                this.newGroupUpdateView = new Whisper.NewGroupUpdateView({
-                    model: this.model
-                });
-            } else {
-                this.newGroupUpdateView.delegateEvents();
-            }
-            this.newGroupUpdateView.render().$el.insertBefore(this.view.el);
+            this.newGroupUpdateView = new Whisper.NewGroupUpdateView({
+                model: this.model
+            });
+            this.newGroupUpdateView.$el.insertAfter(this.el);
+            this.$el.hide();
+            this.listenBack(this.newGroupUpdateView);
         },
 
         destroyMessages: function(e) {

js/views/file_input_view.js

@@ -28,12 +28,13 @@
             this.$input = this.$el.find('input[type=file]');
             this.thumb = new Whisper.AttachmentPreviewView();
             this.$el.addClass('file-input');
+            this.$default = this.$el.find('.default');
         },
 
         events: {
             'change': 'previewImages',
             'click .close': 'deleteFiles',
-            'click .paperclip': 'open'
+            'click .thumbnail': 'open'
         },
 
         open: function() {
@@ -41,8 +42,9 @@
         },
 
         addThumb: function(src) {
+            this.$default.hide();
             this.thumb.src = src;
-            this.$el.find('.paperclip').append(this.thumb.render().el);
+            this.$el.find('.thumbnail').append(this.thumb.render().el);
         },
 
         autoScale: function(file) {
@@ -163,6 +165,7 @@
                 this.oUrl = null;
             }
             this.thumb.remove();
+            this.$default.show();
         },
 
         deleteFiles: function(e) {

js/views/new_group_update_view.js

@@ -28,21 +28,33 @@
             });
 
             if (this.model.attributes.avatar) {
-                new Whisper.AttachmentView({
+                this.current_avatar = new Whisper.AttachmentView({
                     model: this.model.attributes.avatar
-                }).render().$el.addClass('preview').prependTo(this.avatarInput.el);
+                });
+                this.avatarInput.$default.append(
+                    this.current_avatar.render().$el
+                );
             }
 
+            this.recipients_view = new Whisper.RecipientsInputView();
+            this.$el.find('.scrollable').append(this.recipients_view.el);
         },
         events: {
+            'click .back': 'goBack',
             'click .send': 'send'
         },
+        goBack: function() {
+            this.trigger('back');
+        },
+        render_attributes: function() {
+            return { name: this.model.getTitle() };
+        },
         send: function() {
             return this.avatarInput.getFiles().then(function(avatarFiles) {
                 this.model.save({
                     name: this.$el.find('.name').val(),
                     avatar: avatarFiles[0],
-                    members: _.union(this.model.get('members'), this.$el.find('.members').val().split(','))
+                    members: _.union(this.model.get('members'), this.recipients_view.recipients.pluck('id'))
                 });
                 textsecure.messaging.updateGroup(
                     this.model.id,
@@ -50,7 +62,7 @@
                     this.model.get('avatar'),
                     this.model.get('members')
                 );
-                this.remove();
+                this.goBack();
             }.bind(this));
         }
     });