Merge branch 'profile-hover-cards' into 'develop'

Profile hover cards

See merge request soapbox-pub/soapbox-fe!114

app/soapbox/components/display_name.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import VerificationBadge from './verification_badge';
 import { acctFull } from '../utils/accounts';
@@ -8,10 +9,11 @@ export default class DisplayName extends React.PureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
     others: ImmutablePropTypes.list,
+    children: PropTypes.node,
   };
 
   render() {
-    const { account, others } = this.props;
+    const { account, others, children } = this.props;
 
     let displayName, suffix;
 
@@ -40,6 +42,7 @@ export default class DisplayName extends React.PureComponent {
       <span className='display-name'>
         {displayName}
         {suffix}
+        {children}
       </span>
     );
   }

app/soapbox/components/status.js

@@ -18,6 +18,8 @@ import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
 import { NavLink } from 'react-router-dom';
+import ProfileHoverCardContainer from '../features/profile_hover_card/profile_hover_card_container';
+import { isMobile } from '../../../app/soapbox/is_mobile';
 
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
@@ -104,6 +106,7 @@ class Status extends ImmutablePureComponent {
   state = {
     showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
     statusId: undefined,
+    profileCardVisible: false,
   };
 
   // Track height changes we know about to compensate scrolling
@@ -249,6 +252,14 @@ class Status extends ImmutablePureComponent {
     this.handleToggleMediaVisibility();
   }
 
+  handleProfileHover = e => {
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
+  }
+
+  handleProfileLeave = e => {
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
+  }
+
   _properStatus() {
     const { status } = this.props;
 
@@ -437,6 +448,7 @@ class Status extends ImmutablePureComponent {
     };
 
     const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
+    const { profileCardVisible } = this.state;
 
     return (
       <HotKeys handlers={handlers}>
@@ -450,13 +462,16 @@ class Status extends ImmutablePureComponent {
                 <RelativeTimestamp timestamp={status.get('created_at')} />
               </NavLink>
 
-              <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
+              <div className='status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
                 <div className='status__avatar'>
+                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
                   {statusAvatar}
                 </div>
-
-                <DisplayName account={status.get('account')} others={otherAccounts} />
-              </NavLink>
+                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
+                  <DisplayName account={status.get('account')} others={otherAccounts} />
+                </NavLink>
+                <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
+              </div>
             </div>
 
             {!group && status.get('group') && (