diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 44d143099..ff1f6087d 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -72,6 +72,9 @@ }.bind(this)); this.fetchMessages(); + + this.$('.send-message').focus(this.focusBottomBar.bind(this)); + this.$('.send-message').blur(this.unfocusBottomBar.bind(this)); }, events: { @@ -90,7 +93,16 @@ 'select .message-list .entry': 'messageDetail', 'force-resize': 'forceUpdateMessageFieldSize', 'click .choose-file': 'focusMessageField', - 'loadMore .message-list': 'fetchMessages' + 'loadMore .message-list': 'fetchMessages', + 'focus .send-message': 'focusBottomBar', + 'blur .send-message': 'unfocusBottomBar' + }, + + unfocusBottomBar: function() { + this.$('.bottom-bar form').removeClass('active'); + }, + focusBottomBar: function() { + this.$('.bottom-bar form').addClass('active'); }, onOpened: function() { diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 36a47a836..54a8ce5b8 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -490,10 +490,14 @@ .bottom-bar { $button-width: 36px; - padding: 5px 0; + padding: 5px 1px 5px 0; height: 50px; background: $grey_l; + form.active { + outline: solid 1px $blue; + } + form.send { background: #ffffff; } diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 89f03dcdb..833e7a6fc 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -1001,9 +1001,11 @@ input.search { margin-top: 5px; } .bottom-bar { - padding: 5px 0; + padding: 5px 1px 5px 0; height: 50px; background: #f3f3f3; } + .bottom-bar form.active { + outline: solid 1px #2090ea; } .bottom-bar form.send { background: #ffffff; } .bottom-bar button, .bottom-bar input, .bottom-bar textarea {