bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

HoverCard: Do the JS way on DetailedStatus too

Browse source
This commit is contained in:
Alex Gleason 2020-08-03 00:40:13 -05:00
parent 35c9574c2f
commit eeaf9f0b8e
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/status.js
View file

@ -263,7 +263,7 @@ class Status extends ImmutablePureComponent {
handleProfileLeave = e => {
this.showProfileCard.cancel();
if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
this.setState({ profileCardVisible: false });
}
_properStatus() {

10
app/soapbox/features/status/components/detailed_status.js
View file

@ -18,6 +18,7 @@ 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';
import { debounce } from 'lodash';
export default class DetailedStatus extends ImmutablePureComponent {
@ -84,12 +85,17 @@ export default class DetailedStatus extends ImmutablePureComponent {
window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
}
showProfileCard = debounce(() => {
this.setState({ profileCardVisible: true });
}, 1200);
handleProfileHover = e => {
if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
if (!isMobile(window.innerWidth)) this.showProfileCard();
}
handleProfileLeave = e => {
if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
this.showProfileCard.cancel();
this.setState({ profileCardVisible: false });
}
render() {

6
app/styles/components/profile_hover_card.scss
View file

@ -16,7 +16,7 @@
width: 320px;
z-index: 998;
left: -10px;
padding-top: 20px;
padding: 20px;
margin-bottom: 10px;
&--visible {
@ -25,7 +25,7 @@
}
@media(min-width: 750px) {
left: -80px;
left: -100px;
}
.profile-hover-card__container {
@ -114,7 +114,7 @@
.detailed-status {
.profile-hover-card {
top: 0;
left: 80px;
left: 60px;
}
}