Add a close button to the compose dialog (since users may not know to use Esc)

(imported from commit 47dca0b2c76449be1d885b74c1cf6b036aa459c7)

templates/zephyr/compose.html

@@ -1,9 +1,10 @@
 <div class="row-fluid">
   <div class="span12" id="compose">
     <div class="message_comp">
+      <button type="button" class="close" id='compose_close'>×</button>
       <div class="alert" id="send-status">
-	    <span class="send-status-close">&times;</span>
+        <span class="send-status-close">&times;</span>
-	    <span id="error-msg"></span>
+        <span id="error-msg"></span>
       </div>
       <form id="send_message_form" action="/json/send_message" method="post">
         {% csrf_token %}

zephyr/static/js/compose.js

@@ -165,6 +165,8 @@ exports.start = function (msg_type, opts) {
         return;
     }
 
+    $("#compose_close").show();
+
     var default_opts = {
         message_type:     msg_type,
         stream:           '',
@@ -232,6 +234,7 @@ function abort_xhr () {
 }
 
 exports.cancel = function () {
+    $("#compose_close").hide();
     compose.clear();
     compose.hide();
     abort_xhr();

zephyr/static/js/ui.js

@@ -1544,6 +1544,10 @@ $(function () {
         }
     });
 
+    $("#compose_close").click(function (e) {
+        compose.cancel();
+    });
+
     // initialize other stuff
     typeahead_helper.update_all_recipients(page_params.people_list);
     composebox_typeahead.initialize();

zephyr/static/styles/zephyr.css

@@ -767,6 +767,10 @@ blockquote p {
     z-index: 1;
 }
 
+#compose_close {
+    display: none;
+}
+
 /* Like .nav-tabs > li > a */
 #send-status {
     width: 90%;