From add780f28e78e841eac64f8ee3660b8b473cf2b9 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Thu, 23 Jul 2015 15:18:08 -0700
Subject: [PATCH] fix(message): Show folder in expanded headers

---
 .../message-list/lib/message-item.cjsx          | 17 +++++++++++++----
 .../message-list/stylesheets/message-list.less  | 16 ++++++++++++++++
 src/flux/attributes/attribute-object.coffee     | 10 +++++++++-
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/internal_packages/message-list/lib/message-item.cjsx b/internal_packages/message-list/lib/message-item.cjsx
index 11795c4be..8f6b8cab3 100644
--- a/internal_packages/message-list/lib/message-item.cjsx
+++ b/internal_packages/message-list/lib/message-item.cjsx
@@ -107,15 +107,24 @@ class MessageItem extends React.Component
                            isDetailed={@state.detailedHeaders}
                            message_participants={@props.message.participants()} />
 
+      {@_renderFolder()}
       {@_renderHeaderExpansionControl()}
 
     </header>
 
+  _renderFolder: =>
+    return [] unless @state.detailedHeaders and @props.message.folder
+    <div className="header-row">
+      <div className="header-label">Folder:&nbsp;</div>
+      <div className="header-name">{@props.message.folder.displayName}</div>
+    </div>
+
+
   _onClickParticipants: (e) =>
     el = e.target
     while el isnt e.currentTarget
       if "collapsed-participants" in el.classList
-        @setState detailedHeaders: true
+        @setState(detailedHeaders: true)
         e.stopPropagation()
         return
       el = el.parentElement
@@ -149,13 +158,13 @@ class MessageItem extends React.Component
     if @state.detailedHeaders
       <div className="header-toggle-control"
            style={top: "18px", left: "-14px"}
-           onClick={ (e) => @setState detailedHeaders: false; e.stopPropagation()}>
+           onClick={ (e) => @setState(detailedHeaders: false); e.stopPropagation()}>
         <RetinaImg name={"message-disclosure-triangle-active.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
     else
       <div className="header-toggle-control inactive"
            style={top: "18px"}
-           onClick={ (e) => @setState detailedHeaders: true; e.stopPropagation()}>
+           onClick={ (e) => @setState(detailedHeaders: true); e.stopPropagation()}>
         <RetinaImg name={"message-disclosure-triangle.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
 
@@ -203,7 +212,7 @@ class MessageItem extends React.Component
     # throw "unknown ERR_UNKNOWN_URL_SCHEME". Show a transparent pixel so that there's
     # no "missing image" region shown, just a space.
     body = body.replace(MessageUtils.cidRegex, "src=\"#{TransparentPixel}\"")
-    
+
     body
 
   _toggleQuotedText: =>
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index 8cca9c14f..0d67f36cf 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -255,6 +255,21 @@
     padding-bottom: @spacing-standard;
     padding-top: 19px;
 
+    .header-row {
+      margin-top: 0.5em;
+      color: @text-color-very-subtle;
+
+      .header-label {
+        float: left;
+        display: block;
+        font-weight: @font-weight-normal;
+        margin-left: 0;
+      }
+
+      .header-name {
+      }
+    }
+
     .message-actions-wrap {
       text-align: right;
     }
@@ -449,6 +464,7 @@
     .participant-secondary {
       color: @text-color-very-subtle;
     }
+
     .from-contact {
       .participant-primary {
         color: @text-color;
diff --git a/src/flux/attributes/attribute-object.coffee b/src/flux/attributes/attribute-object.coffee
index ac0f58fc3..1d7095f6c 100644
--- a/src/flux/attributes/attribute-object.coffee
+++ b/src/flux/attributes/attribute-object.coffee
@@ -19,7 +19,15 @@ class AttributeObject extends Attribute
 
   fromJSON: (val) ->
     if @itemClass
-      return new @itemClass(val)
+      obj = new @itemClass(val)
+      # Important: if no ids are in the JSON, don't make them up randomly.
+      # This causes an object to be "different" each time it's de-serialized
+      # even if it's actually the same, makes React components re-render!
+      obj.id = undefined
+      # Warning: typeof(null) is object
+      if obj.fromJSON and val and typeof(val) is 'object'
+        obj.fromJSON(val)
+      return obj
     else
       return val ? ""