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

@@ -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) {

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%;

stylesheets/view/_conversation.scss

@@ -220,6 +220,7 @@ button {
       background-position: center 6px;
     }
     input[type=file] {
+      display: none;
       position: absolute;
       width: 100%;
       height: 100%;