Bug 1275104 - static text chat display names, r=mancas

mozilla · Jun 1, 2016 · e86bd18 · e86bd18
1 parent fca1f13
commit e86bd18
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 25 deletions.
diff --git a/shared/css/sidebar.css b/shared/css/sidebar.css
@@ -259,42 +259,57 @@ html[dir="rtl"] .text-chat-entry.received {
   margin-right: 10px;
 }
 
-.text-chat-entry > p {
-  position: relative;
-  z-index: 10;
+.text-chat-entry p {
   /* Drop the default margins from the 'p' element. */
   margin: 0;
-  padding: .8rem;
+  word-wrap: break-word;
+  line-height: 1.3; /* times the element's font-size */
+}
+
+.speech-bubble {
   /* leave some room for the chat bubble arrow */
   max-width: 70%;
+  position: relative;
+  padding: 0.8rem;
+  z-index: 10;
   border-radius: 15px;
   border: 1px solid #d8d8d8;
   background: #fff;
-  word-wrap: break-word;
+
+  /* part of ensuring that the ordering of the timestamp and the text is
+     different for sent/received status */
   flex: 0 1 auto;
   order: 1;
 }
 
+.text-chat-entry.received .text-chat-entry-displayname {
+  color: #5cccee; /* same as the border */
+}
+
+.text-chat-entry.sent .text-chat-entry-displayname {
+  color: #d8d8d8; /* same as the border */
+}
+
 .text-chat-entry > .context-wrapper {
   flex: 0 1 auto;
   order: 1;
 }
 
-.text-chat-entry.sent > p {
+.text-chat-entry.sent .speech-bubble {
   border-bottom-right-radius: 0;
 }
 
-.text-chat-entry.received > p {
+.text-chat-entry.received .speech-bubble {
   border-top-left-radius: 0;
   border-color: #5cccee;
 }
 
-html[dir="rtl"] .text-chat-entry.sent > p {
+html[dir="rtl"] .text-chat-entry.sent .speech-bubble {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 15px;
 }
 
-html[dir="rtl"] .text-chat-entry.received > p {
+html[dir="rtl"] .text-chat-entry.received .speech-bubble {
   border-top-right-radius: 0;
   border-top-left-radius: 15px;
 }
@@ -315,7 +330,7 @@ html[dir="rtl"] .text-chat-entry.received > p {
 
 /* Pseudo element used to cover part between chat bubble and chat arrow.
    dimensions may change for each position */
-.text-chat-entry > p:after {
+.text-chat-entry .speech-bubble:after {
   position: absolute;
   background: #fff;
   content: "";
@@ -324,46 +339,46 @@ html[dir="rtl"] .text-chat-entry.received > p {
   height: 7px;
 }
 
-.text-chat-entry.sent > p:after {
+.text-chat-entry.sent .speech-bubble:after {
   right: -1px;
   bottom: 0;
   width: 7px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
 
-.text-chat-entry.received > p:after {
+.text-chat-entry.received .speech-bubble:after {
   top: 0;
   left: -1px;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
-html[dir="rtl"] .text-chat-entry.sent > p:after {
+html[dir="rtl"] .text-chat-entry.sent .speech-bubble:after {
   /* Reset */
   right: auto;
   left: -1px;
   bottom: 0;
 }
 
-html[dir="rtl"] .text-chat-entry.received > p:after {
+html[dir="rtl"] .text-chat-entry.received .speech-bubble:after {
   /* Reset */
   top: 0;
   right: -1px;
   width: 9px;
   height: 6px;
 }
 
-/* Text chat entry arrow */
-.text-chat-arrow {
+/* Speech bubble arrow */
+.speech-bubble-arrow {
   width: 18px;
   background-repeat: no-repeat;
   flex: 0 1 auto;
   position: relative;
   z-index: 5;
 }
 
-.text-chat-entry.sent .text-chat-arrow {
+.text-chat-entry.sent .speech-bubble-arrow {
   margin-bottom: -1px;
   margin-left: -11px;
   height: 10px;
@@ -372,14 +387,28 @@ html[dir="rtl"] .text-chat-entry.received > p:after {
   align-self: flex-end;
 }
 
-.text-chat-entry.received .text-chat-arrow {
+.text-chat-entry.received .speech-bubble-arrow {
   margin-left: 0;
   margin-right: -9px;
   height: 10px;
   background-image: url("../img/chatbubble-arrow-left.svg");
   align-self: auto;
 }
 
+.text-chat-entry-displayname {
+  position: relative;
+
+  /* bolder and smaller are both relative to the parent */
+  font-weight: bolder;
+  font-size: smaller;
+
+ /* outdent this a bit from the main text */
+  margin-left: -0.2rem;
+
+ /* times the font-size */
+  line-height: 2;
+}
+
 .text-chat-notif {
   display: flex;
   margin-bottom: .5em;
@@ -417,17 +446,17 @@ html[dir="rtl"] .content-wrapper > p {
   margin-right: 0px;
 }
 
-html[dir="rtl"] .text-chat-arrow {
+html[dir="rtl"] .speech-bubble-arrow {
   transform: scaleX(-1);
 }
 
-html[dir="rtl"] .text-chat-entry.sent .text-chat-arrow {
+html[dir="rtl"] .text-chat-entry.sent .speech-bubble-arrow {
   /* Reset margin. */
   margin-left: 0;
   margin-right: -11px;
 }
 
-html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
+html[dir="rtl"] .text-chat-entry.received .speech-bubble-arrow {
   /* Reset margin. */
   margin-right: 0;
   margin-left: -10px;

diff --git a/shared/js/textChatView.jsx b/shared/js/textChatView.jsx
@@ -94,12 +94,19 @@ loop.shared.views.chat = (function(mozL10n) {
         };
       }
 
+      // XXX factor out the speech bubble into its own component
       return (
         <div className={classes}>
-          <sharedViews.LinkifiedTextView
-            linkClickHandler={linkClickHandler}
-            rawText={this.props.message} />
-          <span className="text-chat-arrow" />
+          <span className="speech-bubble-arrow" />
+          <span className="speech-bubble">
+            <span className="text-chat-entry-displayname">
+              {this.props.type === CHAT_MESSAGE_TYPES.RECEIVED ?
+                "Your Friend" : "You"}
+            </span>
+            <sharedViews.LinkifiedTextView
+              linkClickHandler={linkClickHandler}
+              rawText={this.props.message} />
+          </span>
           {this.props.showTimestamp ? this._renderTimestamp() : null}
         </div>
       );