Fixup attachment preview

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();

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

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 {