User Profile (#858)

* First pass user profile

* 💚

* More collaborator tooltip improvements

app/components/Badge.js

@@ -0,0 +1,17 @@
+// @flow
+import styled from 'styled-components';
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ admin, theme }) =>
+    admin ? theme.primary : theme.smokeDark};
+  color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  user-select: none;
+`;
+
+export default Badge;

app/components/Collaborators.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { filter } from 'lodash';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
@@ -8,6 +9,7 @@ import Flex from 'shared/components/Flex';
 import Avatar from 'components/Avatar';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
+import UserProfile from 'scenes/UserProfile';
 import ViewsStore from 'stores/ViewsStore';
 
 const MAX_DISPLAY = 6;
@@ -19,31 +21,24 @@ type Props = {
 
 @observer
 class Collaborators extends React.Component<Props> {
+  @observable openProfileId: ?string;
+
   componentDidMount() {
     this.props.views.fetchPage({ documentId: this.props.document.id });
   }
 
+  handleOpenProfile = (userId: string) => {
+    this.openProfileId = userId;
+  };
+
+  handleCloseProfile = () => {
+    this.openProfileId = undefined;
+  };
+
   render() {
     const { document, views } = this.props;
     const documentViews = views.inDocument(document.id);
-    const {
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      collaborators,
-    } = document;
-    let tooltip;
-
-    if (createdAt === updatedAt) {
-      tooltip = `${createdBy.name} published ${distanceInWordsToNow(
-        new Date(createdAt)
-      )} ago`;
-    } else {
-      tooltip = `${updatedBy.name} updated ${distanceInWordsToNow(
-        new Date(updatedAt)
-      )} ago`;
-    }
+    const { createdAt, updatedAt, updatedBy, collaborators } = document;
 
     // filter to only show views that haven't collaborated
     const collaboratorIds = collaborators.map(user => user.id);
@@ -65,35 +60,67 @@ class Collaborators extends React.Component<Props> {
       <Avatars>
         {overflow > 0 && <More>+{overflow}</More>}
         {mostRecentViewers.map(({ lastViewedAt, user }) => (
-          <StyledTooltip
+          <AvatarPile
             key={user.id}
-            tooltip={`${user.name} viewed ${distanceInWordsToNow(
-              new Date(lastViewedAt)
-            )} ago`}
+            tooltip={
+              <TooltipCentered>
+                <strong>{user.name}</strong>
+                <br />
+                viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
+              </TooltipCentered>
+            }
             placement="bottom"
           >
             <Viewer>
-              <Avatar src={user.avatarUrl} />
+              <Avatar
+                src={user.avatarUrl}
+                onClick={() => this.handleOpenProfile(user.id)}
+              />
+              <UserProfile
+                user={user}
+                isOpen={this.openProfileId === user.id}
+                onRequestClose={this.handleCloseProfile}
+              />
             </Viewer>
-          </StyledTooltip>
+          </AvatarPile>
         ))}
         {collaborators.map(user => (
-          <StyledTooltip
+          <AvatarPile
             key={user.id}
-            tooltip={collaborators.length > 1 ? user.name : tooltip}
+            tooltip={
+              <TooltipCentered>
+                <strong>{user.name}</strong>
+                <br />
+                {createdAt === updatedAt ? 'published' : 'updated'}{' '}
+                {updatedBy.id === user.id &&
+                  `${distanceInWordsToNow(new Date(updatedAt))} ago`}
+              </TooltipCentered>
+            }
             placement="bottom"
           >
             <Collaborator>
-              <Avatar src={user.avatarUrl} />
+              <Avatar
+                src={user.avatarUrl}
+                onClick={() => this.handleOpenProfile(user.id)}
+              />
+              <UserProfile
+                user={user}
+                isOpen={this.openProfileId === user.id}
+                onRequestClose={this.handleCloseProfile}
+              />
             </Collaborator>
-          </StyledTooltip>
+          </AvatarPile>
         ))}
       </Avatars>
     );
   }
 }
 
-const StyledTooltip = styled(Tooltip)`
+const TooltipCentered = styled.div`
+  text-align: center;
+`;
+
+const AvatarPile = styled(Tooltip)`
   margin-right: -8px;
 
   &:first-child {
@@ -128,6 +155,7 @@ const More = styled.div`
 const Avatars = styled(Flex)`
   align-items: center;
   flex-direction: row-reverse;
+  cursor: pointer;
 `;
 
 export default inject('views')(Collaborators);

app/components/DropdownMenu/DropdownMenu.js

@@ -93,7 +93,7 @@ const Menu = styled.div`
   background: ${props => props.theme.white};
   border-radius: 2px;
   padding: 0.5em 0;
-  min-width: 160px;
+  min-width: 180px;
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
     0 2px 4px rgba(0, 0, 0, 0.08);

app/components/List/Item.js

@@ -5,7 +5,7 @@ import Flex from 'shared/components/Flex';
 
 type Props = {
   image?: React.Node,
-  title: string,
+  title: React.Node,
   subtitle?: React.Node,
   actions?: React.Node,
 };