matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Profile hover cards

See merge request soapbox-pub/soapbox-fe!114
This commit is contained in:
Alex Gleason
2020-08-03 02:27:14 +00:00
parent 7ac31efce7 29d1debdbf
commit 2c010768e9
16 changed files with 357 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/soapbox/components/status.js
View File

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