diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index e9482d2335..75ab6dac15 100644
--- a/static/js/click_handlers.js
+++ b/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
diff --git a/static/styles/compose.scss b/static/styles/compose.scss
index 15c29ad73a..7ee951cdaf 100644
--- a/static/styles/compose.scss
+++ b/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;
}
diff --git a/templates/zerver/app/compose.html b/templates/zerver/app/compose.html
index bde7193a56..5482244c3a 100644
--- a/templates/zerver/app/compose.html
+++ b/templates/zerver/app/compose.html
@@ -18,7 +18,7 @@