From ee00ad0e15818a330f77c247d8fd2eb215d3bda4 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Tue, 9 May 2017 10:10:50 -0700
Subject: [PATCH] File attachments: show file size, bold filename, make icon
 bigger

FREEBIE
---
 background.html                |  7 +++++--
 js/views/attachment_view.js    | 14 +++++++++-----
 stylesheets/_conversation.scss | 17 +++++++++++++----
 stylesheets/manifest.css       | 18 ++++++++++++------
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/background.html b/background.html
index 114ef2859..fcff3b822 100644
--- a/background.html
+++ b/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 }}
diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index a288404db..d183bbe0d 100644
--- a/js/views/attachment_view.js
+++ b/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();
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 76cc28a25..4d4c0a25b 100644
--- a/stylesheets/_conversation.scss
+++ b/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);
         }
       }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 901afd655..4f1412c05 100644
--- a/stylesheets/manifest.css
+++ b/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; }