From 43adf819aeae73a02c40a7d4b3ce2fd261fe3f14 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Tue, 1 Feb 2022 04:36:17 +0100 Subject: [PATCH] Spoiler: Auto-hide in 5 seconds, better background --- src/assets/spoiler-dots-black.png | Bin 1813 -> 1364 bytes src/assets/spoiler-dots-white.png | Bin 1863 -> 1364 bytes src/components/common/spoiler/Spoiler.scss | 2 +- src/components/common/spoiler/Spoiler.tsx | 28 ++++++++++++++------- 4 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/assets/spoiler-dots-black.png b/src/assets/spoiler-dots-black.png index bb2e62c6540a5f6dd2b559f29471b5b5648f5cfe..9d5c06f37e929d68e09f47e980bbc2b8f86d8b55 100644 GIT binary patch literal 1364 zcmchX{Xf$Q0LS-)8RNS`W5^yno|;1v4r4Q2CW zXfdGPH|r)dvOs8%gS|HwKfk1Awc+-*!*h{%ax^S`0E0BKAJbWp_wF}GUMln*I3;a0T2KZLs_`FtGiUM9BMe>oy8Z}sUk#M;Cj|Il`#TEYqIr}M~k{!IhXcx zd}@IqkDLl1X{d@rSgeUgWRjS3`SFaG2XtUWY>)Ex4uNa8Z+pOkGNCP>(J(dP(K67> z$R5=hG3yhjxqBB&W)CaIRU27{b{#scKM@uYeDVsXC2t{nGNTq3nur>|t7iCDQp@-> z%s}eFwgYqqn|7whr?9mQ#{E~hkm$6?Yl$YRa?f*2M{6M|v;Q*xPRuILkernG$cLA# z0sf=BrepTmUXY{HdMR4EH;SDsF8O?FnIG9szEjC7(&M%KiRRrZrWoPm?)joqJBw@% zbU6@jkRH1_Ih`Y1rc^Nx0zA$Bh^#}XD`jr-h9iOn@UP0j84`mj$ygk&lE8g~=}|vb zKkcUO^2%b^`j?U$>e4%3nKg$+D%M8W1FAs(56;=rhI-*kVA~U0s+(!jN5}k1J+xff z&6&=RGOuv_l;vYmOz9&V;`XN;o_w9akIOcDjn*TUhjbnmwRf#&ZkUKlKXh~i05S|j z=~LmEG=u0}T*)gG+1Jl$)dzoGb3mO8!Hh|N8~&2q7-OmVLzkilOkDmH)J)bAWA(b5 zUmf7|uW@T%=zF=3(BRHkpO5S@uxE#xK9R8J_XpOu1izTq)WH0Zft#)OYjM4*6Yin$ zdz#L(QoWG#e(T4?LBc|BT@}kEZ&{xPjAEEqy_=p$Rt)`LHcs9R@UM55z8&K4$~Db* zc~{!YerM_B5)K~N80IZ#mKanU3nWMa{W>ql9|&Ys#{Q&H`aF z?u&s&x!)YpaH(u6^wBeoQfk`WKr@8^2VlSESF^cORXLIp=w4ITJib7uNDKAjFwse6D zzL}s7S91XAYeyuq)w|DbF2&iHQ|_HKqQ!P(pbP*X5GoXg-N%oSW%GnBD zyuI-FY#qrI`rX>FY&EHtx?6>#k7yYmNxkZKYh^~ N^rO(oOHHQqX>+GNKhh@l8T5z%&=|(K?sEk zx~lAILy9P(=sU>PJ`6U^4EJ;~XXZWMGjDUVuQTU7=lT3UAAd)PJp!!bIaZqA!=Le1 zk3&($JhuS0a)KIwD%?^6Vm6k*H)!_7mnNSAIK&c|KEc40{^$ z1!B(K!xFEV-=I*y1vK{s9Cn*WY$@Pj-eQ?yw{#9{$;FlS4w}7=z$JA@wclbAP&{Q+ zUt|^i6q=)E2Y(0!aFh#N?{V%(US=FgqJImjfc1%}IMN+hGS6}QaBtO0);OX(!4)=p z>%|ejp}ov9SYdsawBw7Ti_%y~@gN&5+gB{`uH_RUA@_*Zv0IhSqFIaz+^o5XW;XaP zX7@=n8^FY-Yd7)!C0#hF&hkd5HvljhuuuWp(fnz&U4H)o zlqbM>7GiGQy2EKxHcSOuE8uf9w>iR;#>qp`Re!G~N;H23SXv^?bZ-mbFiSk(R0&N` z)z-;{NuqV)TydGJyO%52Y2mPMy;W=jK^$9cpnGQHKE!1mYcf*Kko+2#0#0Mi^{ZPa~LTKn}tP-yb) z6@Rps;`0J8an(W4BEdzKiP#1xPoOzqy`2P}L^JPU^~js{=iRQ(b~LTl?qcs4=?V6* z+tYUuWZSy8Kq-Lz{L3z{f?v&h>@o;ad4PKk&9-=&9`4r493?@5%Eh*1T}^t@Ou7t` zq#O!(jI&%DCi&6Q29{KygnuG%{Lu8NYN7poKb!I83{rm)&_1zeBj zS0j)_I+6ZzLiPGb2^>Q6vR8`_88oO&;psOuEnZkDtI2==a@pE?gt^YblB|mI?!K9a z5)4-+%^X8>&`UYvw-u7D%ZrfPCI)}vyF`2xOj@`p1FXB4pz=oWXR}8yb-`Gn$IKn?)SdU-!C}j z3@elZAs5EnS* zsuRFGnitIPNv?8nu$9B{Uwmf?Jb#Dgp};+B?{_+ORn$YL5;L}>j!IyL=UHV~ndTB7 zC$e2wy7xEjVj<~t0?So2`eUtXf96k4goz|{vRSvkb(0`vjWbC2KO>NmkN}?7ov8W04KL6a=VPIYxupJ3PrZg0+dkBUWRl96FzwTYrFZK;dYA z|Jl^QWyWHSsy;=t#wj+UoC^iYWWK2Z1%*%S4gTg%18?_q_#L|W*XI79%qZ0Mq;}s7 zwr^%~FZm`$x_s^r8ku z-;~wZNg^y#woI*3Pn7{z0ILsZ*2En!*85u_SWX&!zH+t^Xv#B=QN*< zd1X4HS{lYjYYuYI0+)&2%Tnd|%8bRg^diBHXufUa5pH9hcbN$X&>XhXehEyY(O#9+ z2W^r`T^j8;-ewca1Bcl$Z7BuHNrbg_%$LYYfHcFR0mn9|eE1El^|Fa~#GAn?6{J;&-o2;s%p%~*)(UIEy z+>&V~`o}<$MD%O9dGNH<|66*7v3;j*Rq`J`7Tu{ECvA!V015yANkvXXu0mjflZJ%G diff --git a/src/assets/spoiler-dots-white.png b/src/assets/spoiler-dots-white.png index efce37105cad84a607b30b35811fbd212f90bd22..366c0de7a2515b9c5252993362c99a55584a09e7 100644 GIT binary patch literal 1364 zcmchX{W}u~0LM2Qo0qW_8bkIXFQ?{^gu~bjX?9CjddgeKN>ZI{;cQ-Ja+;$?3~^{S zWED5+utKQE=nhS#ol_|ZLsP=-uek5?e7~O`KfitRsT49y&s+}x0KkF*i8Kuvn%Y7^ znq7`bf2hGZYDgGK!>#`-i;IgcLgF2b68kfaatHv_0z=_QYda@*-$3fosDxw&i(6E7 zQ`jo)85nu4oLyWq$B}FS0Py)BA|Z?cEG*3}UJf+K@sZ)ep^0VmO?75JR!pf^5%BRC zF}bbqgj|w4pqD^z4H5!($!jw+@I2zXa~IA~bS0VHWGnaW2bhbTMB-yfsA(y%p^;|T-#7zP6Z zu9CxRp?p3Db3X@N6TA|gS-AFWR?FVf8T-g_sz%C=?B-5r>FpOHKBs~%jvOoLZDU_P zzz(Q`kND(Q!kHu0Y@Dh#PA`X$w7^TIzdC3L#-sa`w|59VdjmT{mXs;&JbL5Il#gVn zpPn~vIA%T2oayafDxE)~m{f1(9^QTUjLB4Fbl9mYY)Ro#-gI^yCL$Fvc~9HyFQ#O2 z7Hrz(!*YTf4!7*gN=|3#n@$F=akSzxW3HuIss+C1lU(gZgq*=&_;=&ixMoCV>f-=z z8U*-#RZ23)$h~>u(>qHX z4)(auPKey@GFh>PYsoVt#VvRT(4Y zUA^pCUaU=}>*w46%Tm$+(F}7S{mAs26n-W*GX-)CAx8gLrQ|YQ%@T;cjdm+IM-d*oT_`3_N zcpmS|`&sX8{XC+8Lz|=ACEYU98VjKmhNE5Q=39O%pKMf^rwjffz2~ zrW3!KLIgnzFtg=~nTW^xarzzm>lf#Xi`5_OzRQshr8Uve+Y*0_NepGKE}ZU#a~1oDxKFVh??i`7AL5+MrDO!`TA!du``YqF z4)A7*4piF(U}6xR%F^jQx3!$;U_-ipR+8S(WRCDGBxl&3K^f^~N6!Ho^QKwLifVT| zXzBLi6Z7>1E6{iAqp~$-9eIx$LmSh#IGS-a=+^3{2vlI+tel~A0=t1HcG!sc59$b- PuL1;-D8v@OsI310mI0=n delta 1859 zcmV-J2fX;y3datR8Gi%-003^aM0)@L00DDSM?wIu&K&6g00#j{L_t(|+MSwRh!#~C z$DeZ;hL>THMHX3PQ6v@-MIsal!5axh5-~zA3>HNSqY#XONKitO5{-yL)Ua*>K?oO0 z@Jh2QLkdx%uq*>@wNx<86!+J~oSFB0&6#;)F7{>Soaa2B|9|J>tRRs`AuQwov(4}B z&tR(up{NEtH$zyS>;edr6!g}D2(RPL~%wsM$ z92pb$J`aq8SMOFZp74T`{A7Zue3zR@72~E4SYl3BPTcp`Xv4X0EPpDl8aN3m&&f?%a#6tOTW6}j0!Rd*>-Q3|XZAfY{8G{Q%G(Sq3S^A@jrMW(m97TEs! zM1N323&U)3d_y6Oa*zelgr&pgq1sq<1cfr+J_Iktrv;wov4fylgAeo)5nBS~F<_VV zb{Js~aL&W(zBlcR32Y0Vcd+pDY#Sgw30v9hSs)9tZP8kwWC%NX#3rwTpT}u783gHh zfO{QS=L)O_jKzxaArlUHC)8|8dhtD3tA8R@z`cs3I^j*uGY9dLe1GXtUQD)RmF`pm zmUN(mEO7p!g?_4vQb8|PG~@?mw}%-8nbnqSghjwjBan)8BJJgbZuO5GVK4BpSBrNU zH0VU(={GeMUKHrcrOW*HhzHizgG|&GR*h9r+TB;Py@BDLNi#=)-CoKWysc2lx_>;g zxwTW$?_6n!kBngpH&q8KlnwfIU?Ol#?W93vc~7tYmV0auIq7p|z(JP47)P3P*`^{D zwi=+S-ORTv^bXd}RHV!3M|mTFao|z}-~HaV{QCnZ>|uo)bvlBp8NxQsmK6c)y!tS4TZ`#GSFV!$XcR#{0}Qtc-G>?;5gQSh}kYxw(&|qYYTDqtPF0 zRa-NE^F&x830;y|x4m^!LCP9rknn#-LV;o0h*z*R)Yyb;l!^3bxWd|&WPhbvk==LF zBiv7K>$c9RLnmjh%MrTr{@;d56N${(h~jf$M!LYQ+rU0x;hx zHX@vsi?zvoBOM9~pV;U8!*d4Sw$%6?y7^^ue~>2>YI{<(Z;YoKsw%s^DO=TF8Szx2 zER|^2!dcLQb&H?#-W^o)q<=AMnO*9}8Mg{hxZ5mMLVF9sRn9i(MR$t65v#FN4Pnt# z4we9>tpU2fuBfk2l&83_*xTxj)xKH$$+7Y>tuPlKF2S|jU_%f&lUy9|%Ct{4H;nh! z>}IzGE<>%CrP}e8F^g~2iUdyrzaZp-VkHZ`%S>Sxu+K{SIl?G_SAS)-L7PgXF2Hlx zm^<#_L<7xtnTYO-m8+UH%(ZV1Re*r=BD$JjO(II0OFe}!%mPpFuQ`*rm#l1a3m9>H zEjArhLB8L}L{K|ew}-lOl2?7iOD2Bh4c%@7tCKCgpc!`R^720sRy7n6v3raDcg%g6 z*Ld~|NS#FKESN$otAExmMcT-^sIQb?Pcg-KWDJ;Y>r`u|9`~;FD@gm0PXcTh>RY%7 z2BdK&G{Oun@Lps%Ks}LEt%Zs|nXHt0m|HAy{6IG}1^tVI4Hnj@z*{p{28%>3aO&wH zECa6BO!e70&17I(8>RD>%aR=7Ch%HTGv xC7Ox$F_3CR^f@f;JT3MA=AL0}-zh4U{0EU`6OI-BChPzJ002ovPDHLkV1m{;g>C=< diff --git a/src/components/common/spoiler/Spoiler.scss b/src/components/common/spoiler/Spoiler.scss index 68cc1981c..65e680344 100644 --- a/src/components/common/spoiler/Spoiler.scss +++ b/src/components/common/spoiler/Spoiler.scss @@ -27,7 +27,7 @@ } &--concealed &__content { - visibility: hidden; + user-select: none; opacity: 0; } } diff --git a/src/components/common/spoiler/Spoiler.tsx b/src/components/common/spoiler/Spoiler.tsx index f732ac9cc..118566d13 100644 --- a/src/components/common/spoiler/Spoiler.tsx +++ b/src/components/common/spoiler/Spoiler.tsx @@ -13,7 +13,12 @@ type OwnProps = { messageId?: number; }; -const spoilersByMessageId: Map = new Map(); +const AUTO_HIDE_TIMEOUT = 5000; // 5s + +const actionsByMessageId: Map = new Map(); const buildClassName = createClassNameBuilder('Spoiler'); @@ -21,30 +26,35 @@ const Spoiler: FC = ({ children, messageId, }) => { - const [isRevealed, reveal] = useFlag(); + const [isRevealed, reveal, conceal] = useFlag(); const handleClick = useCallback((e: ReactMouseEvent) => { e.preventDefault(); e.stopPropagation(); - spoilersByMessageId.get(messageId!)?.forEach((_reveal) => _reveal()); - }, [messageId]); + actionsByMessageId.get(messageId!)?.forEach((actions) => actions.reveal()); + + setTimeout(() => { + actionsByMessageId.get(messageId!)?.forEach((actions) => actions.conceal()); + conceal(); + }, AUTO_HIDE_TIMEOUT); + }, [conceal, messageId]); useEffect(() => { if (!messageId) { return undefined; } - if (spoilersByMessageId.has(messageId)) { - spoilersByMessageId.get(messageId)!.push(reveal); + if (actionsByMessageId.has(messageId)) { + actionsByMessageId.get(messageId)!.push({ reveal, conceal }); } else { - spoilersByMessageId.set(messageId, [reveal]); + actionsByMessageId.set(messageId, [{ reveal, conceal }]); } return () => { - spoilersByMessageId.delete(messageId); + actionsByMessageId.delete(messageId); }; - }, [handleClick, isRevealed, messageId, reveal]); + }, [conceal, handleClick, isRevealed, messageId, reveal]); return (