mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Clean up shared compose/group update ui

Browse source 
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:
lilia 2015-09-04 13:11:21 -07:00
parent e402338af7
commit 24a18e91b3
9 changed files with 150 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

2
js/views/conversation_view.js
View file

@ -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',

14
js/views/new_conversation_view.js
View file

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

20
js/views/new_group_update_view.js
View file

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

13
js/views/recipients_input_view.js
View file

@ -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([]);
},