Restyle attachment previews

Closes #380

// FREEBIE

background.html

@@ -50,8 +50,8 @@
       <div class="bottom-bar" id='footer'>
           <form class='send'>
               <div class='attachment-previews'></div>
-              <div class='attachments'>
+              <div class='choose-file'>
-                  <div class='paperclip choose-file thumbnail'></div>
+                  <div class='paperclip thumbnail'></div>
                   <input type='file' class='file-input'>
               </div>
               <input class="send-btn" type='submit' value='' />

js/views/conversation_view.js

@@ -31,7 +31,7 @@
 
             this.appWindow = options.appWindow;
             this.fileInput = new Whisper.FileInputView({
-                el: this.$('.attachments'),
+                el: this.$('form.send'),
                 window: this.appWindow.contentWindow
             });
 
@@ -225,13 +225,20 @@
             window.autosize(this.$messageField);
 
             var $discussionContainer = this.$('.discussion-container'),
+                $conversationHeader = this.$('.conversation-header'),
+                $attachmentPreviews = this.$('.attachment-previews'),
                 $bottomBar = this.$('.bottom-bar');
 
-            $bottomBar.outerHeight(this.$messageField.outerHeight() + 1);
+            $bottomBar.outerHeight(
+                    this.$messageField.outerHeight() +
+                    $attachmentPreviews.outerHeight() + 1);
             var $bottomBarNewHeight = $bottomBar.outerHeight();
 
             //TODO: revisit this logic for new layout.
-            $discussionContainer.outerHeight(this.$el.outerHeight() - $bottomBarNewHeight - this.$('.conversation-header').outerHeight() - 20);
+            $discussionContainer.outerHeight(
+                    this.$el.outerHeight() -
+                    $bottomBarNewHeight -
+                    $conversationHeader.outerHeight() - 20);
 
             this.view.scrollToBottomIfNeeded();
         },

js/views/file_input_view.js

@@ -46,6 +46,9 @@
             this.$('.avatar').hide();
             this.thumb.src = src;
             this.$('.attachment-previews').append(this.thumb.render().el);
+            this.thumb.$('img')[0].onload = function() {
+                this.$el.trigger('force-resize');
+            }.bind(this);
         },
 
         autoScale: function(file) {
@@ -216,6 +219,7 @@
             }
             this.thumb.remove();
             this.$('.avatar').show();
+            this.$el.trigger('force-resize');
         },
 
         deleteFiles: function(e) {

stylesheets/_conversation.scss

@@ -20,9 +20,6 @@
 .conversation {
   height: calc(100% - 20px);
   border-radius: 10px;
-  .file-input .close {
-    top: -10px;
-  }
 
   .discussion-container {
     height: calc(100% - 2 * #{$header-height} - 60px);
@@ -458,14 +455,34 @@
     background: transparent;
   }
 
-  .attachments {
+
+  .attachment-previews {
+    padding: 0 36px;
+    .attachment-preview {
+      padding: 13px 10px 0;
+    }
+    img {
+      border: 2px solid #ddd;
+      border-radius: 5px;
+      max-height: 100px;
+    }
+
+    .close {
+      background: #999;
+
+      &:hover {
+        background: $grey;
+      }
+    }
+  }
+  .choose-file {
     float: left;
-    height: 100%;
+    height: 36px;
   }
 
   .send-btn {
     float: right;
-    height: 100%;
+    height: 36px;
     width: 36px;
     border: none;
     outline: none;

stylesheets/_global.scss

@@ -139,7 +139,9 @@ button.back {
 .file-input {
   position: relative;
   margin-right: 10px;
+  .choose-file {
     cursor: pointer;
+  }
 
   .paperclip {
     width: 36px;
@@ -165,9 +167,9 @@ button.back {
     font-family: sans-serif;
     color: white;
     position: absolute;
-    top: 0;
+    top: 5px;
-    right: -8px;
+    right: 2px;
-    cursor: default;
+    cursor: pointer;
     border-radius: 50%;
     width: 20px;
     height: 20px;
@@ -361,12 +363,10 @@ $avatar-size: 44px;
 }
 
 .attachment-preview {
-  width: 100%;
+  display: inline-block;
-  height: 100%;
+  position: relative;
-  background: white;
-
   img {
-    width: 100%;
+    max-width: 100%;
   }
 
 }

stylesheets/manifest.css

@@ -119,7 +119,8 @@ button.back {
 
 .file-input {
   position: relative;
-  margin-right: 10px;
+  margin-right: 10px; }
+  .file-input .choose-file {
     cursor: pointer; }
   .file-input .paperclip {
     width: 36px;
@@ -141,9 +142,9 @@ button.back {
     font-family: sans-serif;
     color: white;
     position: absolute;
-    top: 0;
+    top: 5px;
-    right: -8px;
+    right: 2px;
-    cursor: default;
+    cursor: pointer;
     border-radius: 50%;
     width: 20px;
     height: 20px;
@@ -285,11 +286,10 @@ img.emoji {
       cursor: pointer; }
 
 .attachment-preview {
-  width: 100%;
+  display: inline-block;
-  height: 100%;
+  position: relative; }
-  background: white; }
   .attachment-preview img {
-    width: 100%; }
+    max-width: 100%; }
 
 .new-conversation .recipients-input .recipients::before {
   content: 'To: '; }
@@ -555,8 +555,6 @@ input.search {
 .conversation {
   height: calc(100% - 20px);
   border-radius: 10px; }
-  .conversation .file-input .close {
-    top: -10px; }
   .conversation .discussion-container {
     height: calc(100% - 2 * 36px - 60px); }
 
@@ -876,12 +874,24 @@ input.search {
     outline: 0;
     font-size: 24px;
     background: transparent; }
-  .bottom-bar .attachments {
+  .bottom-bar .attachment-previews {
+    padding: 0 36px; }
+    .bottom-bar .attachment-previews .attachment-preview {
+      padding: 13px 10px 0; }
+    .bottom-bar .attachment-previews img {
+      border: 2px solid #ddd;
+      border-radius: 5px;
+      max-height: 100px; }
+    .bottom-bar .attachment-previews .close {
+      background: #999; }
+      .bottom-bar .attachment-previews .close:hover {
+        background: #616161; }
+  .bottom-bar .choose-file {
     float: left;
-    height: 100%; }
+    height: 36px; }
   .bottom-bar .send-btn {
     float: right;
-    height: 100%;
+    height: 36px;
     width: 36px;
     border: none;
     outline: none;