diff --git a/images/back.png b/images/back.png new file mode 100644 index 000000000..9e662f6d4 Binary files /dev/null and b/images/back.png differ diff --git a/index.html b/index.html index b361e182e..27eec2f57 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 1fd11c06e..d006e9183 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -23,6 +23,7 @@ this.$gutter = $('#gutter'); this.$contacts = $('#contacts'); this.$fab = this.$el.find('.fab'); + this.$back = this.$el.find('.back'); this.newConversationView = new Whisper.NewConversationView(); this.newConversationView.$el.hide().appendTo(this.$gutter); @@ -45,6 +46,7 @@ }.bind(this)); }, events: { + 'click .back': 'hideCompose', 'click .fab': 'showCompose', 'keyup input.new-message': 'compose' }, @@ -53,13 +55,17 @@ this.$contacts.hide(); this.newConversationView.$el.show(); this.newConversationView.reset(); + this.$back.show(); + }, + hideCompose: function() { + this.newConversationView.$el.hide(); + this.$contacts.show(); + this.$fab.show(); + this.$back.hide(); }, compose: function(e) { if (e.keyCode === 27) { - // hide compose - this.newConversationView.$el.hide(); - this.$contacts.show(); - this.$fab.show(); + this.hideCompose(); } } }); diff --git a/stylesheets/index.scss b/stylesheets/index.scss index 88759c543..f5f37c1a7 100644 --- a/stylesheets/index.scss +++ b/stylesheets/index.scss @@ -15,6 +15,14 @@ input.new-message { width: 100%; } +.back { + display: none; + float: left; + width: 36px; + height: 36px; + background: $blue url('/images/back.png') no-repeat center center; +} + .fab { z-index: 1; position: fixed; diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 935bbb7b4..b6beb9dd8 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -9,6 +9,13 @@ input.new-message { box-sizing: border-box; width: 100%; } +.back { + display: none; + float: left; + width: 36px; + height: 36px; + background: #2a92e7 url("/images/back.png") no-repeat center center; } + .fab { z-index: 1; position: fixed; @@ -119,13 +126,11 @@ body { .title-bar button { height: 36px; line-height: 36px; - float: right; margin-right: 8px; padding: 0; border: 0; outline: 0; - color: white; - background: transparent; } + color: white; } button { cursor: pointer; } diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss index f38a40c8a..b5e0f5f02 100644 --- a/stylesheets/view/_conversation.scss +++ b/stylesheets/view/_conversation.scss @@ -24,13 +24,11 @@ body { button { height: 36px; line-height: 36px; - float: right; margin-right: 8px; padding: 0; border: 0; outline: 0; color: white; - background: transparent; } }