From 79b4c89ce467c3a6e463e2f4a8ea3cf122e27124 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sat, 24 Jan 2015 23:18:10 -1000
Subject: [PATCH] Fixup attachment preview

---
 js/views/file_input_view.js         |  3 ++-
 stylesheets/manifest.css            | 21 +++++++++++++++++++--
 stylesheets/view/_conversation.scss | 27 +++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index f34f67e45..0362c84cb 100644
--- a/js/views/file_input_view.js
+++ b/js/views/file_input_view.js
@@ -85,7 +85,8 @@ var Whisper = Whisper || {};
             this.thumb.remove();
         },
 
-        deleteFiles: function() {
+        deleteFiles: function(e) {
+            if (e) { e.stopPropagation(); }
             this.clearForm();
             this.$input.wrap('<form>').parent('form').trigger('reset');
             this.$input.unwrap();
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 469f6c239..aaffcd27c 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -151,13 +151,13 @@ button {
     background: transparent; }
   .bottom-bar .attachments {
     position: relative;
+    float: left;
     height: 100%;
     width: 36px;
-    float: left; }
+    margin-right: 10px; }
     .bottom-bar .attachments .paperclip {
       width: 100%;
       height: 100%;
-      opacity: 0.5;
       background: url("/images/paperclip.png") no-repeat;
       background-size: 90%;
       background-position: center 6px; }
@@ -171,6 +171,23 @@ button {
       left: 0;
       cursor: pointer;
       z-index: 1; }
+    .bottom-bar .attachments img.preview {
+      max-width: 100%; }
+    .bottom-bar .attachments .close {
+      font-family: sans-serif;
+      color: white;
+      position: absolute;
+      top: -10px;
+      left: 20px;
+      text-align: center;
+      cursor: default;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      padding: 0px;
+      background: #666;
+      color: #fff;
+      text-align: center; }
   .bottom-bar .send-btn {
     float: right;
     height: 100%;
diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss
index 2d04f1edf..6e4e8f692 100644
--- a/stylesheets/view/_conversation.scss
+++ b/stylesheets/view/_conversation.scss
@@ -208,17 +208,19 @@ button {
 
   .attachments {
     position: relative;
+    float: left;
     height: 100%;
     width: 36px;
+    margin-right: 10px;
 
     .paperclip {
       width: 100%;
       height: 100%;
-      opacity: 0.5;
       background: url('/images/paperclip.png') no-repeat;
       background-size: 90%;
       background-position: center 6px;
     }
+
     input[type=file] {
       display: none;
       position: absolute;
@@ -231,7 +233,28 @@ button {
       z-index: 1;
     }
 
-    float: left;
+    img.preview {
+      max-width: 100%;
+    }
+
+    .close {
+      font-family: sans-serif;
+      color: white;
+      position: absolute;
+      top: -10px;
+      left: 20px;
+      text-align: center;
+      cursor: default;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      padding: 0px;
+
+      background: #666;
+      color: #fff;
+      text-align: center;
+    }
+
   }
 
   .send-btn {