From 58e7f3c7e1786466791655d2293d63fca437e6ec Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sat, 24 Jan 2015 10:00:56 -1000
Subject: [PATCH] Fix file input click zone

Previously, the ugly file input was hidden with opacity, and styled as a
square paperclip icon, but its drop and click zones were not constrained
to the visible square. They remained active across the whole 'Choose
File' button, which overlapped with the textarea. Instead, hide the file
input complete (display: none) and transmit click events from the
paperclip to the input programmatically.

Eventually, we'll need to address drag and drop events, but I want to do
that at the window level. Otherwise dropping a file outside the file
input drop zone causes the browser to navigate to the file://... url.
---
 js/views/file_input_view.js         | 7 ++++++-
 stylesheets/manifest.css            | 1 +
 stylesheets/view/_conversation.scss | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index 2e629b55..f34f67e4 100644
--- a/js/views/file_input_view.js
+++ b/js/views/file_input_view.js
@@ -29,7 +29,12 @@ var Whisper = Whisper || {};
 
         events: {
             'change': 'previewImages',
-            'click .close': 'deleteFiles'
+            'click .close': 'deleteFiles',
+            'click .paperclip': 'open'
+        },
+
+        open: function() {
+            this.$input.click();
         },
 
         addThumb: function(e) {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 23b22d32..3b3e7dfc 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -159,6 +159,7 @@ button {
       background-size: 90%;
       background-position: center 6px; }
     .bottom-bar .attachments input[type=file] {
+      display: none;
       position: absolute;
       width: 100%;
       height: 100%;
diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss
index 08a436eb..2d04f1ed 100644
--- a/stylesheets/view/_conversation.scss
+++ b/stylesheets/view/_conversation.scss
@@ -220,6 +220,7 @@ button {
       background-position: center 6px;
     }
     input[type=file] {
+      display: none;
       position: absolute;
       width: 100%;
       height: 100%;