Clean up shared compose/group update ui
Makes the groupupdate and recipient input fields stick to the top, restyles the typeahead as a floating dropdown list of suggestions rather than a full width component, fixes group avatar thumbnail rendering. // FREEBIE
This commit is contained in:
parent
e402338af7
commit
24a18e91b3
9 changed files with 150 additions and 143 deletions
|
@ -82,7 +82,7 @@
|
|||
'click .destroy': 'destroyMessages',
|
||||
'click .end-session': 'endSession',
|
||||
'click .leave-group': 'leaveGroup',
|
||||
'click .new-group-update': 'newGroupUpdate',
|
||||
'click .update-group': 'newGroupUpdate',
|
||||
'click .verify-identity': 'verifyIdentity',
|
||||
'click .view-members': 'viewMembers',
|
||||
'click .drop-down': 'toggleMenu',
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
template: $('#new-conversation').html(),
|
||||
initialize: function(options) {
|
||||
this.render();
|
||||
this.$group_update = this.$('.new-group-update-form');
|
||||
this.$group_update = this.$('.group-info-input');
|
||||
this.$create = this.$('.create');
|
||||
|
||||
// Group avatar file input
|
||||
|
@ -33,13 +33,19 @@
|
|||
});
|
||||
|
||||
this.recipients_view = new Whisper.RecipientsInputView();
|
||||
this.$('.scrollable').append(this.recipients_view.el);
|
||||
this.recipients_view.$el.insertAfter(this.$('.group-info-input'));
|
||||
this.$input = this.$('input.search');
|
||||
|
||||
this.listenTo(this.getRecipients(), 'add', this.updateControls);
|
||||
this.listenTo(this.getRecipients(), 'remove', this.updateControls);
|
||||
},
|
||||
|
||||
render_attributes: function() {
|
||||
return {
|
||||
avatar: { url: '/images/group_default.png', color: 'gray' }
|
||||
};
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .create': 'create',
|
||||
'click .back': 'goBack',
|
||||
|
@ -96,7 +102,7 @@
|
|||
},
|
||||
|
||||
createGroup: function() {
|
||||
var name = this.$('.new-group-update-form .name').val();
|
||||
var name = this.$('.group-info-input .name').val();
|
||||
if (!name.trim().length) {
|
||||
return;
|
||||
}
|
||||
|
@ -150,7 +156,7 @@
|
|||
this.delegateEvents();
|
||||
this.avatarInput.delegateEvents();
|
||||
this.$create.hide();
|
||||
this.$('.new-group-update-form .name').val('');
|
||||
this.$('.group-info-input .name').val('');
|
||||
this.$group_update.hide();
|
||||
this.recipients_view.reset();
|
||||
},
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
Whisper.NewGroupUpdateView = Whisper.View.extend({
|
||||
tagName: "div",
|
||||
className: "new-group-update-form",
|
||||
className: 'new-group-update',
|
||||
templateName: 'new-group-update',
|
||||
initialize: function(options) {
|
||||
this.render();
|
||||
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
}.bind(this));
|
||||
});
|
||||
this.$('.scrollable').append(this.recipients_view.el);
|
||||
this.recipients_view.$el.insertBefore(this.$('.container'));
|
||||
|
||||
this.$('.avatar').addClass('default');
|
||||
|
||||
|
@ -50,14 +50,14 @@
|
|||
events: {
|
||||
'click .back': 'goBack',
|
||||
'click .send': 'send',
|
||||
'keyup input.search': 'toggleResults'
|
||||
'focusin input.search': 'showResults',
|
||||
'focusout input.search': 'hideResults',
|
||||
},
|
||||
toggleResults: function() {
|
||||
if (this.recipients_view.$input.val().length >= 2) {
|
||||
this.$('.results').show();
|
||||
} else {
|
||||
this.$('.results').hide();
|
||||
}
|
||||
hideResults: function() {
|
||||
this.$('.results').hide();
|
||||
},
|
||||
showResults: function() {
|
||||
this.$('.results').show();
|
||||
},
|
||||
goBack: function() {
|
||||
this.trigger('back');
|
||||
|
@ -65,7 +65,7 @@
|
|||
render_attributes: function() {
|
||||
return {
|
||||
name: this.model.getTitle(),
|
||||
avatar: {url: this.model.getAvatar()}
|
||||
avatar: this.model.getAvatar()
|
||||
};
|
||||
},
|
||||
send: function() {
|
||||
|
|
|
@ -58,6 +58,15 @@
|
|||
itemView: Whisper.ContactPillView
|
||||
});
|
||||
|
||||
Whisper.SuggestionView = Whisper.ConversationListItemView.extend({
|
||||
className: 'contact-details contact',
|
||||
templateName: 'contact_name_and_number',
|
||||
});
|
||||
|
||||
Whisper.SuggestionListView = Whisper.ConversationListView.extend({
|
||||
itemView: Whisper.SuggestionView
|
||||
});
|
||||
|
||||
Whisper.RecipientsInputView = Whisper.View.extend({
|
||||
className: 'recipients-input',
|
||||
templateName: 'recipients-input',
|
||||
|
@ -85,7 +94,7 @@
|
|||
this.typeahead.fetchContacts();
|
||||
|
||||
// View to display the matched contacts from typeahead
|
||||
this.typeahead_view = new Whisper.ConversationListView({
|
||||
this.typeahead_view = new Whisper.SuggestionListView({
|
||||
collection : new Whisper.ConversationCollection([], {
|
||||
comparator: function(m) { return m.getTitle().toLowerCase(); }
|
||||
})
|
||||
|
@ -176,7 +185,7 @@
|
|||
resetTypeahead: function() {
|
||||
this.new_contact_view.$el.hide();
|
||||
this.$input.val('').focus();
|
||||
this.typeahead_view.collection.reset(this.typeahead.models);
|
||||
this.typeahead_view.collection.reset([]);
|
||||
},
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue