New published info location and author info

frontend/components/AuthorInfo/AuthorInfo.js

@@ -0,0 +1,42 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import type { User } from 'types';
+import { Flex } from 'reflexbox';
+
+const Container = styled(Flex)`
+  justify-content: space-between;
+  color: #bbb;
+  font-size: 13px;
+`;
+
+class AuthorInfo extends Component {
+  props: {
+    collaborators: Array<User>,
+    views: number,
+  };
+
+  render() {
+    const { collaborators, views } = this.props;
+
+    const users = collaborators.map((user, index, arr) => (
+      <span key={user.id}>
+        {user.name} {arr.length > 1 && (index < arr.length - 1 ? ',' : 'and')}
+      </span>
+    ));
+
+    return (
+      <Container align="center">
+        Recently edited by
+        {' '}
+        {users}
+        {' '}
+        and viewed
+        {` ${views} `}
+        times.
+      </Container>
+    );
+  }
+}
+
+export default AuthorInfo;

frontend/components/AuthorInfo/index.js

@@ -0,0 +1,3 @@
+// @flow
+import AuthorInfo from './AuthorInfo';
+export default AuthorInfo;

frontend/scenes/Document/Document.js

@@ -13,7 +13,7 @@ import Editor from 'components/Editor';
 import { HeaderAction, SaveAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import PublishingInfo from 'components/PublishingInfo';
-import DocumentViews from 'components/DocumentViews';
+import AuthorInfo from 'components/AuthorInfo';
 import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
@@ -142,26 +142,29 @@ type Props = {
                   updatedBy={this.document.updatedBy}
                 />
               </InfoWrapper>
-              <Editor
-                key={this.document.id}
-                text={this.document.text}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onCancel}
-                onStar={this.document.star}
-                onUnstar={this.document.unstar}
-                starred={this.document.starred}
-                readOnly={!isEditing}
-              />
+              <Content>
+                <Editor
+                  key={this.document.id}
+                  text={this.document.text}
+                  onImageUploadStart={this.onImageUploadStart}
+                  onImageUploadStop={this.onImageUploadStop}
+                  onChange={this.onChange}
+                  onSave={this.onSave}
+                  onCancel={this.onCancel}
+                  onStar={this.document.star}
+                  onUnstar={this.document.unstar}
+                  starred={this.document.starred}
+                  readOnly={!isEditing}
+                />
+              </Content>
+              <InfoWrapper visible={!isEditing} bottom>
+                <AuthorInfo
+                  collaborators={this.document.collaborators}
+                  views={this.document.views}
+                />
+              </InfoWrapper>
             </DocumentContainer>
             <Meta align="center" justify="flex-end" readOnly={!isEditing}>
-              {!isEditing &&
-                <DocumentViews
-                  count={this.document.views}
-                  documentId={this.document.id}
-                />}
               <Flex align="center">
                 <HeaderAction>
                   {isEditing
@@ -190,6 +193,10 @@ const Meta = styled(Flex)`
   padding: 10px 20px;
 `;
 
+const Content = styled(Flex)`
+  margin-bottom: 20px;
+`;
+
 const InfoWrapper = styled(Flex)`
   opacity: ${({ visible }) => (visible ? '1' : '0')};
   transition: all 100ms ease-in-out;