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

FREEBIE

background.html

@@ -152,8 +152,11 @@
         <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);
         }
       }

stylesheets/manifest.css

@@ -1315,6 +1315,8 @@ li.entry .error-icon-container {
     cursor: pointer; }
   .message-container .attachments .fileView,
   .message-list .attachments .fileView {
+    display: flex;
+    align-items: center;
     position: relative;
     padding: 5px;
     padding-right: 10px;
@@ -1323,13 +1325,17 @@ li.entry .error-icon-container {
     border-radius: 5px;
     cursor: pointer;
     color: #454545; }
-    .message-container .attachments .fileView .icon, .message-container .attachments .fileView .fileName,
-    .message-list .attachments .fileView .icon,
+    .message-container .attachments .fileView .fileName,
     .message-list .attachments .fileView .fileName {
+      font-weight: bold;
+      margin-bottom: 0.25em; }
+    .message-container .attachments .fileView .icon, .message-container .attachments .fileView .text,
+    .message-list .attachments .fileView .icon,
+    .message-list .attachments .fileView .text {
       opacity: 0.75; }
-    .message-container .attachments .fileView:hover .icon, .message-container .attachments .fileView:hover .fileName,
+    .message-container .attachments .fileView:hover .icon, .message-container .attachments .fileView:hover .text,
     .message-list .attachments .fileView:hover .icon,
-    .message-list .attachments .fileView:hover .fileName {
+    .message-list .attachments .fileView:hover .text {
       opacity: 1.0; }
     .message-container .attachments .fileView .icon,
     .message-list .attachments .fileView .icon {
@@ -1339,8 +1345,8 @@ li.entry .error-icon-container {
       .message-list .attachments .fileView .icon:before {
         content: '';
         display: inline-block;
-        width: 24px;
-        height: 24px;
+        width: 48px;
+        height: 48px;
         -webkit-mask: url("/images/file.svg") no-repeat center;
         -webkit-mask-size: 100%;
         background-color: black; }