compose: Open the mobile compose popover when the + button is pressed.

The `+` button will only be displayed on mobile devices.

static/js/click_handlers.js

@@ -443,11 +443,23 @@ exports.initialize = function () {
 
 
     $('.compose_stream_button').click(function () {
+        popovers.hide_mobile_message_buttons_popover();
         compose_actions.start('stream', {trigger: 'new topic button'});
     });
     $('.compose_private_button').click(function () {
+        popovers.hide_mobile_message_buttons_popover();
         compose_actions.start('private');
     });
+
+    $('body').on('click', '.compose_mobile_stream_button', function () {
+        popovers.hide_mobile_message_buttons_popover();
+        compose_actions.start('stream', {trigger: 'new topic button'});
+    });
+    $('body').on('click', '.compose_mobile_private_button', function () {
+        popovers.hide_mobile_message_buttons_popover();
+        compose_actions.start('private');
+    });
+
     $('.compose_reply_button').click(function () {
         compose_actions.respond_to_message({trigger: 'reply button'});
     });
@@ -471,6 +483,13 @@ exports.initialize = function () {
         if ($(e.target).is("#emoji_map, img.emoji, .drag")) {
             return;
         }
+
+        // The mobile compose button has its own popover when clicked, so it already.
+        // hides other popovers.
+        if ($(e.target).is(".compose_mobile_button, .compose_mobile_button *")) {
+            return;
+        }
+
         // Don't let clicks in the compose area count as
         // "unfocusing" our compose -- in other words, e.g.
         // clicking "Press enter to send" should not

static/styles/compose.scss

@@ -477,14 +477,19 @@ a#undo_markdown_preview {
     margin: auto;
 }
 
-@media (max-width: 700px) {
+.compose_mobile_stream_button i,
+.compose_mobile_private_button i {
+    margin-right: 4px;
+}
+
+@media (max-width: 550px) {
     #compose_buttons .compose_stream_button,
     #compose_buttons .compose_private_button {
         display: none;
     }
 }
 
-@media (min-width: 700px) {
+@media (min-width: 551px) {
     #compose_buttons .compose_mobile_button {
         display: none;
     }

templates/zerver/app/compose.html

@@ -18,7 +18,7 @@
                     <button type="button" class="button small rounded compose_mobile_button"
                       id="left_bar_compose_mobile_button_big"
                       title="{{ _('New message') }} (c)">
-                        <i class="fa fa-plus" aria-hidden="true"></i>
+                        +
                     </button>
                 </span>
                 <span class="new_message_button">