sforkowany z mirror/soapbox
HoverCard: Handle delay in JS instead of CSS
rodzic
5081dd73c0
commit
35c9574c2f
|
@ -20,6 +20,7 @@ import PollContainer from 'soapbox/containers/poll_container';
|
||||||
import { NavLink } from 'react-router-dom';
|
import { NavLink } from 'react-router-dom';
|
||||||
import ProfileHoverCardContainer from '../features/profile_hover_card/profile_hover_card_container';
|
import ProfileHoverCardContainer from '../features/profile_hover_card/profile_hover_card_container';
|
||||||
import { isMobile } from '../../../app/soapbox/is_mobile';
|
import { isMobile } from '../../../app/soapbox/is_mobile';
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
// We use the component (and not the container) since we do not want
|
// We use the component (and not the container) since we do not want
|
||||||
// to use the progress bar to show download progress
|
// to use the progress bar to show download progress
|
||||||
|
@ -252,11 +253,16 @@ class Status extends ImmutablePureComponent {
|
||||||
this.handleToggleMediaVisibility();
|
this.handleToggleMediaVisibility();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showProfileCard = debounce(() => {
|
||||||
|
this.setState({ profileCardVisible: true });
|
||||||
|
}, 1200);
|
||||||
|
|
||||||
handleProfileHover = e => {
|
handleProfileHover = e => {
|
||||||
if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
|
if (!isMobile(window.innerWidth)) this.showProfileCard();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleProfileLeave = e => {
|
handleProfileLeave = e => {
|
||||||
|
this.showProfileCard.cancel();
|
||||||
if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
|
if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,6 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition-property: opacity;
|
transition-property: opacity;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
transition-delay: 0.7s;
|
|
||||||
width: 320px;
|
width: 320px;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
|
|
Ładowanie…
Reference in New Issue