diff --git a/app/soapbox/actions/profile_hover_card.js b/app/soapbox/actions/profile_hover_card.js index 83b81d984..90543148d 100644 --- a/app/soapbox/actions/profile_hover_card.js +++ b/app/soapbox/actions/profile_hover_card.js @@ -1,5 +1,6 @@ export const PROFILE_HOVER_CARD_OPEN = 'PROFILE_HOVER_CARD_OPEN'; -export const PROFILE_HOVER_CARD_CLEAR = 'PROFILE_HOVER_CARD_CLEAR'; +export const PROFILE_HOVER_CARD_UPDATE = 'PROFILE_HOVER_CARD_UPDATE'; +export const PROFILE_HOVER_CARD_CLOSE = 'PROFILE_HOVER_CARD_CLOSE'; export function openProfileHoverCard(ref, accountId) { return { @@ -9,8 +10,15 @@ export function openProfileHoverCard(ref, accountId) { }; } -export function clearProfileHoverCard() { +export function updateProfileHoverCard() { return { - type: PROFILE_HOVER_CARD_CLEAR, + type: PROFILE_HOVER_CARD_UPDATE, + }; +} + +export function closeProfileHoverCard(force = false) { + return { + type: PROFILE_HOVER_CARD_CLOSE, + force, }; } diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js index c62a36422..ae3f8bc3a 100644 --- a/app/soapbox/components/profile_hover_card.js +++ b/app/soapbox/components/profile_hover_card.js @@ -11,7 +11,10 @@ import Badge from 'soapbox/components/badge'; import classNames from 'classnames'; import { fetchRelationships } from 'soapbox/actions/accounts'; import { usePopper } from 'react-popper'; -import { clearProfileHoverCard } from 'soapbox/actions/profile_hover_card'; +import { + closeProfileHoverCard, + updateProfileHoverCard, +} from 'soapbox/actions/profile_hover_card'; const getAccount = makeGetAccount(); @@ -23,9 +26,15 @@ const getBadges = (account) => { return badges; }; +const handleMouseEnter = (dispatch) => { + return e => { + dispatch(updateProfileHoverCard()); + }; +}; + const handleMouseLeave = (dispatch) => { return e => { - dispatch(clearProfileHoverCard()); + dispatch(closeProfileHoverCard(true)); }; }; @@ -57,7 +66,7 @@ export const ProfileHoverCard = ({ visible }) => { const followedBy = account.getIn(['relationship', 'followed_by']); return ( -
+
{followedBy && diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js index 015256169..fb976a82d 100644 --- a/app/soapbox/containers/status_container.js +++ b/app/soapbox/containers/status_container.js @@ -37,7 +37,7 @@ import { import { getSettings } from '../actions/settings'; import { openProfileHoverCard, - clearProfileHoverCard, + closeProfileHoverCard, } from 'soapbox/actions/profile_hover_card'; const messages = defineMessages({ @@ -215,7 +215,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, onClearProfileHoverCard() { - dispatch(clearProfileHoverCard()); + setTimeout(() => dispatch(closeProfileHoverCard()), 300); }, }); diff --git a/app/soapbox/reducers/profile_hover_card.js b/app/soapbox/reducers/profile_hover_card.js index 09e3a92fc..5776a3e87 100644 --- a/app/soapbox/reducers/profile_hover_card.js +++ b/app/soapbox/reducers/profile_hover_card.js @@ -1,6 +1,7 @@ import { PROFILE_HOVER_CARD_OPEN, - PROFILE_HOVER_CARD_CLEAR, + PROFILE_HOVER_CARD_CLOSE, + PROFILE_HOVER_CARD_UPDATE, } from 'soapbox/actions/profile_hover_card'; import { Map as ImmutableMap } from 'immutable'; @@ -13,8 +14,13 @@ export default function profileHoverCard(state = initialState, action) { ref: action.ref, accountId: action.accountId, }); - case PROFILE_HOVER_CARD_CLEAR: - return ImmutableMap(); + case PROFILE_HOVER_CARD_UPDATE: + return state.set('hovered', true); + case PROFILE_HOVER_CARD_CLOSE: + if (state.get('hovered') === true && !action.force) + return state; + else + return ImmutableMap(); default: return state; }