@@ -23,6 +22,7 @@
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 7cfd82b4..1fd11c06 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -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();
+ }
}
});
diff --git a/js/views/new_conversation_view.js b/js/views/new_conversation_view.js
index 7e70b16b..9609d72b 100644
--- a/js/views/new_conversation_view.js
+++ b/js/views/new_conversation_view.js
@@ -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();
}
},
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index c0c9faf4..88759c54 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -10,6 +10,34 @@
display: none;
}
+input.new-message {
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.fab {
+ z-index: 1;
+ position: fixed;
+ right: 16px;
+ bottom: 22px;
+ height: 60px;
+ width: 60px;
+ border: 0;
+ border-radius: (60px / 2);
+ outline: 0;
+ font: 300 36px $roboto;
+ color: white;
+ background: $blue url('/images/pencil.png') no-repeat center center;
+ box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
+ transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
+
+ &:hover {
+ background-color: darken($blue, 3%);
+ box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
+ transform: translate3d(0, -1px, 0);
+ }
+}
+
.new-contact,
.typeahead {
.last-message, .last-timestamp {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 3380b767..935bbb7b 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -5,6 +5,30 @@
.contact .checkbox {
display: none; }
+input.new-message {
+ box-sizing: border-box;
+ width: 100%; }
+
+.fab {
+ z-index: 1;
+ position: fixed;
+ right: 16px;
+ bottom: 22px;
+ height: 60px;
+ width: 60px;
+ border: 0;
+ border-radius: 30px;
+ outline: 0;
+ font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
+ color: white;
+ background: #2a92e7 url("/images/pencil.png") no-repeat center center;
+ box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8);
+ transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
+ .fab:hover {
+ background-color: #1c8be5;
+ box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
+ transform: translate3d(0, -1px, 0); }
+
.new-contact .last-message, .new-contact .last-timestamp,
.typeahead .last-message,
.typeahead .last-timestamp {
@@ -103,26 +127,6 @@ body {
color: white;
background: transparent; }
-.fab {
- z-index: 1;
- position: fixed;
- right: 16px;
- bottom: 22px;
- height: 60px;
- width: 60px;
- border: 0;
- border-radius: 30px;
- outline: 0;
- font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
- color: white;
- background: #2a92e7;
- box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8);
- transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
- .fab:hover {
- background: #1c8be5;
- box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
- transform: translate3d(0, -1px, 0); }
-
button {
cursor: pointer; }
diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss
index 38e65941..f38a40c8 100644
--- a/stylesheets/view/_conversation.scss
+++ b/stylesheets/view/_conversation.scss
@@ -34,28 +34,6 @@ body {
}
}
-.fab {
- z-index: 1;
- position: fixed;
- right: 16px;
- bottom: 22px;
- height: 60px;
- width: 60px;
- border: 0;
- border-radius: (60px / 2);
- outline: 0;
- font: 300 36px $roboto;
- color: white;
- background: $blue;
- box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
- transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
-
- &:hover {
- background: darken($blue, 3%);
- box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
- transform: translate3d(0, -1px, 0);
- }
-}
button {
cursor: pointer;