From 9249d08a96439a607800c763ceee269dd8392e30 Mon Sep 17 00:00:00 2001
From: Marco Burstein <marco@marco.how>
Date: Sun, 12 Aug 2018 14:26:00 -0700
Subject: [PATCH] compose: Create the mobile compose `+` button.

Use CSS to display a `+` button on mobile but keep the more verbose
buttons on desktop. In the future, this button will be used to display
a popop for a new message.
---
 static/styles/compose.scss        | 9 ++++++++-
 templates/zerver/app/compose.html | 7 +++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/static/styles/compose.scss b/static/styles/compose.scss
index 37079047ea..15c29ad73a 100644
--- a/static/styles/compose.scss
+++ b/static/styles/compose.scss
@@ -478,7 +478,14 @@ a#undo_markdown_preview {
 }
 
 @media (max-width: 700px) {
-    #compose_buttons .compose_reply_button {
+    #compose_buttons .compose_stream_button,
+    #compose_buttons .compose_private_button {
+        display: none;
+    }
+}
+
+@media (min-width: 700px) {
+    #compose_buttons .compose_mobile_button {
         display: none;
     }
 }
diff --git a/templates/zerver/app/compose.html b/templates/zerver/app/compose.html
index eac4071a20..bde7193a56 100644
--- a/templates/zerver/app/compose.html
+++ b/templates/zerver/app/compose.html
@@ -14,6 +14,13 @@
                     </a>
                     <span class="alert-draft pull-left">{{ _('Saved as draft') }}</span>
                 </span>
+                <span class="new_message_button">
+                    <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">
                     <button type="button" class="button small rounded compose_stream_button"
                       id="left_bar_compose_stream_button_big"