From b25380c8b66a12a9b236247cf0f7c786be49e9d9 Mon Sep 17 00:00:00 2001
From: Waseem Daher <wdaher@humbughq.com>
Date: Thu, 10 Jan 2013 17:57:12 -0500
Subject: [PATCH] More compact composebox.

Accomplished by:
- Hiding the stream/PM selector
- Eliminating the "tab to send" reminder
- Moving send and formatting links to the right
- Reducing the size of the 'subject' box
- Generally tightening up whitespace

To be fixed later in this series:
- A Tab-Enter reminder
- Completely eliminating the stream/PM selector

(imported from commit 7efe04adcbe373f99a36d3ba23b32944c17aa099)
---
 templates/zephyr/home.html      |  4 ++--
 zephyr/static/styles/zephyr.css | 31 ++++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/templates/zephyr/home.html b/templates/zephyr/home.html
index d0503b8ce3..dac43b04c3 100644
--- a/templates/zephyr/home.html
+++ b/templates/zephyr/home.html
@@ -113,8 +113,8 @@
                   <textarea class="new_message_textarea" name="content" id="new_message_content"
                             value="" placeholder="Compose your message here..." tabindex="140" maxlength="10000"></textarea>
                   <div id="send_controls">
-                    <a class="compose_help_text" href="#markdown-help" data-toggle="modal" tabindex="160">Formatting help</a>
-                    <span class="compose_help_text">(Send with Tab, then Enter)</span>
+                    <a class="compose_help_text" href="#markdown-help" data-toggle="modal" tabindex="160">Formatting</a>
+                    <br />
                     <input type="submit" value="Send" id="compose-send-button" class="btn btn-primary send_message" tabindex="150"/>
                   </div>
                   <div tabindex="151" onfocus="ui.safari_composebox_workaround();"></div>
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index f7ad85ebab..742c48f592 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -268,10 +268,20 @@ blockquote p {
     cursor: pointer;
 }
 
+#send_message_form {
+    margin: 0px;
+}
+
 #send_message_form .messagebox {
+    padding-right: 5px; /* normally 5px 14px; pull in the right a bit */
     cursor: default;
 }
 
+#send_message_form .message_content {
+    display: table-row;
+    margin-right: 0px;
+}
+
 .messagebox p {
     margin-bottom: 5px;
 }
@@ -377,8 +387,9 @@ img.inline_profile_picture {
 }
 
 textarea.new_message_textarea {
-    width: 100%;
-    min-height: 48px;
+    display: table-cell;
+    width: 99%;
+    min-height: 40px;
     max-height: 150px;
     resize: none;
 }
@@ -392,24 +403,29 @@ input.recipient_box {
     width: 20%;
 }
 #subject.recipient_box {
-    width: 64%;
+    width: 30%;
 }
 #private_message_recipient.recipient_box {
-    width: 75%;
+    width: 72%;
 }
 
 #send_controls {
-    float: right;
-
+    display: table-cell;
+    vertical-align: bottom;
+    padding-left: 21px;
+    padding-bottom: 9px;
     /* jQuery's slideDown() animation seems to compute the target height by
        drawing these elements in an (offscreen) context where they would reflow
        onto multiple lines.  We need to prevent that in order to avoid an
        animation glitch.  See: http://is.gd/EVJFZ8 */
     white-space: nowrap;
+    /* This white-space nowrap is also critical for making sure that the
+       button doesn't get smushed as the textarea expands; clearly the
+       button is taking up more than the 1% width specified below. */
+    width: 1%;
 }
 
 .compose_help_text {
-    margin-right: 20px;
     font-size: 90%;
 }
 
@@ -503,6 +519,7 @@ table.floating_recipient {
 }
 
 #stream_or_private_message {
+    display: none;
     margin: 3px;
     padding: 5px;
     width: 90%;