From 563e4e5bab8381f1a575f8ce5899892f3a8710ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20de=20Castro=20Fernandes?=
 <barbara.dcf@gmail.com>
Date: Tue, 16 Jun 2020 09:06:44 -0300
Subject: [PATCH] Show profile preview on hover

---
 app/soapbox/components/status.js              | Bin 16885 -> 17812 bytes
 .../status/components/detailed_status.js      | Bin 6328 -> 7245 bytes
 .../features/ui/components/user_panel.js      | Bin 3881 -> 4174 bytes
 app/soapbox/pages/home_page.js                | Bin 2854 -> 2881 bytes
 app/styles/components/drawer.scss             |   2 +-
 app/styles/components/status.scss             |  22 +++++++++++++++++-
 app/styles/components/user-panel.scss         |   8 ++++++-
 7 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 889afc01e0b7692d2aca4e7bffa0cf59ef0d0961..41ccfc0ffb233995c74c31a2062ee36e8285c050 100644
GIT binary patch
delta 917
zcma)4&ubGw6sDvI%|Ve|w2Hja(%q%$#wvxFWCI=o6&fgLB{@ht*?mh!HZ#l4<VRVS
z2p&Bsj{k$;sgR?1^M4S$iAT?#b#`NGVsdb9^WHb}zVCbA&zCFjUag#e%~feH<dKA9
zfzc6R7=Rz~9vHS=@{!1Xgrd}^C6{X$Lnif2BTvE<I{A`&oj(8wBkt1xv*%B#pq&6K
z;FCaLF%SC8_FEOWyI5`O>ZEh^^R+P*P2SO;fdi%mP927nd3<R1h;+M6^e8b6&Vn-#
zZiL8yFb~Wg8SM_KC%Y9WKiCgPmSIgFps40Gg|0?vep8wUe1MVuUXQ3loDrlxm>aT7
zg?%~Sv@FOf0_9^#B%1M@j!T^~>SJ-Pr6r=xh@=B-476o7_kI0KYaXQ~FF}oE8xpIk
zStSd^50MN~UzQTT@a?~OXZx9*b)wf4PIm4*Tt7^g=5i(^EEPR3<X>HoXpU3sQr{-e
z%Rh4J!{*H=Sx5}vtjTqT8cbs3#2IjLKgk6w6TJ+UH4^o0yP%G1Z`J$Fb@i)uOWklb
z)JJDcz1X^<8V*rM#;U5-*3|dy>xI7=C$7u;Og{3|o7(L$^^9j$0)uIEop?5{fA*Y!
zkY@opaSW1&6*%3RL$!DI_LFdQT7&?7xzKLy?%lta_9022RL?S(dOSVqyk3}ma>}c}
E0T$~&kpKVy

delta 64
zcmV-G0Kfl~ivjh60kGNwvls-73bXJIzz?%1AVwOqygKOvlO;crldB~dlhHpLlkPts
WlMg@#0Sc2CKxLDEKo_%IK{y0P0T<Q)

diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index a31d826bed3dd13e755151b6886e374d6fd3cac0..a88395e2a910275eed438c9e5eb3d7241c130cd2 100644
GIT binary patch
delta 913
zcma)4&59F25C+2@HWv|QLGe<8Ff(j+#wdZ9&E&SQLL!1Fi6Cz8ObuzAbPwH~N!Fo>
zFW_llZ$5xGAs1i5XYlIX7qDltKZ(h~qEA&{SAE}C^`rT-{aw^rbdqwR;EhD_iZDzd
z7JLG>=lSMMsULC!V91p8rv~#OEkR3O>)km8NCl5+g4M^jRMPVVI}npZVxtZw*6YI#
zJlW2UOm_Kg?{{rM<$#}?W)OhmLePU5Wf7lw6QaWL03%8qo3rEsWGE0B5Eg+mA@idd
zjnudU?dPp@?%M9^1IpvNp)fWm!*50NlxHYRdo!X3c}0-M;5<@eD!rTej_X2|k*HoP
zqR`1Vblm7vVv3E8l97lWBZ_8tk{Qc99>=E3a1&)D??5fo2()`_Sm`a|eI!}w%TD6g
zzWq1vYCr3<1hNQ=%l%*da%UlDQo&Bmn>zlL1=>(tIak`Yl=ZLsMRIVr_+s6AcXbIi
za5muPkWQFF5#$wodrA5lRw>^Fs|vbj>?-!Gd68S6ia%EOK`Eend&?vY`IM;_QBZ*O
za6u#cy{jQxU22f8pXb$DHAr=lV36mac-n!p#~Y~8VY8*v`B?)JjMY|oc+`CMw5)^H
c;Fs)fqwC*)NwPj=AJ_9;Kcd;Peek*V7g9$y@Bjb+

delta 57
zcmV-90LK5#IJhyeas#uf13Ln<F$UxVlZ^}Hv%d_R36tLzZIf9RA(L+xSChyWIte^4
PPGNRTX>Mz?%@}|Kn;;e`

diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js
index 83dfd20992d4188bc5e7ed66fe9bca820d143592..da515ffed6bd79e36fa59a501a0d1e9ec947ebb0 100644
GIT binary patch
delta 420
zcmZ9I!AiqG5Qee!(j0=`1dELIkc1{aKqWZ}9xQ?ZFJ3m=DMXWO*xd*v1n(XM*{A4D
z=s|pmzJxF0ZrZ4I4+Hzp&iDVb%ab*{-}OdmUNSC$W<-c7$x*<ZvmBgOD2$-u-sdxb
zkc$i_aKl*{FG>{WEO|gGeGBw?N=2INwiCuO(`+nVgd{ShFvB^iGHDnBLa5u>Ex2y}
zp(L-c1E|A(aNut;_?_D->JRs(^>1|7sRZ(%Bn4)U4>kO`2f;R@GwJ4`@tO@XtlJPx
zWU2LFw0hZp8=O&A2njiP#A{OC>iih9F1YJK7(uP>?Xeo#N5`(&4~-+ClvRbinrXOs
j<EmHtbo`@w?Lyv#`4f(^;)QnDp{ox&=xa~)WnX>+7YvK2

delta 136
zcmX@7uu^VAIMd`BrfrkgG8=Aw$1KA*IiHoAS>29n@;)x5%~h-uIUTu@^Ye;J6mk;_
zf=d!hQbY0sit-DJ6>JrXL0kn}JB4a41qG-gARi*Gm!4Xpp`M$nu4z44k6)X;D7B=t
bC{JN>55FQuZmOmZP)qIP8~nPHIR#t+J^(Ae

diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index f06bd90eb10396ec3914bb8ff5f3fff34920b318..eeeafede96e998ab5624b71804e6cef733071d31 100644
GIT binary patch
delta 49
zcmZ1`c2I0X7Bh2hs?O$A<_1PE;|WU%BVS^2a(-!EiD!y!b#7|yWC2c*&Dm_bSpcM_
B5U~IN

delta 26
icmX>owoGh87W3vJ=4!^xA6beSCm&)H-rUBvn*{)h-3i?Q

diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss
index 7dc5a1a10c..39e936158b 100644
--- a/app/styles/components/drawer.scss
+++ b/app/styles/components/drawer.scss
@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .drawer__pager {
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 0d349764b8..f167cf2ac7 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -152,7 +152,6 @@
 .status__info .status__display-name {
   display: block;
   max-width: 100%;
-  padding-right: 25px;
 }
 
 .status__info {
@@ -160,6 +159,27 @@
   z-index: 4;
 }
 
+.status__profile,
+.detailed-status__profile {
+  display: inline-block;
+
+  .user-panel {
+    position: absolute;
+    display: flex;
+    opacity: 0;
+    pointer-events: none;
+    transition-property: opacity;
+    transition-duration: 0.5s;
+    z-index: 999;
+
+    &--visible {
+      opacity: 1;
+      transition-delay: 1s;
+      pointer-events: all;
+    }
+  }
+}
+
 .status-check-box {
   border-bottom: 1px solid var(--background-color);
   display: flex;
diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss
index cf49a3d68a..44ec3cd9b4 100644
--- a/app/styles/components/user-panel.scss
+++ b/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;