From f8397e42c261e176d6444749cfd35d75f4a70af2 Mon Sep 17 00:00:00 2001
From: Allen Rabinovich <allenr@humbughq.com>
Date: Tue, 23 Apr 2013 15:40:47 -0700
Subject: [PATCH] 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   |  2 ++
 zephyr/static/js/compose.js     |  1 +
 zephyr/static/js/ui.js          | 17 +++++++++++++++++
 zephyr/static/styles/fonts.css  |  3 ++-
 zephyr/static/styles/zephyr.css | 28 ++++++++++++++++++++++++++++
 5 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/templates/zephyr/compose.html b/templates/zephyr/compose.html
index 69d29d27d4..19db5c9313 100644
--- a/templates/zephyr/compose.html
+++ b/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>
diff --git a/zephyr/static/js/compose.js b/zephyr/static/js/compose.js
index e5e50c1dff..28201c7d8e 100644
--- a/zephyr/static/js/compose.js
+++ b/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: {
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index df20a2564f..b0bbfab304 100644
--- a/zephyr/static/js/ui.js
+++ b/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");
     });
diff --git a/zephyr/static/styles/fonts.css b/zephyr/static/styles/fonts.css
index e34ae6bac7..b8b917fdfd 100644
--- a/zephyr/static/styles/fonts.css
+++ b/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"; }
\ No newline at end of file
+.icon-vector-star-empty:before           { content: "\f006"; }
+.icon-vector-paper-clip:before           { content: "\f0c6"; }
\ No newline at end of file
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 94ad58910c..4d7e23bc7a 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/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;
+}