feat(read-receipts): show status on MessageItem

internal_packages/message-list/lib/message-item.cjsx

@@ -93,6 +93,11 @@ class MessageItem extends React.Component
     <header className={classes} onClick={@_onClickHeader}>
       {@_renderHeaderSideItems()}
       <div className="message-header-right">
+        <InjectedComponentSet
+          className="message-header-status"
+          matching={role:"MessageHeaderStatus"}
+          exposedProps={message: @props.message, thread: @props.thread, detailedHeaders: @state.detailedHeaders} />
+
         <MessageTimestamp className="message-time"
                           isDetailed={@state.detailedHeaders}
                           date={@props.message.date} />

internal_packages/open-tracking/lib/main.es6

@@ -1,6 +1,7 @@
 import {ComponentRegistry, ExtensionRegistry, DatabaseStore, Message, Actions} from 'nylas-exports';
 import OpenTrackingButton from './open-tracking-button';
 import OpenTrackingIcon from './open-tracking-icon';
+import OpenTrackingMessageStatus from './open-tracking-message-status';
 import OpenTrackingComposerExtension from './open-tracking-composer-extension';
 import plugin from '../package.json'
 
@@ -48,6 +49,7 @@ function afterDraftSend({draftClientId}) {
 export function activate() {
   ComponentRegistry.register(OpenTrackingButton, {role: 'Composer:ActionButton'});
   ComponentRegistry.register(OpenTrackingIcon, {role: 'ThreadListIcon'});
+  ComponentRegistry.register(OpenTrackingMessageStatus, {role: 'MessageHeaderStatus'});
   ExtensionRegistry.Composer.register(OpenTrackingComposerExtension);
   this._unlistenSendDraftSuccess = Actions.sendDraftSuccess.listen(afterDraftSend);
 }
@@ -57,6 +59,7 @@ export function serialize() {}
 export function deactivate() {
   ComponentRegistry.unregister(OpenTrackingButton);
   ComponentRegistry.unregister(OpenTrackingIcon);
+  ComponentRegistry.register(OpenTrackingMessageStatus);
   ExtensionRegistry.Composer.unregister(OpenTrackingComposerExtension);
   this._unlistenSendDraftSuccess()
 }

internal_packages/open-tracking/lib/open-tracking-icon.jsx

@@ -28,13 +28,17 @@ export default class OpenTrackingIcon extends React.Component {
     if (this.state.opened == null) {
       return <span />;
     }
+    return this.renderImage()
+  };
+
+  renderImage() {
     return (
       <RetinaImg
         className={this.state.opened ? "opened" : "unopened"}
         url="nylas://open-tracking/assets/icon-composer-eye@2x.png"
         mode={RetinaImg.Mode.ContentIsMask} />
     );
-  };
+  }
 
   render() {
     return (

internal_packages/open-tracking/lib/open-tracking-message-status.jsx

@@ -0,0 +1,13 @@
+import {React} from 'nylas-exports'
+import OpenTrackingIcon from './open-tracking-icon'
+
+export default class OpenTrackingMessageStatus extends OpenTrackingIcon {
+  static displayName = "OpenTrackingMessageStatus";
+
+  render() {
+    const txt = this.state.opened ? "Read" : "Unread"
+    return (
+      <span>{this.renderImage()}&nbsp;{txt}</span>
+    )
+  }
+}

internal_packages/open-tracking/stylesheets/main.less

@@ -2,11 +2,11 @@
 @import "ui-mixins";
 
 .open-tracking-icon img.content-mask {
-  background-color: #AAA;
+  background-color: #6b777d;
   vertical-align: text-bottom;
 }
 .open-tracking-icon img.content-mask.unopened {
-  background-color: #C00;
+  background-color: @text-color-link;
 }
 .open-tracking-icon .open-count {
   display: inline-block;
@@ -14,11 +14,11 @@
   left: -16px;
   text-align: center;
 
-  color: #3187e1;
+  background-color: @text-color-link;
   font-size: 12px;
   font-weight: bold;
 }
 .open-tracking-icon {
   width: 16px;
   margin-right: 4px;
-}
+}