From f6ebe5cbd76c36dfa145394421ef634cc189e1ed Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Tue, 28 Jul 2020 20:01:16 -0500
Subject: [PATCH] profile card basic functionality, needs some UI improvements

---
 app/soapbox/components/display_name.js        | Bin 1364 -> 1459 bytes
 app/soapbox/components/status.js              | Bin 17812 -> 17632 bytes
 app/soapbox/containers/account_container.js   | Bin 2333 -> 2332 bytes
 .../profile_hover_card_container.js           | Bin 0 -> 2335 bytes
 .../features/ui/components/action_button.js   | Bin 0 -> 3452 bytes
 .../features/ui/components/user_panel.js      | Bin 4174 -> 4081 bytes
 app/styles/application.scss                   |   1 +
 app/styles/components/profile_hover_card.scss |  54 ++++++++++++++++++
 app/styles/components/status.scss             |  16 ------
 9 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 app/soapbox/features/profile_hover_card/profile_hover_card_container.js
 create mode 100644 app/soapbox/features/ui/components/action_button.js
 create mode 100644 app/styles/components/profile_hover_card.scss

diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js
index 1016c9f5a89eaef7c92a25f63e31da2bf4f20f40..30dbce9a2f8474ad448900e551260431aaad08e4 100644
GIT binary patch
delta 100
zcmcb@wV8W@l2kxZenCiOL29u=T2X$kf_edvuUi5V*eDUiD5ao~oROK6Qk0r!r2to|
gmzSTCIysHefJ+B1y?Gkr3TAEvg=(1k$!4r_0RQA7xc~qF

delta 42
vcmdnYeT8d+(ndEA#>s0Kbv8d@T)`}6qhDN*m}keO00f%WK&qCDtCkA@FKP?@

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 41ccfc0ffb233995c74c31a2062ee36e8285c050..c3af6fd2d20917ef9ccdd5488e6d5dee0c597064 100644
GIT binary patch
delta 331
zcmbQz&G?{`al=FAz<{Fsw9K4TkNmRKBIm@S6zBZBlElos)FOqnqWoM1bv-@(wA93s
z(xTL2{Q`*E_zaNZ_++4JEJBkPGK=YF7W?KW0gY9tMHmA#35XI43iONf6AO~^D}buv
zbHU0si?Yn%5&~HtmRX#cl#^<ukd~NJoVxi9-x2=Ftn#Xp_2rcXQRGXCN>e9qkT(R$
zuz+MX^C=WdaU-eOyxOXob#lFf%w$amr^!P0LTU;MHn_c;n4FwnnpfhPGC9FsX7VWq
jab&Y5+iQyRx?~m?<Rn)5CFZ8uaZP4)P~05jXu$#iB{Ows

delta 524
zcmZuuO;5r=5Df|ky$}<<Xd+`Yfhx43l3+~%4;)GKfPss$z%*>qcAM@(Ax(dP@mOQL
zc;{%+zu*sne`3Kz`EYJK@6CH}b|%lU*O%Dmbn~jt(YYfQ8lXGOgtROxIug-$kSl$v
zbeL%~3oQ}7BIc7lqlRw$eY-rLdZ3)P4OBrV2FL6+L}fcnrv}dPh6?BF-DcDckCI=>
zd&+C99g#tUj09Q<TxxZhE1N`gdNu4)l1Vem7y<7%h!zm53mKCPb1v<Qo(je5f<2Vd
z($4_$n_zk<B}9*MIbf;d$K{a1>0@>^AIcUHbb!@Cw5H5-oug<hv!cBJv6?|CmH#tK
z%+12L6yHBx^j+3kl@51RFA<E()eTSrzbtS4UL-iEX!S)QAGjD9sCga;W~<OT@fQEO
kd6qBu_OO)&19h<mH*)#Qiy01nFwypckK3JaTq(xC0SA@2TmS$7

diff --git a/app/soapbox/containers/account_container.js b/app/soapbox/containers/account_container.js
index 8e1f067deead0351676de7ebccf55bb25d13ae65..1e890a7e21037333df33be99116ab9fcf1e83da7 100644
GIT binary patch
delta 11
ScmbO$G)HKIKgZ+%j<Wz5bp#y%

delta 11
ScmbOuG*@VYKgVQ0j&lGQZUh_v

diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
new file mode 100644
index 0000000000000000000000000000000000000000..d9ae0986f8e276a2e51543ec3ad0c7e0906742c8
GIT binary patch
literal 2335
zcma)8O>f&c5WVYH%w8%Pu<UzcWt*hv*1%>FwCSlR1X>*1Y$Z}lQrQH8|9giLB~i|1
zH-HZm`R3!zJPs|YT4@WPkrfv9T2&Bhw~j9((I4GwRX;q}X#8<a->G#Q6Q+eiNr~j*
z6go*Y^5!XoRqQAJf%dv6R3j(!YPF`H!IE4kJ##GN58B*HTQ1?F(iO87`5hX=4tN$#
z5NHavt*XYdU5V!eI)14bj#EeIjL&4-XuMTa2#J(#P@mAAFljM>rUbqk)b~tc>FtPN
zBi19(tQ!L4wL?rs*M${I-Za)K`I;TIhcNlB15Kta2y@LVA(yncQyev;VvaR3iq$*y
zv~H{@&6@Qc2ugj!I90T#IADWhckY;iMbv3y;V?BZgLzkz#fYj{{lzki56U&cKn96%
z-%Du0XRzgPT0nLMZ3LjvHd=N|7yuVRtigJ;T`bA!bQ#glCq^MZ2vaj#9D}IbZ*`H9
zHi}LzNqp+W&vDP1(!zT$;^ZvtB@sM#x`^IS%8ZJV83V*|FG~ER9#P*i&2N>oOi0v#
zPZlLN@QSV|9{^VvQGiopf88=)heu%q$@s$g?~hhHrAo(qEYg;T$Hr<Q4>Q0;5PNh(
zw0e-cIiUl!bC+%<%xC<&5p;{YG6z}uk_}yTy#p8%wYtI4LKAb;$-=Yg<<kz}<<RCW
zAD1NA4D3;ul`Dq1?3{}|B)?64AEY9ivg`r9V~@BIihQ(?=SN!+HNU+g*(R}67IUoB
z53v`><AoED%fCdr;;JmwKgjdlGmwYCZYz^-G#g9m65W8KsN*HX0X+WhB<1{g75j3)
zyLXUu`v4m*9-$M<U#!9`CVoya>Cs6hEl4x*m506soaaQkmsnu;Hp_m9q<)B8ZDxbV
z)6QDIIKldAv!>*y>?q1K;Qo_Rp1VO854GI#(e0Ky$0OmlCEg7pGvf=;`q7v8gcq*r
zn|`F3vN>cibCWR!D{M)H@8)Do!B0W-&doSDUw2gvvvqVg8vTpQa|zLC(n>n<2t(7q
z`}qDcUw<+reBT3KW;|2u?=v=3Pa1?W6kMp^)Uv}_8J&7JFJ4)}seJu=vFZhH@@Lh=
z;HQ9pjkEY;cX<qShqK0Zj@K@mu-$I=0^%6LF1*y)|6ZCr-w8$OFnK_&8dE-hLHf%;
dllRlZ-Jhe}Xei9|Hj5N|&^@L{h2DtE=odKf0apM3

literal 0
HcmV?d00001

diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1c88d23230a907750a317f203289e700a2590fd
GIT binary patch
literal 3452
zcmbtW+iu)85PjdTm^?`WcD3)DZfZM80Rv4DxH0lj1c6rK+H5FN6)D@PqJPf}FS=P9
zJ1t-s+Tn0+XXXrfS*hB<70Yr1$6A#T)$|>`Tyb~QLawA_c-)N@HZ?1nhe7SKEE|&@
z1bbhr>ciKH>4`QE$D0bz4V@2n=T}H&Gt+6IU`H<5JEnDZ!}J=s{2QaXlt#=V<0u-8
zUo^%j>4VWKs}Aa6n=4FCGHLYoV9y8rA(5tLuY=yHWKd_*8yk$|BGdYhtn8~`1(F1V
zQo8~;Dk0SUd7i6Anl%a<`ABpSD*rN3nMwjKAvuJPE2+1cvq~OUh@m!s?rrg4KdWX;
zu>{vUXn_|yh`fO`97JonmNmk76j0~d#~VRM;k)1;S#aW|`@h)&_}ex6r(xPKbUq8A
zKUuPIexGr}<qc#Nw$5E9Qg|(R{soMJJd-&SJ}&TPyt_u)LOycl<x8%v-4!@%3CzwL
zVg)y!(e;rF_Q=}!aLMFbybS)bwbvyBU|IF2$qf6T-s4PY#7)yr*uMfoET9_X=?yb+
zRI&&y048giT3SUw=n0<g<qH2oH)PctuB*)Cw}bt-@S=pA*uGHGffW0GNW4jYgdifv
zmookf$wOqe`)+xK$wm%%#3uTbz_)J@TI!Vkfb*v$_yGtp#i0|=U2Bis#}O~0B(a%e
zqQHb^KG2Z?7thnzsaES1{#WvX#xHmZF+C@D+gvX7aBUQcZ?dODIg!bj1448T|4AKO
zBDSU2gXMZZ!f@t!JuatBwgwc;8Y5Yq4RpJ*WCrJ!W<0&J2g78c;RJiOR7z@Ho>Qy)
z1+n+|_@>y6ZU>zdV@bKbLSo>!aj1t06W5SCpsBFSCOtMXUr@B*J*h_<W2~eOv|487
zXmDuc{N{MWi+4oYalrPT%R=3!Sy8;b!_D$LM<SD~j&UY5|Cix3m|L#X+e{XMU0K;0
zX|BRe!S9eZOx-Xbps@8Oo<4FRu4TF8tY)RUW6$<C7<W;)G9r6m5}s1PMM)s(G!#0v
zkvo|OYi`OG`bU<m!VeAA*g;sYP)|p0ZJ-QV_(ouJVv*3#5D^s&Krn-vL_HTq;<;>u
zuz&&3tiJGJ69>I0SrW*xzcSKA4=?un;CD1rJ)Mj#y7LL|5p%(I3m<VU;Z`+VV7Lrj
z4%`S_gHTz)3L8CTu-*Dk&t1=<m}R<zNhN;qBig@7_K{FGYU3Y1U~qQ#EfqICs=Ca=
za*xAnA?>{+9nPLzt^0P=%&v_(*uHXD^z=Kg)8dM-L^h|%<rHua&=a%Rw;s-ud&e4O
z#plCUTs$2NxwrkNjwf}XS&UpwHk$%pA$5c8bjPCIxDysLa7)E6xenc(Ea_8WPb~e~
zzt{Q~80-d_)BP`yJQc-HAktU!r<=;}KPo#tr6yI5qeiou#8HBjxZHJ?P$o@h=V!M0
s`vFHz`2UkIe#;TgY9DPiGxYe>TjWQ207m^BbT%OW4C@2&1mCT`1H{{oa{vGU

literal 0
HcmV?d00001

diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js
index da515ffed6bd79e36fa59a501a0d1e9ec947ebb0..dd7fb0d88bd508dc069154209708c902b898994c 100644
GIT binary patch
delta 25
hcmX@7@KJt)Kl9`qX1&R4nJqTIV>V&j?8eH$4FG}12$lc<

delta 112
zcmew;e@<b8KeMEQLRn^UW>QY7l|n#KenCiOL29vHQht8UWN&68ek9qFqSDmKmCQEm
sIuIS3H#3_ts^}<GE2x(irxxiJB<7{&=;}gEQ@4Vdt5Cc7B?|{P0E1H|EC2ui

diff --git a/app/styles/application.scss b/app/styles/application.scss
index bb3d0ca822..b040685c9e 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -71,3 +71,4 @@
 @import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
+@import 'components/profile_hover_card';
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
new file mode 100644
index 0000000000..ed99d923f3
--- /dev/null
+++ b/app/styles/components/profile_hover_card.scss
@@ -0,0 +1,54 @@
+.display-name__account {
+  position: relative;
+}
+
+.profile-hover-card {
+  @include standard-panel;
+  position: absolute;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.5s;
+  z-index: 998;
+  opacity: 1;
+  transition-delay: 1s;
+  left: -10px;
+
+  @media(min-width: 750px) {
+    left: -80px;
+  }
+
+  .profile-hover-card__container {
+    position: relative;
+  }
+
+  .profile-hover-card__action-button {
+    z-index: 999;
+    position: absolute;
+    right: 20px;
+    top: 120px;
+  }
+
+  .user-panel {
+    box-shadow: none;
+
+    .user-panel-stats-item a strong {
+      text-decoration: none;
+    }
+  }
+
+  .profile-hover-card__badges {
+    margin: 0 20px 20px;
+    display: flex;
+
+    .badge, .relationship-tag {
+      padding: 2px 4px;
+      margin-right: 5px;
+      border-radius: 3px;
+      font-size: 11px;
+    }
+  }
+
+  .profile-hover-card__bio {
+    margin: 0 20px 20px;
+  }
+}
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index f167cf2ac7..153b0118ca 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -162,22 +162,6 @@
 .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 {