Added multiple avatars to publishing info

frontend/components/Document/Document.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 
 import PublishingInfo from 'components/PublishingInfo';
@@ -50,10 +51,11 @@ class Document extends React.Component {
     return (
       <div className={ styles.container }>
         <PublishingInfo
-          name={ this.props.document.createdBy.name }
-          avatarUrl={ this.props.document.createdBy.avatarUrl }
           createdAt={ this.props.document.createdAt }
+          createdBy={ this.props.document.createdBy }
           updatedAt={ this.props.document.updatedAt }
+          updatedBy={ this.props.document.updatedBy }
+          collaborators={ toJS(this.props.document.collaborators) }
         />
         <DocumentHtml html={ this.props.document.html } />
       </div>

frontend/components/PublishingInfo/PublishingInfo.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import moment from 'moment';
 
 import { Avatar } from 'rebass';
@@ -6,27 +6,45 @@ import { Flex } from 'reflexbox';
 
 import styles from './PublishingInfo.scss';
 
-const PublishingInfo = (props) => {
+class PublishingInfo extends React.Component {
-  return (
+  static propTypes = {
-    <Flex align="center" className={ styles.user }>
+    collaborators: PropTypes.object.isRequired,
-      <Avatar src={ props.avatarUrl } size={ 24 } />
+    createdAt: PropTypes.string.isRequired,
-      <span className={ styles.userName }>
+    createdBy: PropTypes.object.isRequired,
-        { props.name } published { moment(props.createdAt).fromNow() }
+    updatedAt: PropTypes.string.isRequired,
-        { props.createdAt !== props.updatedAt ? (
+    updatedBy: PropTypes.object.isRequired,
-          <span>
+  };
-            &nbsp;and modified { moment(props.updatedAt).fromNow() }
-          </span>
-        ) : null }
-      </span>
-    </Flex>
-  );
-};
 
-PublishingInfo.propTypes = {
+  render() {
-  avatarUrl: React.PropTypes.string.isRequired,
+    return (
-  name: React.PropTypes.string.isRequired,
+      <Flex align="center" className={ styles.user }>
-  createdAt: React.PropTypes.string.isRequired,
+        <Flex className={ styles.avatarLine }>
-  updatedAt: React.PropTypes.string.isRequired,
+          { this.props.collaborators.reverse().map(user => (
-};
+            <Avatar
+              src={ user.avatarUrl }
+              size={ 26 }
+              style={{
+                marginRight: '-12px',
+                border: '2px solid #FFFFFF',
+              }}
+              title={ user.name }
+            />
+          )) }
+        </Flex>
+        <span className={ styles.userName }>
+          { this.props.createdBy.name } published { moment(this.props.createdAt).fromNow() }
+          { this.props.createdAt !== this.props.updatedAt ? (
+            <span>
+              &nbsp;and
+              { this.props.createdBy.id !== this.props.updatedBy.id &&
+                ` ${this.props.updatedBy.name} ` }
+              modified { moment(this.props.updatedAt).fromNow() }
+            </span>
+          ) : null }
+        </span>
+      </Flex>
+    );
+  }
+}
 
 export default PublishingInfo;

frontend/components/PublishingInfo/PublishingInfo.scss

@@ -1,3 +1,8 @@
+.avatarLine {
+  flex-direction: row-reverse;
+  margin-right: 10px;
+}
+
 .user {
   margin-bottom: 30px;
   color: #ccc;