From 501704359e6844cc61b09cb10ac706e2e1bae40d Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Tue, 10 Mar 2015 15:12:13 -0700
Subject: [PATCH] fix(participants): bcc field displays properly

Can also select text by clicking on the participant
---
 .../lib/message-participants.cjsx             | 59 ++++++++++++++-----
 .../spec/message-participants-spec.cjsx       |  2 +-
 .../stylesheets/message-list.less             |  5 ++
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/internal_packages/message-list/lib/message-participants.cjsx b/internal_packages/message-list/lib/message-participants.cjsx
index 9b5619cfb..b59c42429 100644
--- a/internal_packages/message-list/lib/message-participants.cjsx
+++ b/internal_packages/message-list/lib/message-participants.cjsx
@@ -20,11 +20,11 @@ MessageParticipants = React.createClass
       <span className="participant-name from-contact">{@_shortNames(@props.from)}</span>
       <span className="participant-label to-label">&nbsp;>&nbsp;</span>
       <span className="participant-name to-contact">{@_shortNames(@props.to)}</span>
-      <span style={if @props.cc.length > 0 then display:"inline" else display:"none"}>
+      <span style={if @props.cc?.length > 0 then display:"inline" else display:"none"}>
         <span className="participant-label cc-label">Cc:&nbsp;</span>
         <span className="participant-name cc-contact">{@_shortNames(@props.cc)}</span>
       </span>
-      <span style={if @props.bcc.length > 0 then display:"inline" else display:"none"}>
+      <span style={if @props.bcc?.length > 0 then display:"inline" else display:"none"}>
         <span className="participant-label bcc-label">Bcc:&nbsp;</span>
         <span className="participant-name cc-contact">{@_shortNames(@props.bcc)}</span>
       </span>
@@ -43,13 +43,13 @@ MessageParticipants = React.createClass
       </div>
 
       <div className="participant-type"
-           style={if @props.cc.length > 0 then display:"block" else display:"none"}>
+           style={if @props.cc?.length > 0 then display:"block" else display:"none"}>
         <div className="participant-label cc-label">Cc:&nbsp;</div>
         <div className="participant-name cc-contact">{@_fullContact(@props.cc)}</div>
       </div>
 
       <div className="participant-type"
-           style={if @props.bcc.length > 0 then display:"block" else display:"none"}>
+           style={if @props.bcc?.length > 0 then display:"block" else display:"none"}>
         <div className="participant-label bcc-label">Bcc:&nbsp;</div>
         <div className="participant-name cc-contact">{@_fullContact(@props.bcc)}</div>
       </div>
@@ -59,14 +59,43 @@ MessageParticipants = React.createClass
     _.map(contacts, (c) -> c.displayFirstName()).join(", ")
 
   _fullContact: (contacts=[]) ->
-    _.map(contacts, (c) ->
-      if c.name?.length > 0 and c.name isnt c.email
-        <div key={c.email} className="participant">
-          <span className="participant-primary">{c.name}</span>&nbsp;
-          <span className="participant-secondary"><{c.email}></span>
-        </div>
-      else
-        <div key={c.email} className="participant">
-          <span className="participant-primary">{c.email}</span>
-        </div>
-    )
+    if contacts.length is 0
+      # This is necessary to make the floats work properly
+      <div>&nbsp;</div>
+    else
+      _.map(contacts, (c, i) =>
+        if contacts.length is 1 then comma = ""
+        else if i is contacts.length-1 then comma = ""
+        else comma = ","
+
+        if c.name?.length > 0 and c.name isnt c.email
+          <div key={c.email} className="participant">
+            <span className="participant-primary" onClick={@_selectPlainText}>{c.name}</span>&nbsp;
+            <span className="participant-secondary" onClick={@_selectBracketedText}><{c.email}>{comma}</span>&nbsp;
+          </div>
+        else
+          <div key={c.email} className="participant">
+            <span className="participant-primary" onClick={@_selectCommaText}>{c.email}{comma}</span>&nbsp;
+          </div>
+      )
+
+  _selectPlainText: (e) ->
+    textNode = e.currentTarget.childNodes[0]
+    @_selectText(textNode)
+
+  _selectCommaText: (e) ->
+    textNode = e.currentTarget.childNodes[0].childNodes[0]
+    @_selectText(textNode)
+
+  _selectBracketedText: (e) ->
+    textNode = e.currentTarget.childNodes[1].childNodes[0] # because of React rendering
+    @_selectText(textNode)
+
+  _selectText: (textNode) ->
+    range = document.createRange()
+    range.setStart(textNode, 0)
+    range.setEnd(textNode, textNode.length)
+    selection = document.getSelection()
+    selection.removeAllRanges()
+    selection.addRange(range)
+
diff --git a/internal_packages/message-list/spec/message-participants-spec.cjsx b/internal_packages/message-list/spec/message-participants-spec.cjsx
index 818a58e58..5fd46dc91 100644
--- a/internal_packages/message-list/spec/message-participants-spec.cjsx
+++ b/internal_packages/message-list/spec/message-participants-spec.cjsx
@@ -90,7 +90,7 @@ describe "MessageParticipants", ->
 
     it "uses full names", ->
       to = ReactTestUtils.findRenderedDOMComponentWithClass(@participants, "to-contact")
-      expect(to.getDOMNode().innerText).toEqual "User Two <user2@nilas.com>"
+      expect(to.getDOMNode().innerText.trim()).toEqual "User Two <user2@nilas.com>"
 
 
   # TODO: We no longer display "to everyone"
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index 0aa0a8f99..f5b694608 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -166,6 +166,11 @@
     position: relative;
     padding-right: 1.2em;
 
+    .participant {
+      display: inline-block;
+      margin-right: 0.5em;
+    }
+
     .participant-type {
       margin-top: 0.5em;
       &:first-child {margin-top: 0;}