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 2e629b550859..f34f67e451b1 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 23b22d32799b..3b3e7dfcf289 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 08a436eb66c8..2d04f1edf7b9 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%;