fix(thread-list): Show an attachment indicator using thread metadata

internal_packages/thread-list/lib/thread-list.cjsx

@@ -85,13 +85,14 @@ class ThreadList extends React.Component
       name: "Message"
       flex: 4
       resolver: (thread) =>
-        attachments = []
+        attachment = []
-        if thread.hasAttachments
+        hasAttachments = _.find (thread.metadata ? []), (m) -> m.files.length > 0
-          attachments = <div className="thread-icon thread-icon-attachment"></div>
+        if hasAttachments
+          attachment = <div className="thread-icon thread-icon-attachment"></div>
         <span className="details">
           <span className="subject">{subject(thread.subject)}</span>
           <span className="snippet">{thread.snippet}</span>
-          {attachments}
+          {attachment}
         </span>
 
     c4 = new ListTabular.Column
@@ -111,16 +112,23 @@ class ThreadList extends React.Component
       flex: 1
       resolver: (thread) =>
         pencil = []
+        attachment = []
         hasDraft = _.find (thread.metadata ? []), (m) -> m.draft
+        hasAttachments = _.find (thread.metadata ? []), (m) -> m.files.length > 0
         if hasDraft
           pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} />
 
+        if hasAttachments
+          attachment = <div className="thread-icon thread-icon-attachment"></div>
+
         <div>
           <div style={display: 'flex'}>
             <ThreadListIcon thread={thread} />
             <ThreadListParticipants thread={thread} />
-            <span className="timestamp">{timestamp(thread.lastMessageTimestamp)}</span>
             {pencil}
+            <span style={flex:1}></span>
+            {attachment}
+            <span className="timestamp">{timestamp(thread.lastMessageTimestamp)}</span>
           </div>
           <div className="subject">{subject(thread.subject)}</div>
           <div className="snippet">{thread.snippet}</div>

internal_packages/thread-list/stylesheets/thread-list.less

@@ -83,8 +83,10 @@
       position: relative;
       text-overflow: ellipsis;
       overflow: hidden;
-      flex-shrink:0;
       top:2px;
+
+      // Shrink, but only after snippet has shrunk
+      flex-shrink:0.1;
     }
     .snippet {
       font-size:   @font-size-small;
@@ -94,6 +96,7 @@
       text-overflow: ellipsis;
       overflow: hidden;
       top:2px;
+      flex: 1;
     }
     .thread-icon {
       flex-shrink:0;
@@ -146,6 +149,8 @@
   }
   .thread-icon-attachment {
     background-image:url(../static/images/thread-list/icon-attachment-@2x.png);
+    margin-right:-15px;
+    margin-left:0;
   }
   .thread-icon-unread {
     background-image:url(../static/images/thread-list/icon-unread-@2x.png);
@@ -250,7 +255,6 @@
 
 .thread-list-narrow {
   .timestamp {
-    flex: 1;
     order: 100;
   }
   .participants {

src/flux/models/thread.coffee

@@ -116,6 +116,4 @@ class Thread extends Model
   hasLabelName: (name) -> @hasCategoryName(name)
   hasFolderName: (name) -> @hasCategoryName(name)
 
-  hasAttachments: null ## TODO
-
 module.exports = Thread