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,6 +142,7 @@ type Props = {
                   updatedBy={this.document.updatedBy}
                 />
               </InfoWrapper>
+              <Content>
                 <Editor
                   key={this.document.id}
                   text={this.document.text}
@@ -155,13 +156,15 @@ type Props = {
                   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;