File attachments: show file size, bold filename, make icon bigger

FREEBIE

background.html

@@ -152,8 +152,11 @@ <h3>{{ welcomeToSignal }}</h3>
         <a class='x close' alt='remove attachment' href='#'></a>
   </script>
   <script type='text/x-tmpl-mustache' id='file-view'>
-    <span class='icon'></span>
-    <span class='fileName' alt='{{ fileName }}' title='{{ altText }}'>{{ fileName }}</a>
+    <div class='icon'></div>
+    <div class='text'>
+      <div class='fileName' alt='{{ fileName }}' title='{{ altText }}'>{{ fileName }}</div>
+      <div class='fileSize'>{{ fileSize }}</div>
+    </div>
   </script>
   <script type='text/x-tmpl-mustache' id='hasRetry'>
     {{ messageNotSent }}

js/views/attachment_view.js

@@ -9,10 +9,7 @@
       className: 'fileView',
       templateName: 'file-view',
       render_attributes: function() {
-        return {
-            fileName : this.model.fileName,
-            altText  : i18n('unsupportedAttachment')
-        };
+        return this.model;
       }
   });
 
@@ -163,7 +160,14 @@
         this.renderFileView();
     },
     renderFileView: function() {
-        this.view = new FileView({model: {fileName: this.suggestedName()}});
+        this.view = new FileView({
+          model: {
+            fileName: this.suggestedName(),
+            fileSize: window.filesize(this.model.size),
+            altText: i18n('unsupportedAttachment')
+          }
+        });
+
         this.view.$el.appendTo(this.$el.empty());
         this.view.render();
         this.update();

stylesheets/_conversation.scss

@@ -466,21 +466,30 @@ li.entry .error-icon-container {
     }
 
     .fileView {
+      display: flex;
+      align-items: center;
+
       position: relative;
       padding: 5px;
       padding-right: 10px;
+
       background-color: #fafafa;
       border: 1px solid $grey_l2;
       border-radius: $border-radius;
       cursor: pointer;
       color: $grey_d;
 
-      .icon, .fileName {
+      .fileName {
+        font-weight: bold;
+        margin-bottom: 0.25em;
+      }
+
+      .icon, .text {
         opacity: 0.75;
       }
 
       &:hover {
-        .icon, .fileName {
+        .icon, .text {
           opacity: 1.0;
         }
       }
@@ -491,8 +500,8 @@ li.entry .error-icon-container {
         &:before {
           content: '';
           display: inline-block;
-          width: $button-height;
-          height: $button-height;
+          width: $button-height * 2;
+          height: $button-height * 2;
           @include color-svg('/images/file.svg', black);
         }
       }