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') && (

app/soapbox/containers/account_container.js

@@ -66,7 +66,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
-
   onMuteNotifications(account, notifications) {
     dispatch(muteAccount(account.get('id'), notifications));
   },

app/soapbox/features/account/components/header.js

@@ -17,12 +17,9 @@ import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import ProfileInfoPanel from '../../ui/components/profile_info_panel';
 import { debounce } from 'lodash';
 import StillImage from 'soapbox/components/still_image';
+import ActionButton from 'soapbox/features/ui/components/action_button';
 
 const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
@@ -65,8 +62,6 @@ class Header extends ImmutablePureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map,
     identity_props: ImmutablePropTypes.list,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     username: PropTypes.string,
     isStaff: PropTypes.bool.isRequired,
@@ -199,30 +194,6 @@ class Header extends ImmutablePureComponent {
     return info;
   };
 
-  getActionBtn() {
-    const { account, intl, me } = this.props;
-
-    let actionBtn = null;
-
-    if (!account || !me) return actionBtn;
-
-    if (me !== account.get('id')) {
-      if (!account.get('relationship')) { // Wait until the relationship is loaded
-        //
-      } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
-      } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
-      } else if (account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
-      }
-    } else {
-      actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
-    }
-
-    return actionBtn;
-  };
-
   render() {
     const { account, intl, username, me } = this.props;
     const { isSmallScreen } = this.state;
@@ -247,7 +218,6 @@ class Header extends ImmutablePureComponent {
     }
 
     const info = this.makeInfo();
-    const actionBtn = this.getActionBtn();
     const menu = this.makeMenu();
 
     const headerMissing = (account.get('header').indexOf('/headers/original/missing.png') > -1);
@@ -319,7 +289,7 @@ class Header extends ImmutablePureComponent {
             {
               me &&
               <div className='account__header__extra__buttons'>
-                {actionBtn}
+                <ActionButton account={account} />
                 {account.get('id') !== me &&
                   <Button className='button button-alternative-2' onClick={this.props.onDirect}>
                     <FormattedMessage

app/soapbox/features/profile_hover_card/profile_hover_card_container.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { makeGetAccount } from '../../selectors';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import UserPanel from '../ui/components/user_panel';
+import ActionButton from '../ui/components/action_button';
+import { isAdmin, isModerator } from 'soapbox/utils/accounts';
+import Badge from 'soapbox/components/badge';
+import classNames from 'classnames';
+
+const getAccount = makeGetAccount();
+
+const mapStateToProps = (state, { accountId }) => {
+  return {
+    account: getAccount(state, accountId),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ProfileHoverCardContainer extends ImmutablePureComponent {
+
+  static propTypes = {
+    visible: PropTypes.bool,
+    accountId: PropTypes.string,
+    account: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+  }
+
+  static defaultProps = {
+    visible: true,
+  }
+
+  getBadges = () => {
+    const { account } = this.props;
+    let badges = [];
+    if (isAdmin(account)) badges.push(<Badge key='admin' slug='admin' title='Admin' />);
+    if (isModerator(account)) badges.push(<Badge key='moderator' slug='moderator' title='Moderator' />);
+    if (account.getIn(['patron', 'is_patron'])) badges.push(<Badge key='patron' slug='patron' title='Patron' />);
+    return badges;
+  }
+
+  render() {
+    const { visible, accountId, account } = this.props;
+    if (!accountId) return null;
+    const accountBio = { __html: account.get('note_emojified') };
+    const followedBy  = account.getIn(['relationship', 'followed_by']);
+    const badges = this.getBadges();
+
+    return (
+      <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}>
+        <div className='profile-hover-card__container'>
+          {followedBy &&
+            <span className='relationship-tag'>
+              <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
+            </span>}
+          <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
+          <UserPanel className='profile-hover-card__user' accountId={accountId} />
+          {badges.length > 0 &&
+            <div className='profile-hover-card__badges'>
+              {badges}
+            </div>}
+          {account.getIn(['source', 'note'], '').length > 0 &&
+            <div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />}
+        </div>
+      </div>
+    );
+  }
+
+};

app/soapbox/features/status/components/detailed_status.js

@@ -16,6 +16,8 @@ import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
 import { StatusInteractionBar } from './status_interaction_bar';
+import ProfileHoverCardContainer from 'soapbox/features/profile_hover_card/profile_hover_card_container';
+import { isMobile } from 'soapbox/is_mobile';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -38,6 +40,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   state = {
     height: null,
+    profileCardVisible: false,
   };
 
   handleOpenVideo = (media, startTime) => {
@@ -81,10 +84,19 @@ export default class DetailedStatus extends ImmutablePureComponent {
     window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
   }
 
+  handleProfileHover = e => {
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
+  }
+
+  handleProfileLeave = e => {
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
+  }
+
   render() {
     const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
     const outerStyle = { boxSizing: 'border-box' };
     const { compact } = this.props;
+    const { profileCardVisible } = this.state;
 
     if (!status) {
       return null;
@@ -160,10 +172,19 @@ export default class DetailedStatus extends ImmutablePureComponent {
     return (
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
-          <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='detailed-status__display-name'>
-            <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
-            <DisplayName account={status.get('account')} />
-          </NavLink>
+          <div className='detailed-status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
+            <div className='detailed-status__display-name'>
+              <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
+                <div className='detailed-status__display-avatar'>
+                  <Avatar account={status.get('account')} size={48} />
+                </div>
+              </NavLink>
+              <DisplayName account={status.get('account')}>
+                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
+              </DisplayName>
+            </div>
+            <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
+          </div>
 
           {status.get('group') && (
             <div className='status__meta'>

app/soapbox/features/ui/components/action_button.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import Button from 'soapbox/components/button';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import classNames from 'classnames';
+import {
+  followAccount,
+  unfollowAccount,
+  blockAccount,
+  unblockAccount,
+} from 'soapbox/actions/accounts';
+
+const messages = defineMessages({
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
+  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+});
+
+const mapStateToProps = state => {
+  const me = state.get('me');
+  return {
+    me,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  onFollow(account) {
+    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
+      dispatch(unfollowAccount(account.get('id')));
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  },
+
+  onBlock(account) {
+    if (account.getIn(['relationship', 'blocking'])) {
+      dispatch(unblockAccount(account.get('id')));
+    } else {
+      dispatch(blockAccount(account.get('id')));
+    }
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ActionButton extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    onFollow: PropTypes.func.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleFollow = () => {
+    this.props.onFollow(this.props.account);
+  }
+
+  handleBlock = () => {
+    this.props.onBlock(this.props.account);
+  }
+
+  render() {
+    const { account, intl, me } = this.props;
+    let actionBtn = null;
+
+    if (!account || !me) return actionBtn;
+
+    if (me !== account.get('id')) {
+      if (!account.get('relationship')) { // Wait until the relationship is loaded
+        //
+      } else if (account.getIn(['relationship', 'requested'])) {
+        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
+      } else if (!account.getIn(['relationship', 'blocking'])) {
+        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
+      } else if (account.getIn(['relationship', 'blocking'])) {
+        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
+      }
+    } else {
+      actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
+    }
+    return actionBtn;
+  }
+
+}

app/soapbox/features/ui/components/user_panel.js

@@ -84,17 +84,17 @@ class UserPanel extends ImmutablePureComponent {
 
 };
 
-
-const mapStateToProps = state => {
-  const me = state.get('me');
+const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
-  return {
-    account: getAccount(state, me),
-  };
+  const mapStateToProps = (state, { accountId }) => ({
+    account: getAccount(state, accountId),
+  });
+
+  return mapStateToProps;
 };
 
 export default injectIntl(
-  connect(mapStateToProps, null, null, {
+  connect(makeMapStateToProps, null, null, {
     forwardRef: true,
   })(UserPanel));

app/soapbox/pages/home_page.js

@@ -15,6 +15,7 @@ import { getFeatures } from 'soapbox/utils/features';
 const mapStateToProps = state => {
   const me = state.get('me');
   return {
+    me,
     account: state.getIn(['accounts', me]),
     hasPatron: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']),
     features: getFeatures(state.get('instance')),
@@ -30,7 +31,7 @@ class HomePage extends ImmutablePureComponent {
   }
 
   render() {
-    const { children, account, hasPatron, features } = this.props;
+    const { me, children, account, hasPatron, features } = this.props;
 
     return (
       <div className='page'>
@@ -39,7 +40,7 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
               <div className='columns-area__panels__pane__inner'>
-                <UserPanel />
+                <UserPanel accountId={me} />
                 {hasPatron && <FundingPanel />}
                 <PromoPanel />
                 <LinkFooter />

app/styles/application.scss

@@ -71,3 +71,4 @@
 @import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
+@import 'components/profile_hover_card';

app/styles/basics.scss

@@ -218,3 +218,14 @@ noscript {
     }
   }
 }
+
+.floating-link {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  z-index: 9999;
+}

app/styles/components/display-name.scss

@@ -41,6 +41,7 @@ a.account__display-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  position: relative;
 }
 
 .display-name__html {

app/styles/components/drawer.scss

@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .drawer__pager {

app/styles/components/profile_hover_card.scss

@@ -0,0 +1,96 @@
+.display-name__account {
+  position: relative;
+  cursor: pointer;
+}
+
+.display-name .profile-hover-card {
+  white-space: normal;
+}
+
+.profile-hover-card {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.2s;
+  transition-delay: 0.7s;
+  width: 300px;
+  z-index: 998;
+  left: -10px;
+  padding-top: 20px;
+  margin-bottom: 10px;
+
+  &--visible {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  @media(min-width: 750px) {
+    left: -80px;
+  }
+
+  .profile-hover-card__container {
+    @include standard-panel;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .profile-hover-card__action-button {
+    z-index: 999;
+    position: absolute;
+    right: 20px;
+    top: 120px;
+  }
+
+  .user-panel {
+    box-shadow: none;
+    width: auto;
+
+    .user-panel-stats-item a strong {
+      text-decoration: none;
+    }
+  }
+
+  .relationship-tag {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 1;
+  }
+
+  .profile-hover-card__badges {
+    margin: 0 20px 20px;
+    display: flex;
+
+    .badge {
+      padding: 2px 4px;
+      margin-right: 5px;
+      border-radius: 3px;
+      font-size: 11px;
+      opacity: 1;
+    }
+  }
+
+  .profile-hover-card__bio {
+    margin: 0 20px 20px;
+    max-height: 4em;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 20px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
+    }
+  }
+}
+
+.detailed-status {
+  .profile-hover-card {
+    top: 0;
+    left: 80px;
+  }
+}

app/styles/components/status.scss

@@ -210,7 +210,6 @@
 .status__info .status__display-name {
   display: block;
   max-width: 100%;
-  padding-right: 25px;
 }
 
 .status__info {
@@ -218,6 +217,11 @@
   z-index: 4;
 }
 
+.status__profile,
+.detailed-status__profile {
+  display: inline-block;
+}
+
 .status-check-box {
   border-bottom: 1px solid var(--background-color);
   display: flex;

app/styles/components/user-panel.scss

@@ -3,7 +3,13 @@
   display: flex;
   width: 265px;
   flex-direction: column;
-  overflow-y: hidden;
+
+  &,
+  .user-panel__account__name,
+  .user-panel__account__username {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   &__header {
     display: block;