From 6d81011f6a82d089f69aa2388995eca6f7d13a93 Mon Sep 17 00:00:00 2001 From: lilia Date: Sun, 25 Jan 2015 21:55:32 -1000 Subject: [PATCH] Add back button to compose view --- images/back.png | Bin 0 -> 240 bytes index.html | 1 + js/views/inbox_view.js | 14 ++++++++++---- stylesheets/index.scss | 8 ++++++++ stylesheets/manifest.css | 11 ++++++++--- stylesheets/view/_conversation.scss | 2 -- 6 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 images/back.png diff --git a/images/back.png b/images/back.png new file mode 100644 index 0000000000000000000000000000000000000000..9e662f6d498a7a3863f702e2f29b53b66db8fddc GIT binary patch literal 240 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_*1g=CK)Uj~LMH3o);76yi2K%s^g z3=E|P3=FRl7#OT(FffQ0%-I!a1C(G&@^*J&_}|`tWO=~G=WkL6 z;pyTSVsSe8$9V^-6bUOSsfGzGyuAN`;BS0)1h2qT#Ur;E0_D8c$a848Uk9?>ax@yJ z{6Dx}CX(61(#~Ng+l22WQ%mvv4FO#tcCM$7;J literal 0 HcmV?d00001 diff --git a/index.html b/index.html index b361e182e9e..27eec2f5705 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 1fd11c06e32..d006e9183b6 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 88759c54348..f5f37c1a788 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 935bbb7b42b..b6beb9dd8c9 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 f38a40c8a54..b5e0f5f02f3 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; } }