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

Style elements for compose flow

Browse source
This commit is contained in:
lilia 2015-01-25 21:44:53 -10:00
parent 17deb69a91
commit fedfdcdd7e
7 changed files with 111 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

21
js/views/inbox_view.js
View file

@ -22,6 +22,7 @@
initialize: function () {
this.$gutter = $('#gutter');
this.$contacts = $('#contacts');
this.$fab = this.$el.find('.fab');
this.newConversationView = new Whisper.NewConversationView();
this.newConversationView.$el.hide().appendTo(this.$gutter);
@ -44,14 +45,22 @@
}.bind(this));
},
events: {
'change input.new-message': 'compose',
'click .fab': 'showCompose',
'keyup input.new-message': 'compose'
},
compose: function() {
var query = this.$el.find('input.new-message').val();
this.$contacts.toggle(!query.length);
this.newConversationView.$el.toggle(!!query.length);
this.newConversationView.filterContacts(query);
showCompose: function() {
this.$fab.hide();
this.$contacts.hide();
this.newConversationView.$el.show();
this.newConversationView.reset();
},
compose: function(e) {
if (e.keyCode === 27) {
// hide compose
this.newConversationView.$el.hide();
this.$contacts.show();
this.$fab.show();
}
}
});

65
js/views/new_conversation_view.js
View file

@ -41,42 +41,53 @@ var Whisper = Whisper || {};
Whisper.NewConversationView = Backbone.View.extend({
className: 'new-conversation',
initialize: function() {
this.template = $('#new-conversation').html();
Mustache.parse(this.template);
this.$el.html($(Mustache.render(this.template)));
this.input = new Whisper.PhoneInputView({
el: this.$el.find('div.phone-number-input')
});
this.template = $('#new-conversation').html();
Mustache.parse(this.template);
this.$el.html($(Mustache.render(this.template)));
this.$input = this.$el.find('input.new-message');
this.typeahead_collection = new typeahead();
this.typeahead_view = new Whisper.ConversationListView({
collection : new Whisper.ConversationCollection(),
className: 'typeahead'
});
this.typeahead_collection = new typeahead();
this.typeahead_view = new Whisper.ConversationListView({
collection : new Whisper.ConversationCollection(),
className: 'typeahead'
});
this.typeahead_view.$el.appendTo(this.$el.find('.contacts'));
this.typeahead_collection.fetch();
this.typeahead_view.$el.appendTo(this.$el.find('.contacts'));
this.typeahead_collection.fetch();
this.new_contact = new Whisper.ConversationListItemView({
model: new Whisper.Conversation({
active_at: null
})
});
this.new_contact.render().$el.hide();
this.$el.find('.new-contact').append(this.new_contact.el);
this.new_contact = new Whisper.ConversationListItemView({
model: new Whisper.Conversation({
active_at: null
})
}).render();
this.$el.find('.new-contact').append(this.new_contact.el);
},
filterContacts: function(query) {
if (this.maybeNumber(query)) {
this.new_contact.model.set('name', query);
this.new_contact.$el.show();
} else {
this.new_contact.$el.hide();
}
events: {
'change input.new-message': 'filterContacts',
'keyup input.new-message': 'filterContacts'
},
reset: function() {
this.new_contact.$el.hide();
this.$input.val('').focus();
this.typeahead_view.collection.reset(this.typeahead_collection.models);
},
filterContacts: function() {
var query = this.$input.val();
if (query.length) {
if (this.maybeNumber(query)) {
this.new_contact.model.set('name', query);
this.new_contact.$el.show();
} else {
this.new_contact.$el.hide();
}
this.typeahead_view.collection.reset(
this.typeahead_collection.typeahead(query)
);
} else {
this.reset();
}
},