Adding an "Attach files" button to the message composition pane.

Changes include:
   * New markup for the button in compose.html
   * A hidden file input field in compose.html
   * Added reference to the file input field in filedrop
     initialization in compose.js
   * A feature test and a click event binding for
     the "Attach files" button in ui.js
   * New paperclip icon reference in fonts.css
   * New general hidden display classes in zephyr.css
   * New composition pane button classes in zephyr.css

Fixes to the "Attach files" button commit e673bda...

Changes include:
   * Fixed the feature test for (new XMLHttpRequest).upload so
     it works in Firefox.
   * Renamed .button to .message-control-button
   * Removed stray newlines

(imported from commit c1f0834b74fd7120ec27db64ec380ffb3fa34633)

templates/zephyr/compose.html

@@ -49,6 +49,8 @@
                   </div>
                 </div>
                 <div id="below-compose-content">
+                  <input type="file" id="file_input" class="notvisible" multiple />
+                  <a class="message-control-button icon-vector-paper-clip notdisplayed" id="attach_files" href="#" title="Attach files"></a>
                   <span id="restore-draft" onclick="compose.restore_message();">Restore last draft?</span>
                   <span id="tab-enter-message">
                     <span id="sending-indicator">Sending...</span>

zephyr/static/js/compose.js

@@ -532,6 +532,7 @@ $(function () {
     $("#new_message_content").autosize();
     $("#compose").filedrop({
         url: "json/upload_file",
+        fallback_id: "file_input",
         paramname: "file",
         maxfilesize: 25,
         data: {

zephyr/static/js/ui.js

@@ -970,6 +970,23 @@ $(function () {
         }
     });
 
+    // Run a feature test and decide whether to display
+    // the "Attach files" button
+
+    if (window.XMLHttpRequest && (new XMLHttpRequest()).upload) {
+        $("#compose #attach_files").removeClass("notdisplayed");
+    }
+
+    // Event bindings for "Compose" pane
+
+    // Click event binding for "Attach files" button
+    // Triggers a click on a hidden file input field
+
+    $("#compose").on("click", "#attach_files", function (e) {
+        e.preventDefault();
+        $("#compose #file_input").trigger("click");
+    } );
+
     $("#subscriptions_table").on("mouseover", ".subscription_header", function (e) {
         $(this).addClass("active");
     });

zephyr/static/styles/fonts.css

@@ -270,4 +270,5 @@ ul.icons li [class*=" icon-vector-"] {
 /*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
     readers do not read off random characters that represent icons */
 .icon-vector-star:before                 { content: "\f005"; }
-.icon-vector-star-empty:before           { content: "\f006"; }
+.icon-vector-star-empty:before           { content: "\f006"; }
+.icon-vector-paper-clip:before           { content: "\f0c6"; }

zephyr/static/styles/zephyr.css

@@ -66,6 +66,17 @@ li, .table th, .table td {
     font-size: 140%;
 }
 
+/* Classes for hiding and showing controls */
+
+.notdisplayed {
+    display: none !important;
+}
+
+.notvisible {
+    visibility: hidden !important;
+    width: 0px !important;
+    height: 0px !important;
+}
 
 /* Inline and block code */
 
@@ -498,6 +509,7 @@ blockquote p {
     display: table-row;
     font-size: 80%;
     white-space: nowrap;
+    padding-top: 6px;
 }
 
 .messagebox p {
@@ -1148,3 +1160,19 @@ li.expanded_subject {
 #restore-draft:hover {
     cursor:  pointer;
 }
+
+#compose a.message-control-button {
+    display: inline-block;
+    color: #777;
+    text-decoration: none;
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    border-radius: 2px;
+    text-align: center;
+}
+
+#compose a.message-control-button:hover {
+    color: #000;
+}