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
This commit is contained in:
lilia 2015-03-12 11:40:55 -07:00
parent 7e3961891b
commit 69d5a6a33c
10 changed files with 383 additions and 231 deletions

View file

@ -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) {

View file

@ -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) {

View file

@ -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));
}
});